FOSMVVM架构的React代码生成器

FOSMVVM官方React代码生成器，基于TDD模式自动生成符合架构规范的组件与测试文件，确保View-ViewModel严格对齐。

基本信息

• 技能名称?fosmvvm-react-view-generator
• 中文名称?FOSMVVM架构的React代码生成器
• 作者?foscomputerservices
• 分类?开发
• 版本?v2.0.6
• 标签?frontend, react, development-engineering, testing, automation

使用方法

使用说明
核心用法
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 路径
   潜在缺点与局限性
6. 强架构锁定 ：仅适用于 FOSMVVM 项目，无法灵活适配其他架构模式（如 Redux、Zustand 等）
7. 全局命名空间依赖 ：依赖运行时 FOSMVVM 全局对象，对 TypeScript 严格模式或现代打包工具（如 Vite）的 tree-shaking 不够友好
8. 上下文敏感 ：需要对话中已明确 ViewModel 结构，无法自动解析现有代码库生成组件
9. 样式系统缺失 ：文档未涉及 CSS-in-JS、Tailwind 等样式方案，生成的基础组件需要额外样式封装
10. 生态封闭性 ： .bind()() 模式和意图导航与 React Router 等主流方案不兼容，增加迁移成本
    适合的目标群体
    采用 FOSMVVM 架构的全栈团队，尤其是同时使用 Swift/Vapor 后端的跨平台项目
    需要严格分离视图与业务逻辑、追求架构规范一致性的企业级应用
    从 Leaf 模板迁移到 React 的现有 FOSMVVM 项目
    希望强制推行 TDD 实践、减少代码审查中架构争议的技术团队
    使用风险
11. 运行时依赖风险 ：全局 FOSMVVM 对象未加载时组件完全失效，需确保 HTML 入口正确配置 script 标签
12. 生成代码质量 ：自动生成的测试可能覆盖不足，复杂交互场景仍需人工补充测试用例
13. 文件组织冲突 ：按 {Feature}/{Feature}View.jsx 的强制结构可能与现有项目目录规范冲突
14. 版本兼容性 ：FOSMVVM 框架升级可能导致生成代码模式过时，需同步更新 Skill 版本
15. 调试复杂度 ：WASM 桥接层隐藏了实际数据获取逻辑，网络调试需要额外工具支持