Rustle

用 Rust 重写的 Svelte 编译器。

描述

本项目旨在使 Svelte 能够在没有 Node.js 的情况下使用，并使编译器变得 非常快。

进行中

这仍然是一个巨大的项目，目前只有 Svelte 的一小部分工作，CLI 工具还需要一些工作。

入门

安装

要使用 cargo 安装，运行 cargo install rustle_cli" 以安装 CLI 的 alpha 版本。

使用 rustle_cli

运行 rustle_cli app.rustle 以生成一个 app.js 文件。您可以使用 -o 标志指定不同的输出文件。

您还可以指定一个目录，例如 rustle_cli src 以解析该目录中的所有文件。

对于调试，您可以使用 -a 或 --ast 标志打印生成的 AST，并使用 -p 标志进行美化打印。

开发

在 rustle 准备使用之前，还有很多功能需要实现。请查看示例文件夹或 rustle/tests 以了解目前支持的功能

• :click 事件处理器
• 单赋值箭头函数
• 显示变量（例如 {counter}）
• 作用域 CSS
• 响应式声明（目前只有简单的赋值声明工作）

功能路线图

• 动态属性 ({class} 而不是 class={class})
• 样式（<style></style>）
• 嵌套组件
• HTML 标签 ({@html htmlString})
• 响应性
  • 响应式赋值（on:click={handleClick}）
  • 响应式声明（$: doubled = count * 2）
  • 响应式语句
• Props
  • 声明 props
  • 默认值
  • 展开 props
• 逻辑
  • if 块
  • else 块
  • else-if 块
  • each 块
  • 带键的 each 块
  • await 块
• 事件
  • DOM 事件
  • 内联处理器
  • 事件修饰符
  • 组件事件
  • 事件转发
  • DOM 事件转发
• 绑定
  • 文本输入
  • 数字输入
  • 复选框输入
  • 组输入
  • 多行文本输入
  • 文件输入
  • 选择绑定
  • 多选
  • each 块绑定
  • 媒体元素
  • 尺寸
  • bind:this={canvas}
  • 组件绑定
• 生命周期
  • onMount
  • onDestroy
  • beforeUpdate 和 afterUpdate
  • tick
• 存储
  • 可写存储
  • 自动订阅
  • 可读存储
  • 派生存储
  • 自定义存储
• 运动
  • 缓动
  • 弹簧
• 过渡
  • 添加参数
  • 进入和退出
  • 自定义 CSS 过渡
  • 自定义 JS 过渡
  • 过渡事件
  • 延迟过渡
• 动画
• 缓动
• 动作
  • 使用指令
  • 添加参数
• 组件
  • 插槽
  • 插槽回退
  • 命名插槽
  • 插槽 props
  • 条件插槽
• 特殊元素
  • <svelte:self>
  • <svelte:component>
  • <svelte:element>
  • <svelte:window>
  • <svelte:body>
  • <svelte:head>
• 命名导出
• @debug 标签

许可协议

本项目采用 MIT 许可协议许可 - 详细信息请参阅 LICENSE.md 文件

致谢

• 非常感谢 YouTube 上的 lihautan，他为制作视频系列 Build your own Svelte 做出了很多贡献，这对我理解 Svelte 编译器的工作原理帮助很大！