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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.17-beta.6",
+  "version": "2.10.17-unocss.1",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,14 +19,14 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.17-beta.0",
+    "@mpxjs/utils": "^2.10.17",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
   "peerDependencies": {
     "@d11/react-native-fast-image": "*",
-    "@mpxjs/api-proxy": "^2.10.17-beta.0",
-    "@mpxjs/store": "^2.10.0",
+    "@mpxjs/api-proxy": "^2.9.0",
+    "@mpxjs/store": "^2.9.0",
     "@react-navigation/native": "*",
     "@react-navigation/native-stack": "*",
     "react": "*",

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

@@ -101,35 +101,6 @@ 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
 }
@@ -244,6 +215,58 @@ 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: {
@@ -255,70 +278,73 @@ 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)
-        // 使用一下 __getSizeCount 触发其 get
-        this.__getSizeCount()
+
+        const { mergeToLayer, genResult } = createLayer(isNativeStaticStyle)
+
+         this.__getSizeCount()
 
         if (staticClass || dynamicClass) {
-          // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
-          const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
+
+          let needAddUnoPreflight = false
 
           classString.split(/\s+/).forEach((className) => {
-            let localStyle, appStyle
+            let localStyle, appStyle, unoStyle, unoVarStyle
             if (localStyle = this.__getClassStyle?.(className)) {
               if (localStyle._media?.length) {
-                mergeResult(localStyle._default, getMediaStyle(localStyle._media))
+                mergeToLayer(localStyle._layer || 'normal', localStyle._default, getMediaStyle(localStyle._media))
               } else {
-                mergeResult(localStyle)
+                mergeToLayer(localStyle._layer || 'normal', 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) {
-                mergeResult(appStyle._default, getMediaStyle(appStyle._media))
+                mergeToLayer(appStyle._layer || 'app', appStyle._default, getMediaStyle(appStyle._media))
               } else {
-                mergeResult(appStyle)
+                mergeToLayer(appStyle._layer || 'app', appStyle)
               }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
-              mergeResult(this.__props[className])
+              mergeToLayer('normal', this.__props[className])
             }
           })
+
+          if (needAddUnoPreflight) {
+            mergeToLayer('preflight', global.__getAppClassStyle?.('__uno_preflight'))
+          }
         }
 
         if (staticStyle || dynamicStyle) {
           const styleObj = {}
           if (isNativeStaticStyle) {
             if (Array.isArray(staticStyle)) {
-              result = result.concat(staticStyle)
+              mergeToLayer('normal', ...staticStyle)
             } else {
-              mergeResult(staticStyle)
+              mergeToLayer('normal', staticStyle)
             }
           } else {
             Object.assign(styleObj, parseStyleText(staticStyle))
           }
           Object.assign(styleObj, normalizeDynamicStyle(dynamicStyle))
-          mergeResult(transformStyleObj(styleObj))
+          mergeToLayer('normal', transformStyleObj(styleObj))
         }
 
         if (hide) {
-          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'
-          })
+          mergeToLayer('important', HIDE_STYLE)
         }
+
+        const result = genResult()
+
         const isEmpty = isNativeStaticStyle ? !result.length : isEmptyObject(result)
+
         return isEmpty ? empty : result
       }
     }

package/src/platform/createApp.ios.js

@@ -76,6 +76,7 @@ export default function createApp (options) {
         return createElement(Stack.Screen, {
           name: key,
           getComponent,
+          initialParams,
           layout: headerLayout
         })
       }
@@ -210,10 +211,6 @@ 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/env/navigationHelper.ios.js

@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
@@ -11,5 +11,6 @@ export {
   GestureHandlerRootView,
   PortalHost,
   SafeAreaProvider,
-  useSafeAreaInsets
+  useSafeAreaInsets,
+  initialWindowMetrics
 }

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

@@ -9,14 +9,13 @@ import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC
 import mergeOptions from '../../core/mergeOptions'
 import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import MpxKeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view'
 import {
   IntersectionObserverContext,
   KeyboardAvoidContext,
   ProviderContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { PortalHost, useSafeAreaInsets, initialWindowMetrics } from '../env/navigationHelper'
 import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
 function getSystemInfo () {
@@ -295,17 +294,13 @@ 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) {
@@ -315,10 +310,11 @@ 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 = Object.assign({}, loadParams, props.route.params || {})
+    const rawQuery = props.route.params || {}
     if (isObject(rawQuery)) {
       for (const key in rawQuery) {
         decodedQuery[key] = decodeURIComponent(rawQuery[key])
@@ -509,7 +505,17 @@ function getLayoutData (headerHeight) {
   // 在横屏状态下 screen.height = window.height + bottomVirtualHeight
   // 在正常状态   screen.height =  window.height + bottomVirtualHeight + statusBarHeight
   const isLandscape = screenDimensions.height < screenDimensions.width
-  const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  let bottomVirtualHeight = 0
+  if (ReactNative.Platform.OS === 'android') {
+    if (isLandscape) {
+      bottomVirtualHeight = screenDimensions.height - windowDimensions.height
+    } else {
+      bottomVirtualHeight = initialWindowMetrics?.insets?.bottom || 0
+      if (typeof mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight === 'function') {
+        bottomVirtualHeight = mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight() || 0
+      }
+    }
+  }
   return {
     left: 0,
     top: headerHeight,
@@ -552,6 +558,8 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
+      if (currentPageConfig.disableKeyboardAvoiding) return element
+      const MpxKeyboardAvoidingView = require('@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view').default
       return createElement(KeyboardAvoidContext.Provider,
         {
           value: keyboardAvoidRef
@@ -572,36 +580,36 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
     return withKeyboardAvoidingView(
-        createElement(ReactNative.View,
+      createElement(ReactNative.View,
+        {
+          style: {
+            flex: 1,
+            // 页面容器背景色
+            backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
+            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+            overflow: 'hidden'
+          }
+        },
+        createElement(RouteContext.Provider,
+          {
+            value: routeContextValRef.current
+          },
+          createElement(IntersectionObserverContext.Provider,
             {
-              style: {
-                flex: 1,
-                // 页面容器背景色
-                backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
-                // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-                overflow: 'hidden'
-              }
+              value: intersectionObservers.current
             },
-            createElement(RouteContext.Provider,
-                {
-                  value: routeContextValRef.current
-                },
-                createElement(IntersectionObserverContext.Provider,
-                    {
-                      value: intersectionObservers.current
-                    },
-                    createElement(PortalHost,
-                        null,
-                        createElement(WrappedComponent, {
-                          ...props,
-                          navigation,
-                          route,
-                          id: currentPageId
-                        })
-                    )
-                )
+            createElement(PortalHost,
+              null,
+              createElement(WrappedComponent, {
+                ...props,
+                navigation,
+                route,
+                id: currentPageId
+              })
             )
+          )
         )
+      )
     )
   }
 }