Sync Miniapp To Ray

Miniapp to Ray 同步指南

本 Skill 用于指导 AI 如何精准地将微信小程序组件代码转换为 Ray (React) 风格的代码。

核心转换规则

1. 属性转换 (Props -> TS Interface)

• 目标文件: ray-smart-ui/src/@types/<组件名>/index.ts
• 规则:
  • 将小程序 SmartComponent 的 props 定义改动的内容转换为 TypeScript 接口。
  • 接口命名规范：Smart<ComponentName>Props。
  • 保持原有的 JSDoc 注释。
  • 包含事件定义：Smart<ComponentName>Events，使用 SmartEventHandler<any>。

2. Demo 转换 (WXML -> TSX)

• 目标文件: ray-smart-ui/example/src/pages/<组件名>/index.tsx
• 规则:
  • 多语言: 使用 Strings.getLang('key') 替换 I18n.t('key')。
  • 组件名: 转换为大写驼峰（如 <smart-button> -> <Button>）。
  • 属性名:
    • custom-class -> customClass 或 className。
    • 其他连字符属性转为小驼峰（如 loading-text -> loadingText）。
  • 事件: bind:click="onClick" -> onClick={onClick}。
  • 结构: 使用 <DemoBlock> 包裹示例。

3. 文档同步 (README)

• 目标文件: ray-smart-ui/src/<组件名>/README.md、ray-smart-ui/src/<组件名>/README.en.md
• 规则:
  • API 同步: 保持 API 表格内容同步，确保描述准确;
  • Demo 同步:
    • Demo 同步将修改的 TSX demo 内容同步到 README 内；
    • demo 标题必须是 key 所对应 strings.ts 内的中英文实际文案，不可以写 Strings.getLang('key')；
    • 每一个 demo 都必须要有一段描述信息

执行指令

当收到 git diff 时，请：

1. 仅针对 Diff 中涉及的行进行修改。
2. 保持 ray-smart-ui 现有的代码风格（如缩进、单引号等）。
3. 确保导入路径正确（如从 @ray-js/smart-ui 导入组件）。

Converted and distributed by TomeVault — claim your Tome and manage your conversions.