Rustle

The Svelte compiler, rewritten in Rust.

Description

This projects aims to make Svelte usable without Node.js and make the compiler blazingly fast.

Work in progress

This is still a big work in progress. Only a few parts of Svelte are working now and the CLI tool still needs some work.

Getting started

Installation

To install with cargo, run cargo install rustle_cli to install the alpha version of the CLI.

Using rustle_cli

Run rustle_cli app.rustle to generate an app.js file. You can optionally specify a different output file with the -o flag.

You can also specify a directory for example rustle_cli src to parse all the files in that directory.

For debugging, you can print the generated AST with the -a or --ast flag and pretty print it with -p.

Development

A lot of features still need to be implemented before rustle is ready for use. Check the examples folder or rustle/tests to get a better look at currently is supported:

• on:click event handler
• arrow function with single assignment
• display variable (eg. {counter})
• scoped CSS
• reactive declarations (currently only simple assignment declarations work)

Feature roadmap:

• Dynamic attributes ({class} instead of class={class})
• Styling (<style></style>)
• Nested components
• HTML tags ({@html htmlString})
• Reactivity
  • Reactive assignments (on:click={handleClick})
  • Reactive declarations ($: doubled = count * 2)
  • Reactive statements
• Props
  • Declaring props
  • Default values
  • Spread props
• Logic
  • If blocks
  • Else blocks
  • Else-if blocks
  • Each blocks
  • Keyed each blocks
  • Await blocks
• Events
  • DOM events
  • Inline handlers
  • Event modifiers
  • Component events
  • Event forwarding
  • DOM event forwarding
• Bindings
  • Text inputs
  • Numeric inputs
  • Checkbox inputs
  • Group inputs
  • Textarea inputs
  • File inputs
  • Select bindings
  • Select multiple
  • Each block bindings
  • Media elements
  • Dimensions
  • bind:this={canvas}
  • Component bindings
• Lifecycle
  • onMount
  • onDestroy
  • beforeUpdate and afterUpdate
  • tick
• Stores
  • Writable stores
  • Auto-subscriptions
  • Readable stores
  • Derived stores
  • Custom stores
• Motion
  • Tweened
  • Spring
• Transitions
  • Adding parameters
  • In and out
  • Custom CSS transitions
  • Custom JS transitions
  • Transition events
  • Deferred transitions
• Animations
• Easing
• Actions
  • Use directive
  • Adding parameters
• Components
  • Slots
  • Slot fallbacks
  • Named slots
  • Slot props
  • Conditional slots
• Special elements
  • <svelte:self>
  • <svelte:component>
  • <svelte:element>
  • <svelte:window>
  • <svelte:body>
  • <svelte:head>
• Named exports
• @debug tag

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• A big thank you to lihautan on Youtube, for making the video series Build your own Svelte which helped me a lot in understanding how the Svelte compiler actually works!