设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载Lona Compilernpm 包名lonac是 Lona 设计系统工具链中的核心编译组件它把以 JSON 定义的 Lona 工作区colors、text styles、shadows、自定义类型、组件、逻辑文件等转换为可实际运行的跨平台 UI 代码。本指南以 compiler/core/README.md 为骨架结合仓库源码与配置完整讲解lonac的安装、命令、目标框架与参数体系并深入底层说明工作区解析、代码生成与静态文件复制机制帮助你直接上手生成 Swift / JavaScript 等多端代码。Lona Compiler 是什么Lona Compiler 是一个命令行工具用于“从 JSON 定义生成跨平台 UI 代码”。它发布于 npm包名为lonac见 compiler/core/package.json 中的name: lonac、bin: ./build/bin.js。其定位决定了使用方式非常直接准备好一个 Lona 工作区一个包含lona.json清单文件的目录然后调用lonac的各个子命令把设计系统资产编译成指定平台/框架的源码。从源码看整个编译器的入口在 compiler/core/src/main.re它先用CommandLine.Arguments.scan解析进程参数得到命令与选项compiler/core/src/utils/commandLine.re再通过一个巨大的switch分发到workspace、component、colors、types、config等具体实现compiler/core/src/main.re#L740-L907。换句话说你执行的每一条lonac命令最终都落在main.re中某个对应的生成逻辑上。安装 lonac按 README 给出的方式首选全局安装npm install --global lonac如果只想在单个项目中使用去掉--global即可本地安装npm install lonac安装后lonac可执行文件由 compiler/core/src/bin.js 提供它会require(../build/index.js)加载编译打包后的编译器主体。仓库当前版本为0.9.1见 compiler/core/package.json 的version字段你也可以随时用lonac version命令确认本机安装的版本该命令在 compiler/core/src/main.re#L907 直接输出packageVersion。命令、目标与框架支持的代码生成目标target每条生成命令都需要指定一个target取值由 compiler/core/src/utils/commandLine.re#L24-L32 解析target含义生成文件扩展名jsJavaScript 代码.mjsswiftSwift 代码.swiftxmlXML 描述Android 相关源码中标注为 TODO.xmlreasonReasonML 代码.re扩展名映射位于 compiler/core/src/main.re#L71-L76。需要说明的是README 只重点介绍了swift、js、xml三个目标而从命令行解析源码看reason目标也是可传入的合法取值但其在多数生成路径上尚未完整实现例如renderColors对 Reason 直接返回 Reason not supported见 compiler/core/src/main.re#L91因此日常使用请以js、swift、xml为准。框架选项--framework目标确定语言--framework决定面向的具体 UI 框架。按 README 的分类并结合 compiler/core/src/utils/commandLine.re#L94-L101 中可选的合法取值完整组合如下js 目标可选的框架框架值说明reactnativeReact Native默认值reactdomReact DOMWebreactsketchappReact SketchApp生成 Sketch 文件swift 目标可选的框架框架值说明uikitiOS默认值appkitmacOS框架的默认值逻辑在 compiler/core/src/utils/commandLine.re#L406-L447Swift 侧未指定时默认UIKitJavaScript 侧未指定时默认ReactNative。完整的子命令列表README 只演示了workspace、colors、component三个命令但命令行解析器实际支持更多子命令。lonac --help的用法消息compiler/core/src/utils/commandLine.re#L165-L181列出了workspace、component、colors、textStyles、shadows、logic、types、config、version结合Command.t类型定义compiler/core/src/utils/commandLine.re#L7-L21实际可用的命令还包括flatten与documentation命令作用必备参数workspace生成整个工作区的全部代码--target、--workspace、--outputcomponent由单个.component文件生成组件代码输出到 stdout--target、--inputcolors生成颜色代码输出到 stdout--target--input可选textStyles生成文本样式代码输出到 stdout--target--input可选shadows生成阴影代码输出到 stdout--target--input可选types将类型定义转换为目标语言类型代码--target、--inputconfig输出工作区解析后的配置 JSON--workspaceflatten将逻辑文件扁平化为 tokenflat tokensJSON 到 stdout--workspacedocumentation将.md文档中的逻辑转换为带 token 的 MDX 文档到 stdout--workspaceversion输出编译器版本号无全局可用的选项命令行解析器注册的全部选项compiler/core/src/utils/commandLine.re#L42-L163如下其中不少是 README 未提及但对实际生成结果影响重大的开关选项取值说明--targetjs/swift/xml/reason输出语言--workspace路径工作区目录路径--output路径输出目录路径--input路径单文件命令的输入路径--filterComponents字符串正则只生成名字匹配该正则的组件--noGenerateBannerMessage布尔开关不在每个生成文件顶部添加“Generated by Lona Compiler 版本号”注释--legacyTokens布尔开关额外生成旧版 token 文件如colors.json→colors.js--frameworkuikit/appkit/reactdom/reactnative/reactsketchappUI 框架--swiftVersion4/5Swift 版本默认5--debugConstraints布尔开关为约束生成 ID便于调试--generateCollectionView布尔开关为 UIKit 生成实验性的LonaCollectionView.swift--typePrefix字符串生成类型的名称前缀--typeDiscriminant字符串编码/解码枚举时用于区分 case 的字段名默认type--typeDataWrapper字符串枚举内容包裹字段名避免与 discriminant 冲突默认data--styleFrameworknone/styledcomponentsJavaScript 样式方案默认none--styledComponentsVersion3/lateststyled-components 版本默认latest--minimumIeSupportnone/11最低支持的 IE 版本默认none另外解析器支持--keyvalue与--key value两种写法形式会在扫描阶段被拆分见 compiler/core/src/utils/commandLine.re#L188-L201同时也兼容部分旧式位置参数写法如lonac workspace js workspace output见同文件 L267-L288。实战一生成整个工作区workspace 命令workspace是用途最广的命令。README 给出的示例lonac workspace --target js --workspace [path-to-workspace-directory] --output [output-directory]这条命令会把 colors、text styles、shadows、自定义类型以及所有组件一次性生成到output-directory输出目录结构与输入工作区目录结构保持一致镜像布局由 compiler/core/src/main.re#L643-L660 中的相对路径计算保证。如果去掉--target js换成--target swift即可得到 iOS/macOS 的 Swift 代码。工作区是如何被发现的编译器并不是随便扫描目录而是寻找最近的lona.json清单文件compiler/core/src/core/config.re#L35-L46 的Workspace.find从给定路径逐级向上查找lona.json。工作区清单内容为空对象{}即可参见 examples/FlatTokens/lona.json实际文件类型靠命名与后缀识别colors.json→ 颜色Config.Workspace.colorsFiletextStyles.json→ 文本样式shadows.json→ 阴影types.json→ 自定义类型*.component→ 组件compiler/core/src/core/config.re#L186-L190*.logic→ 逻辑文件*.md→ 文档/逻辑文件*.svg→ 矢量图形资源以上文件解析均见 compiler/core/src/core/config.re 的Workspace模块lona.json中还支持ignore字段用于跳过特定路径见Config.Find.files的调用。workspace 命令在底层做了哪些事梳理 compiler/core/src/main.re#L558-L738 的convertWorkspace其执行流程为Config.load按目标平台加载整个工作区配置若开启--legacyTokens先输出旧版 token 文件Colors、TextStyles、Shadows用LogicCompile.makeResolvedProgramNode解析全部逻辑文件与逻辑库Swift 目标下渲染types.json中的自定义类型Swift / JavaScript 目标下逐个转换*.logic文件非空文件才转换copyStaticFiles复制目标平台所需的静态支撑文件逐个转换.component文件并打印输入路径 输出路径的日志最后复制工作区内的所有*.png图片资源到输出目录。其中静态文件复制值得一提Swift 目标会复制TextStyle、CGSizeResizing、LonaViewModel并根据框架追加LonaControlView、ShadowUIKit或LNATextField、LNAImageView、NSImageResizingAppKitReact DOM 目标则复制createActivatableComponent、createFocusWrapper、focusUtils到utils/子目录compiler/core/src/main.re#L244-L303这些静态模板存放在 compiler/core/src/static/swift 与 compiler/core/src/static/javaScript 下。这也是为什么“生成的代码可以直接跑”——编译器不止输出组件本体还顺带补齐了运行所需的辅助文件。实战二生成颜色代码colors 命令README 示例lonac colors --target js --input [path-to-colors.json]该命令把颜色代码输出到stdout方便直接重定向到文件或与其他命令管道组合。它的实现compiler/core/src/main.re#L776-L813会先以输入文件所在目录为起点搜索最近的工作区加载 colors 后交给renderColors渲染Swift 走Swift.Color.renderJavaScript 走JavaScript.Color.renderXML 走Xml.Color.rendercompiler/core/src/main.re#L86-L92。两种输入方式都支持--input [path]指定文件若省略--input编译器会通过get-stdin从 stdin 读取 JSON源码中对应Command.Colors(target, Stdin)分支见 compiler/core/src/utils/commandLine.re#L309-L315 与 compiler/core/src/main.re#L792-L806。例如cat colors.json | lonac colors --target swift同样的模式完全适用于textStyles与shadows两个命令——它们与colors共享“文件输入或 stdin 输入、结果写 stdout”的形态分别见 compiler/core/src/main.re#L862-L899 与 compiler/core/src/main.re#L814-L851对应命令为lonac textStyles --target js --input [path-to-textStyles.json] lonac shadows --target swift --input [path-to-shadows.json]实战三生成单个组件component 命令README 示例注意原文此处参数笔误--input应为.component文件路径而非 colors.jsonlonac component --target js --input [path-to-component-file]该命令将单个.component文件编译为组件代码并输出到 stdout。底层实现compiler/core/src/main.re#L769-L775 →convertComponentcompiler/core/src/main.re#L200-L242会解析 JSON 组件定义然后JavaScript 目标调用JavaScriptComponent.generate自动计算指向 colors、shadows、textStyles 文件及工作区根目录的相对导入路径并解析组件间嵌套引用getComponentRelativePath与资源引用getAssetRelativePathSwift 目标调用Swift.Component.generate生成 Swift 组件源码其他目标返回 Unrecognized target。组件与逻辑的结合组件文件中的可交互逻辑如 examples/test/logic/If.component、examples/test/logic/VectorLogic.component 等会经由LogicJavaScript.convert/LogicSwift.convert转换为目标语言的表达式代码见 compiler/core/src/main.re#L147-L168因此lonac component生成的组件不只包含静态布局还包含可运行的交互逻辑。生成文件细节与实用开关版本横幅注释默认情况下每个生成文件顶部会附带一行注释// Generated by Lona Compiler 0.9.1该逻辑位于main.re的annotatecompiler/core/src/main.re#L33-L42如果文件已包含该注释则不会重复添加。不需要横幅时传--noGenerateBannerMessage。保留手写区域的标记注释workspace与types命令在覆盖生成文件时会保留文件中LONA: KEEP ABOVE与LONA: KEEP BELOW注释之外的手写代码findContentsAbove/findContentsBelow/updateContentsPreservingCommentMarkers见 compiler/core/src/main.re#L305-L359。这意味着你可以安全地格式化生成代码、反复重新生成而不会被覆盖掉手动维护的部分。旧版 token 文件加上--legacyTokens后workspace 命令会额外生成Colors.js或.swift、TextStyles.*、Shadows.*这类旧版 token 文件compiler/core/src/main.re#L523-L556。package.json中大量snapshot*脚本都带上了--legacyTokens说明这是生成 React DOM 旧版集成时常用的兼容选项。按需过滤组件--filterComponents [pattern]会将该字符串当作正则只转换名字匹配的组件文件compiler/core/src/main.re#L645-L649适合在大型工作区中增量生成单个或一组组件。其他命令速览types把类型定义文件转换为目标语言代码可指定--output写文件并保留LONA: KEEP ABOVE/BELOW区域否则输出到 stdoutcompiler/core/src/main.re#L852-L861。config加载工作区后把解析结果序列化为 JSON 输出compiler/core/src/main.re#L900-L906适合排查工作区解析问题。flatten把*.logic文件求值并扁平化为 tokens输出flatTokensSchemaVersion: 0.0.1结构的 JSONcompiler/core/src/main.re#L466-L499。examples/generated/FlatTokens/output.json就是该命令的产物示例对应package.json中的snapshotFlatTokens脚本。documentation把.md文档中的逻辑代码块求值并转换为带 token 的 MDX 文档输出到 stdoutcompiler/core/src/main.re#L363-L464。version打印版本号。从源码构建与本地运行README 的 Contributing 部分说明了从源码构建的完整路径。本项目用ReasonMLOCaml 方言编写借助BuckleScript编译为 JavaScript。安装 ReasonML按 ReasonML 官方安装文档配置工具链编辑器插件见下一步。安装依赖在 compiler/core 目录执行yarn没有 yarn 时先用 npm 安装npm install --global yarn。依赖清单可查看 compiler/core/package.json核心包括bs-platform、bs-node、bs-json、glennsl/bs-jest测试、svgson-next、svgpath、svg-transform-parserSVG 解析以及lona/serializationLona 文件格式序列化。安装 ReasonML 编辑器插件README 推荐 VSCode reason-vscode插件社区有多种插件可选。编译并监听yarn start该脚本等价于bsb -make-world -w见 compiler/core/package.json 的scripts即全量编译并进入 watch 模式。本地运行命令源码编译完成后README 指出只需把上文所有lonac换成node src/main.bs.js例如本地跑一遍 React DOM 生成node src/main.bs.js workspace --target js --workspace ../../examples/test --output ../../examples/generated/test/react-dom --frameworkreactdom --styleFrameworkstyledcomponents --legacyTokens这正是 compiler/core/package.json 中snapshotJsDom脚本的命令其余snapshotJsNativeReact Native、snapshotSketchReact SketchApp、snapshotSwiftUIKit CollectionView、snapshotAppkitAppKit、snapshotJsTokens/snapshotSwiftTokenstoken 生成等脚本可视为官方维护的一组“基准命令”覆盖了所有目标与框架组合是学习各命令标准用法的最佳参考。生成结果可对照仓库中的 examples/generated/test/swift、examples/generated/test/react-dom、examples/generated/test/react-native 等目录检查。运行测试yarn test脚本为jest测试用例位于 compiler/core/src/tests/commands_test.re对命令解析与编译行为做了回归保障。常见使用链路与适用前提完整链路设计系统资产colors / textStyles / shadows / types / components / logic→lonac workspace --target js|swift ...→ 目标平台可编译源码--framework决定 React Native / React DOM / React SketchApp 或 UIKit / AppKit 的细分方向。单文件链路lonac colors|textStyles|shadows|component|types --target ... --input [file]结果落 stdout便于脚本化集成。注意xml与reason目标目前是半成品源码中对多个生成路径返回未实现提示生产使用请优先选择js与swift--generateCollectionView生成的是实验性UICollectionView子类见 compiler/core/src/swift/swiftCollectionView.re是否启用需自行评估。总而言之lonac的价值在于把“设计系统”与“多端代码”之间的转换固化成了一条条确定性的 CLI 命令只要工作区结构规范一条workspace命令就能同时产出 iOS、macOS 与 Web 三端代码而colors、component等单文件命令则让增量生成与脚本集成变得轻而易举。赞分享设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载相关推荐Lona 设计系统工作流用 .component 文件驱动跨平台 UI 代码生成Lona Studio 与 Lona Compiler 实战指南Lona 设计系统工作流用 .component 文件驱动跨平台 UI 代码生成Lona Studio 与 Lona Compiler 实战指南 导读 L设计系统前端开发工具UI组件10个SLANeXt_wired_onnx实战技巧提升表格识别准确率10个SLANeXt_wired_onnx实战技巧提升表格识别准确率 想要在文档数字化和数据分析中高效处理表格数据吗SLANeXt_wired_onnx作为Lona Studio 使用指南从源码构建到 Workspace 配置与跨平台代码生成Lona Studio 使用指南从源码构建到 Workspace 配置与跨平台代码生成 Lona Studio 是 Lona 设计系统工具链中的桌面图形化编辑设计系统前端开发工具UI组件上一篇PairDrop设备发现终极指南本地网络广播与智能房间划分的完美协同下一篇勒索软件逆向从加密例程分析到泄露站点情报——完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Lona Compiler 使用指南：用 lonac 命令行工具从设计系统 JSON 生成跨平台 UI 代码
设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载Lona Compilernpm 包名lonac是 Lona 设计系统工具链中的核心编译组件它把以 JSON 定义的 Lona 工作区colors、text styles、shadows、自定义类型、组件、逻辑文件等转换为可实际运行的跨平台 UI 代码。本指南以 compiler/core/README.md 为骨架结合仓库源码与配置完整讲解lonac的安装、命令、目标框架与参数体系并深入底层说明工作区解析、代码生成与静态文件复制机制帮助你直接上手生成 Swift / JavaScript 等多端代码。Lona Compiler 是什么Lona Compiler 是一个命令行工具用于“从 JSON 定义生成跨平台 UI 代码”。它发布于 npm包名为lonac见 compiler/core/package.json 中的name: lonac、bin: ./build/bin.js。其定位决定了使用方式非常直接准备好一个 Lona 工作区一个包含lona.json清单文件的目录然后调用lonac的各个子命令把设计系统资产编译成指定平台/框架的源码。从源码看整个编译器的入口在 compiler/core/src/main.re它先用CommandLine.Arguments.scan解析进程参数得到命令与选项compiler/core/src/utils/commandLine.re再通过一个巨大的switch分发到workspace、component、colors、types、config等具体实现compiler/core/src/main.re#L740-L907。换句话说你执行的每一条lonac命令最终都落在main.re中某个对应的生成逻辑上。安装 lonac按 README 给出的方式首选全局安装npm install --global lonac如果只想在单个项目中使用去掉--global即可本地安装npm install lonac安装后lonac可执行文件由 compiler/core/src/bin.js 提供它会require(../build/index.js)加载编译打包后的编译器主体。仓库当前版本为0.9.1见 compiler/core/package.json 的version字段你也可以随时用lonac version命令确认本机安装的版本该命令在 compiler/core/src/main.re#L907 直接输出packageVersion。命令、目标与框架支持的代码生成目标target每条生成命令都需要指定一个target取值由 compiler/core/src/utils/commandLine.re#L24-L32 解析target含义生成文件扩展名jsJavaScript 代码.mjsswiftSwift 代码.swiftxmlXML 描述Android 相关源码中标注为 TODO.xmlreasonReasonML 代码.re扩展名映射位于 compiler/core/src/main.re#L71-L76。需要说明的是README 只重点介绍了swift、js、xml三个目标而从命令行解析源码看reason目标也是可传入的合法取值但其在多数生成路径上尚未完整实现例如renderColors对 Reason 直接返回 Reason not supported见 compiler/core/src/main.re#L91因此日常使用请以js、swift、xml为准。框架选项--framework目标确定语言--framework决定面向的具体 UI 框架。按 README 的分类并结合 compiler/core/src/utils/commandLine.re#L94-L101 中可选的合法取值完整组合如下js 目标可选的框架框架值说明reactnativeReact Native默认值reactdomReact DOMWebreactsketchappReact SketchApp生成 Sketch 文件swift 目标可选的框架框架值说明uikitiOS默认值appkitmacOS框架的默认值逻辑在 compiler/core/src/utils/commandLine.re#L406-L447Swift 侧未指定时默认UIKitJavaScript 侧未指定时默认ReactNative。完整的子命令列表README 只演示了workspace、colors、component三个命令但命令行解析器实际支持更多子命令。lonac --help的用法消息compiler/core/src/utils/commandLine.re#L165-L181列出了workspace、component、colors、textStyles、shadows、logic、types、config、version结合Command.t类型定义compiler/core/src/utils/commandLine.re#L7-L21实际可用的命令还包括flatten与documentation命令作用必备参数workspace生成整个工作区的全部代码--target、--workspace、--outputcomponent由单个.component文件生成组件代码输出到 stdout--target、--inputcolors生成颜色代码输出到 stdout--target--input可选textStyles生成文本样式代码输出到 stdout--target--input可选shadows生成阴影代码输出到 stdout--target--input可选types将类型定义转换为目标语言类型代码--target、--inputconfig输出工作区解析后的配置 JSON--workspaceflatten将逻辑文件扁平化为 tokenflat tokensJSON 到 stdout--workspacedocumentation将.md文档中的逻辑转换为带 token 的 MDX 文档到 stdout--workspaceversion输出编译器版本号无全局可用的选项命令行解析器注册的全部选项compiler/core/src/utils/commandLine.re#L42-L163如下其中不少是 README 未提及但对实际生成结果影响重大的开关选项取值说明--targetjs/swift/xml/reason输出语言--workspace路径工作区目录路径--output路径输出目录路径--input路径单文件命令的输入路径--filterComponents字符串正则只生成名字匹配该正则的组件--noGenerateBannerMessage布尔开关不在每个生成文件顶部添加“Generated by Lona Compiler 版本号”注释--legacyTokens布尔开关额外生成旧版 token 文件如colors.json→colors.js--frameworkuikit/appkit/reactdom/reactnative/reactsketchappUI 框架--swiftVersion4/5Swift 版本默认5--debugConstraints布尔开关为约束生成 ID便于调试--generateCollectionView布尔开关为 UIKit 生成实验性的LonaCollectionView.swift--typePrefix字符串生成类型的名称前缀--typeDiscriminant字符串编码/解码枚举时用于区分 case 的字段名默认type--typeDataWrapper字符串枚举内容包裹字段名避免与 discriminant 冲突默认data--styleFrameworknone/styledcomponentsJavaScript 样式方案默认none--styledComponentsVersion3/lateststyled-components 版本默认latest--minimumIeSupportnone/11最低支持的 IE 版本默认none另外解析器支持--keyvalue与--key value两种写法形式会在扫描阶段被拆分见 compiler/core/src/utils/commandLine.re#L188-L201同时也兼容部分旧式位置参数写法如lonac workspace js workspace output见同文件 L267-L288。实战一生成整个工作区workspace 命令workspace是用途最广的命令。README 给出的示例lonac workspace --target js --workspace [path-to-workspace-directory] --output [output-directory]这条命令会把 colors、text styles、shadows、自定义类型以及所有组件一次性生成到output-directory输出目录结构与输入工作区目录结构保持一致镜像布局由 compiler/core/src/main.re#L643-L660 中的相对路径计算保证。如果去掉--target js换成--target swift即可得到 iOS/macOS 的 Swift 代码。工作区是如何被发现的编译器并不是随便扫描目录而是寻找最近的lona.json清单文件compiler/core/src/core/config.re#L35-L46 的Workspace.find从给定路径逐级向上查找lona.json。工作区清单内容为空对象{}即可参见 examples/FlatTokens/lona.json实际文件类型靠命名与后缀识别colors.json→ 颜色Config.Workspace.colorsFiletextStyles.json→ 文本样式shadows.json→ 阴影types.json→ 自定义类型*.component→ 组件compiler/core/src/core/config.re#L186-L190*.logic→ 逻辑文件*.md→ 文档/逻辑文件*.svg→ 矢量图形资源以上文件解析均见 compiler/core/src/core/config.re 的Workspace模块lona.json中还支持ignore字段用于跳过特定路径见Config.Find.files的调用。workspace 命令在底层做了哪些事梳理 compiler/core/src/main.re#L558-L738 的convertWorkspace其执行流程为Config.load按目标平台加载整个工作区配置若开启--legacyTokens先输出旧版 token 文件Colors、TextStyles、Shadows用LogicCompile.makeResolvedProgramNode解析全部逻辑文件与逻辑库Swift 目标下渲染types.json中的自定义类型Swift / JavaScript 目标下逐个转换*.logic文件非空文件才转换copyStaticFiles复制目标平台所需的静态支撑文件逐个转换.component文件并打印输入路径 输出路径的日志最后复制工作区内的所有*.png图片资源到输出目录。其中静态文件复制值得一提Swift 目标会复制TextStyle、CGSizeResizing、LonaViewModel并根据框架追加LonaControlView、ShadowUIKit或LNATextField、LNAImageView、NSImageResizingAppKitReact DOM 目标则复制createActivatableComponent、createFocusWrapper、focusUtils到utils/子目录compiler/core/src/main.re#L244-L303这些静态模板存放在 compiler/core/src/static/swift 与 compiler/core/src/static/javaScript 下。这也是为什么“生成的代码可以直接跑”——编译器不止输出组件本体还顺带补齐了运行所需的辅助文件。实战二生成颜色代码colors 命令README 示例lonac colors --target js --input [path-to-colors.json]该命令把颜色代码输出到stdout方便直接重定向到文件或与其他命令管道组合。它的实现compiler/core/src/main.re#L776-L813会先以输入文件所在目录为起点搜索最近的工作区加载 colors 后交给renderColors渲染Swift 走Swift.Color.renderJavaScript 走JavaScript.Color.renderXML 走Xml.Color.rendercompiler/core/src/main.re#L86-L92。两种输入方式都支持--input [path]指定文件若省略--input编译器会通过get-stdin从 stdin 读取 JSON源码中对应Command.Colors(target, Stdin)分支见 compiler/core/src/utils/commandLine.re#L309-L315 与 compiler/core/src/main.re#L792-L806。例如cat colors.json | lonac colors --target swift同样的模式完全适用于textStyles与shadows两个命令——它们与colors共享“文件输入或 stdin 输入、结果写 stdout”的形态分别见 compiler/core/src/main.re#L862-L899 与 compiler/core/src/main.re#L814-L851对应命令为lonac textStyles --target js --input [path-to-textStyles.json] lonac shadows --target swift --input [path-to-shadows.json]实战三生成单个组件component 命令README 示例注意原文此处参数笔误--input应为.component文件路径而非 colors.jsonlonac component --target js --input [path-to-component-file]该命令将单个.component文件编译为组件代码并输出到 stdout。底层实现compiler/core/src/main.re#L769-L775 →convertComponentcompiler/core/src/main.re#L200-L242会解析 JSON 组件定义然后JavaScript 目标调用JavaScriptComponent.generate自动计算指向 colors、shadows、textStyles 文件及工作区根目录的相对导入路径并解析组件间嵌套引用getComponentRelativePath与资源引用getAssetRelativePathSwift 目标调用Swift.Component.generate生成 Swift 组件源码其他目标返回 Unrecognized target。组件与逻辑的结合组件文件中的可交互逻辑如 examples/test/logic/If.component、examples/test/logic/VectorLogic.component 等会经由LogicJavaScript.convert/LogicSwift.convert转换为目标语言的表达式代码见 compiler/core/src/main.re#L147-L168因此lonac component生成的组件不只包含静态布局还包含可运行的交互逻辑。生成文件细节与实用开关版本横幅注释默认情况下每个生成文件顶部会附带一行注释// Generated by Lona Compiler 0.9.1该逻辑位于main.re的annotatecompiler/core/src/main.re#L33-L42如果文件已包含该注释则不会重复添加。不需要横幅时传--noGenerateBannerMessage。保留手写区域的标记注释workspace与types命令在覆盖生成文件时会保留文件中LONA: KEEP ABOVE与LONA: KEEP BELOW注释之外的手写代码findContentsAbove/findContentsBelow/updateContentsPreservingCommentMarkers见 compiler/core/src/main.re#L305-L359。这意味着你可以安全地格式化生成代码、反复重新生成而不会被覆盖掉手动维护的部分。旧版 token 文件加上--legacyTokens后workspace 命令会额外生成Colors.js或.swift、TextStyles.*、Shadows.*这类旧版 token 文件compiler/core/src/main.re#L523-L556。package.json中大量snapshot*脚本都带上了--legacyTokens说明这是生成 React DOM 旧版集成时常用的兼容选项。按需过滤组件--filterComponents [pattern]会将该字符串当作正则只转换名字匹配的组件文件compiler/core/src/main.re#L645-L649适合在大型工作区中增量生成单个或一组组件。其他命令速览types把类型定义文件转换为目标语言代码可指定--output写文件并保留LONA: KEEP ABOVE/BELOW区域否则输出到 stdoutcompiler/core/src/main.re#L852-L861。config加载工作区后把解析结果序列化为 JSON 输出compiler/core/src/main.re#L900-L906适合排查工作区解析问题。flatten把*.logic文件求值并扁平化为 tokens输出flatTokensSchemaVersion: 0.0.1结构的 JSONcompiler/core/src/main.re#L466-L499。examples/generated/FlatTokens/output.json就是该命令的产物示例对应package.json中的snapshotFlatTokens脚本。documentation把.md文档中的逻辑代码块求值并转换为带 token 的 MDX 文档输出到 stdoutcompiler/core/src/main.re#L363-L464。version打印版本号。从源码构建与本地运行README 的 Contributing 部分说明了从源码构建的完整路径。本项目用ReasonMLOCaml 方言编写借助BuckleScript编译为 JavaScript。安装 ReasonML按 ReasonML 官方安装文档配置工具链编辑器插件见下一步。安装依赖在 compiler/core 目录执行yarn没有 yarn 时先用 npm 安装npm install --global yarn。依赖清单可查看 compiler/core/package.json核心包括bs-platform、bs-node、bs-json、glennsl/bs-jest测试、svgson-next、svgpath、svg-transform-parserSVG 解析以及lona/serializationLona 文件格式序列化。安装 ReasonML 编辑器插件README 推荐 VSCode reason-vscode插件社区有多种插件可选。编译并监听yarn start该脚本等价于bsb -make-world -w见 compiler/core/package.json 的scripts即全量编译并进入 watch 模式。本地运行命令源码编译完成后README 指出只需把上文所有lonac换成node src/main.bs.js例如本地跑一遍 React DOM 生成node src/main.bs.js workspace --target js --workspace ../../examples/test --output ../../examples/generated/test/react-dom --frameworkreactdom --styleFrameworkstyledcomponents --legacyTokens这正是 compiler/core/package.json 中snapshotJsDom脚本的命令其余snapshotJsNativeReact Native、snapshotSketchReact SketchApp、snapshotSwiftUIKit CollectionView、snapshotAppkitAppKit、snapshotJsTokens/snapshotSwiftTokenstoken 生成等脚本可视为官方维护的一组“基准命令”覆盖了所有目标与框架组合是学习各命令标准用法的最佳参考。生成结果可对照仓库中的 examples/generated/test/swift、examples/generated/test/react-dom、examples/generated/test/react-native 等目录检查。运行测试yarn test脚本为jest测试用例位于 compiler/core/src/tests/commands_test.re对命令解析与编译行为做了回归保障。常见使用链路与适用前提完整链路设计系统资产colors / textStyles / shadows / types / components / logic→lonac workspace --target js|swift ...→ 目标平台可编译源码--framework决定 React Native / React DOM / React SketchApp 或 UIKit / AppKit 的细分方向。单文件链路lonac colors|textStyles|shadows|component|types --target ... --input [file]结果落 stdout便于脚本化集成。注意xml与reason目标目前是半成品源码中对多个生成路径返回未实现提示生产使用请优先选择js与swift--generateCollectionView生成的是实验性UICollectionView子类见 compiler/core/src/swift/swiftCollectionView.re是否启用需自行评估。总而言之lonac的价值在于把“设计系统”与“多端代码”之间的转换固化成了一条条确定性的 CLI 命令只要工作区结构规范一条workspace命令就能同时产出 iOS、macOS 与 Web 三端代码而colors、component等单文件命令则让增量生成与脚本集成变得轻而易举。赞分享设计系统前端开发工具UI组件【免费下载链接】LonaA tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.项目地址https://gitcode.com/gh_mirrors/lo/Lona点击查看免费下载相关推荐Lona 设计系统工作流用 .component 文件驱动跨平台 UI 代码生成Lona Studio 与 Lona Compiler 实战指南Lona 设计系统工作流用 .component 文件驱动跨平台 UI 代码生成Lona Studio 与 Lona Compiler 实战指南 导读 L设计系统前端开发工具UI组件10个SLANeXt_wired_onnx实战技巧提升表格识别准确率10个SLANeXt_wired_onnx实战技巧提升表格识别准确率 想要在文档数字化和数据分析中高效处理表格数据吗SLANeXt_wired_onnx作为Lona Studio 使用指南从源码构建到 Workspace 配置与跨平台代码生成Lona Studio 使用指南从源码构建到 Workspace 配置与跨平台代码生成 Lona Studio 是 Lona 设计系统工具链中的桌面图形化编辑设计系统前端开发工具UI组件上一篇PairDrop设备发现终极指南本地网络广播与智能房间划分的完美协同下一篇勒索软件逆向从加密例程分析到泄露站点情报——完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
