fix(docz): use @loadable/component instead of react-imported-component

doczjs · Feb 18, 2019 · 18f02f2 · 18f02f2
1 parent cde6511
commit 18f02f2
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 92 deletions.
diff --git a/core/docz/package.json b/core/docz/package.json
@@ -24,6 +24,7 @@
     "tslint": "tslint --project ."
   },
   "dependencies": {
+    "@loadable/component": "^5.6.0",
     "@mdx-js/tag": "^0.17.5",
     "array-sort": "^1.0.0",
     "capitalize": "^2.0.0",
@@ -35,7 +36,6 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
-    "react-imported-component": "^5.5.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-router-hash-link": "^1.2.1",
@@ -45,5 +45,8 @@
   "peerDependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "@types/loadable__component": "^5.6.0"
   }
 }
diff --git a/core/docz/src/components/AsyncRoute.tsx b/core/docz/src/components/AsyncRoute.tsx
@@ -1,37 +1,26 @@
 import * as React from 'react'
 import { useEffect, SFC } from 'react'
 import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
-import importedComponent from 'react-imported-component'
+import loadable from '@loadable/component'
 
 import { Entry } from '../state'
 import { ComponentsMap } from './DocPreview'
 import { AsyncComponent } from './AsyncComponent'
 
 export type Imports = Record<string, () => Promise<any>>
-export async function loadFromImports(
-  path: string,
-  imports: Imports
-): Promise<SFC<any>> {
-  // tslint:disable-next-line
-  const { default: Component, getInitialData } = await imports[path]()
-  const ExportedComponent: SFC<any> = props => (
-    <AsyncComponent
-      {...props}
-      as={Component || 'div'}
-      getInitialData={getInitialData}
-    />
-  )
-
-  return withMDXComponents(ExportedComponent)
-}
-
-export const loadRoute: any = (
-  path: string,
-  imports: Imports,
-  LoadingComponent: any
-) => {
-  const opts: any = { LoadingComponent }
-  return importedComponent(async () => loadFromImports(path, imports), opts)
+export const loadRoute: any = (path: string, imports: Imports) => {
+  return loadable(async () => {
+    const { default: Component, getInitialData } = await imports[path]()
+    const ExportedComponent: SFC<any> = props => (
+      <AsyncComponent
+        {...props}
+        as={Component || 'div'}
+        getInitialData={getInitialData}
+      />
+    )
+
+    return withMDXComponents(ExportedComponent)
+  })
 }
 
 interface AsyncRouteProps {

diff --git a/core/docz/src/components/Routes.tsx b/core/docz/src/components/Routes.tsx
@@ -21,30 +21,31 @@ export const Routes: SFC = withMDXComponents(
     const Loading: any = components.loading
 
     return (
-      <Switch>
-        {entries.map(({ key: path, value: entry }) => {
-          const props = { path, entries, components }
-          const component: any = loadRoute(path, imports, Loading)
-          component.preload()
+      <React.Suspense fallback={<Loading />}>
+        <Switch>
+          {entries.map(({ key: path, value: entry }) => {
+            const props = { path, entries, components }
+            const component = loadRoute(path, imports, Loading)
 
-          return (
-            <Route
-              exact
-              key={entry.id}
-              path={entry.route}
-              render={routeProps => (
-                <AsyncRoute
-                  {...routeProps}
-                  {...props}
-                  entry={entry}
-                  asyncComponent={component}
-                />
-              )}
-            />
-          )
-        })}
-        {NotFound && <Route component={NotFound} />}
-      </Switch>
+            return (
+              <Route
+                exact
+                key={entry.id}
+                path={entry.route}
+                render={routeProps => (
+                  <AsyncRoute
+                    {...routeProps}
+                    {...props}
+                    entry={entry}
+                    asyncComponent={component}
+                  />
+                )}
+              />
+            )
+          })}
+          {NotFound && <Route component={NotFound} />}
+        </Switch>
+      </React.Suspense>
     )
   }
 )
diff --git a/yarn.lock b/yarn.lock
@@ -1978,6 +1978,13 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@loadable/component@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.npmjs.org/@loadable/component/-/component-5.6.0.tgz#28f79caeccc956205a0e38494ea26c49428461d7"
+  integrity sha512-GeVzzAiKLC+CFr/Pf7uIsbRmzDLJ9XC4rb6AM2zIns6yziOvJTjKsO31PUuIxuMwNEKwlOpUkkBarBbwb45bHA==
+  dependencies:
+    hoist-non-react-statics "^3.2.1"
+
 "@marionebl/sander@^0.6.0":
   version "0.6.1"
   resolved "https://registry.npmjs.org/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
@@ -2403,6 +2410,13 @@
   dependencies:
     "@types/jest-diff" "*"
 
+"@types/loadable__component@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.6.0.tgz#e8fac4ff03400b6cd1aef69a40dc66f06a72ac0d"
+  integrity sha512-Jq6jf8l4O0iVIELUizjm4YbUSN+LekhF0ZDaZ781OGygczE72dCYQ+CEaSMKKwMrDTzMY+c9xJIZ3vgyhMbNSA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/lodash.flatten@^4.4.5":
   version "4.4.5"
   resolved "https://registry.npmjs.org/@types/lodash.flatten/-/lodash.flatten-4.4.5.tgz#b8ef79cac5d10069e8561e1b3aab7b3011392743"
@@ -5466,14 +5480,6 @@ cpy@^7.0.1:
     globby "^8.0.1"
     nested-error-stacks "^2.0.0"
 
-crc-32@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
-  integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==
-  dependencies:
-    exit-on-epipe "~1.0.1"
-    printj "~1.1.0"
-
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -6159,7 +6165,7 @@ detect-newline@^2.1.0:
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-detect-node@^2.0.3, detect-node@^2.0.4:
+detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
   integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
@@ -7177,11 +7183,6 @@ exenv@^1.2.1:
   resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
 
-exit-on-epipe@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
-  integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -8954,6 +8955,13 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
+hoist-non-react-statics@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
+  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
+  dependencies:
+    react-is "^16.7.0"
+
 home-or-tmp@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-3.0.0.tgz#57a8fe24cf33cdd524860a15821ddc25c86671fb"
@@ -13614,11 +13622,6 @@ pretty-time@^1.1.0:
   resolved "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
 
-printj@~1.1.0:
-  version "1.1.2"
-  resolved "http://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
-  integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
-
 prismjs@1.6:
   version "1.6.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"
@@ -13698,14 +13701,6 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@15.6.2, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
-  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 prop-types@15.7.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -13715,6 +13710,14 @@ prop-types@15.7.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 property-expr@^1.5.0:
   version "1.5.1"
   resolved "https://registry.npmjs.org/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
@@ -14082,22 +14085,16 @@ react-hot-loader@^4.6.5:
     shallowequal "^1.0.2"
     source-map "^0.7.3"
 
-react-imported-component@^5.5.1:
-  version "5.5.1"
-  resolved "https://registry.npmjs.org/react-imported-component/-/react-imported-component-5.5.1.tgz#d31b98d6db0d567b05591e8a0fcfa6d3f6083a00"
-  integrity sha512-Kx5B8RuLlXKsyRgZi8HWBJcmzfoYcP0S039vMnvZITMfw6UVaLUl96G86N6HkIDBprWzWYBdLROpOfnDb69laQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    crc-32 "^1.2.0"
-    detect-node "^2.0.3"
-    prop-types "15.6.2"
-    scan-directory "^1.0.0"
-
 react-is@^16.6.0:
   version "16.6.3"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
   integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
 
+react-is@^16.7.0:
+  version "16.8.2"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.2.tgz#09891d324cad1cb0c1f2d91f70a71a4bee34df0f"
+  integrity sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q==
+
 react-is@^16.8.1:
   version "16.8.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"
@@ -15149,11 +15146,6 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scan-directory@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/scan-directory/-/scan-directory-1.0.0.tgz#46b6769dbd893d9bd7490ae9dcc43811a38b7fbb"
-  integrity sha512-StSp3ahu7EE1oqVfemF9nV7DVusIaVRuZVa4CZX5rzCUwspqO21wWdNshxZuFIQD7zj/HvvglBoycIizZbTBdw==
-
 scheduler@^0.13.2:
   version "0.13.2"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.2.tgz#969eaee2764a51d2e97b20a60963b2546beff8fa"