如何用 rsx-rosetta 把现有 HTML 模板转换成 Dioxus RSX 代码【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxusDioxus 的界面模板语言是 RSX而不是 HTML——rsx-rosetta 的 README 开宗明义its NOT HTML。如果你手上有一批现成的 HTML 模板要迁移到 Dioxusrsx-rosetta 就是仓库里专门用来做这次翻译的组件它把 HTML 解析成 AST再转成可直接使用的格式化 RSX 代码。实际操作有两条路径日常转换用dxCLI 的translate子命令一条命令完成需要在自己的工具链里程序化集成时直接调用dioxus-rsx-rosetta库。本文给出两条路径的完整用法、转换行为对照和已知边界。安装 Dioxus CLItranslate是dxCLI 的子命令对应 CLI 架构文档 中 Commands 列表里的Translate - Convert HTML/JSX to RSX。如果本机还没有 CLI项目 README 给出两种安装方式curl -fsSL https://dioxuslabs.com/install.sh | bashREADME 同时注明如果这个 CLI 版本过旧也可以直接从 git 源安装cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked用 dx translate 转换 HTML 文件命令实现 定义了四个参数参数作用-f, --file path从文件读取 HTML-r, --raw html直接传入一段 HTML 字符串-o, --output path写入输出文件不指定时打印到 stdout-c, --component把结果包装成组件函数见后文输入有三条规则都来自同一实现--file与--raw只能二选一同时给会报错Only one of --file or --raw should be specified.两者都不给时从 stdin 读取如果 stdin 是交互式终端报No input file, source, or stdin to translate from.所以管道输入dx translate template.html是可用的输入必须是能被html_parser解析的合法 HTML解析失败会直接报错退出。最短主路径——把模板文件转换并写入.rs文件dx translate --file template.html --output template.rs或者不落盘、直接看 stdout适合先抽查结果dx translate --file template.html短片段可以直接走--rawdx translate --raw div classasdhello world!/div转换结果长什么样下面的输入与期望输出取自仓库测试 tests/simple.rs文档示例用于对照转换行为。输入div div classasdhello world!/div div idasdhello world!/div div forasdhello world!/div div asyncasdhello world!/div /div转换输出div { div { class: asd, hello world! } div { id: asd, hello world! } div { r#for: asd, hello world! } div { r#async: asd, hello world! } }从这个示例可以确认两条规则class、id等常规属性原样保留for、async这类 Rust 关键字属性会自动加r#前缀变成 raw identifier。其余测试补充了更多行为HTML 实体被解码RSX 不支持 HTML 实体实体在翻译时解码为普通文本。tests/escape.rs 的示例输入divlt;divgt;#x231b;#x231b;#x231b;#x231b;/div期望输出div { div⌛⌛⌛⌛ }。SVG 属性走映射表例如viewBox→view_boxxlink:命名空间前缀会被剥掉xlink:href输出为href见 tests/svgs.rs。不认识的属性变成字符串键tests/raw.rs 的示例unrecognizedattributeasd→div { unrecognizedattribute: asd, hello world! }。带连字符的未知标签按 Web Component 处理my-component/my-component→div { my-component {} }tests/web-component.rs。HTML 注释被丢弃转换实现 中注释节点直接返回None因为 RSX 不支持注释。属性按名称排序输出html_parser内部用 HashMap 存属性顺序不确定转换实现里显式按属性名排序——这也是示例输出里属性呈字母序的原因。核对时可以把生成结果与这几条规则逐项对照仓库packages/rsx-rosetta/tests/目录下的这些测试本身就是一份行为基准。用 --component 生成组件与 icons 模块-c, --component会改变输出的组织方式translate.rs 中的write_callbody_with_icon_section整个 RSX 体被包进fn component() - Element { rsx! { ... } }模板里出现的每个svg从原位置抽出替换成icons::icon_0、icons::icon_1这样的组件调用抽出的 svg 按出现顺序生成对应的pub(crate) fn icon_0() - Element { rsx! { ... } }函数集中放在文件末尾的mod icons模块里。用法dx translate --component --file template.html --output template.rs这样生成的文件更接近可以直接放进 Dioxus 应用的形态一个组件函数加一个图标模块svg 不再内联在主模板里。在 Rust 代码中直接调用转换库如果转换要集成进自己的构建脚本或工具链可以直接依赖dioxus-rsx-rosetta库。仓库自带的最小示例 examples/html.rs 展示了完整管线use html_parser::Dom; fn main() { let html r# div div classasdhello world!/div ai-is-awesomehello world!/ai-is-awesome /div # .trim(); let dom Dom::parse(html).unwrap(); let body dioxus_rsx_rosetta::rsx_from_html(dom); let out dioxus_autofmt::write_block_out(body).unwrap(); println!({out}); }三步html_parser::Dom::parse解析 HTMLrsx_from_html得到 RSX 的CallBodydioxus_autofmt::write_block_out输出格式化文本。需要复刻--component的 svg 抽取行为时可以调用 lib.rs 中同样导出的collect_svgsCLI 的组件模式内部用的就是它。边界与限制目前只有 HTML 是已实现的输入。README 列出的输入源中Syn、Akama、Jinja 均标注为todo不能当作已支持的模板语言使用。模板指令不会被翻译。转换器对不认识的属性只做字符串键保留见上文的unrecognizedattribute示例所以原 HTML 里的模板语言指令、事件绑定不会被翻译成 Dioxus 的写法和事件处理需要在拿到 RSX 后自行改写。xlink 属性只是剥掉前缀。源码注释 明确写了 xlink attributes are deprecated and technically we cant handle them含复杂 xlink 用法的 svg 转换后要人工核对。生成结果本身是格式化好的 RSX 文本翻译是纯语法层面的。若要进一步校验产出的 RSXdxCLI 还提供check子命令架构文档 将其描述为 Lint/validate RSX。【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考