@mpxjs/webpack-plugin 2.10.7 → 2.10.8

package/lib/react/processJSON.js

@@ -8,11 +8,15 @@ const addQuery = require('../utils/add-query')
 const parseComponent = require('../parser')
 const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
+const { transSubpackage } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
+const mpxViewPath = normalize.lib('runtime/components/react/dist/mpx-view.jsx')
+const mpxTextPath = normalize.lib('runtime/components/react/dist/mpx-text.jsx')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -133,6 +137,45 @@ module.exports = function (jsonContent, {
     isShow: true
   }
 
+  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
+    const componentPlaceholder = jsonObj.componentPlaceholder || {}
+    if (componentPlaceholder[name]) return
+    componentPlaceholder[name] = placeholder
+    jsonObj.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry && !jsonObj.usingComponents[placeholder]) jsonObj.usingComponents[placeholder] = placeholderEntry
+  }
+
+  const fillInComponentsMap = (name, entry, tarRoot) => {
+    const { resource, outputPath } = entry
+    const { resourcePath } = parseRequest(resource)
+    tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+    componentsMap[resourcePath] = outputPath
+    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+    localComponentsMap[name] = {
+      resource: addQuery(resource, {
+        isComponent: true,
+        outputPath
+      }),
+      async: tarRoot
+    }
+  }
+
+  const normalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      const placeholderMap = mode === 'ali'
+        ? {
+          view: { name: 'mpx-view', resource: mpxViewPath },
+          text: { name: 'mpx-text', resource: mpxTextPath }
+        }
+        : {}
+      placeholder = placeholderMap[placeholder] || { name: placeholder }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    return placeholder
+  }
+
   const processTabBar = (tabBar, callback) => {
     if (tabBar) {
       tabBar = Object.assign({}, defaultTabbar, tabBar)
@@ -247,7 +290,7 @@ module.exports = function (jsonContent, {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
           if (pageKeySet.has(key)) return callback()
           pageKeySet.add(key)
-          const { resourcePath, queryObj } = parseRequest(resource)
+          const { resourcePath } = parseRequest(resource)
           if (localPagesMap[outputPath]) {
             const { resourcePath: oldResourcePath } = parseRequest(localPagesMap[outputPath].resource)
             if (oldResourcePath !== resourcePath) {
@@ -259,9 +302,11 @@ module.exports = function (jsonContent, {
 
           pagesMap[resourcePath] = outputPath
           loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
+          // 通过asyncSubPackagesNameRules对tarRoot进行修改，仅修改tarRoot，不修改outputPath页面路径
+          tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
           localPagesMap[outputPath] = {
             resource: addQuery(resource, { isPage: true }),
-            async: queryObj.async || tarRoot,
+            async: tarRoot,
             isFirst
           }
           callback()
@@ -301,19 +346,35 @@ module.exports = function (jsonContent, {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          const { resourcePath, queryObj } = parseRequest(resource)
-          componentsMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-          localComponentsMap[name] = {
-            resource: addQuery(resource, {
-              isComponent: true,
-              outputPath
-            }),
-            async: queryObj.async || tarRoot
+          fillInComponentsMap(name, entry, tarRoot)
+          const { relativePath } = entry
+
+          if (tarRoot) {
+            if (placeholder) {
+              placeholder = normalizePlaceholder(placeholder)
+              if (placeholder.resource) {
+                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
+                  if (err) return callback(err)
+                  fillInComponentPlaceholder(name, placeholder.name, entry)
+                  fillInComponentsMap(placeholder.name, entry, '')
+                  callback()
+                })
+              } else {
+                fillInComponentPlaceholder(name, placeholder.name)
+                callback()
+              }
+            } else {
+              if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
+                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+                emitError(errMsg)
+              }
+              callback()
+            }
+          } else {
+            callback()
           }
-          callback()
         })
       }, callback)
     } else {

package/lib/react/processScript.js

@@ -13,6 +13,7 @@ module.exports = function (script, {
   builtInComponentsMap,
   localComponentsMap,
   localPagesMap,
+  rnConfig,
   componentGenerics,
   genericsInfo
 }, callback) {
@@ -34,12 +35,13 @@ module.exports = function (script, {
   let output = '/* script */\n'
   if (ctorType === 'app') {
     output += `
-import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 \n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
     const componentsMap = buildComponentsMap({
       localComponentsMap,
@@ -50,9 +52,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {
-    // RN环境暂不支持异步加载
-    // output += 'import { lazy } from \'react\'\n'
-    output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+    output += `import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
     // 获取组件集合
     const componentsMap = buildComponentsMap({
       localComponentsMap,
@@ -61,7 +61,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
       jsonConfig
     })
 
-    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics })
+    output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   }

package/lib/react/script-helper.js

@@ -3,30 +3,71 @@ const createHelpers = require('../helpers')
 const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
+const addQuery = require('../utils/add-query')
+const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
 
-// function getAsyncChunkName (chunkName) {
-//   if (chunkName && typeof chunkName !== 'boolean') {
-//     return `/* webpackChunkName: "${chunkName}" */`
-//   }
-//   return ''
+function getBuiltInComponentRequest (component) {
+  return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
+}
+
+function getAsyncChunkName (chunkName) {
+  if (chunkName && typeof chunkName !== 'boolean') {
+    return `/* webpackChunkName: "${chunkName}/index" */`
+  }
+  return ''
+}
+
+function getAsyncSuspense (type, moduleId, componentRequest, componentName, chunkName, fallback, loading) {
+  return `getAsyncSuspense({
+  type: ${JSON.stringify(type)},
+  moduleId: ${JSON.stringify(moduleId)},
+  chunkName: ${JSON.stringify(chunkName)},
+  loading: ${loading},
+  fallback: ${fallback},
+  getChildren () {
+    return import(${getAsyncChunkName(chunkName)}${componentRequest}).then(function (res) {
+      return getComponent(res, {displayName: ${JSON.stringify(componentName)}})
+    })
+  }
+})`
+}
+
+function getComponent (componentRequest, componentName) {
+  return `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
+}
+
+function getBuiltInComponent (componentRequest) {
+  return `getComponent(require(${componentRequest}), {__mpxBuiltIn: true})`
+}
+
+// function getLazyPage (componentRequest) {
+//   return `getLazyPage(${getComponentGetter(getComponent(componentRequest, 'Page'))})`
 // }
 
-function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
+function getComponentGetter (component) {
+  return `function(){ return ${component} }`
+}
+
+function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig }) {
   let firstPage = ''
   const pagesMap = {}
+  const mpx = loaderContext.getMpx()
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    // if (pageCfg.async) {
-    //   pagesMap[pagePath] = `lazy(function(){return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){return getComponent(res, {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})})})`
-    // } else {
-    // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
-    pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
-    // }
+    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))
+    } else {
+      // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
+      pagesMap[pagePath] = getComponentGetter(getComponent(pageRequest, 'Page'))
+    }
     if (pagePath === jsonConfig.entryPagePath) {
       firstPage = pagePath
     }
@@ -42,30 +83,58 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig }) {
 
 function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
   const componentsMap = {}
+  const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      // RN中暂不支持异步加载
-      // if (componentCfg.async) {
-      //   componentsMap[componentName] = `lazy(function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res, {displayName: ${JSON.stringify(componentName)}})})})`
-      // } else {
-      componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
-      // }
+      if (componentCfg.async) {
+        const moduleId = mpx.getModuleId(componentCfg.resource)
+        const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
+        let fallback
+        if (placeholder) {
+          if (localComponentsMap[placeholder]) {
+            const placeholderCfg = localComponentsMap[placeholder]
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
+            if (placeholderCfg.async) {
+              loaderContext.emitWarning(
+                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+              )
+            }
+            fallback = getComponent(placeholderRequest, placeholder)
+          } else {
+            const tag = `mpx-${placeholder}`
+            if (isBuildInReactTag(tag)) {
+              fallback = getBuiltInComponent(getBuiltInComponentRequest(tag))
+            } else {
+              loaderContext.emitError(
+                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
+              )
+            }
+          }
+        } else {
+          loaderContext.emitError(
+            new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
+          )
+        }
+        componentsMap[componentName] = getComponentGetter(getAsyncSuspense('component', moduleId, componentRequest, componentName, componentCfg.async, fallback))
+      } else {
+        componentsMap[componentName] = getComponentGetter(getComponent(componentRequest, componentName))
+      }
     })
   }
   if (builtInComponentsMap) {
     Object.keys(builtInComponentsMap).forEach((componentName) => {
       const componentCfg = builtInComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      componentsMap[componentName] = `getComponent(require(${componentRequest}), {__mpxBuiltIn: true})`
+      componentsMap[componentName] = getComponentGetter(getBuiltInComponent(componentRequest))
     })
   }
   return componentsMap
 }
 
 function getRequireScript ({ script, ctorType, loaderContext }) {
-  let content = '  /** script content **/\n'
+  let content = '/** script content **/\n'
   const { getRequire } = createHelpers(loaderContext)
   const { resourcePath, queryObj } = parseRequest(loaderContext.resource)
   const extraOptions = {
@@ -75,7 +144,7 @@ function getRequireScript ({ script, ctorType, loaderContext }) {
     ctorType,
     lang: script.lang || 'js'
   }
-  content += `  ${getRequire('script', script, extraOptions)}\n`
+  content += `${getRequire('script', script, extraOptions)}\n`
   return content
 }
 
@@ -104,17 +173,11 @@ global.__mpxOptionsMap = {}
 global.__mpxPagesMap = {}
 global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
 global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-global.__getAppComponents = function () {
-  return ${shallowStringify(componentsMap)}
-}
-global.currentInject.getPages = function () {
-  return ${shallowStringify(pagesMap)}
-}
+global.__appComponentsMap = ${shallowStringify(componentsMap)}
+global.__preloadRule = ${JSON.stringify(jsonConfig.preloadRule)}
+global.currentInject.pagesMap = ${shallowStringify(pagesMap)}
 global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
   } else {
-    if (!hasApp) {
-      content += '  global.__mpxGenericsMap = global.__mpxGenericsMap || {}\n'
-    }
     if (ctorType === 'page') {
       const pageConfig = Object.assign({}, jsonConfig)
       delete pageConfig.usingComponents
@@ -122,19 +185,15 @@ global.currentInject.firstPage = ${JSON.stringify(firstPage)}\n`
     }
 
     content += `
-
-    function getComponents() {
-      return ${shallowStringify(componentsMap)}
-    }
-
-    global.currentInject.getComponents = getComponents\n`
+var componentsMap = ${shallowStringify(componentsMap)}
+global.currentInject.componentsMap = componentsMap\n`
     if (genericsInfo) {
+      if (!hasApp) {
+        content += 'global.__mpxGenericsMap = global.__mpxGenericsMap || {}\n'
+      }
       content += `
-        const genericHash = ${JSON.stringify(genericsInfo.hash)}\n
-        global.__mpxGenericsMap[genericHash] = function (name) {
-          return getComponents()[name]
-        }
-      \n`
+const genericHash = ${JSON.stringify(genericsInfo.hash)}\n
+global.__mpxGenericsMap[genericHash] = componentsMap\n`
     }
     if (ctorType === 'component') {
       content += `global.currentInject.componentPath = '/' + ${JSON.stringify(outputPath)}\n`

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

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

package/lib/runtime/components/react/dist/context.js

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

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

@@ -0,0 +1,135 @@
+import { useState, useEffect, useCallback, useRef, createElement } from 'react';
+import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import FastImage from '@d11/react-native-fast-image';
+const asyncChunkMap = new Map();
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        backgroundColor: '#fff'
+    },
+    loadingImage: {
+        width: 100,
+        height: 100,
+        marginTop: 220,
+        alignSelf: 'center'
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    },
+    errorImage: {
+        marginTop: 80,
+        width: 220,
+        aspectRatio: 1,
+        alignSelf: 'center'
+    },
+    errorText: {
+        fontSize: 16,
+        textAlign: 'center',
+        color: '#333',
+        marginBottom: 20
+    },
+    retryButton: {
+        position: 'absolute',
+        bottom: 54,
+        left: 20,
+        right: 20,
+        backgroundColor: '#fff',
+        paddingVertical: 15,
+        borderRadius: 30,
+        marginTop: 40,
+        borderWidth: 1,
+        borderColor: '#FF5F00'
+    },
+    retryButtonText: {
+        color: '#FF5F00',
+        fontSize: 16,
+        fontWeight: '500',
+        textAlign: 'center'
+    }
+});
+const DefaultFallback = ({ onReload }) => {
+    return (<View style={styles.container}>
+      <Image source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png'
+        }} style={styles.errorImage} resizeMode="contain"/>
+      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
+      <TouchableOpacity style={styles.retryButton} onPress={onReload} activeOpacity={0.7}>
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>);
+};
+const DefaultLoading = () => {
+    return (<View style={styles.container}>
+      <FastImage style={styles.loadingImage} source={{
+            uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'
+        }} resizeMode={FastImage.resizeMode.contain}></FastImage>
+    </View>);
+};
+const AsyncSuspense = ({ type, innerProps, chunkName, moduleId, loading, fallback, getChildren }) => {
+    const [status, setStatus] = useState('pending');
+    const chunkLoaded = asyncChunkMap.has(moduleId);
+    const loadChunkPromise = useRef(null);
+    const reloadPage = useCallback(() => {
+        setStatus('pending');
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        if (!chunkLoaded && status === 'pending') {
+            if (loadChunkPromise.current) {
+                loadChunkPromise
+                    .current.then((res) => {
+                    if (cancelled)
+                        return;
+                    asyncChunkMap.set(moduleId, res);
+                    setStatus('loaded');
+                })
+                    .catch((e) => {
+                    if (cancelled)
+                        return;
+                    if (type === 'component') {
+                        global.onLazyLoadError({
+                            type: 'subpackage',
+                            subpackage: [chunkName],
+                            errMsg: `loadSubpackage: ${e.type}`
+                        });
+                    }
+                    loadChunkPromise.current = null;
+                    setStatus('error');
+                });
+            }
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [status]);
+    if (chunkLoaded) {
+        const Comp = asyncChunkMap.get(moduleId);
+        return createElement(Comp, innerProps);
+    }
+    else if (status === 'error') {
+        if (type === 'page') {
+            fallback = fallback || DefaultFallback;
+            return createElement(fallback, { onReload: reloadPage });
+        }
+        else {
+            return fallback ? createElement(fallback, innerProps) : null;
+        }
+    }
+    else {
+        if (!loadChunkPromise.current) {
+            loadChunkPromise.current = getChildren();
+        }
+        if (type === 'page') {
+            return createElement(loading || DefaultLoading);
+        }
+        else {
+            return fallback ? createElement(fallback, innerProps) : null;
+        }
+    }
+};
+AsyncSuspense.displayName = 'MpxAsyncSuspense';
+export default AsyncSuspense;

package/lib/runtime/components/react/dist/mpx-button.jsx

@@ -35,7 +35,7 @@
  * ✔ bindtap
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
@@ -104,7 +104,7 @@ const timer = (data, time = 3000) => new Promise((resolve) => {
     }, time);
 });
 const Loading = ({ alone = false }) => {
-    const image = useRef(new Animated.Value(0)).current;
+    const image = useAnimatedValue(0);
     const rotate = image.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg']

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

@@ -41,7 +41,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -449,11 +449,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         })
             .withRef(movableGestureRef);
-        if (direction === 'horizontal') {
-            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
-        }
-        else if (direction === 'vertical') {
-            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        if (!disableEventPassthrough) {
+            if (direction === 'horizontal') {
+                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+            }
+            else if (direction === 'vertical') {
+                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+            }
         }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);