Rust implementation of svelte compile (WIP)

Demo

https://mrwaip.github.io/svelte-rs-2/

Checklist

Script Tag / JavaScript

• $state rune
  • Update rune (count++, --count)
  • Assign rune (count = 12)
  • Read rune ({ name })
• $props rune
  • Update prop (count++)
  • Assign prop (name = 'world')
  • Read prop ({ name })
  • Destructure prop (let {name} = $props())
• Hoist imports
• Omit typescript

Template

• HTML Element
  • Self-closed tags (<input />)
  • Simple attribute (attr="name")
  • Interpolation attribute (attr={some expression})
  • Shorthand identifier attribute ({ name })
  • Concatenation attribute (attr="{1 + 1} = 2")
  • Class directive (class:toggle)
  • Bind directive (bind:value)
  • Use directive (use:action)
  • Event listeners (onclick={handler})
  • Style directive (style:toggle)
  • Spread attributes ({...attrs})
• Text
• Interpolation ({name})
• IfBlock ({#if expression} a {:else} b {/if})
• Script Tag
• Component
• EachBlock

Svelte optimization

• trimming whitespaces
• compress / merge sequence of interpolation and text
• text as first node optimization
• single element optimization
• only text and interpolation nodes optimization
• not wrap runes if not mutated
• Not reactive attributes optimization

WASM

• Compiler in wasm, for browser

Style

• [-] unimplemented at all

SSR

• [-] unimplemented at all