diff --git a/core/docz/package.json b/core/docz/package.json index 714626145..3a36eb139 100644 --- 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 index 57929b6c7..808a9c7fe 100644 --- 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 Promise> -export async function loadFromImports( - path: string, - imports: Imports -): Promise> { - // tslint:disable-next-line - const { default: Component, getInitialData } = await imports[path]() - const ExportedComponent: SFC = props => ( - - ) - - 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 = props => ( + + ) + + return withMDXComponents(ExportedComponent) + }) } interface AsyncRouteProps { diff --git a/core/docz/src/components/Routes.tsx b/core/docz/src/components/Routes.tsx index 434a15a02..76f34d6ed 100644 --- 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 ( - - {entries.map(({ key: path, value: entry }) => { - const props = { path, entries, components } - const component: any = loadRoute(path, imports, Loading) - component.preload() + }> + + {entries.map(({ key: path, value: entry }) => { + const props = { path, entries, components } + const component = loadRoute(path, imports, Loading) - return ( - ( - - )} - /> - ) - })} - {NotFound && } - + return ( + ( + + )} + /> + ) + })} + {NotFound && } + + ) } ) diff --git a/yarn.lock b/yarn.lock index 96347e965..d3f0fed2c 100644 --- 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"