Merge branch 'master' into feat-dynamic-inject

README.md

@@ -39,7 +39,8 @@ Mpx具有以下功能特性：
 * [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)
-* [组件维度运行时渲染方案](https://github.com/didi/mpx/pull/919) (即将到来)
+* 运行时渲染方案
+* 跨端输出RN（即将到来）
 
 ## 快速开始
 
@@ -192,6 +193,8 @@ 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/utils|[![npm version](https://badge.fury.io/js/%40mpxjs%2Futils.svg)](https://badge.fury.io/js/%40mpxjs%2Futils)|mpx运行时工具库|

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.9.41-react.0"
+  "version": "2.9.42"
 }

package.json

@@ -3,7 +3,7 @@
   "description": "mpx monorepo",
   "private": true,
   "scripts": {
-    "lerna:publish": "lerna publish from-package --yes --dist-tag=react",
+    "lerna:publish": "lerna publish from-package --yes",
     "lint": "eslint --ext .js packages/",
     "fix": "eslint --fix --ext .js packages/",
     "test": "jest",

packages/api-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.41-react.0",
+  "version": "2.9.41",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",

packages/api-proxy/src/platform/api/route/index.ios.js

@@ -2,11 +2,6 @@ import { webHandleSuccess, webHandleFail } from '../../../common/js'
 import { parseQuery } from '@mpxjs/utils'
 
 function parseUrl (url) {
-  if (url.startsWith('/')) {
-    url = url.slice(1)
-  } else {
-    // todo 处理相对路径
-  }
   let path = url
   let query = ''
   const queryIndex = url.indexOf('?')
@@ -21,12 +16,46 @@ function parseUrl (url) {
   }
 }
 
+function getBasePath (navigation) {
+  if (navigation) {
+    const state = navigation.getState()
+    return '/' + state.routes[state.index].name
+  }
+  return '/'
+}
+
+function resolvePath (relative, base) {
+  const firstChar = relative.charAt(0)
+  if (firstChar === '/') {
+    return relative
+  }
+  const stack = base.split('/')
+  stack.pop()
+  // resolve relative path
+  const segments = relative.replace(/^\//, '').split('/')
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i]
+    if (segment === '..') {
+      stack.pop()
+    } else if (segment !== '.') {
+      stack.push(segment)
+    }
+  }
+  // ensure leading slash
+  if (stack[0] !== '') {
+    stack.unshift('')
+  }
+  return stack.join('/')
+}
+
 function navigateTo (options = {}) {
-  const navigationRef = global.__navigationRef
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
-  if (navigationHelper && navigationRef && navigationRef.isReady()) {
+  if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
-    navigationRef.dispatch(navigationHelper.StackActions.push(path, queryObj))
+    const basePath = getBasePath(navigation)
+    const finalPath = resolvePath(path, basePath).slice(1)
+    navigation.push(finalPath, queryObj)
     navigationHelper.lastSuccessCallback = () => {
       const res = { errMsg: 'navigateTo:ok' }
       webHandleSuccess(res, options.success, options.complete)
@@ -39,11 +68,13 @@ function navigateTo (options = {}) {
 }
 
 function redirectTo (options = {}) {
-  const navigationRef = global.__navigationRef
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
-  if (navigationHelper && navigationRef && navigationRef.isReady()) {
+  if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
-    navigationRef.dispatch(navigationHelper.StackActions.replace(path, queryObj))
+    const basePath = getBasePath(navigation)
+    const finalPath = resolvePath(path, basePath).slice(1)
+    navigation.replace(finalPath, queryObj)
     navigationHelper.lastSuccessCallback = () => {
       const res = { errMsg: 'redirectTo:ok' }
       webHandleSuccess(res, options.success, options.complete)
@@ -56,10 +87,10 @@ function redirectTo (options = {}) {
 }
 
 function navigateBack (options = {}) {
-  const navigationRef = global.__navigationRef
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
-  if (navigationHelper && navigationRef && navigationRef.isReady()) {
-    navigationRef.dispatch(navigationHelper.StackActions.pop(options.delta || 1))
+  if (navigation && navigationHelper) {
+    navigation.pop(options.delta || 1)
     navigationHelper.lastSuccessCallback = () => {
       const res = { errMsg: 'navigateBack:ok' }
       webHandleSuccess(res, options.success, options.complete)
@@ -72,15 +103,17 @@ function navigateBack (options = {}) {
 }
 
 function reLaunch (options = {}) {
-  const navigationRef = global.__navigationRef
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
-  if (navigationHelper && navigationRef && navigationRef.isReady()) {
+  if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
-    navigationRef.reset({
+    const basePath = getBasePath(navigation)
+    const finalPath = resolvePath(path, basePath).slice(1)
+    navigation.reset({
       index: 0,
       routes: [
         {
-          name: path,
+          name: finalPath,
           params: queryObj
         }
       ]

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.41-react.0",
+  "version": "2.9.42",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,18 +19,18 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.41-react.0",
+    "@mpxjs/utils": "^2.9.41",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
+    "@ant-design/react-native": "^5.1.3",
     "@mpxjs/api-proxy": "^2.9.0",
     "@mpxjs/store": "^2.9.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
     "react": "^18.3.1",
     "react-native": "^0.74.3",
-    "@ant-design/react-native": "^5.1.3",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -40,7 +40,7 @@ function stringifyDynamicClass (value) {
 }
 
 const listDelimiter = /;(?![^(]*[)])/g
-const propertyDelimiter = /':(.+)'/
+const propertyDelimiter = /:(.+)/
 const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
 const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
 

packages/core/src/platform/createApp.ios.js

@@ -49,7 +49,6 @@ export default function createApp (option, config = {}) {
       component: item
     })
   })
-  global.__navigationRef = navigationRef
   global.__mpxOptionsMap = global.__mpxOptionsMap || {}
   const onStateChange = () => {
     if (global.__navigationHelper.lastSuccessCallback) {
@@ -81,7 +80,6 @@ export default function createApp (option, config = {}) {
         referrerInfo: {}
       }
       global.__mpxEnterOptions = options
-      // todo relaunch时会重复执行，需check
       defaultOptions.onLaunch && defaultOptions.onLaunch.call(instance, options)
     }, [])
     return createElement(NavigationContainer,
@@ -101,4 +99,13 @@ export default function createApp (option, config = {}) {
   global.getApp = function () {
     return appData
   }
+  global.getCurrentPages = function () {
+    const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
+    if (navigation) {
+      return navigation.getState().routes.map((route) => {
+        return global.__mpxPagesMap[route.key] && global.__mpxPagesMap[route.key][0]
+      }).filter(item => item)
+    }
+    return []
+  }
 }

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -3,14 +3,10 @@ import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
-import { BEFOREUPDATE, UPDATED } from '../../../core/innerLifecycle'
+import { BEFOREUPDATE, UPDATED, ONLOAD } from '../../../core/innerLifecycle'
 import mergeOptions from '../../../core/mergeOptions'
 import { queueJob } from '../../../observer/scheduler'
 
-function getNativeComponent (tagName) {
-  return getByPath(ReactNative, tagName)
-}
-
 function getRootProps (props) {
   const rootProps = {}
   for (const key in props) {
@@ -39,12 +35,15 @@ function createEffect (proxy, components, props) {
     proxy.onStoreChange && proxy.onStoreChange()
   }
   update.id = proxy.uid
+  const getComponent = (tagName) => {
+    return components[tagName] || getByPath(ReactNative, tagName)
+  }
   proxy.effect = new ReactiveEffect(() => {
-    return proxy.target.__injectedRender(createElement, components, getNativeComponent, getRootProps(props))
+    return proxy.target.__injectedRender(createElement, getComponent, getRootProps(props))
   }, () => queueJob(update), proxy.scope)
 }
 
-function createInstance ({ propsRef, ref, type, rawOptions, currentInject, validProps, components }) {
+function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, components }) {
   const instance = Object.create({
     setData (data, callback) {
       return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
@@ -62,7 +61,7 @@ function createInstance ({ propsRef, ref, type, rawOptions, currentInject, valid
       return propsData
     },
     __getSlot (name) {
-      const { children } = propsRef.current || {}
+      const { children } = propsRef.current
       if (children) {
         const result = []
         if (Array.isArray(children)) {
@@ -165,8 +164,20 @@ function createInstance ({ propsRef, ref, type, rawOptions, currentInject, valid
     }
   })
 
+  const props = propsRef.current
+
+  if (type === 'page') {
+    instance.route = props.route.name
+    global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
+  }
+
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
+
+  if (type === 'page') {
+    proxy.callHook(ONLOAD, [props.route.params])
+  }
+
   Object.assign(proxy, {
     onStoreChange: null,
     // eslint-disable-next-line symbol-description
@@ -198,15 +209,15 @@ function createInstance ({ propsRef, ref, type, rawOptions, currentInject, valid
 
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
-  const components = currentInject.getComponents() || {}
+  const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
   const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
   const defaultOptions = memo(forwardRef((props, ref) => {
     const instanceRef = useRef(null)
     const propsRef = useRef(props)
     let isFirst = false
     if (!instanceRef.current) {
       isFirst = true
-      instanceRef.current = createInstance({ propsRef, ref, type, rawOptions, currentInject, validProps, components })
+      instanceRef.current = createInstance({ propsRef, type, rawOptions, currentInject, validProps, components })
     }
     const instance = instanceRef.current
     // reset instance
@@ -239,6 +250,9 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       proxy.mounted()
       return () => {
         proxy.unmounted()
+        if (type === 'page') {
+          delete global.__mpxPagesMap[props.route.key]
+        }
       }
     }, [])
 
@@ -250,7 +264,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   if (type === 'page') {
     const { Provider } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
-    const Page = ({ navigation }) => {
+    const Page = ({ navigation, route }) => {
       useLayoutEffect(() => {
         navigation.setOptions({
           headerTitle: pageConfig.navigationBarTitleText || '',
@@ -260,17 +274,17 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           headerTintColor: pageConfig.navigationBarTextStyle || 'white'
         })
       }, [])
+
       return createElement(Provider,
         null,
-        createElement(ReactNative.ScrollView,
+        createElement(ReactNative.View,
           {
             style: {
               ...ReactNative.StyleSheet.absoluteFillObject,
               backgroundColor: pageConfig.backgroundColor || '#ffffff'
-            },
-            showsVerticalScrollIndicator: false
+            }
           },
-          createElement(defaultOptions)
+          createElement(defaultOptions, { navigation, route, pageConfig })
         )
       )
     }

packages/fetch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/fetch",
-  "version": "2.9.41-react.0",
+  "version": "2.9.41",
   "description": "mpx fetch lib",
   "author": "donghongping",
   "license": "Apache-2.0",

packages/pinia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/pinia",
-  "version": "2.9.41-react.0",
+  "version": "2.9.41",
   "description": "A pinia style store in miniprogram",
   "types": "@types/index.d.ts",
   "main": "src/index.js",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@mpxjs/utils": "^2.9.41-react.0"
+    "@mpxjs/utils": "^2.9.41"
   },
   "peerDependencies": {
     "@mpxjs/core": "^2.9.0",

packages/size-report/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/size-report",
-  "version": "2.9.26",
+  "version": "2.9.41",
   "description": "mpx size report plugin",
   "main": "src/index.js",
   "scripts": {