Merge branch 'master' of https://github.com/didi/mpx

Author: hiyuki

docs-vitepress/guide/rn/style.md

@@ -1369,6 +1369,10 @@ transform: scale(1.2) skewX(10deg);
 /* RN 数组格式，仅 rn 支持 */
 transform: [{translateX: 50}, {rotate: '45deg'}];
 ```
+> [!tip] 注意
+>
+> 1.RN transform 不支持 scaleZ/scale3d/translateZ/translate3d/rotate3d/matrix3d
+> 2.skew/skewX/skewY 在 RN Android 上不生效
 
 ### transform-origin
 

packages/core/src/platform/builtInMixins/pageStatusMixin.js

@@ -1,4 +1,5 @@
 import { CREATED, ONLOAD, ONSHOW, ONHIDE, ONRESIZE } from '../../core/innerLifecycle'
+import { isObject } from '@mpxjs/utils'
 
 export default function pageStatusMixin (mixinType) {
   if (mixinType === 'page') {
@@ -13,7 +14,18 @@ export default function pageStatusMixin (mixinType) {
         this.__mpxProxy.callHook(ONRESIZE, [e])
       },
       onLoad (query) {
-        this.__mpxProxy.callHook(ONLOAD, [query])
+        if (__mpx_mode__ === 'wx') {
+          const loadParams = {}
+          // 此处单独处理微信与其他端保持一致，传入onload的参数都是经过decodeURIComponent处理过的
+          if (isObject(query)) {
+            for (const key in query) {
+              loadParams[key] = decodeURIComponent(query[key])
+            }
+          }
+          this.__mpxProxy.callHook(ONLOAD, [loadParams])
+        } else {
+          this.__mpxProxy.callHook(ONLOAD, [query])
+        }
       }
     }
     if (__mpx_mode__ === 'ali') {

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

@@ -10,7 +10,6 @@ global.__mpxAppDimensionsInfo = {
 global.__mpxSizeCount = 0
 global.__mpxPageSizeCountMap = reactive({})
 
-global.__classCaches = []
 global.__GCC = function (className, classMap, classMapValueCache) {
   if (!classMapValueCache.has(className)) {
     const styleObj = classMap[className]?.()

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

@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn, callWithErrorHandling } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
@@ -70,7 +70,7 @@ export default function createApp (options) {
         )
       }
       const getComponent = () => {
-        return item.displayName ? item : item()
+        return item.displayName ? item : callWithErrorHandling(item, null, 'require page script')
       }
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {

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

@@ -314,14 +314,7 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   if (type === 'page') {
     const props = propsRef.current
-    const loadParams = {}
-    // 此处拿到的props.route.params内属性的value被进行过了一次decode, 不符合预期，此处额外进行一次encode来与微信对齐
-    if (isObject(props.route.params)) {
-      for (const key in props.route.params) {
-        loadParams[key] = encodeURIComponent(props.route.params[key])
-      }
-    }
-    proxy.callHook(ONLOAD, [loadParams])
+    proxy.callHook(ONLOAD, [props.route.params || {}])
   }
 
   Object.assign(proxy, {

packages/webpack-plugin/lib/react/LoadAsyncChunkModule.js

@@ -54,7 +54,7 @@ class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
           ]),
           '}',
           `var timeout = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
-          'var loadChunkAsyncFn = global.__mpx.config.rnConfig && global.__mpx.config.rnConfig.loadChunkAsync',
+          `var loadChunkAsyncFn = ${RuntimeGlobals.global}.__mpx.config.rnConfig && ${RuntimeGlobals.global}.__mpx.config.rnConfig.loadChunkAsync`,
           'try {',
           Template.indent([
             'loadChunkAsyncFn(config).then(callback).catch(callback)'

packages/webpack-plugin/lib/react/processStyles.js

@@ -64,6 +64,7 @@ module.exports = function (styles, {
         }, '')
         if (ctorType === 'app') {
           output += `
+          global.__classCaches = global.__classCaches || []
           const __classCache = new Map()
           global.__classCaches.push(__classCache)
           let __appClassMap
@@ -75,6 +76,7 @@ module.exports = function (styles, {
           };\n`
         } else {
           output += `
+          global.__classCaches = global.__classCaches || []
           const __classCache = new Map()
           global.__classCaches.push(__classCache)
           let __classMap

packages/webpack-plugin/lib/react/style-helper.js

@@ -9,7 +9,14 @@ const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
 function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
-  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
+  const classMap = ctorType === 'page'
+      ? {
+          [MPX_TAG_PAGE_SELECTOR]: {
+            _media: [],
+            _default: { flex: 1, height: "'100%'" }
+          }
+        }
+      : {}
 
   const root = postcss.parse(content, {
     from: filename

packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx

@@ -95,13 +95,15 @@ export interface InputProps {
   'selection-start'?: number
   'selection-end'?: number
   'placeholder-style'?: { color?: string }
-  'enable-offset'?: boolean,
+  'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
-  'adjust-position': boolean,
+  // 只有 RN 环境读取
+  'keyboard-type'?: string
+  'adjust-position': boolean
   'hold-keyboard'?: boolean
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -119,11 +121,11 @@ export interface PrivateInputProps {
 
 type FinalInputProps = InputProps & PrivateInputProps
 
-const keyboardTypeMap: Record<Type, string> = {
-  text: 'default',
+const inputModeMap: Record<Type, string> = {
+  text: 'text',
   number: 'numeric',
-  idcard: 'default',
-  digit: isIOS ? 'decimal-pad' : 'numeric'
+  idcard: 'text',
+  digit: 'decimal'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -151,6 +153,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'adjust-position': adjustPosition = true,
+    'keyboard-type': originalKeyboardType,
     'hold-keyboard': holdKeyboard = false,
     bindinput,
     bindfocus,
@@ -184,7 +187,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     return ''
   }
 
-  const keyboardType = keyboardTypeMap[type]
   const defaultValue = parseValue(value)
   const textAlignVertical = multiline ? 'top' : 'auto'
 
@@ -465,7 +467,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
-        keyboardType: keyboardType,
+        inputMode: originalKeyboardType ? undefined : inputModeMap[type],
+        keyboardType: originalKeyboardType,
         secureTextEntry: !!password,
         defaultValue: defaultValue,
         value: inputValue,

packages/webpack-plugin/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -19,7 +19,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
     setState((prevState) => ({
       portals: [...prevState.portals, { key, children }]
     }))
-  }, [state])
+  }, [])
 
   const update = useCallback((key: number, children: ReactNode) => {
     setState((prevState) => ({
@@ -30,7 +30,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
         return item
       })
     }))
-  }, [state])
+  }, [])
 
   const unmount = useCallback((key: number) => {
     setState((prevState) => ({