Merge pull request #2453 from didi/rn-template

Rn template

Author: hiyuki

.agents/skills/mpx-development-guides/SKILL.md

@@ -761,14 +761,10 @@ background: #f0f0f0;
 
 ### 7.7 使用限制
 
-> [!tip] 编译时 vs 运行时
->
-> - ✅ `class` 类样式中的简写属性会在编译时自动展开
-> - ❌ `style` 属性不会做简写展开，RN 不支持的简写在运行时不可用
->
-> **CSS 变量限制**
-> - ❌ 简写属性不支持单个 `var()`（如 `margin: var(--spacing)`）
-> - ✅ 多值简写可使用多个 `var()`，按顺序展开到各子属性
+- ✅ `class` 类样式中的简写属性会在编译时自动展开
+- ❌ `style` 属性在运行时不会做简写展开，RN 原生不支持的简写属性在 `style` 属性中不可用
+- ❌ 简写属性不支持单个 `var()`（如 `margin: var(--spacing)`）
+- ✅ 多值简写可使用多个 `var()`，按顺序展开到各子属性
 
 ## 8. CSS 变量支持
 

.agents/skills/mpx-rn-style-guide/others/rn-style-detail.md

@@ -0,0 +1,31 @@
+# 开发指南 
+
+本仓库是 Mpx 的核心仓库，Mpx 是一款在微信原生小程序语法基础上进行了类 Vue 增强的跨端开发框架，能够以类似 Vue 的开发体验开发小程序及跨端应用，支持输出到多小程序平台、Web 和 React Native 环境中。
+
+下面是本仓库中进行开发需要遵循的偏好指引及强制约束。
+
+## 偏好指引
+
+- 开发新特性时尽量参考具有相似性的已有的流程实现，尽可能复用当前已有的流程实现，或者保持与已有流程实现的相似性
+- 编写代码时尽可能保持简洁精炼，避免无效的冗余代码，例如：
+  - 避免声明不必要的中间变量
+  - 避免编写不必要的中间步骤
+  - 避免添加不必要的兜底值
+  - 避免添加不必要的容错判断
+
+
+## 强制约束
+
+### 编码约束
+
+- 所有运行时代码中禁止使用Object spread特性进行对象合并，应当使用Object.assign或者内部等效工具方法进行合并
+
+### 代码检查约束
+
+- 新增功能编写单元测试时仅需覆盖核心功能，无需全量覆盖
+- 任何过程中执行单元测试不通过时，仅尝试进行**2次**修复，如仍未通过则终止尝试，输出详细的错误信息以及对错误信息的分析
+- 进行代码变更后仅需重新执行与当前变更代码相关的单元测试、eslint或类型检查，无需全量执行
+
+
+
+

AGENTS.md

@@ -12,7 +12,8 @@
     "lerna:publish": "lerna publish from-package --yes",
     "docs:dev": "npm run dev -w docs-vitepress",
     "docs:build": "npm run build -w docs-vitepress",
-    "docs:preview": "npm run preview -w docs-vitepress"
+    "docs:preview": "npm run preview -w docs-vitepress",
+    "test:debug": "jest packages/webpack-plugin/test/platform/wx/template/"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package.json

@@ -24,9 +24,8 @@
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
-    "@d11/react-native-fast-image": "*",
     "@mpxjs/api-proxy": "^2.9.0",
-    "@mpxjs/store": "^2.9.0",
+    "@d11/react-native-fast-image": "*",
     "@react-navigation/native": "*",
     "@react-navigation/native-stack": "*",
     "react": "*",
@@ -38,22 +37,23 @@
     "react-native-screens": "*",
     "react-native-video": "*",
     "react-native-webview": "*",
+    "react-native-vision-camera": "*",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
     "vue-i18n-bridge": "^9.2.2"
   },
   "peerDependenciesMeta": {
-    "vue": {
+    "@mpxjs/api-proxy": {
       "optional": true
     },
-    "vue-demi": {
+    "@d11/react-native-fast-image": {
       "optional": true
     },
-    "vue-i18n": {
+    "@react-navigation/native": {
       "optional": true
     },
-    "vue-i18n-bridge": {
+    "@react-navigation/native-stack": {
       "optional": true
     },
     "react": {
@@ -62,13 +62,13 @@
     "react-native": {
       "optional": true
     },
-    "react-native-reanimated": {
+    "react-native-gesture-handler": {
       "optional": true
     },
-    "@react-navigation/native": {
+    "react-native-linear-gradient": {
       "optional": true
     },
-    "@react-navigation/native-stack": {
+    "react-native-reanimated": {
       "optional": true
     },
     "react-native-safe-area-context": {
@@ -77,19 +77,25 @@
     "react-native-screens": {
       "optional": true
     },
+    "react-native-video": {
+      "optional": true
+    },
     "react-native-webview": {
       "optional": true
     },
-    "react-native-gesture-handler": {
+    "react-native-vision-camera": {
       "optional": true
     },
-    "react-native-linear-gradient": {
+    "vue": {
       "optional": true
     },
-    "@d11/react-native-fast-image": {
+    "vue-demi": {
       "optional": true
     },
-    "react-native-video": {
+    "vue-i18n": {
+      "optional": true
+    },
+    "vue-i18n-bridge": {
       "optional": true
     }
   },

packages/core/package.json

@@ -3,7 +3,7 @@ const { parseValues } = require('../../../utils/string')
 
 module.exports = function getSpec({ warn, error }) {
   // React Native 双端都不支持的 CSS property
-  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|background-position|caret-color)$/
+  const unsupportedPropExp = /^(white-space|text-overflow|animation|font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures|caret-color)$/
   const unsupportedPropMode = {
     // React Native ios 不支持的 CSS property
     ios: /^(vertical-align)$/,

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -39,7 +39,6 @@ const view = require('./view')
 const webView = require('./web-view')
 const label = require('./label')
 const wxs = require('./wxs')
-const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
@@ -126,7 +125,6 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     livePusher({ print }),
     hyphenTagName({ print }),
     label({ print }),
-    component(),
     rootPortal({ print }),
     stickyHeader({ print }),
     stickySection({ print })

packages/webpack-plugin/lib/platform/template/wx/component-config/component.js

@@ -119,14 +119,14 @@ module.exports = function getSpec ({ warn, error }) {
             }
           }
           if (el) {
-            const injectWxsProp = {
-              injectWxsPath: '~' + normalize.lib('runtime/swanHelper.wxs'),
+            const injectWxsInfo = {
+              injectWxsRequest: '~' + normalize.lib('runtime/swanHelper.wxs'),
               injectWxsModuleName: 'mpxSwanHelper'
             }
-            if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
-              el.injectWxsProps.push(injectWxsProp)
+            if (el.injectWxsInfos && Array.isArray(el.injectWxsInfos)) {
+              el.injectWxsInfos.push(injectWxsInfo)
             } else {
-              el.injectWxsProps = [injectWxsProp]
+              el.injectWxsInfos = [injectWxsInfo]
             }
           }
           return {