micro-svelte-compiler

A demonstration of how the [Svelte.js](https://svelte.dev fa-solid fa-up-right-from-square) compiler works under the hood.

Key Features

• Parses .svelte files and extracts code from <script> tags
• Identifies props (via export let syntax)
• Recursively parses HTML tags to create an ordered list of nodes and event listeners
• Generates JavaScript code combining props, nodes, listeners, and script content
• Outputs formatted JavaScript code

Compiler Stages

1. Extract script content and non-script tags
2. Identify props
3. Parse tags recursively
4. Generate JavaScript code
5. Format output
6. Print result

Technical Details

• Uses similar dependencies to Svelte.js (acorn, code-red, parse5)
• Generates components with lifecycle methods: create(), mount(), update(), detach()
• Outputs vanilla JavaScript components that can be instantiated in the browser

Example Use Case

Compiles Svelte components like:

<script>
  export let name;
  function handleClick(e) { alert(`Hello ${name}!`) }
</script>
<h1 on:click=handleClick>Hello {name}!</h1>

Into executable JavaScript components with DOM manipulation methods.

Target Audience

• Developers interested in understanding Svelte's compilation process
• Those wanting to see how Svelte components translate to vanilla JS
• People learning about compiler design for frontend frameworks