这个项目能做什么
SwiftTUI Web 提供两个 npm 包,将 SwiftTUI 应用(在终端单元格中绘制的 SwiftUI 语义)带到浏览器。开发者只需编写一次 App,即可将相同的 View 树、@State 和 @FocusState 发布到网页,通过 Canvas 或 DOM 渲染,并附带语义化无障碍树,无需重写代码或使用 xterm.js 等终端模拟器。
SwiftTUI 应用编译为 wasm32-wasi,并流式传输结构化光栅表面。@swifttui/web 包通过 DOM 或 canvas 引擎将该表面绘制到页面中,并挂载真实的 ARIA 无障碍树。ARIA 树是单向语义展示预览:呈现阅读顺序、名称、角色、隐藏状态、公告和运行时来源的焦点,但辅助技术来源的焦点、激活、调整和编辑操作不会路由回 SwiftTUI。
此仓库包含 SwiftTUI 五个宿主中的两个:静态 WASI 捆绑包和 localhost WebHost。框架本身位于 SwiftTUI/swift-tui。这种拆分将构建时的 Swift 进程和文件系统操作排除在浏览器安全运行时之外,因此任何打包器都可以导入运行时。
包:
- @swifttui/web:浏览器运行时——场景清单加载、DOM + canvas 渲染、ARIA 挂载、WebSocket + WASI 场景桥接。
- @swifttui/build:构建工具——清单生成、Swift WASI 构建、wasm 验证,以及 swifttui-web CLI。
安装:两个包均以 ESM 格式发布到 npm,并附带打包的 TypeScript 声明。无需 Bun 或 TypeScript 工具链;它们包含编译后的 dist/ JavaScript 和声明。可通过 npm 或 GitHub 发布 tarball 安装。
基本用法:使用 `npx swifttui-web build --package-path ./TerminalApp --app MyApp` 将 SwiftTUI 应用构建为 WASI,然后使用 createWebHostApp 和 createWasmSceneRuntimeFactory 从浏览器运行时挂载生成的清单和 wasm。WASI 运行时要求宿主页面提供 Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp 头,以支持基于 SharedArrayBuffer 的标准输入;否则 canvas 将保持空白。
状态:测试版;公共 API 可能更改。实时演示位于 https://swifttui.sh/webexample。文档和 API 参考位于 https://swifttui.sh/docs/documentation/。其他宿主包括终端(默认 SwiftTUI 导入)、原生 SwiftUI(swift-tui-swiftui)和 Jetpack Compose(swift-tui-android)。许可证:MIT。
评论
0 评分人数达到10人后显示
登录后参与讨论。