fosmvvm-react-view-generator

核心用法

FOSMVVM React View Generator 是一个架构驱动的代码生成工具，专为 FOSMVVM 模式设计。用户通过对话上下文提供 ViewModel 结构和需求，Skill 自动生成配套的 React 组件和测试文件。核心工作流遵循 TDD 原则：先生成 .test.js 测试文件（初始状态为失败），再生成 .jsx 实现文件使测试通过。

组件必须使用 FOSMVVM.viewModelComponent()() 包装器，从全局命名空间访问 FOSMVVM 工具（通过 script 标签加载）。父组件通过 .bind()() 模式绑定子组件，指定 requestType 和 params，由 WASM 桥接层处理请求流转。导航使用 FOSMVVM.Link 配合 intent 属性，禁止硬编码 URL。

显著优点

1. 架构一致性强制：通过代码生成确保所有组件遵循 FOSMVVM 规范，消除业务逻辑泄露到视图层的风险
2. TDD 原生支持：测试先行的工作流培养良好开发习惯，生成的测试覆盖成功/错误 ViewModel 渲染、用户交互等场景
3. 跨平台对齐：与 SwiftUI、Leaf 生成器保持命名和模式一致，便于多平台团队协作
4. 错误处理显式化：将错误视为特定类型的 ViewModel，强制开发者针对每种错误类型设计 UI，避免通用错误处理的模糊性
5. 零配置依赖：FOSMVVM 工具通过全局命名空间提供，无需管理复杂的 import 路径

潜在缺点与局限性

1. 强架构锁定：仅适用于 FOSMVVM 项目，无法灵活适配其他架构模式（如 Redux、Zustand 等）
2. 全局命名空间依赖：依赖运行时 FOSMVVM 全局对象，对 TypeScript 严格模式或现代打包工具（如 Vite）的 tree-shaking 不够友好
3. 上下文敏感：需要对话中已明确 ViewModel 结构，无法自动解析现有代码库生成组件
4. 样式系统缺失：文档未涉及 CSS-in-JS、Tailwind 等样式方案，生成的基础组件需要额外样式封装
5. 生态封闭性：.bind()() 模式和意图导航与 React Router 等主流方案不兼容，增加迁移成本

适合的目标群体

• 采用 FOSMVVM 架构的全栈团队，尤其是同时使用 Swift/Vapor 后端的跨平台项目
• 需要严格分离视图与业务逻辑、追求架构规范一致性的企业级应用
• 从 Leaf 模板迁移到 React 的现有 FOSMVVM 项目
• 希望强制推行 TDD 实践、减少代码审查中架构争议的技术团队

使用风险

1. 运行时依赖风险：全局 FOSMVVM 对象未加载时组件完全失效，需确保 HTML 入口正确配置 script 标签
2. 生成代码质量：自动生成的测试可能覆盖不足，复杂交互场景仍需人工补充测试用例
3. 文件组织冲突：按 {Feature}/{Feature}View.jsx 的强制结构可能与现有项目目录规范冲突
4. 版本兼容性：FOSMVVM 框架升级可能导致生成代码模式过时，需同步更新 Skill 版本
5. 调试复杂度：WASM 桥接层隐藏了实际数据获取逻辑，网络调试需要额外工具支持