尧图网站建设 
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载microsoft/fast-build是 FAST 仓库中面向 Node.js 的 CLI 工具用于在测试环境中服务端渲染microsoft/fast-element的声明式 HTML 模板并可将 FAST 声明式模板转换为其他受支持语法。它由 WebAssembly 核心驱动、零运行时 npm 依赖提供fast build模板渲染与fast convert语法转换两个子命令。阅读本文后你将掌握完整的命令参数、配置文件规则、流式输出与状态缺省语义并能从源码层面理解其配置合并、模板扫描与 WASM 调用链路。定位与安装从 package.json 可以看到该包声明engines.node 22.18.0当前仓库内版本为 0.10.0其描述是“CLI and Node.js API for server-side rendering and converting FAST declarative HTML templates”。README 明确指出它主要服务于测试环境的渲染验证对于生产环境的服务端渲染官方建议使用独立的microsoft/webui项目。安装npm install --save microsoft/fast-build安装后包会注册fast可执行文件package.json 中的bin字段指向bin/fast.js在代码中也可以直接引入其 APIimport { render } from microsoft/fast-build;包内构件构建该包自身时build-wasm.cjs 会用cargo buildwasm-pack build --target nodejs将仓库中两个 Rust crate 编译为 WASMcrates/microsoft-fast-build→ 渲染器 WASMwasm/crates/microsoft-fast-convert→ 转换器 WASMwasm/convert/。从源码结构看Node.js 层只负责参数解析、配置加载、文件 I/O 与模板扫描渲染与转换语义全部由 Rust/WASM 承载这解释了它“零运行时 npm 依赖”的特性。CLI 总览安装后fast二进制可用支持build与convert两个子命令fast build [options] fast convert [options]顶层fast --help会列出两个子命令fast build --help/fast convert --help输出各自选项说明——这部分行为在 test/config.test.js 的“CLI help”测试组中有断言覆盖。值得注意的是convert --help支持的语法列表并不是硬编码的而是运行时从转换器 WASM 的convert_syntax_metadata()导出读取的见 bin/fast.js 的writeConvertUsage使 Rust 转换器始终成为语法目标的事实来源。fast build渲染声明式 HTML 模板Build 选项OptionDefaultDescription--entrypathindex.html要渲染的入口 HTML 模板--statepath省略时为{}包含模板状态的 JSON 文件。省略时不加载任何状态文件使用空状态对象渲染一旦显式提供该路径文件必须存在--outputpathoutput.html渲染结果 HTML 的写入位置--templatesglob(无)自定义元素模板 HTML 文件的 glob 模式多个模式用逗号分隔。非流式模式下未提供、或某模式未匹配到文件时会打印警告--attribute-name-strategystrategycamelCase自定义元素上 HTML 属性名到状态属性名的映射策略。camelCase将连字符转换为驼峰foo-bar→fooBarnone保留连字符foo-bar→foo-bar--configpathfast-build.config.jsonJSON 配置文件路径。省略时若当前目录存在fast-build.config.json则使用它。CLI 参数优先于配置值--stream[true/false]false将渲染的 HTML 块直接写入 stdout而不是写入--output。无值的--stream视为true对应实现见 bin/fast.js 的runBuild各选项经resolveOption/resolveBooleanOption解析后先读取入口文件再按需读取状态文件最后分派到不同的 WASM 渲染函数。完整示例给定index.htmlhtml body h1{{title}}/h1 p{{description}}/p /body /html以及state.json{ title: Hello FAST, description: Server-side rendered with WebAssembly. }运行fast build --entryindex.html --statestate.json --outputoutput.html生成的output.htmlhtml body h1Hello FAST/h1 pServer-side rendered with WebAssembly./p /body /html命令成功时 stdout 输出Built: output.html见 bin/fast.js 的fs.writeFileSync(output, rendered, utf8)与process.stdout.write(Built: ...)。流式输出--stream通过--stream、--streamtrue、--streamfalse或在fast-build.config.json中设置stream: true可以控制 stdout 流式输出。启用流式后CLI 会把原始渲染 HTML 块直接写入 stdout不再写入--output文件也不打印常规的Built: ...消息fast build --entryindex.html --statestate.json --stream从源码看流式是一种“模拟流式”WASM 渲染器Rust 侧在内存中先构造好分块以 JSON 字符串数组返回给 JS 层CLI 校验其为字符串数组后逐块调用process.stdout.write(chunk)bin/fast.js。其分块边界对 HTML 解析是安全的具体保证包括属性绑定始终落在完整的开始标签块内自定义元素开始块包含完整的 Declarative Shadow DOMtemplate流式输出使用与普通输出相同的渲染器预处理与自定义元素宿主属性传播逻辑空块会被省略拼接所有块的结果与常规非流式渲染完全一致。实现细节上流式模式下 CLI 总是调用wasm.render_entry_with_templates(..., true)未提供--templates时传入空模板映射{}。test/config.test.js 的 “stream output” 测试组验证了这些行为无值--stream视为 true、模板经parse_f_templates解析后进入templatesJson、--streamfalse可覆盖配置中的stream: true并回落到wasm.render。缺失或省略的状态状态是可选的。当--state与配置中的state均未提供时fast build不会去查找state.json而是以空对象{}渲染只有显式提供的--state路径或配置中的state路径才要求文件必须存在否则以错误退出bin/fast.js 中stateWasProvided分支。Breaking change早期版本在省略--state时会隐式从当前工作目录加载state.json。现在要使用状态文件必须显式传--statestate.json或在fast-build.config.json中设置state: state.json。当某个绑定值在状态中不存在时渲染语义是test/config.test.js “no state behavior” 与 “WASM optional state” 测试组逐条断言了这些结果内容绑定渲染为空包括未解析的点路径p{{foo.bar}}/p变为p/p属性绑定整体省略该属性包括未解析的点路径div class{{foo.bar}}/div变为div/divf-repeat把缺失的列表绑定含未解析点路径视为空数组并渲染零次迭代但若绑定存在却不是数组渲染仍会报错。一个能说明该语义的测试用例是入口为h1{{title}}/h1div class{{missing}}/div目录里放了一个含数据的state.json省略--state运行时输出严格为h1/h1div/div——即状态文件被完全忽略。自定义元素模板--templates向--templates传入 glob 模式或逗号分隔的多个模式可以把自定义元素展开为 Declarative Shadow DOMfast build \ --templates./components/**/*.html \ --entryindex.html \ --statestate.json \ --outputoutput.html每个匹配的.html文件都会被扫描f-template元素其name属性决定自定义元素名单个文件可以包含多个模板。模板文件必须使用如下格式f-template namemy-button template button{{label}}/button /template /f-template规则细节与 DESIGN.md “Template loading” 一节一致没有name属性的f-template会打印警告并被忽略bin/fast.js 的parseFTemplates向 stderr 输出警告精确文件路径不含通配符也作为合法模式可以只注册单个模板文件f-template上任何shadowroot*属性都会转发到渲染出的 Declarative Shadow DOMtemplate上。CLI 会对shadowrootmode与旧版shadowroot做兼容性归一化两者均无非空值时输出shadowrootmodeopen shadowrootopen恰好一个有非空值时该值会镜像到另一个两者都有显式非空值时按原样保留即使冲突。从源码结构看f-template的解析逻辑完全位于 Rust crate 的locator::parse_f_templates通过wasm.parse_f_templates(html)导出JS 层不重复实现解析。glob 扫描分三步staticPrefixDir(pattern)提取首个通配符之前的最长静态目录前缀walkHtmlFiles(dir)递归收集.html文件globMatch(pattern, file)按模式过滤bin/fast.js。其模式支持为*单个路径段内任意字符、**跨零个或多个路径段、?段内单个字符、以及精确路径。跨多个文件出现重复模板名时后加载的会覆盖先前的并向 stderr 打印警告。属性名策略--attribute-name-strategy该选项控制自定义元素上的 HTML 属性名如何映射到其 shadow 模板中的状态属性名StrategyBehaviourTemplate bindingcamelCase默认连字符属性名转换为驼峰foo-bar→{{fooBar}}none属性名原样小写保留连字符foo-bar→{{foo-bar}}camelCase策略只影响“普通”自定义元素属性不会改变data-*属性始终使用dataset.*分组aria-*属性始终使用 ARIA 反射查找具有已知属性名的 HTML 全局属性例如tabindex→tabIndex。fast build \ --templates./components/**/*.html \ --attribute-name-strategycamelCase \ --entryindex.html \ --statestate.json \ --outputoutput.html该值经wasm.render_entry_with_templates(entry, templatesJson, state?, strategy)传入 WASM 渲染器strategy只接受camelCase或none传入其他值会报错退出bin/fast.js。配置文件fast-build.config.json不想在命令行逐个传递选项时可以在项目目录放置fast-build.config.json{ entry: index.html, state: state.json, output: output.html, templates: ./components/**/*.html }CLI 会在当前目录自动加载该文件要使用其他文件则传--configfast build --configconfigs/my-build.json优先级CLI 参数始终覆盖配置文件值。例如--outputother.html会覆盖配置中的output。从实现看合并采用存在性判断hasOwnProperty而非真假判断bin/fast.js 的resolveOption因此即使 CLI 传入空字符串值也会覆盖配置值--streamfalse同样能覆盖配置里的stream: true。路径解析配置文件中的文件路径entry、state、output、templates相对于配置文件所在目录解析而不是当前工作目录CLI 提供的路径则按 Node.js 默认行为相对 CWD 解析bin/fast.js。这保证了配置可以从任意目录调用时仍然正确工作。键与类型约束所有键可选仅允许entry、state、output、templates、attribute-name-strategy、stream六个键未知键会产生错误除stream必须是 JSON 布尔值外其余值必须是字符串bin/fast.js 的BUILD_ALLOWED_CONFIG_KEYS/BUILD_BOOLEAN_CONFIG_KEYS。省略state时以{}渲染存在state时引用文件必须存在。test/config.test.js 的 “config validation” 测试组覆盖了未知键、非字符串值、数组根节点、非法 JSON、非布尔stream等所有拒绝路径均断言退出码为 1。显式--config指向不存在的文件会直接报错退出而省略--config时当前目录没有默认配置文件则静默回退不应用任何配置bin/fast.js 的loadConfig。fast convert转换声明式模板语法fast convert一次转换一个 FAST 声明式模板文件使用wasm/convert/下的转换器 WASM 模块。受支持的语法名、输出扩展名与默认输出后缀都从转换器 WASM 元数据读取使 Rust 转换器成为语法目标的事实来源fast convert --syntaxwebui-prerelease --templateexample.html fast convert --syntaxfast-v3-ts --templateexample.html --output../*.template.tsConvert 选项OptionDefaultDescription--syntaxsyntax(必需)目标语法webui-prerelease或fast-v3-ts--templatepath(必需)源 FAST 声明式模板文件必须使用.html扩展名--outputpath与--template同目录输出文件路径。webui-prerelease默认为*.webui.htmlfast-v3-ts默认为*.template.ts。输出路径中的*会被替换为输入文件名不含扩展名--overwritefalse允许替换已存在的输出文件。CLI 出现即视为true--configpathfast-convert.config.jsonJSON 配置文件路径。省略时若当前目录存在fast-convert.config.json则使用。CLI 参数优先于配置值源模板必须是.html输出扩展名必须与所选语法匹配webui-prerelease对应.htmlfast-v3-ts对应.ts输出父目录必须已存在输出文件已存在时除非使用--overwrite或配置overwrite: true否则会被拒绝bin/fast.js 的validateConvertOutput按顺序校验目录冲突 → 扩展名 → 父目录存在且为目录 → 已存在且未允许覆盖。*替换逻辑见resolveConvertOutputbin/fast.js省略--output时在模板同目录生成basename默认后缀提供时执行outputPattern.split(*).join(basename)。Convert 配置文件fast-convert.config.json遵循与fast-build.config.json相同的优先级与路径解析规则CLI 参数覆盖配置值配置中的template/output路径相对配置文件目录解析。{ syntax: fast-v3-ts, template: src/example.html, output: generated/*.template.ts, overwrite: false }仅允许syntax、template、output、overwrite四个键除overwrite必须是 JSON 布尔值外其余值必须是字符串bin/fast.js 的CONVERT_ALLOWED_CONFIG_KEYS。--overwrite属于“存在即 true”的布尔选项即使配置中overwrite为falseCLI 出现--overwrite也会覆盖为 trueresolvePresenceBooleanOption并有对应测试断言。转换输出长什么样仓库内置的转换 fixture 可以直接说明两种语法的产出形态。fixture 模板 test/fixtures/convert/supported.html 使用了f-ref、f-children、f-repeat、f-when、f-slotted、事件绑定click{handleRoot($e, $c)}、条件属性?hidden{{hidden}}、绑定属性:value{{value}}以及字面量${...}转义等元素。convert-fixtures.test.js 对其转换结果断言转webui-prereleasewebui 语法 HTMLf-repeat变为for eachitem in itemsf-when变为if conditionitem.visiblef-ref/f-children/f-slotted/click等按 webui 约定保留且输出中不再出现f-repeat/f-when转fast-v3-tsTypeScript 模板标签生成import { html } from microsoft/fast-element/html.js、repeat、when、ref、children、slotted等子模块导入属性绑定变为title${x x.title}、事件变为click${(x, c) x.handleRoot(c.event, c)}字面量${与反引号被正确转义。本地运行转换器 fixture先构建包内 WASM再运行 fixture 校验npm run build -w microsoft/fast-build npm run test:fixtures:convert -w microsoft/fast-build对应 package.json 中的buildnode build-wasm.cjs、test:fixtures:convertnode --test test/fixtures/convert/convert-fixtures.test.js与test:node脚本。fixture 测试从包含fast-convert.config.json的 fixture 目录执行fast convert不传--config因此验证了与fast build相同的默认配置发现机制。例如 test/fixtures/convert/fast-convert.config.json 配置为将supported.html转为 webui 语法并写入../../.fixture-output/config/*.html。生成的 fixture 输出写入packages/fast-build/test/.fixture-output/由测试自身创建并清理转换产物不会被提交进仓库。fixture 还包含三个校验用例invalid-repeat、unsupported-f-attribute、missing-inner-template验证转换器会分别以“invalid repeat expression”“unsupported f-* attribute”“inner element”等错误信息退出且不产生任何输出文件。底层工作机制源码视角DESIGN.md 给出了完整架构图核心调用链为fast build [options] → parseArgs(argv) ← --entry/--state/--output/--templates/ --attribute-name-strategy/--config/--stream → loadConfig(configPath) ← 显式路径必须存在默认 CWD 查找缺失静默回退 → resolveOption / resolveBooleanOption ← CLI 参数覆盖配置值 → wasm require(BUILD_WASM_MODULE) → 对每个逗号分隔的 --templates glob staticPrefixDir → walkHtmlFiles → globMatch → parseFTemplates └─ wasm.parse_f_templates(html) ← Rust 解析 f-template → 读取 entry HTMLstate 仅在显式提供时读取 → 分支 非流式有模板 → wasm.render_entry_with_templates(entry, templatesJson, state?, strategy) 无模板 → wasm.render(entry, state?) → fs.writeFileSync(output, rendered) 流式 wasm.render_entry_with_templates(..., true) → JSON.parse(chunksJson) → 逐块 process.stdout.write渲染器 WASM 模块对外暴露四个函数DESIGN.md “WASM integration” 一节函数使用场景wasm.render(entry, state?)无自定义元素模板时省略 state 按{}渲染wasm.render_with_templates(entry, templatesJson, state?, strategy)非入口模板渲染strategy为camelCase或nonewasm.render_entry_with_templates(entry, templatesJson, state?, strategy, stream?)CLI 入口渲染加载了模板或--stream时stream: true时返回 JSON 数组字符串wasm.parse_f_templates(html)解析每个匹配 HTML 文件中的f-template元素其中templatesJson是 JSON 字符串化的“元素名 → 模板元数据”映射每项包含从template提取的原始模板串、转发的shadowrootAttributes以及内层template元素上声明的hostAttributes。宿主属性会合并到渲染出的宿主元素开始标签上作者声明的宿主属性在冲突时胜出。完整的宿主属性传播规则client-only 属性跳过、{{expr}}/?name{{expr}}相对子状态解析等见 crates/microsoft-fast-build/DESIGN.md。fast convert复用同一套 CLI/配置合并模式但默认配置文件为fast-convert.config.jsonloadConfig→resolveOption/resolvePresenceBooleanOption→ 校验语法/模板/输出路径与扩展名 →loadConvertWasm校验convert_template与convert_syntax_metadata两个导出存在 →wasm.convert_template(templateHtml, syntax)→ 写文件并打印Converted: outputbin/fast.js。错误处理速查以下是 DESIGN.md 汇总的错误行为表全部以退出码 1 结束除特别标注的警告。它与 test/config.test.js 各测试组一一对应适合作为排障参考条件行为显式--config文件不存在stderr 报错退出码 1默认fast-build.config.json不存在静默不应用配置配置文件不是合法 JSON / 不是 JSON 对象 / 含未知键 / 值类型错误stderr 报错退出码 1--entry文件不存在stderr 报错退出码 1显式--state或配置state文件不存在stderr 报错退出码 1省略 state不检查state.json以{}渲染早期隐式加载state.json的行为已废弃未提供--templates非流式模式下 stderr 警告继续渲染无自定义元素--attribute-name-strategy值非法stderr 报错退出码 1--stream值不是true/false/空stderr 报错退出码 1Convert--syntax缺失或不支持stderr 打印受支持语法列表退出码 1Convert--template缺失 / 不存在 / 非文件 / 非.htmlstderr 报错退出码 1Convert输出扩展名与语法不匹配 / 输出是目录 / 父目录缺失stderr 报错退出码 1Convert输出已存在且未允许 overwritestderr 报错退出码 1ConvertWASM 导出缺失 / WASM 抛出异常stderr 报错退出码 1glob 模式未匹配到文件stderr 警告跳过该模式f-template缺少namestderr 警告跳过该模板跨文件模板名重复stderr 警告后者覆盖前者流式WASM 导出缺失 / 返回值不是 JSON 字符串数组 / 渲染异常stderr 报错退出码 1模板语法参考与延伸阅读模板语法遵循 FAST 声明式 HTML 格式绑定、条件、重复与指令的完整文档见microsoft/fast-element声明式文档。围绕本包还可继续深入packages/fast-build/README.md本文的原始文档packages/fast-build/DESIGN.md内部架构、模块地图与错误处理全表packages/fast-build/bin/fast.jsCLI 入口参数解析、配置合并、glob 扫描与 WASM 分派的全部实现packages/fast-build/build-wasm.cjs两个 Rust crate 的 WASM 构建脚本packages/fast-build/test/config.test.jsbuild/convert CLI、配置、流式与状态缺省语义的完整测试packages/fast-build/test/fixtures/convert/convert-fixtures.test.js 及 supported.html转换 fixture 与对两种目标语法输出的断言crates/microsoft-fast-build/DESIGN.mdRust 渲染管线与宿主属性传播规则。运行测试的前提是满足 package.json 的 Node 版本要求 22.18.0本地复现 fixture 校验时先执行npm run build -w microsoft/fast-build生成 WASM再执行npm run test:fixtures:convert -w microsoft/fast-build即可。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐microsoft/fast-build 架构深度解析FAST 声明式模板的 WASM 服务端渲染与语法转换 CLImicrosoft/fast build 架构深度解析FAST 声明式模板的 WASM 服务端渲染与语法转换 CLI 本文是 microsoft/fast前端UI组件用 Rust 服务端渲染 FAST 声明式模板microsoft-fast-build 完整实战指南用 Rust 服务端渲染 FAST 声明式模板microsoft fast build 完整实战指南 导读 microsoft fast build http前端UI组件microsoft-fast-convert 转换器深入指南将 FAST 声明式模板转换为 WebUI 模板与 FAST v3 TypeScriptmicrosoft fast convert 转换器深入指南将 FAST 声明式模板转换为 WebUI 模板与 FAST v3 TypeScript micr前端UI组件上一篇ATTinyCore硬件选型指南为你的项目选择最适合的ATtiny芯片下一篇Hugo 菜单条目的 Post 方法在菜单项后插入 HTML 与 emoji 的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 FAST 构建工具 @microsoft/fast-build 实战指南：WASM 驱动的声明式模板渲染与语法转换
前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载microsoft/fast-build是 FAST 仓库中面向 Node.js 的 CLI 工具用于在测试环境中服务端渲染microsoft/fast-element的声明式 HTML 模板并可将 FAST 声明式模板转换为其他受支持语法。它由 WebAssembly 核心驱动、零运行时 npm 依赖提供fast build模板渲染与fast convert语法转换两个子命令。阅读本文后你将掌握完整的命令参数、配置文件规则、流式输出与状态缺省语义并能从源码层面理解其配置合并、模板扫描与 WASM 调用链路。定位与安装从 package.json 可以看到该包声明engines.node 22.18.0当前仓库内版本为 0.10.0其描述是“CLI and Node.js API for server-side rendering and converting FAST declarative HTML templates”。README 明确指出它主要服务于测试环境的渲染验证对于生产环境的服务端渲染官方建议使用独立的microsoft/webui项目。安装npm install --save microsoft/fast-build安装后包会注册fast可执行文件package.json 中的bin字段指向bin/fast.js在代码中也可以直接引入其 APIimport { render } from microsoft/fast-build;包内构件构建该包自身时build-wasm.cjs 会用cargo buildwasm-pack build --target nodejs将仓库中两个 Rust crate 编译为 WASMcrates/microsoft-fast-build→ 渲染器 WASMwasm/crates/microsoft-fast-convert→ 转换器 WASMwasm/convert/。从源码结构看Node.js 层只负责参数解析、配置加载、文件 I/O 与模板扫描渲染与转换语义全部由 Rust/WASM 承载这解释了它“零运行时 npm 依赖”的特性。CLI 总览安装后fast二进制可用支持build与convert两个子命令fast build [options] fast convert [options]顶层fast --help会列出两个子命令fast build --help/fast convert --help输出各自选项说明——这部分行为在 test/config.test.js 的“CLI help”测试组中有断言覆盖。值得注意的是convert --help支持的语法列表并不是硬编码的而是运行时从转换器 WASM 的convert_syntax_metadata()导出读取的见 bin/fast.js 的writeConvertUsage使 Rust 转换器始终成为语法目标的事实来源。fast build渲染声明式 HTML 模板Build 选项OptionDefaultDescription--entrypathindex.html要渲染的入口 HTML 模板--statepath省略时为{}包含模板状态的 JSON 文件。省略时不加载任何状态文件使用空状态对象渲染一旦显式提供该路径文件必须存在--outputpathoutput.html渲染结果 HTML 的写入位置--templatesglob(无)自定义元素模板 HTML 文件的 glob 模式多个模式用逗号分隔。非流式模式下未提供、或某模式未匹配到文件时会打印警告--attribute-name-strategystrategycamelCase自定义元素上 HTML 属性名到状态属性名的映射策略。camelCase将连字符转换为驼峰foo-bar→fooBarnone保留连字符foo-bar→foo-bar--configpathfast-build.config.jsonJSON 配置文件路径。省略时若当前目录存在fast-build.config.json则使用它。CLI 参数优先于配置值--stream[true/false]false将渲染的 HTML 块直接写入 stdout而不是写入--output。无值的--stream视为true对应实现见 bin/fast.js 的runBuild各选项经resolveOption/resolveBooleanOption解析后先读取入口文件再按需读取状态文件最后分派到不同的 WASM 渲染函数。完整示例给定index.htmlhtml body h1{{title}}/h1 p{{description}}/p /body /html以及state.json{ title: Hello FAST, description: Server-side rendered with WebAssembly. }运行fast build --entryindex.html --statestate.json --outputoutput.html生成的output.htmlhtml body h1Hello FAST/h1 pServer-side rendered with WebAssembly./p /body /html命令成功时 stdout 输出Built: output.html见 bin/fast.js 的fs.writeFileSync(output, rendered, utf8)与process.stdout.write(Built: ...)。流式输出--stream通过--stream、--streamtrue、--streamfalse或在fast-build.config.json中设置stream: true可以控制 stdout 流式输出。启用流式后CLI 会把原始渲染 HTML 块直接写入 stdout不再写入--output文件也不打印常规的Built: ...消息fast build --entryindex.html --statestate.json --stream从源码看流式是一种“模拟流式”WASM 渲染器Rust 侧在内存中先构造好分块以 JSON 字符串数组返回给 JS 层CLI 校验其为字符串数组后逐块调用process.stdout.write(chunk)bin/fast.js。其分块边界对 HTML 解析是安全的具体保证包括属性绑定始终落在完整的开始标签块内自定义元素开始块包含完整的 Declarative Shadow DOMtemplate流式输出使用与普通输出相同的渲染器预处理与自定义元素宿主属性传播逻辑空块会被省略拼接所有块的结果与常规非流式渲染完全一致。实现细节上流式模式下 CLI 总是调用wasm.render_entry_with_templates(..., true)未提供--templates时传入空模板映射{}。test/config.test.js 的 “stream output” 测试组验证了这些行为无值--stream视为 true、模板经parse_f_templates解析后进入templatesJson、--streamfalse可覆盖配置中的stream: true并回落到wasm.render。缺失或省略的状态状态是可选的。当--state与配置中的state均未提供时fast build不会去查找state.json而是以空对象{}渲染只有显式提供的--state路径或配置中的state路径才要求文件必须存在否则以错误退出bin/fast.js 中stateWasProvided分支。Breaking change早期版本在省略--state时会隐式从当前工作目录加载state.json。现在要使用状态文件必须显式传--statestate.json或在fast-build.config.json中设置state: state.json。当某个绑定值在状态中不存在时渲染语义是test/config.test.js “no state behavior” 与 “WASM optional state” 测试组逐条断言了这些结果内容绑定渲染为空包括未解析的点路径p{{foo.bar}}/p变为p/p属性绑定整体省略该属性包括未解析的点路径div class{{foo.bar}}/div变为div/divf-repeat把缺失的列表绑定含未解析点路径视为空数组并渲染零次迭代但若绑定存在却不是数组渲染仍会报错。一个能说明该语义的测试用例是入口为h1{{title}}/h1div class{{missing}}/div目录里放了一个含数据的state.json省略--state运行时输出严格为h1/h1div/div——即状态文件被完全忽略。自定义元素模板--templates向--templates传入 glob 模式或逗号分隔的多个模式可以把自定义元素展开为 Declarative Shadow DOMfast build \ --templates./components/**/*.html \ --entryindex.html \ --statestate.json \ --outputoutput.html每个匹配的.html文件都会被扫描f-template元素其name属性决定自定义元素名单个文件可以包含多个模板。模板文件必须使用如下格式f-template namemy-button template button{{label}}/button /template /f-template规则细节与 DESIGN.md “Template loading” 一节一致没有name属性的f-template会打印警告并被忽略bin/fast.js 的parseFTemplates向 stderr 输出警告精确文件路径不含通配符也作为合法模式可以只注册单个模板文件f-template上任何shadowroot*属性都会转发到渲染出的 Declarative Shadow DOMtemplate上。CLI 会对shadowrootmode与旧版shadowroot做兼容性归一化两者均无非空值时输出shadowrootmodeopen shadowrootopen恰好一个有非空值时该值会镜像到另一个两者都有显式非空值时按原样保留即使冲突。从源码结构看f-template的解析逻辑完全位于 Rust crate 的locator::parse_f_templates通过wasm.parse_f_templates(html)导出JS 层不重复实现解析。glob 扫描分三步staticPrefixDir(pattern)提取首个通配符之前的最长静态目录前缀walkHtmlFiles(dir)递归收集.html文件globMatch(pattern, file)按模式过滤bin/fast.js。其模式支持为*单个路径段内任意字符、**跨零个或多个路径段、?段内单个字符、以及精确路径。跨多个文件出现重复模板名时后加载的会覆盖先前的并向 stderr 打印警告。属性名策略--attribute-name-strategy该选项控制自定义元素上的 HTML 属性名如何映射到其 shadow 模板中的状态属性名StrategyBehaviourTemplate bindingcamelCase默认连字符属性名转换为驼峰foo-bar→{{fooBar}}none属性名原样小写保留连字符foo-bar→{{foo-bar}}camelCase策略只影响“普通”自定义元素属性不会改变data-*属性始终使用dataset.*分组aria-*属性始终使用 ARIA 反射查找具有已知属性名的 HTML 全局属性例如tabindex→tabIndex。fast build \ --templates./components/**/*.html \ --attribute-name-strategycamelCase \ --entryindex.html \ --statestate.json \ --outputoutput.html该值经wasm.render_entry_with_templates(entry, templatesJson, state?, strategy)传入 WASM 渲染器strategy只接受camelCase或none传入其他值会报错退出bin/fast.js。配置文件fast-build.config.json不想在命令行逐个传递选项时可以在项目目录放置fast-build.config.json{ entry: index.html, state: state.json, output: output.html, templates: ./components/**/*.html }CLI 会在当前目录自动加载该文件要使用其他文件则传--configfast build --configconfigs/my-build.json优先级CLI 参数始终覆盖配置文件值。例如--outputother.html会覆盖配置中的output。从实现看合并采用存在性判断hasOwnProperty而非真假判断bin/fast.js 的resolveOption因此即使 CLI 传入空字符串值也会覆盖配置值--streamfalse同样能覆盖配置里的stream: true。路径解析配置文件中的文件路径entry、state、output、templates相对于配置文件所在目录解析而不是当前工作目录CLI 提供的路径则按 Node.js 默认行为相对 CWD 解析bin/fast.js。这保证了配置可以从任意目录调用时仍然正确工作。键与类型约束所有键可选仅允许entry、state、output、templates、attribute-name-strategy、stream六个键未知键会产生错误除stream必须是 JSON 布尔值外其余值必须是字符串bin/fast.js 的BUILD_ALLOWED_CONFIG_KEYS/BUILD_BOOLEAN_CONFIG_KEYS。省略state时以{}渲染存在state时引用文件必须存在。test/config.test.js 的 “config validation” 测试组覆盖了未知键、非字符串值、数组根节点、非法 JSON、非布尔stream等所有拒绝路径均断言退出码为 1。显式--config指向不存在的文件会直接报错退出而省略--config时当前目录没有默认配置文件则静默回退不应用任何配置bin/fast.js 的loadConfig。fast convert转换声明式模板语法fast convert一次转换一个 FAST 声明式模板文件使用wasm/convert/下的转换器 WASM 模块。受支持的语法名、输出扩展名与默认输出后缀都从转换器 WASM 元数据读取使 Rust 转换器成为语法目标的事实来源fast convert --syntaxwebui-prerelease --templateexample.html fast convert --syntaxfast-v3-ts --templateexample.html --output../*.template.tsConvert 选项OptionDefaultDescription--syntaxsyntax(必需)目标语法webui-prerelease或fast-v3-ts--templatepath(必需)源 FAST 声明式模板文件必须使用.html扩展名--outputpath与--template同目录输出文件路径。webui-prerelease默认为*.webui.htmlfast-v3-ts默认为*.template.ts。输出路径中的*会被替换为输入文件名不含扩展名--overwritefalse允许替换已存在的输出文件。CLI 出现即视为true--configpathfast-convert.config.jsonJSON 配置文件路径。省略时若当前目录存在fast-convert.config.json则使用。CLI 参数优先于配置值源模板必须是.html输出扩展名必须与所选语法匹配webui-prerelease对应.htmlfast-v3-ts对应.ts输出父目录必须已存在输出文件已存在时除非使用--overwrite或配置overwrite: true否则会被拒绝bin/fast.js 的validateConvertOutput按顺序校验目录冲突 → 扩展名 → 父目录存在且为目录 → 已存在且未允许覆盖。*替换逻辑见resolveConvertOutputbin/fast.js省略--output时在模板同目录生成basename默认后缀提供时执行outputPattern.split(*).join(basename)。Convert 配置文件fast-convert.config.json遵循与fast-build.config.json相同的优先级与路径解析规则CLI 参数覆盖配置值配置中的template/output路径相对配置文件目录解析。{ syntax: fast-v3-ts, template: src/example.html, output: generated/*.template.ts, overwrite: false }仅允许syntax、template、output、overwrite四个键除overwrite必须是 JSON 布尔值外其余值必须是字符串bin/fast.js 的CONVERT_ALLOWED_CONFIG_KEYS。--overwrite属于“存在即 true”的布尔选项即使配置中overwrite为falseCLI 出现--overwrite也会覆盖为 trueresolvePresenceBooleanOption并有对应测试断言。转换输出长什么样仓库内置的转换 fixture 可以直接说明两种语法的产出形态。fixture 模板 test/fixtures/convert/supported.html 使用了f-ref、f-children、f-repeat、f-when、f-slotted、事件绑定click{handleRoot($e, $c)}、条件属性?hidden{{hidden}}、绑定属性:value{{value}}以及字面量${...}转义等元素。convert-fixtures.test.js 对其转换结果断言转webui-prereleasewebui 语法 HTMLf-repeat变为for eachitem in itemsf-when变为if conditionitem.visiblef-ref/f-children/f-slotted/click等按 webui 约定保留且输出中不再出现f-repeat/f-when转fast-v3-tsTypeScript 模板标签生成import { html } from microsoft/fast-element/html.js、repeat、when、ref、children、slotted等子模块导入属性绑定变为title${x x.title}、事件变为click${(x, c) x.handleRoot(c.event, c)}字面量${与反引号被正确转义。本地运行转换器 fixture先构建包内 WASM再运行 fixture 校验npm run build -w microsoft/fast-build npm run test:fixtures:convert -w microsoft/fast-build对应 package.json 中的buildnode build-wasm.cjs、test:fixtures:convertnode --test test/fixtures/convert/convert-fixtures.test.js与test:node脚本。fixture 测试从包含fast-convert.config.json的 fixture 目录执行fast convert不传--config因此验证了与fast build相同的默认配置发现机制。例如 test/fixtures/convert/fast-convert.config.json 配置为将supported.html转为 webui 语法并写入../../.fixture-output/config/*.html。生成的 fixture 输出写入packages/fast-build/test/.fixture-output/由测试自身创建并清理转换产物不会被提交进仓库。fixture 还包含三个校验用例invalid-repeat、unsupported-f-attribute、missing-inner-template验证转换器会分别以“invalid repeat expression”“unsupported f-* attribute”“inner element”等错误信息退出且不产生任何输出文件。底层工作机制源码视角DESIGN.md 给出了完整架构图核心调用链为fast build [options] → parseArgs(argv) ← --entry/--state/--output/--templates/ --attribute-name-strategy/--config/--stream → loadConfig(configPath) ← 显式路径必须存在默认 CWD 查找缺失静默回退 → resolveOption / resolveBooleanOption ← CLI 参数覆盖配置值 → wasm require(BUILD_WASM_MODULE) → 对每个逗号分隔的 --templates glob staticPrefixDir → walkHtmlFiles → globMatch → parseFTemplates └─ wasm.parse_f_templates(html) ← Rust 解析 f-template → 读取 entry HTMLstate 仅在显式提供时读取 → 分支 非流式有模板 → wasm.render_entry_with_templates(entry, templatesJson, state?, strategy) 无模板 → wasm.render(entry, state?) → fs.writeFileSync(output, rendered) 流式 wasm.render_entry_with_templates(..., true) → JSON.parse(chunksJson) → 逐块 process.stdout.write渲染器 WASM 模块对外暴露四个函数DESIGN.md “WASM integration” 一节函数使用场景wasm.render(entry, state?)无自定义元素模板时省略 state 按{}渲染wasm.render_with_templates(entry, templatesJson, state?, strategy)非入口模板渲染strategy为camelCase或nonewasm.render_entry_with_templates(entry, templatesJson, state?, strategy, stream?)CLI 入口渲染加载了模板或--stream时stream: true时返回 JSON 数组字符串wasm.parse_f_templates(html)解析每个匹配 HTML 文件中的f-template元素其中templatesJson是 JSON 字符串化的“元素名 → 模板元数据”映射每项包含从template提取的原始模板串、转发的shadowrootAttributes以及内层template元素上声明的hostAttributes。宿主属性会合并到渲染出的宿主元素开始标签上作者声明的宿主属性在冲突时胜出。完整的宿主属性传播规则client-only 属性跳过、{{expr}}/?name{{expr}}相对子状态解析等见 crates/microsoft-fast-build/DESIGN.md。fast convert复用同一套 CLI/配置合并模式但默认配置文件为fast-convert.config.jsonloadConfig→resolveOption/resolvePresenceBooleanOption→ 校验语法/模板/输出路径与扩展名 →loadConvertWasm校验convert_template与convert_syntax_metadata两个导出存在 →wasm.convert_template(templateHtml, syntax)→ 写文件并打印Converted: outputbin/fast.js。错误处理速查以下是 DESIGN.md 汇总的错误行为表全部以退出码 1 结束除特别标注的警告。它与 test/config.test.js 各测试组一一对应适合作为排障参考条件行为显式--config文件不存在stderr 报错退出码 1默认fast-build.config.json不存在静默不应用配置配置文件不是合法 JSON / 不是 JSON 对象 / 含未知键 / 值类型错误stderr 报错退出码 1--entry文件不存在stderr 报错退出码 1显式--state或配置state文件不存在stderr 报错退出码 1省略 state不检查state.json以{}渲染早期隐式加载state.json的行为已废弃未提供--templates非流式模式下 stderr 警告继续渲染无自定义元素--attribute-name-strategy值非法stderr 报错退出码 1--stream值不是true/false/空stderr 报错退出码 1Convert--syntax缺失或不支持stderr 打印受支持语法列表退出码 1Convert--template缺失 / 不存在 / 非文件 / 非.htmlstderr 报错退出码 1Convert输出扩展名与语法不匹配 / 输出是目录 / 父目录缺失stderr 报错退出码 1Convert输出已存在且未允许 overwritestderr 报错退出码 1ConvertWASM 导出缺失 / WASM 抛出异常stderr 报错退出码 1glob 模式未匹配到文件stderr 警告跳过该模式f-template缺少namestderr 警告跳过该模板跨文件模板名重复stderr 警告后者覆盖前者流式WASM 导出缺失 / 返回值不是 JSON 字符串数组 / 渲染异常stderr 报错退出码 1模板语法参考与延伸阅读模板语法遵循 FAST 声明式 HTML 格式绑定、条件、重复与指令的完整文档见microsoft/fast-element声明式文档。围绕本包还可继续深入packages/fast-build/README.md本文的原始文档packages/fast-build/DESIGN.md内部架构、模块地图与错误处理全表packages/fast-build/bin/fast.jsCLI 入口参数解析、配置合并、glob 扫描与 WASM 分派的全部实现packages/fast-build/build-wasm.cjs两个 Rust crate 的 WASM 构建脚本packages/fast-build/test/config.test.jsbuild/convert CLI、配置、流式与状态缺省语义的完整测试packages/fast-build/test/fixtures/convert/convert-fixtures.test.js 及 supported.html转换 fixture 与对两种目标语法输出的断言crates/microsoft-fast-build/DESIGN.mdRust 渲染管线与宿主属性传播规则。运行测试的前提是满足 package.json 的 Node 版本要求 22.18.0本地复现 fixture 校验时先执行npm run build -w microsoft/fast-build生成 WASM再执行npm run test:fixtures:convert -w microsoft/fast-build即可。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐microsoft/fast-build 架构深度解析FAST 声明式模板的 WASM 服务端渲染与语法转换 CLImicrosoft/fast build 架构深度解析FAST 声明式模板的 WASM 服务端渲染与语法转换 CLI 本文是 microsoft/fast前端UI组件用 Rust 服务端渲染 FAST 声明式模板microsoft-fast-build 完整实战指南用 Rust 服务端渲染 FAST 声明式模板microsoft fast build 完整实战指南 导读 microsoft fast build http前端UI组件microsoft-fast-convert 转换器深入指南将 FAST 声明式模板转换为 WebUI 模板与 FAST v3 TypeScriptmicrosoft fast convert 转换器深入指南将 FAST 声明式模板转换为 WebUI 模板与 FAST v3 TypeScript micr前端UI组件上一篇ATTinyCore硬件选型指南为你的项目选择最适合的ATtiny芯片下一篇Hugo 菜单条目的 Post 方法在菜单项后插入 HTML 与 emoji 的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考