Merge pull request #2123 from didi/fix-async-suspense

fix async-suspense

Author: hiyuki

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

@@ -73,17 +73,20 @@ export default function createApp (options) {
           children
         )
       }
+      const getComponent = () => {
+        return item.displayName ? item : item()
+      }
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {
           name: key,
-          getComponent: () => item(),
+          getComponent,
           initialParams,
           layout: headerLayout
         })
       }
       return createElement(Stack.Screen, {
         name: key,
-        getComponent: () => item(),
+        getComponent,
         layout: headerLayout
       })
     })

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

@@ -53,8 +53,8 @@ function createEffect (proxy, componentsMap) {
     const appComponentsMap = global.__appComponentsMap || {}
     const generichash = proxy.target.generichash || ''
     const genericComponentsMap = global.__mpxGenericsMap?.[generichash] || {}
-    const componentGetter = componentsMap[tagName] || genericComponentsMap[tagName] || appComponentsMap[tagName]
-    return componentGetter ? componentGetter() : getByPath(ReactNative, tagName)
+    const component = componentsMap[tagName] || genericComponentsMap[tagName] || appComponentsMap[tagName]
+    return component ? component.displayName ? component : component() : getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
     if (!type) return null

packages/webpack-plugin/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))
       }

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

@@ -99,20 +99,20 @@ interface AsyncSuspenseProps {
   chunkName: string
   moduleId: string
   innerProps: any,
-  loading?: ComponentType<unknown>
-  fallback?: ComponentType<unknown>
+  getLoading?: () => ComponentType<unknown>
+  getFallback?: () => ComponentType<unknown>
   getChildren: () => Promise<ReactNode>
 }
 
 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
     }
   }
 }

packages/webpack-plugin/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

packages/webpack-plugin/lib/runtime/optionProcessorReact.js

@@ -10,23 +10,26 @@ 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 })
         })
       )
     }))
   } else {
-    return function (props) {
+    result = memo(function (props) {
       return createElement(AsyncSuspense,
         extend(commonProps, {
           innerProps: props
         })
       )
-    }
+    })
   }
+  result.displayName = 'AsyncSuspenseHOC'
+  return result
 }
 
 export function getLazyPage (getComponent) {