Build your own Svelte
summary
Builds a tiny Svelte compiler end-to-end in ~40 minutes that turns app.svelte into app.js by parsing the template to an AST with a hand‑written parser, using acorn for JavaScript parsing, periscopic for scope analysis, estree-walker for traversal and escodegen to emit JS. Outputs lifecycle objects with .create/.update/.destroy that mount elements, attach click handlers and update text nodes; demo counter runs in the browser and the generator omits update code for unused values. Code: Mini Svelte on GitHub.
AI-written summary · about
chapters (32)
- 0:00Introduction
- 1:10Speaker introduction
- 3:16From jQuery to React and Svelte
- 5:01Build your own Svelte
- 5:44What is a compiler
- 7:30Simplified Svelte output
- 9:14Compiler process visualization
- 12:23Parsing code to AST
- 13:05Syntax with Backus-Naur form
- 15:55Parser structure
- 17:41Helper functions for parsing
- 20:12Parsing script tags and elements
- 22:40Parsing attributes and expressions
- 24:25Parsing text nodes and AST
- 25:29Generating and inspecting AST
- 26:33Analyzing variable scopes
- 28:41Scope analysis with Periscopic
- 30:25Traversing AST with ESTree
- 32:29Identifying changing variables
- 33:33Tracking template variables
- 34:39Analysis and review results
- 36:05Generating optimized JavaScript
- 37:29Traversing nodes for codegen
- 38:13Handling text nodes and attributes
- 39:35Processing expressions and updates
- 40:38Finalizing generated code
- 41:19Dynamic lifecycle updates
- 42:24AST to JavaScript conversion
- 43:05Testing in browser
- 43:48Optimization demo
- 45:59Summary
- 46:20Q&A
