Merge branch 'master' into 2.9_hummer

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     App: 'readonly',
     __mpx_mode__: 'readonly',
     __mpx_env__: 'readonly',
+    __mpx_dynamic_runtime__: 'readonly',
     getRegExp: 'readonly',
     getCurrentPages: 'readonly',
     // tenon env
@@ -34,9 +35,32 @@ module.exports = {
   },
   rules: {
     'no-cond-assign': 0,
-    camelcase: 0
+    camelcase: 0,
+    indent: 0
   },
   env: {
-    'jest/globals': true
-  }
+    '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,
+        camelcase: 0,
+      }
+    }
+  ]
 }

.github/workflows/docs.yml

@@ -14,10 +14,6 @@ jobs:
           PATTERNS: |
             +(docs|docs-vuepress)/**/*
             +(docs|docs-vuepress)/.*/**/*
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '16'
-
       # vuepress生成最终文档
       - name: generate docs file
         if: env.GIT_DIFF

.github/workflows/publish.yml

@@ -17,12 +17,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '16'
     - 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

@@ -1,8 +1,14 @@
 name: test
 
-on: [push]
+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:
@@ -13,7 +19,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-
       - name: Cache node modules
         id: cache
         uses: actions/cache@v2
@@ -36,7 +41,7 @@ jobs:
 
       - name: install deps
         if: steps.cache.outputs.cache-hit != 'true'
-        run: npm i && npm i --prefix test/e2e/miniprogram-project && npm i --prefix test/e2e/plugin-project  && npx lerna bootstrap --no-ci
+        run: npm i && npm i --prefix test/e2e/miniprogram-project && npm i --prefix test/e2e/plugin-project
 
       - name: copy-webpack-plugin
         run: npm run copyPlugin --prefix test/e2e/miniprogram-project && npm run copyPlugin --prefix test/e2e/plugin-project

.gitignore

@@ -10,3 +10,4 @@ yarn.lock
 .DS_Store
 docs-vuepress/.vuepress/dist
 elevate/
+packages/webpack-plugin/lib/runtime/components/react/dist/

.npmrc

@@ -0,0 +1 @@
+install-strategy=shallow

README.md

@@ -10,18 +10,17 @@
 欢迎访问[https://mpxjs.cn](https://mpxjs.cn)，跟随我们提供的文档指南使用Mpx进行跨端小程序开发。
 
 ## 近期更新
+基于 Mpx 的移动端基础组件库 [mpx-cube-ui](https://www.mpxjs.cn/mpx-cube-ui/guide/intro.html) 已经开源，更多详情查看[这里](https://mpxjs.cn/articles/mpx-cube-ui.html)。
 
-Mpx 2.8 版本正式发布，完整支持组合式 API，更多详情查看[这里](https://mpxjs.cn/articles/2.8-release.html)，迁移指南查看[这里](https://mpxjs.cn/guide/migrate/2.8.html)，相关指南及 API 参考文档已更新。
-
-`@mpxjs/cli` 3.2 版本正式发布，基于 `@vue/cli` 插件化架构实现的全新脚手架，更多详情查看[这里](https://github.com/mpx-ecology/mpx-cli)。
+Mpx 2.9 版本正式发布，支持原子类、SSR和构建产物体积优化，更多详情查看[这里](https://mpxjs.cn/articles/2.9-release.html)，迁移指南查看[这里](https://mpxjs.cn/guide/migrate/2.9.html)，相关指南及 API 参考文档已更新。
 
 ## 简介
 
 Mpx是一款致力于提升小程序开发体验和用户体验的增强型小程序跨端框架，通过Mpx，我们能够以类Vue的开发体验高效优雅地构筑出高性能跨端小程序应用，在所有开放的小程序平台及web平台中运行。
 
 Mpx具有以下功能特性：
 * [数据响应](https://www.mpxjs.cn/guide/basic/reactive.html) (赋值响应 / [watch](https://www.mpxjs.cn/api/global-api.html#watch) / computed)
-* [组合式 API](#todo link)
+* [组合式 API](https://mpxjs.cn/guide/composition-api/composition-api.html)
 * 增强模板语法 ([动态组件](https://www.mpxjs.cn/guide/basic/component.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6) / [样式绑定 / 类名绑定 ](https://www.mpxjs.cn/guide/basic/class-style-binding.html#%E7%B1%BB%E5%90%8D%E7%BB%91%E5%AE%9A) / [内联事件函数](https://www.mpxjs.cn/guide/basic/event.html) / [双向绑定](https://www.mpxjs.cn/guide/basic/two-way-binding.html) / [refs](https://www.mpxjs.cn/guide/basic/refs.html))
 * 极致性能 ([运行时性能优化](https://www.mpxjs.cn/guide/understand/runtime.html) / [包体积优化](https://www.mpxjs.cn/guide/understand/compile.html#%E5%88%86%E5%8C%85%E5%A4%84%E7%90%86) / 框架运行时体积14KB)
 * [高效强大的编译构建](https://www.mpxjs.cn/guide/understand/compile.html#%E5%88%86%E5%8C%85%E5%A4%84%E7%90%86) (基于webpack5 / 支持持久化缓存 / 兼容webpack生态 / 兼容原生小程序 / 完善支持npm场景下的分包输出 / 高效调试)
@@ -30,15 +29,18 @@ Mpx具有以下功能特性：
 * [状态管理](https://www.mpxjs.cn/guide/advance/store.html) (Vuex规范 / 支持多实例Store)
 * 跨团队开发 ([packages](https://www.mpxjs.cn/guide/advance/subpackage.html))
 * 逻辑复用 ([mixins](https://www.mpxjs.cn/guide/advance/mixin.html))
-* [周边能力支持](https://www.mpxjs.cn/guide/extend/) (fetch / api增强 / mock / webview-bridge)
+* [周边能力](https://www.mpxjs.cn/guide/extend/) (fetch / api增强 / mock / webview-bridge)
 * 脚手架支持
 * 多平台增强 (支持在微信、支付宝、百度、qq、头条小程序平台中进行增强开发)
 * [跨平台编译](https://www.mpxjs.cn/guide/advance/platform.html) (一套代码跨端输出到微信、支付宝、百度、字节、QQ、京东、快应用(web) 和 [web平台](https://www.mpxjs.cn/guide/advance/platform.html#%E8%B7%A8%E5%B9%B3%E5%8F%B0%E8%BE%93%E5%87%BAweb) 中运行)
 * [TypeScript支持](https://www.mpxjs.cn/guide/tool/ts.html) (基于ThisType实现了完善的类型推导)
 * [I18n国际化](https://www.mpxjs.cn/guide/tool/i18n.html)
-* [单元测试支持](https://www.mpxjs.cn/guide/tool/unit-test.html)
-* [E2E测试支持](https://www.mpxjs.cn/guide/tool/e2e-test.html)
-* [组件维度运行时渲染方案](https://github.com/didi/mpx/pull/919) (即将到来)
+* [单元测试](https://www.mpxjs.cn/guide/tool/unit-test.html)
+* [E2E测试](https://www.mpxjs.cn/guide/tool/e2e-test.html)
+* [原子类](https://mpxjs.cn/guide/advance/utility-first-css.html)
+* [SSR](https://mpxjs.cn/guide/advance/ssr.html)
+* 运行时渲染方案
+* 跨端输出RN（即将到来）
 
 ## 快速开始
 
@@ -140,7 +142,7 @@ npm run build
       }
     },
     handleTap (index) {
-      // 处理函数直接通过参数获取当前点击的index，清晰简洁
+      // 处理函数直接通过参数获取当前点击的index，清晰简洁.
       this.list[index].active = !this.list[index].active
     },
     onReady () {
@@ -191,17 +193,19 @@ Mpx的核心设计思路为增强，不同于业内大部分小程序框架将we
 |@mpxjs/store|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fstore.svg)](https://badge.fury.io/js/%40mpxjs%2Fstore)|类vuex store|
 |@mpxjs/pinia|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fpinia.svg)](https://badge.fury.io/js/%40mpxjs%2Fpinia)|mpx pinia store|
 |@mpxjs/fetch|[![npm version](https://badge.fury.io/js/%40mpxjs%2Ffetch.svg)](https://badge.fury.io/js/%40mpxjs%2Ffetch)|mpx网络请求库，处理wx并发请求限制|
+|@mpxjs/unocss-plugin|[![npm version](https://badge.fury.io/js/@mpxjs%2Funocss-plugin.svg)](https://badge.fury.io/js/@mpxjs%2Funocss-plugin)|mpx unocss插件，支持使用unocss原子类|
+|@mpxjs/unocss-base|[![npm version](https://badge.fury.io/js/@mpxjs%2Funocss-base.svg)](https://badge.fury.io/js/@mpxjs%2Funocss-base)|mpx unocss预设|
 |@mpxjs/cli|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fcli.svg)](https://badge.fury.io/js/%40mpxjs%2Fcli)|mpx脚手架命令行工具|
 |@mpxjs/webview-bridge|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fwebview-bridge.svg)](https://badge.fury.io/js/%40mpxjs%2Fwebview-bridge)|为跨小程序平台的H5项目提供通用的webview-bridge|
-|@mpxjs/mock|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fmock.svg)](https://badge.fury.io/js/%40mpxjs%2Fmock)|结合mockjs提供数据mock能力|
 |@mpxjs/utils|[![npm version](https://badge.fury.io/js/%40mpxjs%2Futils.svg)](https://badge.fury.io/js/%40mpxjs%2Futils)|mpx运行时工具库|
 |@mpxjs/babel-plugin-inject-page-events|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fbabel-plugin-inject-page-events.svg)](https://badge.fury.io/js/%40mpxjs%2Fbabel-plugin-inject-page-events)|组合式API页面事件处理插件|
+|@mpxjs/mpx-cube-ui|[![npm version](https://badge.fury.io/js/%40mpxjs%2Fmpx-cube-ui.svg)](https://badge.fury.io/js/%40mpxjs%2Fmpx-cube-ui)|基于 Mpx 的移动端基础组件库|
 
 ## 开发团队
 
 核心团队: [hiyuki](https://github.com/hiyuki), [Blackgan3](https://github.com/Blackgan3), [anotherso1a](https://github.com/anotherso1a), [CommanderXL](https://github.com/CommanderXL), [yandadaFreedom](https://github.com/yandadaFreedom), [wangxiaokou](https://github.com/wangxiaokou), [OnlyProbie](https://github.com/OnlyProbie), [pagnkelly](https://github.com/pagnkelly), [thuman](https://github.com/thuman), [theniceangel](https://github.com/theniceangel), [dolymood](https://github.com/dolymood)
 
-外部贡献者：[sky-admin](https://github.com/sky-admin), [pkingwa](https://github.com/pkingwa), [httpsxiao](https://github.com/httpsxiao), [lsycxyj](https://github.com/lsycxyj), [okxiaoliang4](https://github.com/okxiaoliang4), [tangminFE](https://github.com/tangminFE), [codepan](https://github.com/codepan), [zqjimlove](https://github.com/zqjimlove), [xuehebinglan](https://github.com/xuehebinglan), [wangxiaokou](https://github.com/wangxiaokou), [zhaoyiming0803](https://github.com/zhaoyiming0803), [ctxrr](https://github.com/ctxrr), [JanssenZhang](https://github.com/JanssenZhang), [heiye9](https://github.com/heiye9), [lj0812](https://github.com/lj0812), [SuperHuangXu](https://github.com/SuperHuangXu), [twtylkmrh](https://github.com/twtylkmrh), [NineSwordsMonster](https://github.com/NineSwordsMonster)
+外部贡献者：[sky-admin](https://github.com/sky-admin), [pkingwa](https://github.com/pkingwa), [httpsxiao](https://github.com/httpsxiao), [lsycxyj](https://github.com/lsycxyj), [okxiaoliang4](https://github.com/okxiaoliang4), [tangminFE](https://github.com/tangminFE), [codepan](https://github.com/codepan), [zqjimlove](https://github.com/zqjimlove), [xuehebinglan](https://github.com/xuehebinglan), [zhaoyiming0803](https://github.com/zhaoyiming0803), [ctxrr](https://github.com/ctxrr), [JanssenZhang](https://github.com/JanssenZhang), [heiye9](https://github.com/heiye9), [lj0812](https://github.com/lj0812), [SuperHuangXu](https://github.com/SuperHuangXu), [twtylkmrh](https://github.com/twtylkmrh), [NineSwordsMonster](https://github.com/NineSwordsMonster)
 
 ## 成功案例
 
@@ -231,9 +235,9 @@ Mpx的核心设计思路为增强，不同于业内大部分小程序框架将we
 
 提供 微信群 / QQ群 两种交流方式.
 
-#### 添加MPX入群客服等待受邀入群
+#### 添加MPX入群小助手等待受邀入群
 
-![微信](https://dpubstatic.udache.com/static/dpubimg/82e2e776-71e8-4ca5-8878-33b0d5020b6d.jpg)
+![微信](https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg)
 
 
 #### 扫码进入QQ群

docs-vuepress/.vuepress/config.js

@@ -19,7 +19,8 @@ const sidebar = {
         'basic/event',
         'basic/two-way-binding',
         'basic/component',
-        'basic/refs'
+        'basic/refs',
+        'basic/option-chain'
       ]
     },
     {
@@ -40,6 +41,8 @@ const sidebar = {
         'advance/ability-compatible',
         'advance/plugin',
         'advance/custom-output-path',
+        'advance/utility-first-css',
+        'advance/ssr'
       ]
     },
     {
@@ -81,6 +84,7 @@ const sidebar = {
       title: '迁移',
       collapsable: false,
       children: [
+        'migrate/2.9',
         'migrate/2.8',
         'migrate/2.7',
         'migrate/mpx-cli-3'
@@ -97,6 +101,7 @@ const sidebar = {
     'builtIn',
     'reactivity-api',
     'composition-api',
+    'optional-api',
     'extend'
   ],
   '/articles/': [
@@ -109,6 +114,8 @@ const sidebar = {
     { title: 'Mpx中基于 Typescript Template Literal Types 实现链式key的类型推导', path: 'ts-derivation' },
     { title: 'Mpx2.7 版本正式发布，大幅提升编译构建速度', path: '2.7-release' },
     { title: 'Mpx2.8 版本正式发布，使用组合式 API 开发小程序', path: '2.8-release' },
+    { title: 'Mpx2.9 版本正式发布，支持原子类、SSR 和包体积优化', path: '2.9-release' },
+    { title: '小程序跨端组件库 Mpx-cube-ui 开源啦', path: 'mpx-cube-ui' },
     { title: 'Mpx-cli 插件化改造', path: 'mpx-cli-next' },
     { title: 'Mpx 小程序单元测试能力建设与实践', path: 'unit-test'}
   ]
@@ -125,16 +132,23 @@ const nav = [
 module.exports = {
   base: '/',
   head: [
-    ['link', { rel: 'icon', href: '/favicon.ico' }]
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+    // 插入一段 clarity 的数据分析的代码
+    ['script', { type: 'text/javascript' }, `(function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "jtvvy52wxy");`]
   ],
   title: 'Mpx框架',
   locales: {
     '/': {
       lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
       title: 'Mpx框架',
-      description: '深度性能优化的增强型小程序开发框架'
+      description: 'Mpxjs 是滴滴开源的支持跨端开发、深度性能优化的增强型小程序开发框架。使用 Mpxjs 帮助你更好开发小程序，拥有类似 VueJS 的数据响应能力，在降低研发心智负担的同时比原生小程序性能更好，完全基于原生小程序语法保障了最少的坑，一次开发多端生效同时支持微信小程序、支付宝小程序、抖音小程序、百度小程序、Web H5。'
     },
   },
+  shouldPrefetch: () => false,
   plugins: {
     '@vuepress/pwa': {
       serviceWorker: true,

docs-vuepress/.vuepress/public/baidu_verify_codeva-GYcT5ujCTB.html

@@ -0,0 +1 @@
+e197dca3487ecef730bbb3a05e79d985

docs-vuepress/.vuepress/theme/components/Popover.vue

@@ -4,7 +4,7 @@
     <div v-show="isShow" class="popover__top">
       <div class="popover__content">
         <div class="popover__inner">
-          <img v-if="code" width="110" :src="code" alt="code" loading="lazy" />
+          <img v-if="code" width="300" :src="code" alt="code" loading="lazy" />
           <div v-if="title">{{title}}</div>
         </div>
         <div class="popover__arrow"></div>
@@ -56,11 +56,11 @@ export default {
   display inline-block
   .popover__top
     position absolute
-    width 150px
-    height 158px
+    width 300px
+    height 300px
     background #fff
-    left -55px
-    top -168px
+    left -150px
+    top -350px
     border-radius 4px
   .popover__content
     position relative
@@ -93,4 +93,4 @@ export default {
     border 1px solid #EDEDED
   .popover__content
     display inline-block
-</style>
+</style>

docs-vuepress/README.md

@@ -258,7 +258,7 @@ communityList:
   details:
   - title: 微信群
     actionLink: https://github.com/didi/mpx
-    img: https://dpubstatic.udache.com/static/dpubimg/82e2e776-71e8-4ca5-8878-33b0d5020b6d.jpg
+    img: https://dpubstatic.udache.com/static/dpubimg/6DN0ebkbjgI2P9QjJr8jr_WechatIMG3.jpeg
   - title: QQ群
     actionLink: https://github.com/didi/mpx
     img: https://dpubstatic.udache.com/static/dpubimg/etX-gKWeUb/temp_qrcode_share_374632411.png

docs-vuepress/api/ApiIndex.vue

@@ -40,6 +40,10 @@ const data = [
             text: 'webRouteConfig',
             anchor: '#webRouteConfig'
           },
+          {
+            text: 'webConfig',
+            anchor: '#webConfig'
+          },
         ]
       }
     ]
@@ -733,8 +737,8 @@ const data = [
             anchor: '#autoVirtualHostRules'
           },
           {
-            text: 'partialCompile',
-            anchor: '#partialCompile'
+            text: 'partialCompileRules',
+            anchor: '#partialCompileRules'
           },
         ]
       },