
The Svelte Compiler Handbook - PKop
https://lihautan.com/the-svelte-compiler-handbook/
======
lostintangent
This is so awesome! I wonder if it would be useful to have this knowledge
“overlayed” on top of the Svelte compiler source itself. That way,
contributors could clone the repo and get an annotated tour of the compiler
process, directly from their editor.

I’ve been working on a side-project, that allows recording and playing back
interactive, guided walkthroughs of a codebase. This seems like an excellent
“test case“ for that experience, which I might have to experiment with :)

[https://aka.ms/codetour](https://aka.ms/codetour).

------
ha4fsd3fas
This is very useful. I have just started contributing to svelte and it was a
bit overwhelming even though the bugs were very well isolated in the codebase.

------
dragosmocrii
I like Svelte very much. My biggest struggle is with tooling, especially the
lack of proper IDE support. I know there are several IDEs with plugins for
Svelte, but they're either obsolete or lacking essential features. That's why
I won't use it for me next project, just not worth it going against the wind.

Now, I am looking at Flutter. Seems to match my needs, and it's also actively
maintained.

Never underestimate the power of proper tooling and abundance of
documentation, better be productive rather than cool.

~~~
hinkley
I felt like there was a sort of sea change when JetBrains started producing
multiple IDEs. IDEA always struggled to handle supporting everything at once
and third party plugins are always incomplete. They don’t support all of the
functionality and you have to keep that active in your mind while developing,
which saps resources for solving hard problems.

I just wish they could support more languages and tool chains, and I wish an
IDEA subscription entitled you to all other versions of the editor. I want to
buy one but use Webstorm because it’s a little less resource intensive than
IDEA. And I want them to make like five more IDEs, which I feel they could
fund through IDEA-specific revenue.

~~~
Stratoscope
> _I wish an IDEA subscription entitled you to all other versions of the
> editor._

They do offer that; it's called the All Tools subscription. It costs more than
the IntelliJ subscription, but you get all the IDEs, ReSharper, etc.

------
alserio
I was missing a resource like this. Also, I'm looking forward to the next
"Compiling Svelte in your head" article.

------
xellisx
I'm surprised Apprun nor Solid have been mentioned yet.

Are there any TypeScript reactive frameworks? I know you can use TS with the
others, but finding tutorials can be a pain since it all these are JS first
frameworks.

~~~
Trufa
I'm actually working on one. I don't know what will come out of it, but it's
an interesting endeavor. As soon as it's shareable I will share it on Github.

I'm basically trying to do a superset of typescript where you create elements
so:

    
    
      const root = c({
        el: 'div',
        children: [
          `hello, ${store.user.name}`
        ],
        attr: {
          class: 'bold smart',
          id: 'abc',
          bla: true,
        },
        evts: {
          click: () => {
            console.log("Clicked")
          }
        }
      });
    

And store store.user.name is "magically" reactive.

Was that what you meant?

~~~
bufferoverflow
That is awfully verbose.

~~~
wolfadex
What's wrong with being verbose?

~~~
bufferoverflow
You need to write more, you need to read more, and whoever maintains your code
will need to read more. More chances for typos. That means more time wasted
for everyone.

Why do you think we have _async /await_ now instead of manually typing out all
the _promise_ syntaxic mess every time?

~~~
tekknik
because handling a promise using .then/.catch creates a new block? verbosity
isn’t an issue as much as being too terse, especially with macros

------
combatentropy
How did Rich Harris, a "graphics editor," write Svelte? So many designers
hardly know JavaScript at all. This one wrote one of the most advanced
JavaScript frameworks I've ever seen. It's not just JavaScript. He wrote a
compiler that takes a custom, declarative syntax and converts it to imperative
JavaScript to surgically update the DOM.

~~~
Barrin92
He probably was interested in it. Not everyone has a traditional background or
even day job in the area they're passionate about. One of our neighbours
growing up in a small village was a nice old retired man who barely had any
formal education, years later I found out he was publishing original maths
research online. There's also a guy from Finland who IIRC was a bus driver who
is putting great C++ low level graphics and retro programming content on
Youtube.

Lots of under-recognised talent is eveywhere.

~~~
smnplk
The bus driver is bisqwit
[https://www.youtube.com/watch?v=3bIcbnDXSRg](https://www.youtube.com/watch?v=3bIcbnDXSRg)

------
xupybd
Having a hard time choosing between Svelte and Elm. For a lone in house dev,
any recommendations?

~~~
stanislavb
I'd say Svelte is much closer to "regular" programming. You will have to bend
your thinking a bit with Elm.

Svelte seems great, but it seems to be developed by one person primarily.
Also, that person lives in NY and the project looks paused at the moment.

~~~
untog
Looking at the Github commits I’d say neither statement is true? Seems to be
plenty of contributors that have contributed recently:

[https://github.com/sveltejs/svelte/commits/master](https://github.com/sveltejs/svelte/commits/master)

------
amelius
I skimmed through it, but couldn't find a description of the distinguishing
feature of svelte, i.e. how the incremental updates are performed.

~~~
PudgePacket
It's actually really easy to read the svelte compiler output! You'll see
exactly how it works :P

~~~
jiofih
I assume people downvoting this comment are not familiar with Svelte?

You can in fact see how it works by looking at the output. Go to the REPL at
[https://svelte.dev/repl/hello-world](https://svelte.dev/repl/hello-world) and
select “JS output”.

------
nojvek
I really like that Svelte does compiler time dependency analysis such that
there is less work to do runtime.

Can we bring this ideas to react and Vdom based frameworks? I imagine
Babel/typescript can analyze jsx to find which attribute are bound to a
variable and which are just static. The static ones don’t need to be diffed,
only the dynamic ones.

~~~
spankalee
You don't need a compiler to do that. lit-html does this at runtime, and the
benefit from not diffing static content is large.

~~~
nojvek
at compiler time, you can type check and statically validate. Doing things at
runtime with lit-html where things are in a string, quickly falls apart in a
large project. One of my biggest griefs with Angular was that you could miss
an ending tag in the template and it would work fine until it blows up in
production when a customer accesses that specific scenario.

I stay away from magic templates compiled at runtime. I've been bitten way too
many times. Plus it's not good for load performance when you have to ship a
string compiler with your code.

~~~
spankalee
How do you think lit-html templates would fall apart? There's nothing magic
about them. They has as defined semantics as HTML or JavaScript - both of
which are languages written as strings.

We use lit-html in thousands of components at Google with very strict type-
checking and linting. You simply aren't allowed to miss an end tag, or bind to
a non-existent attribute or property. The performance and code size are
excellent, beating every major framework including those using compilers. The
"compiler" we use is simply the HTML <template> element and a tree-walk. It's
very, very fast and very, very small.

------
maps7
Thank you! I was just thinking yesterday that I wanted to understand Svelte
more. I will dive into this today.

~~~
lihautan
let me know if there's anything unclear of or things you would like to learn
more about!

------
vitoc
Very clear and crisp overview of the compilation process!

------
vjeux
Nice to see excalidraw.com used for the illustrations!

~~~
xrd
Your article on it is great!

[https://blog.vjeux.com/2020/uncategorized/reflections-on-
exc...](https://blog.vjeux.com/2020/uncategorized/reflections-on-
excalidraw.html)

