Compile Svelte in Your Head by Tan Li Hau

swyx profile image shawn swyx wang πŸ‡ΈπŸ‡¬ Originally published at swyx.io ・2 min read

Last year, when I mobilized my network to put together the first NYC Svelte meetup in one week, I was not even an active Svelte user at the time. I was just a Rich Harris fan and friend.

So of course organizing a meetup involves finding speakers, and when you give yourself one week to find speakers, you can pretty much expect to be one of the speakers πŸ˜‚

What do I do when I don't know a thing and have to talk about it? I go look at the source code. I had had a lot of success doing this for React, so I figured I would do this for Svelte.

Having worked on a React SFC proposal, I was super curious exactly how Svelte achieved scoped styles for its components. If you style a <p> tag inside a Parent component that contains a Child, and if there is a <p> within that Child, somehow the p styling from the Parent doesn't "bleed" to the Child!! It turns out that scoped styling means scoping to the component by attaching a unique classname.

I discovered all this and more by looking at the before-and-after output of the Svelte REPL. After all, Svelte is a language - and any language has a REPL! As I explored more and more I found that I was able to completely demystify the Svelte template language by being able to predict what the compiled output was going to be.

So I figured I would write a blogpost to organize my thoughts, like I did for the React one - however the 1 week ran out in a blink and I ended up giving my talk with my slides not even half done.

I wasn't very happy with this and so never posted up my talk at the time. A month later I was visiting Singapore and got the chance to rerecord the talk, but unfortunately the audio was not great.

I never did get around to writing that blogpost, since my curiosity was satiated.

But now, I don't have to :) Li Hau, one of the Svelte maintainers, and a fellow Singaporean who is just better than me in every way, wrote it up!

You can read Part 1 of his blogpost, Compile Svelte in your Head, on his blog now.

When you Learn in Public, sometimes you don't even have to write the blogpost, you can just fail a few times and eventually someone will give up waiting for you and just write it instead 😎

Posted on by:

swyx profile

shawn swyx wang πŸ‡ΈπŸ‡¬


Infinite Builder πŸ‘·πŸ½β€β™‚οΈ I help people Learn in Public β€’ Author, the Coding Career Handbook (https://learninpublic.org)


Editor guide

That’s great!
The startup that I’m currently working at, in Singapore, is currently using Svelte as a PWA for its MVP.
The technical team, which now only has 2 of us, believe it’s the best move forward for productivity across platforms :)