chore: merge master

.eslintrc.js

@@ -5,10 +5,7 @@ module.exports = {
     sourceType: 'module'
   },
   extends: 'standard',
-  plugins: [
-    'html',
-    'jest'
-  ],
+  plugins: ['html', 'jest'],
   globals: {
     wx: 'readonly',
     my: 'readonly',
@@ -21,6 +18,7 @@ module.exports = {
     Component: 'readonly',
     Page: 'readonly',
     App: 'readonly',
+    Mixin: 'readonly',
     __mpx_mode__: 'readonly',
     __mpx_env__: 'readonly',
     __mpx_dynamic_runtime__: 'readonly',
@@ -30,10 +28,39 @@ module.exports = {
   rules: {
     'no-cond-assign': 0,
     camelcase: 0,
-    indent: 0
+    indent: 0,
+    'symbol-description': 0
   },
   env: {
     'jest/globals': true,
     browser: true
-  }
+  },
+  overrides: [
+    {
+      files: ['**/*.tsx', '**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'standard',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended'
+      ],
+      plugins: ['@typescript-eslint'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 0,
+        'no-use-before-define': 0,
+        '@typescript-eslint/triple-slash-reference': 0,
+        '@typescript-eslint/ban-types': 0,
+        '@typescript-eslint/no-empty-interface': 0,
+        '@typescript-eslint/no-unused-vars': 0,
+        '@typescript-eslint/no-non-null-assertion': 0,
+        camelcase: 0
+      }
+    }, {
+      files: ['packages/webpack-plugin/lib/runtime/components/react/**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react-hooks'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'error'
+      }
+    }
+  ]
 }

.github/workflows/publish.yml

@@ -20,6 +20,7 @@ jobs:
     - run: |
         npm i
         echo "//registry.npmjs.org/:_authToken=\${NODE_AUTH_TOKEN}" >> $HOME/.npmrc 2> /dev/null
+        npm run tsc:build
         npm run lerna:publish
       env:
         NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/test.yml

@@ -3,6 +3,12 @@ name: test
 on: [push, pull_request]
 
 jobs:
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm i && npm run tsc:build
+
   lint:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -12,3 +12,4 @@ elevate/
 docs-vitepress/.vitepress/dist
 docs-vitepress/.vitepress/cache
 dev-dist
+packages/webpack-plugin/lib/runtime/components/react/dist/

docs-vitepress/.vitepress/config.js

@@ -44,7 +44,17 @@ const sidebar = {
                 { text: '小程序插件', link: '/guide/advance/plugin' },
                 { text: '自定义路径', link: '/guide/advance/custom-output-path' },
                 { text: '使用原子类', link: '/guide/advance/utility-first-css' },
-                { text: 'SSR', link: '/guide/advance/ssr' }
+                { text: 'SSR', link: '/guide/advance/ssr' },
+                { text: '依赖注入（Provide/Inject）', link: '/guide/advance/provide-inject' },
+                { text: '编译配置', link: '/guide/advance/build-config' }
+            ]
+        },
+        {
+            text: '跨端',
+            collapsable: false,
+            items: [
+                { text: '跨端输出基础', link: '/guide/platform/basic' },
+                { text: '跨端输出RN', link: '/guide/platform/rn' },
             ]
         },
         {

docs-vitepress/api/ApiIndex.vue

@@ -40,6 +40,10 @@ const data = [
             text: 'webRouteConfig',
             anchor: '#webRouteConfig'
           },
+          {
+            text: 'webConfig',
+            anchor: '#webConfig'
+          },
         ]
       }
     ]

docs-vitepress/api/app-config.md

@@ -124,16 +124,6 @@ import mpx from '@mpxjs/core'
 mpx.config.forceFlushSync = true
 ```
 
-## webRouteConfig
-Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置
-
-- **用法**:
-```js
-mpx.config.webRouteConfig = {
-  mode: 'history'
-}
-```
-
 ## errorHandler
 
 `Function`
@@ -154,3 +144,27 @@ Mpx 框架运行时报错捕获感知处理函数。
 * Mpx 框架的运行时的检测报错，例如存在目标平台不支持的属性，入参出参类型错误等；
 
 同时被捕获的错误会通过 console.error 输出。
+
+## webRouteConfig
+Mpx 通过 config 暴露出 webRouteConfig 配置项，在 web 环境可以对路由进行配置。
+此配置后续将被废弃，请使用 webConfig 进行配置
+
+- **用法**:
+```js
+mpx.config.webRouteConfig = {
+  mode: 'history'
+}
+```
+
+## webConfig
+web 环境下的一些配置，如路由模式，页面切换动画效果等
+
+- **用法**:
+```js
+// 修改路由模式
+mpx.config.webConfig.routeConfig = {
+  mode: 'history'
+}
+// 禁用页面切换动画
+mpx.config.webConfig.disablePageTransition = true
+```

docs-vitepress/api/compile.md

@@ -88,7 +88,7 @@ mode 为 Mpx 编译的目标平台， 目前支持的有微信小程序(wx)\支
 // 项目 package.json
 {
   "script": {
-    "build:cross": "mpx-cli-service build:mp --targets=wx,ali"
+    "build:cross": "mpx-cli-service build --targets=wx,ali"
   }
 }
 ```
@@ -965,6 +965,7 @@ module.exports = defineConfig({
   }
 })
 ```
+**注意：** 建议使用`autoVirtualHostRules`配置项，不要使用微信组件内部的 options virtualHost 配置，因为组件内部的 options virtualHost 在跨平台输出时无法进行兼容抹平处理。
 
 ### partialCompileRules
 
@@ -1096,6 +1097,25 @@ module.exports = defineConfig({
 })
 ```
 
+### disableRequireAsync
+
+`boolean = false`
+
+Mpx 框架在输出 微信小程序、支付宝小程序、字节小程序、Web 平台时，默认支持分包异步化能力，但若在某些场景下需要关闭该能力，可配置该项。
+
+```js
+// vue.config.js
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      plugin: {
+        disableRequireAsync: true
+      }
+    }
+  }
+})
+```
+
 ### optimizeSize
 
 `boolean = false`

docs-vitepress/api/directives.md

@@ -91,7 +91,8 @@ Page({
 ```
 
 ``` js
-Page({
+import { createComponent } from '@mpxjs/core'
+createComponent({
   data: {
     array: [{
       id: 1, text: 'foo'
@@ -126,7 +127,8 @@ Page({
 ```
 
 ``` js
-Page({
+import { createComponent } from '@mpxjs/core'
+createComponent({
   data: {
     array: [{
       id: 1, text: 'foo'
@@ -549,7 +551,8 @@ Mpx提供了 `wx:ref=xxx` 来更方便获取 WXML 节点信息的对象。在JS
 ```
 
 ```js
-Page({
+import {createPage} from '@mpxjs/core'
+createPage({
   data: {
     show: false
   }
@@ -679,22 +682,28 @@ capture-catch中断捕获阶段和取消冒泡阶段
 
 ## @mode
 
-`type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'`
+`type mode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa' | 'ios' | 'android' | 'harmony'`
 
+### 属性中使用
 跨平台输出场景下，Mpx 框架允许用户在组件上使用 @ 和 | 符号来指定某个节点或属性只在某些平台下有效。
 
 ```html
 <button
-  open-type@wx|swan="getUserInfo"
-  bindgetuserinfo@wx|swan="getUserInfo"
-  open-type@ali="getAuthorize"
+  open-type@wx|swan|ios="getUserInfo"
+  bindgetuserinfo@wx|swan|ios="getUserInfo"
+  open-type@ali|ios="getAuthorize"
   scope@ali="userInfo"
+  enable-background@ios|android="{{ true }}"
   onTap@ali="onTap">
   获取用户信息
 </button>
 ```
-在上方示例中，开发者可以便捷的设置在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 属性，
-以及事件绑定或其他属性。假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：
+例如在上述示例中：
+* 在支付宝小程序与微信和百度小程序等平台分别生效的 open-type 等属性
+* 在输出iOS或android平台时，enable-background 属性生效
+* 以及事件绑定或其他属性灵活的进行条件编译
+
+假设当前 srcMode 为 wx，目标平台为 ali，则输出产物为：
 ```html
 <button
   open-type="getAuthorize"
@@ -703,7 +712,23 @@ capture-catch中断捕获阶段和取消冒泡阶段
   获取用户信息
 </button>
 ```
-同时，该指令也可以作用在单个节点上，但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。
+假设当前 srcMode 为 wx，目标平台为 ios，则输出产物为：
+```html
+<button
+  open-type="getAuthorize"
+  bindgetuserinfo="getUserInfo"
+  open-type="getAuthorize"
+  enable-background="{{ true }}"
+  >
+  获取用户信息
+</button>
+```
+
+### 节点中使用
+同时，该指令也可以作用在单个节点上，来对节点进行跨平台条件判断。
+
+但需要注意的是，该指令作用在单个节点时，节点仅在目标平台输出，同时节点自身属性不会进行跨平台语法转换，不过其子节点不受影响。
+
 ```html
 <!--当srcMode为wx，跨平台输出ali时-->
 <!--错误写法-->
@@ -715,10 +740,17 @@ capture-catch中断捕获阶段和取消冒泡阶段
     <view wx:if="{{flag}}">text</view>
 </view>
 ```
+::: danger
+另外在跨端输出 React Native 和 H5 时，不要在基础组件节点上使用 @mode 指令，仅可在自定义组件节点使用 @mode 指令
+:::
+```html
+<!--错误写法-->
+<view @ios>测试数据</view>
+```
 
 ## @_mode
 
-`type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa'`
+`type _mode = '_wx' | '_ali' | '_qq' | '_swan' | '_tt' | '_web' | '_qa' ｜ '_ios' | '_android' | '_harmony'`
 
 有时开发者期望使用 @mode 这种方式仅控制节点的展示，保留节点属性的平台转换能力，为此 Mpx 实现了一个隐式属性条件编译能力。
 ```html
@@ -727,6 +759,8 @@ capture-catch中断捕获阶段和取消冒泡阶段
 ```
 在对应的平台前加一个_，例如@_ali、@_swan、@_tt等，使用该隐式规则仅有条件编译能力，节点属性语法转换能力依旧。
 
+在跨端输出 React Native 和 H5 时，可以在节点上使用该属性。
+
 ## @env
 
 `string`