Compile Svelte in Your Head by Tan Li Hau

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 ๐Ÿ˜Ž

Tagged in: #svelte #javascript #tech

Leave a reaction if you liked this post! ๐Ÿงก
Loading comments...
Webmentions
โค๏ธ 0 ๐Ÿ’ฌ 4
  • avatar of Fisk Grodan
    Fisk Grodan retweeted
  • avatar of Sumit Gupta
    Sumit Gupta retweeted
  • avatar of Tan Li Hau
    Tan Li Hau mentioned this on 2020-03-04

    no. i love ๐Ÿ‡ฒ๐Ÿ‡พ

  • avatar of Ten Zhi-Yang ๐Ÿ‡ธ๐Ÿ‡ฌ
    Ten Zhi-Yang ๐Ÿ‡ธ๐Ÿ‡ฌ mentioned this on 2020-03-04

    Time to get your citizenship @lihautan

  • avatar of shawn swyx wang๐Ÿค—
    shawn swyx wang๐Ÿค— mentioned this on 2020-03-04

    oh no I take back all the nice things I said

  • avatar of Vasa
    Vasa retweeted
  • avatar of Tan Li Hau
    Tan Li Hau mentioned this on 2020-03-04

    i'm a malaysian ๐Ÿ‡ฒ๐Ÿ‡พ not a singaporean ๐Ÿ‡ธ๐Ÿ‡ฌ ๐Ÿ™ˆ๐Ÿ™ˆ๐Ÿ™ˆ

  • avatar of โœจLearn In Public Botโœจ
    โœจLearn In Public Botโœจ retweeted

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content