Compile Svelte in Your Head by Tan Li Hau

[swyxio]

---

source: devto
devToUrl: "https://dev.to/swyx/compile-svelte-in-your-head-by-tan-li-hau-563e"
devToReactions: 24
devToReadingTime: 2
devToPublishedAt: "2020-03-04T01:56:25.804Z"
devToViewsCount: 470
title: Compile Svelte in Your Head by Tan Li Hau
published: true
description: Linking to a blogpost I was too lazy to do
category: essay
tags: Svelte, JavaScript, Tech
slug: compile-svelte-lihau
date: 2020-03-02

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 😎