@mpxjs/webpack-plugin 2.10.7-beta.4 → 2.10.7-beta.6

package/lib/react/LoadAsyncChunkModule.js

@@ -1,68 +0,0 @@
-const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
-const Template = require('webpack/lib/Template')
-const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
-
-class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
-  constructor (timeout) {
-    super('load async chunk')
-    this.timeout = timeout || 5000
-  }
-
-  generate () {
-    const { compilation } = this
-    const { runtimeTemplate } = compilation
-    const loadScriptFn = RuntimeGlobals.loadScript
-    return Template.asString([
-      'var inProgress = {};',
-      `${loadScriptFn} = ${runtimeTemplate.basicFunction(
-        'url, done, key, chunkId',
-        [
-          `var packageName = ${RuntimeGlobals.getChunkScriptFilename}(chunkId) || ''`,
-          'packageName = packageName.split("/")[0]',
-          'var config = {',
-          Template.indent([
-            'url: url,',
-            'package: packageName'
-          ]),
-          '}',
-          'if(inProgress[url]) { inProgress[url].push(done); return; }',
-          'inProgress[url] = [done];',
-          'var callback = function (type, result) {',
-          Template.indent([
-            'var event = {',
-            Template.indent([
-              'type: type,',
-              'target: {',
-              Template.indent(['src: url']),
-              '}'
-            ]),
-            '}'
-          ]),
-          Template.indent([
-            'var doneFns = inProgress[url]',
-            'clearTimeout(timeoutCallback)',
-            'delete inProgress[url]',
-            `doneFns && doneFns.forEach(${runtimeTemplate.returningFunction(
-              'fn(event)',
-              'fn'
-            )})`
-          ]),
-          '}',
-          `var timeoutCallback = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
-          "var successCallback = callback.bind(null, 'load');",
-          "var failedCallback = callback.bind(null, 'fail')",
-          'var loadChunkAsyncFn = global.__mpx.config.rnConfig && global.__mpx.config.rnConfig.loadChunkAsync',
-          'if (typeof loadChunkAsyncFn !== \'function\') {',
-            Template.indent([
-              'console.error("[Mpx runtime error]: please provide correct loadChunkAsync function")',
-              'return'
-            ]),
-          '}',
-          'loadChunkAsyncFn(config).then(successCallback).catch(failedCallback)'
-        ]
-      )}`
-    ])
-  }
-}
-
-module.exports = LoadAsyncChunkRuntimeModule

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

@@ -1,81 +0,0 @@
-import { useState, ComponentType, useEffect, useCallback, useRef } from 'react'
-import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer'
-import type { DefaultFallbackProps } from './AsyncContainer'
-
-const asyncChunkMap = new Map()
-
-interface props {
-  type: 'component' | 'page'
-  chunkName: string
-  request: string
-  props: any,
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
-  getChildren: () => Promise<unknown>
-}
-
-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)
-
-  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')
-        })
-    }
-  })
-
-  if (loaded) {
-    const Comp = asyncChunkMap.get(request)
-    return <Comp {...props}></Comp>
-  } 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></>
-    } else {
-      const Fallback = loading
-      return <Fallback {...props}></Fallback>
-    }
-  } else {
-    if (!chunkPromise.current) {
-      chunkPromise.current = getChildren()
-    }
-    if (type === 'page') {
-      const Fallback = loading || DefaultLoading
-      return <PageWrapper><Fallback /></PageWrapper>
-    } else {
-      const Fallback = loading
-      return <Fallback {...props}></Fallback>
-    }
-  }
-}
-
-export default AsyncSuspense

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

@@ -1,68 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { DefaultFallback, DefaultLoading, PageWrapper } from './AsyncContainer';
-const asyncChunkMap = new Map();
-const AsyncSuspense = ({ 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);
-    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');
-            });
-        }
-    });
-    if (loaded) {
-        const Comp = asyncChunkMap.get(request);
-        return <Comp {...props}></Comp>;
-    }
-    else if (status === 'error') {
-        console.log('the status is:', status);
-        if (type === 'page') {
-            const Fallback = fallback || DefaultFallback;
-            return <><PageWrapper><Fallback onReload={reloadPage}></Fallback></PageWrapper></>;
-        }
-        else {
-            const Fallback = loading;
-            return <Fallback {...props}></Fallback>;
-        }
-    }
-    else {
-        if (!chunkPromise.current) {
-            chunkPromise.current = getChildren();
-        }
-        if (type === 'page') {
-            const Fallback = loading || DefaultLoading;
-            return <PageWrapper><Fallback /></PageWrapper>;
-        }
-        else {
-            const Fallback = loading;
-            return <Fallback {...props}></Fallback>;
-        }
-    }
-};
-export default AsyncSuspense;