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!