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 桥接层隐藏了实际数据获取逻辑，网络调试需要额外工具支持

核心功能

fosmvvm-react-view-generator 是专为 FOSMVVM（Full-stack Object-oriented Server-side Model-View-ViewModel）架构设计的 React 组件代码生成工具。该 Skill 采用测试先行（TDD）工作流，单次调用同时生成 .test.js 测试文件和 .jsx 实现文件，确保代码可测试性与质量。

显著优点

1. 架构规范性：严格遵循 ViewModelView 模式，强制使用 FOSMVVM.viewModelComponent() 包装器，确保 React 组件仅作为薄渲染层，不处理业务逻辑。
2. TDD 工作流：自动生成测试文件（先失败）再生成实现（后通过），培养测试驱动开发习惯。
3. 多组件类别支持：涵盖展示型、交互型、列表型、表单型组件，内置错误 ViewModel 处理模式。
4. 无外部依赖：纯文档模板型 Skill，无需网络请求或文件系统操作，生成代码自包含。
5. 命名一致性：组件文件名与 ViewModel 名称对齐，提升代码可发现性和可维护性。

潜在局限

1. 框架锁定：仅适用于 FOSMVVM 架构，无法用于标准 React 项目或其他 MVVM 框架。
2. 上下文依赖：需要预先存在 ViewModel 和 ServerRequest 定义，无法独立生成完整功能。
3. 全局命名空间依赖：依赖 <script> 标签加载的 FOSMVVM 全局对象，与现代模块化打包工具（如 Webpack/Vite）的 ESM 范式存在摩擦。
4. WASM 桥接黑盒：.bind() 模式背后的 WASM 桥接机制不透明，调试和性能优化受限。

适合人群

• 使用 FOSMVVM 全栈架构的团队
• 需要从 Leaf/SwiftUI 迁移到 React 的开发者
• 追求严格分层架构、拒绝组件内业务逻辑的技术领导者
• 需要快速生成标准化组件模板的开发者

常规风险

| 风险类型 | 等级 | 说明 |

|---------|------|------|

| 供应链安全 | 极低 | 纯文档型，无第三方依赖 |

| 代码注入 | 极低 | 无可执行代码，仅生成静态模板 |

| 数据外泄 | 无 | 无网络请求 |

| 架构锁定 | 中等 | 高度依赖 FOSMVVM 特定模式，迁移成本高 |

| 维护性 | 低 | 全局命名空间和特定模式增加长期维护复杂度 |