@mpxjs/webpack-plugin 2.10.6-beta.4 → 2.10.6-beta.5

package/lib/dependencies/RecordFileUrlDependency.js

@@ -0,0 +1,58 @@
+const path = require('path')
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordFileUrlDependency extends NullDependency {
+  constructor (range, url) {
+    super()
+    this.range = range
+    this.url = url
+  }
+
+  get type () {
+    return 'mpx record file url'
+  }
+
+  mpxAction (module, compilation, callback) {
+    return callback()
+  }
+
+  updateHash (hash, context) {
+    hash.update('' + (+new Date()) + Math.random())
+    super.updateHash(hash, context)
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.url)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.url = read()
+    super.deserialize(context)
+  }
+}
+
+RecordFileUrlDependency.Template = class RecordFileUrlDependencyTemplate {
+  apply (dependency, source, { module, chunkGraph, runtimeTemplate }) {
+    const { range } = dependency
+    const compliation = runtimeTemplate.compilation
+    const publicPath = compliation.outputOptions.publicPath
+    const chunks = chunkGraph.getModuleChunks(module)
+    const chunk = chunks[0]
+    const chunkPath = path.dirname(publicPath + chunk.name)
+    const imgPath = publicPath + dependency.url
+    let relativePath = path.relative(chunkPath, imgPath)
+    if (!relativePath.startsWith('.')) {
+      relativePath = './' + relativePath
+    }
+
+    source.replace(range[0], range[1] - 1, JSON.stringify(relativePath))
+  }
+}
+
+makeSerializable(RecordFileUrlDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordFileUrlDependency')
+
+module.exports = RecordFileUrlDependency

package/lib/file-loader.js

@@ -35,8 +35,9 @@ module.exports = function loader (content, prevOptions) {
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
 
-  // todo 未来添加分包处理后相对地址不一定是./开头的，需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
-  if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`_mpx_rn_img_relative_path_/${url}`)})`
+  if (isRN) {
+    publicPath = `__non_webpack_require__(__mpx_rn_resolve_url_path_(${JSON.stringify(url)}))`
+  }
 
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {

package/lib/index.js

@@ -44,6 +44,7 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
+const RecordFileUrlDependency = require('./dependencies/RecordFileUrlDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -672,6 +673,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
+      compilation.dependencyFactories.set(RecordFileUrlDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordFileUrlDependency, new RecordFileUrlDependency.Template())
+
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -1222,7 +1226,7 @@ class MpxWebpackPlugin {
             if (isWeb(mpx.mode) && !hasOwn(splitChunksOptions.cacheGroups, 'main')) {
               splitChunksOptions.cacheGroups.main = {
                 chunks: 'initial',
-                name: 'bundle/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
+                name: 'lib/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
                 test: /[\\/]node_modules[\\/]/
               }
               needInit = true
@@ -1230,7 +1234,7 @@ class MpxWebpackPlugin {
             if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
               splitChunksOptions.cacheGroups.async = {
                 chunks: 'async',
-                name: 'async/index',
+                name: 'async-common/index',
                 minChunks: 2
               }
               needInit = true
@@ -1333,15 +1337,6 @@ class MpxWebpackPlugin {
       compilation.hooks.processAssets.tap({
         name: 'MpxWebpackPlugin'
       }, (assets) => {
-        if (isReact(mpx.mode)) {
-          Object.keys(assets).forEach((chunkName) => {
-            if (/\.js$/.test(chunkName)) {
-              let val = assets[chunkName].source()
-              val = val.replace(/_mpx_rn_img_relative_path_/g, chunkName === 'app.js' ? '.' : '..')
-              compilation.assets[chunkName] = new RawSource(val)
-            }
-          })
-        }
         try {
           const dynamicAssets = {}
           for (const packageName in mpx.runtimeInfo) {
@@ -1387,6 +1382,15 @@ class MpxWebpackPlugin {
           }
         })
 
+        parser.hooks.call.for('__mpx_rn_resolve_url_path_').tap('MpxWebpackPlugin', (expr) => {
+          const args = expr.arguments.map((i) => i.value)
+          args.unshift(expr.range)
+
+          const dep = new RecordFileUrlDependency(...args)
+          parser.state.current.addPresentationalDependency(dep)
+          return true
+        })
+
         parser.hooks.call.for('__mpx_dynamic_entry__').tap('MpxWebpackPlugin', (expr) => {
           const args = expr.arguments.map((i) => i.value)
           args.unshift(expr.range)

package/lib/react/processScript.js

@@ -36,7 +36,7 @@ module.exports = function (script, {
   output += "import { lazy, createElement, memo, forwardRef } from 'react'\n"
   if (ctorType === 'app') {
     output += `
-import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 \n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
@@ -53,7 +53,7 @@ import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPa
     output += getRequireScript({ ctorType, script, loaderContext })
     output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
   } else {
-    output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+    output += `import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
     // 获取组件集合
     const componentsMap = buildComponentsMap({
       localComponentsMap,

package/lib/react/script-helper.js

@@ -4,7 +4,6 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const addQuery = require('../utils/add-query')
-const path = require('path')
 const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
@@ -15,8 +14,6 @@ function getMpxComponentRequest (component) {
   return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
 }
 
-const mpxAsyncSuspense = getMpxComponentRequest('AsyncSuspense')
-
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
     return `/* webpackChunkName: "${chunkName}/index" */`
@@ -24,49 +21,33 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function getAsyncComponent (componentName, componentRequest, chunkName, fallback) {
-  return `getComponent(memo(forwardRef(function(props, ref) {
-    return createElement(
-      getComponent(require(${mpxAsyncSuspense})),
-      {
-        type: 'component',
-        props: Object.assign({}, props, { ref }),
-        chunkName: ${JSON.stringify(chunkName)},
-        request: ${JSON.stringify(componentRequest)},
-        loading: getComponent(require(${fallback})),
-        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
-      }
-    )
-  })))`
-}
-
-function getAsyncPage (componentName, componentRequest, chunkName, fallback, loading) {
-  fallback = fallback && `getComponent(require('${fallback}?isComponent=true'))`
-  loading = loading && `getComponent(require('${loading}?isComponent=true'))`
-  return `getComponent(function(props) {
-    return createElement(
-      getComponent(require(${mpxAsyncSuspense})),
-      {
-        type: 'page',
-        props: props,
-        chunkName: ${JSON.stringify(chunkName)},
-        request: ${JSON.stringify(componentRequest)},
-        fallback: ${fallback},
-        loading: ${loading},
-        getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
-      }
-    )
-  })`
+function getAsyncSuspense (type, moduleId, componentRequest, chunkName, fallback, loading) {
+  fallback = fallback && `getComponent(require(${fallback}))`
+  loading = loading && `getComponent(require(${loading}))`
+  return `
+    getAsyncSuspense({
+      type: ${JSON.stringify(type)},
+      moduleId: ${JSON.stringify(moduleId)},
+      chunkName: ${JSON.stringify(chunkName)},
+      loading: ${loading},
+      fallback: ${fallback},
+      getChildren: () => import(${getAsyncChunkName(chunkName)}${componentRequest})
+    })
+  `
 }
 
 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] = getAsyncPage(pagePath, pageRequest, pageCfg.async, rnConfig.asyncChunk && rnConfig.asyncChunk.fallback, rnConfig.asyncChunk && rnConfig.asyncChunk.loading)
+      const moduleId = mpx.getModuleId(pageCfg.resource)
+      const fallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && JSON.stringify(addQuery(rnConfig.asyncChunk.fallback, { isComponent: true }))
+      const loading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && JSON.stringify(addQuery(rnConfig.asyncChunk.loading, { isComponent: true }))
+      pagesMap[pagePath] = getAsyncSuspense('page', moduleId, pageRequest, pageCfg.async, fallback, loading)
     } else {
     // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
       pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}, displayName: "Page"})`
@@ -92,6 +73,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
       if (componentCfg.async) {
+        const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
         if (placeholder) {
           if (localComponentsMap[placeholder]) {
@@ -102,11 +84,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
               )
             }
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
-          } else if (mpx.globalComponents[placeholder]) {
-            const { queryObj, rawResourcePath } = parseRequest(mpx.globalComponents[placeholder])
-            const placeholderRequest = JSON.stringify(path.resolve(queryObj.context, rawResourcePath))
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, placeholderRequest)
+            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, placeholderRequest)
           } else {
             const tag = `mpx-${placeholder}`
             if (!isBuildInReactTag(tag)) {
@@ -114,13 +92,13 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
               )
             }
-            componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
+            componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async, getMpxComponentRequest(tag))
           }
         } else {
           loaderContext.emitError(
             new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
           )
-          componentsMap[componentName] = getAsyncComponent(componentName, componentRequest, componentCfg.async)
+          componentsMap[componentName] = getAsyncSuspense('component', moduleId, componentRequest, componentCfg.async)
         }
       } else {
         componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`

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

@@ -1,79 +1,192 @@
-import { useState, ComponentType, useEffect, useCallback, useRef } from 'react'
-import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer'
-import type { DefaultFallbackProps } from './AsyncContainer'
+import { useState, ComponentType, useEffect, useCallback, useRef, ReactNode, createElement } from 'react'
+import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import FastImage from '@d11/react-native-fast-image'
 
 const asyncChunkMap = new Map()
 
-interface props {
+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'
+  }
+})
+
+interface LayoutViewProps {
+  children: ReactNode
+}
+
+interface AsyncModule {
+  __esModule: boolean
+  default: ReactNode
+}
+
+interface DefaultFallbackProps {
+  onReload: () => void
+}
+
+const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
+  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 LayoutView = (props: LayoutViewProps) => {
+  return (
+    <View style={{ flex: 1 }} collapsable={false}>{props.children}</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>
+  )
+}
+
+interface AsyncSuspenseProps {
   type: 'component' | 'page'
   chunkName: string
-  request: string
-  props: any,
+  moduleId: string
+  innerProps: any,
   loading: ComponentType<unknown>
   fallback: ComponentType<unknown>
-  getChildren: () => Promise<unknown>
+  getChildren: () => Promise<AsyncModule>
 }
 
-const AsyncSuspense: React.FC<props> = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
-  const [status, setStatus] = useState('pending')
-  const loaded = asyncChunkMap.has(request)
-  const [, setKey] = useState(0)
-  const chunkPromise = useRef<null | Promise<unknown>>(null)
+type ComponentStauts = 'pending' | 'error' | 'loaded'
+
+const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
+  type,
+  innerProps,
+  chunkName,
+  moduleId,
+  loading,
+  fallback,
+  getChildren
+}) => {
+  const [status, setStatus] = useState<ComponentStauts>('pending')
+  const chunkLoaded = asyncChunkMap.has(moduleId)
+  const loadChunkPromise = useRef<null | Promise<AsyncModule>>(null)
 
   const reloadPage = useCallback(() => {
-    setKey((preV) => preV + 1)
-    console.log('[mpxAsyncSuspense]: reload page')
     setStatus('pending')
   }, [])
 
   useEffect(() => {
-    if (!loaded && status === 'pending') {
-      // todo 清楚副作用？
-      console.log('the current :', chunkPromise.current)
-      chunkPromise.current!
-        .then((m: any) => {
-          console.log('[mpxAsyncSuspense]: load sucess')
-          asyncChunkMap.set(request, m.__esModule ? m.default : m)
-          setStatus('loaded')
-        })
-        .catch((e) => {
-          if (type === 'component') {
-            console.log(11111, e)
-            global.onLazyLoadError({
-              type: 'subpackage',
-              subpackage: [chunkName],
-              errMsg: `loadSubpackage: ${e.type}`
-            })
-          }
-          console.log('[mpxAsyncSuspense]: load eror', e)
-          chunkPromise.current = null
-          setStatus('error')
-        })
+    let cancelled = false
+    if (!chunkLoaded && status === 'pending') {
+      if (loadChunkPromise.current) {
+        loadChunkPromise
+          .current.then((m: AsyncModule) => {
+            if (cancelled) return
+            asyncChunkMap.set(moduleId, m.__esModule ? m.default : m)
+            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 (loaded) {
-    const Comp = asyncChunkMap.get(request)
-    return <Comp {...props}></Comp>
+  if (chunkLoaded) {
+    const Comp = asyncChunkMap.get(moduleId)
+    return createElement(Comp, innerProps)
   } else if (status === 'error') {
-    console.log('the status is:', status)
     if (type === 'page') {
-      const Fallback = fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
-      return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>
+      const Fallback =
+        (fallback as ComponentType<DefaultFallbackProps>) || DefaultFallback
+      return createElement(LayoutView, null, createElement(Fallback, { onReload: reloadPage }))
     } else {
-      const Fallback = loading
-      return <Fallback {...props}></Fallback>
+      return createElement(fallback, innerProps)
     }
   } else {
-    if (!chunkPromise.current) {
-      chunkPromise.current = getChildren()
+    if (!loadChunkPromise.current) {
+      loadChunkPromise.current = getChildren()
     }
     if (type === 'page') {
-      const Fallback = loading || DefaultLoading
-      return <PageWrapper><Fallback /></PageWrapper>
+      return createElement(LayoutView, null, createElement(loading || DefaultLoading))
     } else {
-      const Fallback = loading
-      return <Fallback {...props}></Fallback>
+      return createElement(fallback, innerProps)
     }
   }
 }

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

@@ -1,67 +1,136 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer';
+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 AsyncSuspense = ({ type, props, chunkName, request, loading, fallback, getChildren }) => {
+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 LayoutView = (props) => {
+    return (<View style={{ flex: 1 }} collapsable={false}>{props.children}</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 loaded = asyncChunkMap.has(request);
-    const [, setKey] = useState(0);
-    const chunkPromise = useRef(null);
+    const chunkLoaded = asyncChunkMap.has(moduleId);
+    const loadChunkPromise = useRef(null);
     const reloadPage = useCallback(() => {
-        setKey((preV) => preV + 1);
-        console.log('[mpxAsyncSuspense]: reload page');
         setStatus('pending');
     }, []);
     useEffect(() => {
-        if (!loaded && status === 'pending') {
-            // todo 清楚副作用？
-            console.log('the current :', chunkPromise.current);
-            chunkPromise.current
-                .then((m) => {
-                console.log('[mpxAsyncSuspense]: load sucess');
-                asyncChunkMap.set(request, m.__esModule ? m.default : m);
-                setStatus('loaded');
-            })
-                .catch((e) => {
-                if (type === 'component') {
-                    console.log(11111, e);
-                    global.onLazyLoadError({
-                        type: 'subpackage',
-                        subpackage: [chunkName],
-                        errMsg: `loadSubpackage: ${e.type}`
-                    });
-                }
-                console.log('[mpxAsyncSuspense]: load eror', e);
-                chunkPromise.current = null;
-                setStatus('error');
-            });
+        let cancelled = false;
+        if (!chunkLoaded && status === 'pending') {
+            if (loadChunkPromise.current) {
+                loadChunkPromise
+                    .current.then((m) => {
+                    if (cancelled)
+                        return;
+                    asyncChunkMap.set(moduleId, m.__esModule ? m.default : m);
+                    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');
+                });
+            }
         }
-    });
-    if (loaded) {
-        const Comp = asyncChunkMap.get(request);
-        return <Comp {...props}></Comp>;
+        return () => {
+            cancelled = true;
+        };
+    }, [status]);
+    if (chunkLoaded) {
+        const Comp = asyncChunkMap.get(moduleId);
+        return createElement(Comp, innerProps);
     }
     else if (status === 'error') {
-        console.log('the status is:', status);
         if (type === 'page') {
             const Fallback = fallback || DefaultFallback;
-            return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>;
+            return createElement(LayoutView, null, createElement(Fallback, { onReload: reloadPage }));
         }
         else {
-            const Fallback = loading;
-            return <Fallback {...props}></Fallback>;
+            return createElement(fallback, innerProps);
         }
     }
     else {
-        if (!chunkPromise.current) {
-            chunkPromise.current = getChildren();
+        if (!loadChunkPromise.current) {
+            loadChunkPromise.current = getChildren();
         }
         if (type === 'page') {
-            const Fallback = loading || DefaultLoading;
-            return <PageWrapper><Fallback /></PageWrapper>;
+            return createElement(LayoutView, null, createElement(loading || DefaultLoading));
         }
         else {
-            const Fallback = loading;
-            return <Fallback {...props}></Fallback>;
+            return createElement(fallback, innerProps);
         }
     }
 };

package/lib/runtime/optionProcessorReact.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode, ComponentType } from 'react'
 declare global {
   namespace NodeJS {
     interface Global {
@@ -7,3 +8,20 @@ declare global {
 }
 
 export function getComponent (...args: any): object
+
+interface AsyncModule {
+  __esModule: boolean
+  default: ReactNode
+}
+
+interface AsyncSuspenseProps {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  getChildren: () => Promise<AsyncModule>
+}
+
+export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -1,6 +1,30 @@
+import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/AsyncSuspense'
+import { memo, forwardRef, createElement } from 'react'
+import { extend } from './utils'
+
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
+
+export function getAsyncSuspense (commonProps) {
+  if (commonProps.type === 'component') {
+    return memo(forwardRef(function (props, ref) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: Object.assign({}, props, { ref })
+        })
+      )
+    }))
+  } else {
+    return function (props) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: props
+        })
+      )
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.4",
+  "version": "2.10.6-beta.5",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

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

@@ -1,217 +0,0 @@
-import { ComponentType, ReactNode, Component, Suspense } from 'react'
-import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
-import FastImage from '@d11/react-native-fast-image'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
-
-type PageWrapper = {
-  children: ReactNode
-}
-
-export const PageWrapper = ({ children }: PageWrapper) => {
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -0 }],
-    flexBasis: 'auto',
-    flex: 1
-  }))
-
-  return (
-    <Animated.View
-      style={[
-        animatedStyle
-      ]}
-    >
-      {children}
-    </Animated.View>
-  )
-}
-
-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'
-  }
-})
-
-type AsyncType = 'page' | 'component'
-
-interface PropsType<T extends AsyncType> {
-  type: T
-  props: object
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
-  children: (props: any) => ReactNode | ReactNode
-}
-
-interface StateType {
-  hasError: boolean,
-  key: number
-}
-
-interface ComponentError extends Error {
-  request?: string
-  type: 'timeout' | 'fail'
-}
-
-export 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>
-  )
-}
-
-export interface DefaultFallbackProps {
-  onReload: () => void
-}
-
-export const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
-  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>
-  )
-}
-
-export default class AsyncContainer extends Component<PropsType<AsyncType>, StateType> {
-  private suspenseFallback: ReactNode
-  private errorFallback: ReactNode
-
-  constructor (props: PropsType<AsyncType>) {
-    super(props)
-    this.state = {
-      hasError: false,
-      key: 0
-    }
-    this.suspenseFallback = this.getSuspenseFallback()
-    this.errorFallback = this.getErrorFallback()
-  }
-
-  // render 阶段收集到的错误
-  static getDerivedStateFromError (error: ComponentError): StateType | undefined {
-    if (error.name === 'ChunkLoadError') {
-      return {
-        hasError: true,
-        key: 0
-      }
-    } else {
-      // 被外层捕获
-      throw error
-    }
-  }
-
-  componentDidCatch (error: ComponentError): void {
-    if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
-      const request = error.request || ''
-      const subpackage = request.split('/').filter((i: string) => !!i)[0]
-      global.onLazyLoadError({
-        type: 'subpackage',
-        subpackage: [subpackage],
-        errMsg: `loadSubpackage: ${error.type}`
-      })
-    }
-  }
-
-  reloadPage () {
-    this.setState((prevState) => {
-      return {
-        hasError: false,
-        key: prevState.key + 1
-      }
-    })
-  }
-
-  getSuspenseFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.loading || DefaultLoading
-      return <Fallback />
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  getErrorFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
-      return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  render () {
-    if (this.state.hasError) {
-      if (this.props.type === 'component') {
-        return this.errorFallback
-      } else {
-        return (<PageWrapper>{this.errorFallback}</PageWrapper>)
-      }
-    } else {
-      return (
-        <Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
-          {/* {this.props.children(this.props.props)} */}
-        </Suspense>
-      )
-    }
-  }
-}

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

@@ -1,160 +0,0 @@
-import { Component, Suspense } from 'react';
-import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
-import FastImage from '@d11/react-native-fast-image';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-export const PageWrapper = ({ children }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -0 }],
-        flexBasis: 'auto',
-        flex: 1
-    }));
-    return (<Animated.View style={[
-            animatedStyle
-        ]}>
-      {children}
-    </Animated.View>);
-};
-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'
-    }
-});
-export 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>);
-};
-export 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>);
-};
-export default class AsyncContainer extends Component {
-    suspenseFallback;
-    errorFallback;
-    constructor(props) {
-        super(props);
-        this.state = {
-            hasError: false,
-            key: 0
-        };
-        this.suspenseFallback = this.getSuspenseFallback();
-        this.errorFallback = this.getErrorFallback();
-    }
-    // render 阶段收集到的错误
-    static getDerivedStateFromError(error) {
-        if (error.name === 'ChunkLoadError') {
-            return {
-                hasError: true,
-                key: 0
-            };
-        }
-        else {
-            // 被外层捕获
-            throw error;
-        }
-    }
-    componentDidCatch(error) {
-        if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
-            const request = error.request || '';
-            const subpackage = request.split('/').filter((i) => !!i)[0];
-            global.onLazyLoadError({
-                type: 'subpackage',
-                subpackage: [subpackage],
-                errMsg: `loadSubpackage: ${error.type}`
-            });
-        }
-    }
-    reloadPage() {
-        this.setState((prevState) => {
-            return {
-                hasError: false,
-                key: prevState.key + 1
-            };
-        });
-    }
-    getSuspenseFallback() {
-        if (this.props.type === 'page') {
-            const Fallback = this.props.loading || DefaultLoading;
-            return <Fallback />;
-        }
-        else {
-            const Fallback = this.props.loading;
-            return <Fallback {...this.props.props}></Fallback>;
-        }
-    }
-    getErrorFallback() {
-        if (this.props.type === 'page') {
-            const Fallback = this.props.fallback || DefaultFallback;
-            return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>;
-        }
-        else {
-            const Fallback = this.props.loading;
-            return <Fallback {...this.props.props}></Fallback>;
-        }
-    }
-    render() {
-        if (this.state.hasError) {
-            if (this.props.type === 'component') {
-                return this.errorFallback;
-            }
-            else {
-                return (<PageWrapper>{this.errorFallback}</PageWrapper>);
-            }
-        }
-        else {
-            return (<Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {typeof this.props.children === 'function' ? this.props.children(this.props.props) : this.props.children}
-          {/* {this.props.children(this.props.props)} */}
-        </Suspense>);
-        }
-    }
-}