Rustle

用Rust重写的Svelte编译器。

描述

此项目旨在在不使用Node.js的情况下使Svelte可使用，并使编译器非常快。

工作正在进行中

这仍然是一个大的工作正在进行中。目前只有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 以更好地了解当前支持的功能

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

功能路线图

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

许可协议

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

致谢

• 非常感谢 YouTube 上的 lihautan，他制作的视频系列 Build your own Svelte 对我理解 Svelte 编译器的工作原理有很大帮助！