@mpxjs/webpack-plugin 2.10.8 → 2.10.10

package/lib/react/script-helper.js

@@ -21,13 +21,13 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function getAsyncSuspense (type, moduleId, componentRequest, componentName, chunkName, fallback, loading) {
+function getAsyncSuspense (type, moduleId, componentRequest, componentName, chunkName, getFallback, getLoading) {
   return `getAsyncSuspense({
   type: ${JSON.stringify(type)},
   moduleId: ${JSON.stringify(moduleId)},
   chunkName: ${JSON.stringify(chunkName)},
-  loading: ${loading},
-  fallback: ${fallback},
+  getFallback: ${getFallback},
+  getLoading: ${getLoading},
   getChildren () {
     return import(${getAsyncChunkName(chunkName)}${componentRequest}).then(function (res) {
       return getComponent(res, {displayName: ${JSON.stringify(componentName)}})
@@ -61,9 +61,9 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
     if (pageCfg.async) {
       const moduleId = mpx.getModuleId(pageCfg.resource)
-      const fallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.fallback, { isComponent: true })), 'PageFallback')
-      const loading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.loading, { isComponent: true })), 'PageLoading')
-      pagesMap[pagePath] = getComponentGetter(getAsyncSuspense('page', moduleId, pageRequest, 'Page', pageCfg.async, fallback, loading))
+      const getFallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.fallback, { isComponent: true })), 'PageFallback'))
+      const getLoading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.loading, { isComponent: true })), 'PageLoading'))
+      pagesMap[pagePath] = getAsyncSuspense('page', moduleId, pageRequest, 'Page', pageCfg.async, getFallback, getLoading)
     } else {
       // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
       pagesMap[pagePath] = getComponentGetter(getComponent(pageRequest, 'Page'))
@@ -91,7 +91,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
       if (componentCfg.async) {
         const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
-        let fallback
+        let getFallback
         if (placeholder) {
           if (localComponentsMap[placeholder]) {
             const placeholderCfg = localComponentsMap[placeholder]
@@ -101,11 +101,11 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
               )
             }
-            fallback = getComponent(placeholderRequest, placeholder)
+            getFallback = getComponentGetter(getComponent(placeholderRequest, placeholder))
           } else {
             const tag = `mpx-${placeholder}`
             if (isBuildInReactTag(tag)) {
-              fallback = getBuiltInComponent(getBuiltInComponentRequest(tag))
+              getFallback = getComponentGetter(getBuiltInComponent(getBuiltInComponentRequest(tag)))
             } else {
               loaderContext.emitError(
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
@@ -117,7 +117,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
             new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
           )
         }
-        componentsMap[componentName] = getComponentGetter(getAsyncSuspense('component', moduleId, componentRequest, componentName, componentCfg.async, fallback))
+        componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentName, componentCfg.async, getFallback)
       } else {
         componentsMap[componentName] = getComponentGetter(getComponent(componentRequest, componentName))
       }

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -69,7 +69,7 @@ const DefaultLoading = () => {
         }} resizeMode={FastImage.resizeMode.contain}></FastImage>
     </View>);
 };
-const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallback, getChildren }) => {
+const AsyncSuspense = ({ type, chunkName, moduleId, innerProps, getLoading, getFallback, getChildren }) => {
     const [status, setStatus] = useState('pending');
     const chunkLoaded = asyncChunkMap.has(moduleId);
     const loadChunkPromise = useRef(null);
@@ -112,11 +112,11 @@ const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallbac
     }
     else if (status === 'error') {
         if (type === 'page') {
-            fallback = fallback || DefaultFallback;
+            const fallback = getFallback ? getFallback() : DefaultFallback;
             return createElement(fallback, { onReload: reloadPage });
         }
         else {
-            return fallback ? createElement(fallback, innerProps) : null;
+            return getFallback ? createElement(getFallback(), innerProps) : null;
         }
     }
     else {
@@ -124,10 +124,11 @@ const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallbac
             loadChunkPromise.current = getChildren();
         }
         if (type === 'page') {
-            return createElement(loading || DefaultLoading);
+            const loading = getLoading ? getLoading() : DefaultLoading;
+            return createElement(loading);
         }
         else {
-            return fallback ? createElement(fallback, innerProps) : null;
+            return getFallback ? createElement(getFallback(), innerProps) : null;
         }
     }
 };

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -34,7 +34,7 @@
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { Animated as RNAnimated } from 'react-native';
 import { isValidElement, Children, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react';
-import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
 import { warn, hasOwn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
@@ -78,7 +78,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasRefresher = refresherContent && refresherEnabled;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
-    const scrollViewRef = useAnimatedRef();
+    const scrollViewRef = useRef(null);
     useNodesRef(props, ref, scrollViewRef, {
         style: normalStyle,
         scrollOffset: scrollOptions,

package/lib/runtime/components/react/dist/utils.jsx

@@ -122,6 +122,8 @@ const selfPercentRule = {
 };
 const parentHeightPercentRule = {
     height: true,
+    minHeight: true,
+    maxHeight: true,
     top: true,
     bottom: true
 };

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -99,8 +99,8 @@ interface AsyncSuspenseProps {
   chunkName: string
   moduleId: string
   innerProps: any,
-  loading?: ComponentType<unknown>
-  fallback?: ComponentType<unknown>
+  getLoading?: () => ComponentType<unknown>
+  getFallback?: () => ComponentType<unknown>
   getChildren: () => Promise<ReactNode>
 }
 
@@ -108,11 +108,11 @@ type ComponentStauts = 'pending' | 'error' | 'loaded'
 
 const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
   type,
-  innerProps,
   chunkName,
   moduleId,
-  loading,
-  fallback,
+  innerProps,
+  getLoading,
+  getFallback,
   getChildren
 }) => {
   const [status, setStatus] = useState<ComponentStauts>('pending')
@@ -158,19 +158,20 @@ const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
     return createElement(Comp, innerProps)
   } else if (status === 'error') {
     if (type === 'page') {
-      fallback = fallback || DefaultFallback
+      const fallback = getFallback ? getFallback() : DefaultFallback
       return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
     } else {
-      return fallback ? createElement(fallback, innerProps) : null
+      return getFallback ? createElement(getFallback(), innerProps) : null
     }
   } else {
     if (!loadChunkPromise.current) {
       loadChunkPromise.current = getChildren()
     }
     if (type === 'page') {
-      return createElement(loading || DefaultLoading)
+      const loading = getLoading ? getLoading() : DefaultLoading
+      return createElement(loading)
     } else {
-      return fallback ? createElement(fallback, innerProps) : null
+      return getFallback ? createElement(getFallback(), innerProps) : null
     }
   }
 }

package/lib/runtime/components/react/mpx-scroll-view.tsx

@@ -34,7 +34,7 @@
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Animated as RNAnimated } from 'react-native'
 import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
-import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
+import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
 import { warn, hasOwn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
@@ -209,7 +209,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
 
-  const scrollViewRef = useAnimatedRef<ScrollView>()
+  const scrollViewRef = useRef<ScrollView>(null)
   useNodesRef(props, ref, scrollViewRef, {
     style: normalStyle,
     scrollOffset: scrollOptions,

package/lib/runtime/components/react/useNodesRef.ts

@@ -1,5 +1,4 @@
 import { useRef, useImperativeHandle, RefObject, ForwardedRef } from 'react'
-import { useAnimatedRef } from 'react-native-reanimated'
 
 type Obj = Record<string, any>
 

package/lib/runtime/components/react/utils.tsx

@@ -156,6 +156,8 @@ const selfPercentRule: Record<string, 'height' | 'width'> = {
 
 const parentHeightPercentRule: Record<string, boolean> = {
   height: true,
+  minHeight: true,
+  maxHeight: true,
   top: true,
   bottom: true
 }
@@ -310,7 +312,7 @@ function parseValues (str: string, char = ' ') {
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 function parseTransform (transformStr: string) {
   const values = parseValues(transformStr)
-  const transform: {[propName: string]: string|number|number[]}[] = []
+  const transform: { [propName: string]: string | number | number[] }[] = []
   values.forEach(item => {
     const match = item.match(/([/\w]+)\((.+)\)/)
     if (match && match.length >= 3) {

package/lib/runtime/optionProcessorReact.d.ts

@@ -18,10 +18,9 @@ interface AsyncSuspenseProps {
   type: 'component' | 'page'
   chunkName: string
   moduleId: string
-  innerProps: any
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
+  getFallback?: () => ComponentType<unknown>
+  getLoading?: () => ComponentType<unknown>
   getChildren: () => Promise<AsyncModule>
 }
 
-export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode
+export function getAsyncSuspense (props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -10,8 +10,9 @@ export function getComponent (component, extendOptions) {
 }
 
 export function getAsyncSuspense (commonProps) {
+  let result
   if (commonProps.type === 'component') {
-    return memo(forwardRef(function (props, ref) {
+    result = memo(forwardRef(function (props, ref) {
       return createElement(AsyncSuspense,
         extend(commonProps, {
           innerProps: Object.assign({}, props, { ref })
@@ -19,14 +20,16 @@ export function getAsyncSuspense (commonProps) {
       )
     }))
   } else {
-    return function (props) {
+    result = memo(function (props) {
       return createElement(AsyncSuspense,
         extend(commonProps, {
           innerProps: props
         })
       )
-    }
+    })
   }
+  result.displayName = 'AsyncSuspenseHOC'
+  return result
 }
 
 export function getLazyPage (getComponent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.8",
+  "version": "2.10.10",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -100,5 +100,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "23f6e6d5fa30e4abdc35e137007edbd38337b36e"
+  "gitHead": "cee4b9ba7c2b455ebb864cbad7d2a8374b2d7308"
 }