feat: remove react-loadable instead of react.lazy

Author: ascoders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pri",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "types": "src/node/index.ts",
   "main": "built/node/index.js",
   "scripts": {
@@ -59,7 +59,6 @@
     "@types/koa-route": "3.2.4",
     "@types/lodash": "4.14.149",
     "@types/react-dom": "16.9.4",
-    "@types/react-loadable": "^5.5.2",
     "@types/react-router-dom": "5.1.3",
     "@types/rimraf": "2.0.3",
     "@types/semver": "6.2.0",
@@ -129,7 +128,6 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "4.12.18",
-    "react-loadable": "5.5.0",
     "react-router-dom": "5.1.2",
     "rimraf": "3.0.0",
     "sass-loader": "8.0.0",
@@ -152,4 +150,4 @@
     "worker-loader": "2.0.0",
     "yargs": "15.0.2"
   }
-}
+}

src/built-in-plugins/command-dev/plugin/webpack-dll-config.ts

@@ -33,7 +33,6 @@ export default (opts: IOptions) => {
           'react-dom',
           'lodash',
           'highlight.js',
-          'react-loadable',
           'react-router',
           'history',
           `${PRI_PACKAGE_NAME}/client`,

src/built-in-plugins/project-analyse-pages/plugin/index.ts

@@ -147,19 +147,21 @@ pri.project.onCreateEntry((analyseInfo: IResult, entry) => {
                 );
 
                 const importCode = `import(/* webpackChunkName: "${
-                  page.chunkName
+                  page.componentName
                 }" */ "${pageRequirePath}").then(code => {
                 const filePath = "${path.format(page.file)}"
 
                 ${await entry.pipe.get('afterPageLoad', '')}
-                ${await entry.pipe.get('returnPageInstance', 'return code.default')}
-              })`;
+                ${await entry.pipe.get('returnPageInstance', 'return code')}
+              }),`;
 
                 return `
-              const ${page.componentName} = Loadable<any, any>({
-                loader: () => ${importCode},
-                loading: (): any => null
-              })\n
+              const ${page.componentName}Lazy: any = React.lazy(() => ${importCode});
+              const ${page.componentName}: React.FC = props => (
+                <React.Suspense fallback={PageLazyFallback}>
+                  <${page.componentName}Lazy {...props} />
+                </React.Suspense>
+              );
             `;
               }),
           )

src/utils/create-entry.ts

@@ -86,7 +86,6 @@ export class Entry {
       import { history as customHistory } from "${PRI_PACKAGE_NAME}/client"
       import * as React from "react"
       import * as ReactDOM from "react-dom"
-      import * as Loadable from "react-loadable"
       import { Redirect, Route, Router, Switch, HashRouter } from "react-router-dom"
     `,
     );
@@ -97,6 +96,7 @@ export class Entry {
       'appBody',
       `
       export const pageLoadableMap = new Map<string, any>()
+      const PageLazyFallback = () => <div />;
     `,
     );
   }
@@ -156,8 +156,7 @@ export class Entry {
       `
       import * as React from "react"
       import * as ReactDOM from "react-dom"
-      import * as Loadable from "react-loadable"
-      import App, { pageLoadableMap } from "./app"
+      import App from "./app"
 
       const ROOT_ID = "${pri.sourceConfig.projectRootId}"
     `,
@@ -177,12 +176,11 @@ export class Entry {
 
       if ((window as any).enableSsr) {
         // Need wait preloadAll, because we already have ssr html.
-        Loadable.preloadAll().then(() => {
-          (ReactDOM as any).hydrate(${await pipe.get('entryRenderApp', '<App />')}, document.getElementById(ROOT_ID))
-        })
+        // TODO:
+        // Loadable.preloadAll().then(() => {
+        //   (ReactDOM as any).hydrate(${await pipe.get('entryRenderApp', '<App />')}, document.getElementById(ROOT_ID))
+        // })
       } else {
-        // Don't need wait preloadAll.
-        Loadable.preloadAll()
         ReactDOM.render(${await pipe.get('entryRenderApp', '<App />')}, document.getElementById(ROOT_ID))
       }
     `,