@mpxjs/core 2.10.17-unocss.1 → 2.10.18-beta.1

package/@types/index.d.ts

@@ -115,7 +115,7 @@ interface Context {
   refs: ObjectOf<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>
   asyncRefs: ObjectOf<Promise<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>>
 
-  forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  forceUpdate (data?: object): void
 
   selectComponent: ReplaceWxComponentIns['selectComponent']
   selectAllComponents: ReplaceWxComponentIns['selectAllComponents']
@@ -204,7 +204,7 @@ export interface MpxComponentIns {
 
   $watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
-  $forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
+  $forceUpdate (data?: object): void
 
   $nextTick (fn: () => void): void
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.17-unocss.1",
+  "version": "2.10.18-beta.1",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.17",
+    "@mpxjs/utils": "^2.10.18",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -101,6 +101,35 @@ function formatValue (value, unitType) {
 
 global.__formatValue = formatValue
 
+const escapeReg = /[()[\]{}#!.:,%'"+$]/g
+const escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '}': '_cr_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  '\'': '_q_',
+  '"': '_dq_',
+  '+': '_a_',
+  $: '_si_'
+}
+
+const mpEscape = cached((str) => {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // unknown escaped
+    return '_u_'
+  })
+})
+
 function concat (a = '', b = '') {
   return a ? b ? (a + ' ' + b) : a : b
 }
@@ -215,58 +244,6 @@ function getMediaStyle (media) {
   }, {})
 }
 
-const createLayer = (isNativeStyle) => {
-  const layerMap = {
-    preflight: isNativeStyle ? [] : {},
-    app: isNativeStyle ? [] : {},
-    uno: isNativeStyle ? [] : {},
-    normal: isNativeStyle ? [] : {},
-    important: isNativeStyle ? [] : {}
-  }
-
-  const genResult = () => {
-    if (isNativeStyle) {
-      return [
-        ...layerMap.preflight,
-        ...layerMap.app,
-        ...layerMap.uno,
-        ...layerMap.normal,
-        ...layerMap.important
-      ]
-    } else {
-      return Object.assign({}, layerMap.preflight, layerMap.app, layerMap.uno, layerMap.normal, layerMap.important)
-    }
-  }
-
-  const mergeToLayer = (name, ...classObjs) => {
-    const layer = layerMap[name] || layerMap.normal
-    return isNativeStyle ? layer.push(...classObjs) : Object.assign(layer, ...classObjs)
-  }
-
-  return {
-    mergeToLayer,
-    layerMap,
-    genResult
-  }
-}
-
-const HIDE_STYLE = {
-  // display: 'none'
-  // RN下display:'none'容易引发未知异常问题，使用布局样式模拟
-  flex: 0,
-  height: 0,
-  width: 0,
-  paddingTop: 0,
-  paddingRight: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  marginTop: 0,
-  marginRight: 0,
-  marginBottom: 0,
-  marginLeft: 0,
-  overflow: 'hidden'
-}
-
 export default function styleHelperMixin () {
   return {
     methods: {
@@ -278,73 +255,70 @@ export default function styleHelperMixin () {
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
+        let result = isNativeStaticStyle ? [] : {}
+        const mergeResult = isNativeStaticStyle ? (...args) => result.push(...args) : (...args) => Object.assign(result, ...args)
 
-        const { mergeToLayer, genResult } = createLayer(isNativeStaticStyle)
-
-         this.__getSizeCount()
+        this.__getSizeCount()
 
         if (staticClass || dynamicClass) {
-          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
-
-          let needAddUnoPreflight = false
+          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
+          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
 
           classString.split(/\s+/).forEach((className) => {
-            let localStyle, appStyle, unoStyle, unoVarStyle
+            let localStyle, appStyle
             if (localStyle = this.__getClassStyle?.(className)) {
               if (localStyle._media?.length) {
-                mergeToLayer(localStyle._layer || 'normal', localStyle._default, getMediaStyle(localStyle._media))
+                mergeResult(localStyle._default, getMediaStyle(localStyle._media))
               } else {
-                mergeToLayer(localStyle._layer || 'normal', localStyle)
+                mergeResult(localStyle)
               }
-            } else if (unoStyle = global.__getUnoStyle(className)) {
-                if (unoStyle._media?.length) {
-                  mergeToLayer(unoStyle.__layer || 'uno', unoStyle._default, getMediaStyle(unoStyle._media))
-                } else {
-                  mergeToLayer(unoStyle.__layer || 'uno', unoStyle)
-                }
-                if (unoStyle.transform || unoStyle.filter) needAddUnoPreflight = true
-            } else if (unoVarStyle = global.__getUnoVarStyle(className)) {
-                mergeToLayer('important', unoVarStyle)
             } else if (appStyle = global.__getAppClassStyle?.(className)) {
               if (appStyle._media?.length) {
-                mergeToLayer(appStyle._layer || 'app', appStyle._default, getMediaStyle(appStyle._media))
+                mergeResult(appStyle._default, getMediaStyle(appStyle._media))
               } else {
-                mergeToLayer(appStyle._layer || 'app', appStyle)
+                mergeResult(appStyle)
               }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
-              mergeToLayer('normal', this.__props[className])
+              mergeResult(this.__props[className])
             }
           })
-
-          if (needAddUnoPreflight) {
-            mergeToLayer('preflight', global.__getAppClassStyle?.('__uno_preflight'))
-          }
         }
 
         if (staticStyle || dynamicStyle) {
           const styleObj = {}
           if (isNativeStaticStyle) {
             if (Array.isArray(staticStyle)) {
-              mergeToLayer('normal', ...staticStyle)
+              result = result.concat(staticStyle)
             } else {
-              mergeToLayer('normal', staticStyle)
+              mergeResult(staticStyle)
             }
           } else {
             Object.assign(styleObj, parseStyleText(staticStyle))
           }
           Object.assign(styleObj, normalizeDynamicStyle(dynamicStyle))
-          mergeToLayer('normal', transformStyleObj(styleObj))
+          mergeResult(transformStyleObj(styleObj))
         }
 
         if (hide) {
-          mergeToLayer('important', HIDE_STYLE)
+          mergeResult({
+            // display: 'none'
+            // RN下display:'none'容易引发未知异常问题，使用布局样式模拟
+            flex: 0,
+            height: 0,
+            width: 0,
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            marginTop: 0,
+            marginRight: 0,
+            marginBottom: 0,
+            marginLeft: 0,
+            overflow: 'hidden'
+          })
         }
-
-        const result = genResult()
-
         const isEmpty = isNativeStaticStyle ? !result.length : isEmptyObject(result)
-
         return isEmpty ? empty : result
       }
     }

package/src/platform/createApp.ios.js

@@ -76,7 +76,6 @@ export default function createApp (options) {
         return createElement(Stack.Screen, {
           name: key,
           getComponent,
-          initialParams,
           layout: headerLayout
         })
       }
@@ -211,6 +210,10 @@ export default function createApp (options) {
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
+    if (!global.__mpxAppHotLaunched) {
+      global.__mpxInitialRouteName = initialRouteName
+      global.__mpxInitialRunParams = initialParams
+    }
     const navScreenOpts = {
       headerShown: false,
       statusBarTranslucent: Mpx.config.rnConfig.statusBarTranslucent ?? true,

package/src/platform/patch/getDefaultOptions.ios.js

@@ -17,6 +17,7 @@ import {
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 import { PortalHost, useSafeAreaInsets, initialWindowMetrics } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
+import Mpx from '../../index'
 
 function getSystemInfo () {
   const windowDimensions = global.__mpxAppDimensionsInfo.window
@@ -294,13 +295,17 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       instance[key] = method.bind(instance)
     })
   }
-
+  const loadParams = {}
   if (type === 'page') {
     const props = propsRef.current
     instance.route = props.route.name
     global.__mpxPagesMap = global.__mpxPagesMap || {}
     global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
     setFocusedNavigation(props.navigation)
+
+    if (!global.__mpxAppHotLaunched && global.__mpxInitialRunParams) {
+      Object.assign(loadParams, global.__mpxInitialRunParams)
+    }
     set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)
     // App onLaunch 在 Page created 之前执行
     if (!global.__mpxAppHotLaunched && global.__mpxAppOnLaunch) {
@@ -310,11 +315,10 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
-
   if (type === 'page') {
     const props = propsRef.current
     const decodedQuery = {}
-    const rawQuery = props.route.params || {}
+    const rawQuery = Object.assign({}, loadParams, props.route.params || {})
     if (isObject(rawQuery)) {
       for (const key in rawQuery) {
         decodedQuery[key] = decodeURIComponent(rawQuery[key])
@@ -397,7 +401,7 @@ const triggerResizeEvent = (mpxProxy, sizeRef) => {
   }
 }
 
-function usePageEffect (mpxProxy, pageId) {
+function usePageEffect (mpxProxy, pageId, type) {
   const sizeRef = useRef(getSystemInfo())
 
   useEffect(() => {
@@ -414,7 +418,7 @@ function usePageEffect (mpxProxy, pageId) {
             triggerResizeEvent(mpxProxy, sizeRef)
 
             // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
-            if (newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+            if (type === 'page' && newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
               // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
               global.__mpxPageSizeCountMap[pageId] = global.__mpxSizeCount
             }
@@ -426,7 +430,9 @@ function usePageEffect (mpxProxy, pageId) {
     }
     return () => {
       unWatch && unWatch()
-      del(global.__mpxPageSizeCountMap, pageId)
+      if (type === 'page') {
+        del(global.__mpxPageSizeCountMap, pageId)
+      }
     }
   }, [])
 }
@@ -613,6 +619,20 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     )
   }
 }
+
+function updateProps (instance, props, validProps) {
+  Object.keys(validProps).forEach((key) => {
+    if (hasOwn(props, key)) {
+      instance[key] = props[key]
+    } else {
+      const altKey = hump2dash(key)
+      if (hasOwn(props, altKey)) {
+        instance[key] = props[altKey]
+      }
+    }
+  })
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const componentsMap = currentInject.componentsMap
@@ -665,16 +685,14 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
     if (!isFirst) {
       // 处理props更新
-      Object.keys(validProps).forEach((key) => {
-        if (hasOwn(props, key)) {
-          instance[key] = props[key]
-        } else {
-          const altKey = hump2dash(key)
-          if (hasOwn(props, altKey)) {
-            instance[key] = props[altKey]
-          }
-        }
-      })
+      if (Mpx.config.forceFlushSync) {
+        // 避免开启forceFlushSync时react报错：Cannot update a component while rendering a different component
+        Promise.resolve().then(() => {
+          updateProps(instance, props, validProps)
+        })
+      } else {
+        updateProps(instance, props, validProps)
+      }
     }
 
     useEffect(() => {
@@ -684,7 +702,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       }
     })
 
-    usePageEffect(proxy, pageId)
+    usePageEffect(proxy, pageId, type)
     useEffect(() => {
       proxy.mounted()
       return () => {