rustle_lib

The Svelte compiler, rewritten in Rust.


Keywords
compiler, cli, rust, svelte
License
MIT

Documentation

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!