use workspaces.

.gitignore

@@ -5,7 +5,6 @@ npm-debug.log*
 package-lock.json
 .DS_Store
 .cache
-.rdoc-dist
 .vscode
 
 *.bak

example/router-redux-rematch/package.json

@@ -21,9 +21,9 @@
   "license": "ISC",
   "dependencies": {
     "@rematch/core": "1.1.0",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-dynamic-loadable": "file:../../",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-dynamic-loadable": "2.0.4",
     "react-redux": "7.1.0",
     "react-router-dom": "5.0.1"
   },
@@ -56,7 +56,7 @@
     "less": "3.9.0",
     "less-loader": "4.1.0",
     "loading-cli": "1.0.8",
-    "mocker-api": "1.7.9",
+    "mocker-api": "2.7.5",
     "postcss-flexbugs-fixes": "3.3.1",
     "postcss-loader": "2.1.6",
     "style-loader": "0.21.0",

example/simple/package.json

@@ -26,11 +26,11 @@
     "webpack": "5.10.0",
     "webpack-cli": "4.2.0",
     "webpack-dev-server": "3.11.0",
-    "webpack-merge": "5.6.1"
+    "webpack-merge": "5.7.3"
   },
   "dependencies": {
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-dynamic-loadable": "file:../../"
+    "react-dynamic-loadable": "2.0.4"
   }
 }

package.json

@@ -1,52 +1,32 @@
 {
   "name": "react-dynamic-loadable",
-  "version": "2.0.4",
+  "private": true,
   "description": "A higher order component for loading components with dynamic imports.",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "typings": "types/index.d.ts",
+  "workspaces": [
+    "packages/*",
+    "example/*"
+  ],
   "scripts": {
-    "watch": "tsbb watch --target react",
-    "build": "tsbb build --target react",
+    "watch": "yarn workspace react-dynamic-loadable tsbb watch --target react",
+    "build": "yarn workspace react-dynamic-loadable tsbb build --target react",
     "prepare": "npm run lint && npm run build",
-    "lint": "NODE_ENV=production eslint src --ext jsx"
+    "lint": "cross-env NODE_ENV=production eslint packages/core/src --ext jsx"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/jaywcjlove/react-dynamic-loadable.git"
   },
-  "keywords": [
-    "react",
-    "loading",
-    "imports",
-    "dynamic",
-    "dynamic-loadable",
-    "code-splitting",
-    "loadable"
-  ],
-  "files": [
-    "types",
-    "lib",
-    "DynamicLoadablePlugin.js"
-  ],
+  "jest": {},
   "author": "Kenny Wong <[email protected]> (https://github.com/jaywcjlove)",
   "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.9.0"
-  },
   "devDependencies": {
-    "babel-eslint": "10.0.3",
-    "cross-env": "7.0.2",
+    "cross-env": "7.0.3",
     "eslint": "^7.15.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "react": "16.12.0",
     "tsbb": "1.7.8"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.12.5"
   }
-}
+}

.npmignore → packages/core/.gitignore

@@ -1,13 +1,10 @@
-src
-example
 node_modules
-package-lock.json
+lib
+dist
 npm-debug.log*
-.babelrc
-.eslintrc.js
+package-lock.json
 .DS_Store
 .cache
-.vscode
 
 *.bak
 *.tem

packages/core/README.md

@@ -0,0 +1,94 @@
+
+react-dynamic-loadable
+---
+
+A higher order component for loading components with dynamic imports.
+
+## Install
+
+```bash
+npm install react-dynamic-loadable --save
+```
+
+## Simple Example
+
+> [Simple Example code](./example/simple)
+
+```js
+import loadable from 'react-dynamic-loadable';
+import Loading from './my-loading-component';
+
+// Add Loading component.
+loadable.setDefaultLoadingComponent(<div>Loading</div>);
+
+const LoadableComponent = loadable({
+  component: () => import('./my-component'),
+  // LoadingComponent: () => Loading,
+});
+
+export default class App extends React.Component {
+  render() {
+    return <LoadableComponent/>;
+  }
+}
+
+```
+
+## Example
+
+Use [Redux](https://github.com/reactjs/redux) (**[@rematch](https://github.com/rematch/rematch)**), [React Router](https://github.com/ReactTraining/react-router) [Example](./example/router-redux-rematch).
+
+> [Example code](./example/router-redux-rematch)
+
+```js
+import React from 'react';
+import { model } from '@rematch/core';
+import loadable from 'react-dynamic-loadable';
+
+const dynamicWrapper = (models, component) => loadable({
+  models: () => models.map((m) => {
+    return import(`./models/${m}.js`).then((md) => {
+      model({ name: m, ...md[m] || md.default });
+    });
+  }),
+  component,
+  LoadingComponent: () => <span>loading....</span>,
+});
+
+export const getRouterData = () => {
+  const conf = {
+    '/': {
+      component: dynamicWrapper(['user'], () => import('./layouts/BasicLayout')),
+    },
+    '/home': {
+      component: dynamicWrapper([], () => import('./routes/Home')),
+    },
+    '/login': {
+      component: dynamicWrapper(['user'], () => import('./routes/Login')),
+    },
+  };
+  return conf;
+};
+```
+
+## Server-Side Rendering
+
+```js
+// webpack.config.js
+import { DynamicLoadablePlugin } from 'react-dynamic-loadable/DynamicLoadablePlugin';
+
+export default {
+  plugins: [
+    new DynamicLoadablePlugin({
+      filename: './dist/loadable-assets.json',
+      exclude: /.(js|css)$/
+    }),
+  ],
+};
+```
+
+
+```js
+import { getBundles } from 'react-dynamic-loadable/DynamicLoadablePlugin';
+let bundles = getBundles(stats, modules);
+```

packages/core/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-dynamic-loadable",
+  "version": "2.0.4",
+  "description": "A higher order component for loading components with dynamic imports.",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "typings": "types/index.d.ts",
+  "scripts": {
+    "watch": "tsbb watch --target react",
+    "build": "tsbb build --target react",
+    "prepare": "npm run lint && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jaywcjlove/react-dynamic-loadable.git"
+  },
+  "keywords": [
+    "react",
+    "loading",
+    "imports",
+    "dynamic",
+    "dynamic-loadable",
+    "code-splitting",
+    "loadable"
+  ],
+  "files": [
+    "types",
+    "lib",
+    "src",
+    "DynamicLoadablePlugin.js"
+  ],
+  "author": "Kenny Wong <[email protected]> (https://github.com/jaywcjlove)",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.9.0"
+  },
+  "devDependencies": {
+    "react": "16.12.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.12.5"
+  }
+}

types/index.d.ts → packages/core/types/index.d.ts

@@ -1,7 +1,7 @@
 type Options = {
-  models: Promise<any>[];
-  component: Promise<any>[];
-  LoadingComponent: JSX.Element;
+  models: () => Promise<any>[];
+  component: () => Promise<any>;
+  LoadingComponent: () => JSX.Element;
 }
 
 declare function dynamicLoadable(options: Options): React.ReactNode;