{"_id":"@dgieselaar/loadable-components","_rev":"1-70c8b86625b7233421e51b6822d5f344","name":"@dgieselaar/loadable-components","dist-tags":{"latest":"2.2.1"},"versions":{"2.2.1":{"name":"@dgieselaar/loadable-components","version":"2.2.1","description":"React code splitting made easy.","repository":{"type":"git","url":"git+ssh://git@github.com/smooth-code/loadable-components.git"},"main":"dist/loadable-components.cjs.js","jsnext:main":"dist/loadable-components.es.js","types":"types/index.d.ts","module":"dist/loadable-components.es.js","author":{"name":"Greg Bergé","email":"berge.greg@gmail.com"},"keywords":["react","ssr","webpack","code-splitting","react-router","server-side-rendering","dynamic-import","react-loadable","react-async-components"],"license":"MIT","scripts":{"build":"rollup -c","ci":"yarn build && yarn lint && bundlesize && yarn test --coverage && codecov","format":"prettier --write \"src/**/*.js\" \"*.md\"","lint":"eslint .","prebuild":"rm -rf dist/","prepublishOnly":"yarn build","typecheck:ts":"dtslint types","release":"standard-version && conventional-github-releaser --preset angular","test":"jest","start":"node server.js"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0"},"devDependencies":{"@types/react":"^16.3.14","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^8.2.3","babel-jest":"^22.4.3","babel-plugin-dynamic-import-node":"^1.2.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","bundlesize":"^0.17.0","codecov":"^3.0.1","conventional-github-releaser":"^2.0.2","dtslint":"^0.3.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-config-airbnb":"^16.1.0","eslint-config-prettier":"^2.9.0","eslint-plugin-import":"^2.11.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","prettier":"^1.12.1","react":"^16.3.2","react-dom":"^16.3.2","react-router":"^4.2.0","react-test-renderer":"^16.3.2","rollup":"^0.58.2","rollup-plugin-babel":"^3.0.4","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-sourcemaps":"^0.4.2","rollup-plugin-uglify":"^3.0.0","rollup-plugin-visualizer":"^0.6.0","standard-version":"^4.3.0"},"dependencies":{"babel-plugin-syntax-dynamic-import":"^6.18.0","hoist-non-react-statics":"^2.5.0"},"jest":{"setupFiles":["/tests/setupTests.js"]},"bundlesize":[{"path":"./dist/loadable-components.min.js","maxSize":"2kb"}],"gitHead":"2c3d9011992f9915f52fedc9a3913a779f179e45","bugs":{"url":"https://github.com/smooth-code/loadable-components/issues"},"homepage":"https://github.com/smooth-code/loadable-components#readme","_id":"@dgieselaar/loadable-components@2.2.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"dgieselaar","email":"d.gieselaar@gmail.com"},"dist":{"integrity":"sha512-60uxMxQZZNj+bxBErgrtmXLzjYiY99vAh9dLHRDF7gagqm87JiNtpbMPWblYLhJ9jhoXbcRZtNNo5i9ga5r9Xg==","shasum":"67dba934dec2b088c52e03adf9be2394e9b6ac68","tarball":"https://registry.npmjs.org/@dgieselaar/loadable-components/-/loadable-components-2.2.1.tgz","fileCount":33,"unpackedSize":145384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBtEYCRA9TVsSAnZWagAAlRcP/AhE478vvPYMyDzTc/Kv\n4cnZGg2slLAgv3rMNa7k9mZXMD+O8Qdnd+jsfrPnccb3thFu2bYqOnsf1YqE\nRIyk9OjiNzBcH/3+iW4k74N0T1vQfyyOKWNbGONEBYaM3loluwNGiK8ElYON\nQOAkJT8nFoCxPmKTuMvhrYBDbbnnxchKLRDJzQYZBJejm3ywWXHAMesKsZsF\nKJac9Tra1fnx/c4DkQDlCfwzIR6d8oMQD9gR8ID77nu36oE3Qvw3rLpYZhZi\nV6vtT0rZvSVJnxr+XETnVbiipN+eDgoX0eq/ESHOETZ1XgIUNwmBU2VC6S1u\nO2cS8ii1Cu0RE/aAKGYVNZcfrkajfoj3lMlBqxAt38RpIVq+LDJpbRT06UgH\njpWypR8ZBNztKBzKothiMAnXqHL0eqVRT/cj6fGXtu5v8BJ8d3WBQMcDC+UT\nrt+yWCtcb3A4SriAIKxAB3FU6JWFwFQWrobvpmuQc2sUxbc8QGd7fbxUzQEO\nQwwvoCEkzQrs8eiYrGTXXFX3n1/6bjtX1AzMfPJkZ2QjB3C40ULzrFkltR/J\nqI0jnrXG9jhO7d0D2QBbA8oLpS3FCiLB4oq2wW76gM3Dvh2+ywXF5E4yN3AH\nSrjRTu1pIfW5JFLloWFLe5tekA8pzKR95D2HSesft2Tyk/tnbOa0qE/Uepwp\nwWuR\r\n=VD0i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKDMqQGKxT+YU0H6U6SHHbEbtjdUDEQWJOh/rmEUaJ7wIhAJkHj4z3E/eaXRvip4W7mhNSP4Ys/V2S8eZ92CNxxXZo"}]},"maintainers":[{"name":"dgieselaar","email":"d.gieselaar@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/loadable-components_2.2.1_1527173399356_0.8471660314142984"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-24T14:49:59.122Z","2.2.1":"2018-05-24T14:49:59.471Z","modified":"2022-04-05T04:18:15.927Z"},"maintainers":[{"name":"dgieselaar","email":"d.gieselaar@gmail.com"}],"description":"React code splitting made easy.","homepage":"https://github.com/smooth-code/loadable-components#readme","keywords":["react","ssr","webpack","code-splitting","react-router","server-side-rendering","dynamic-import","react-loadable","react-async-components"],"repository":{"type":"git","url":"git+ssh://git@github.com/smooth-code/loadable-components.git"},"author":{"name":"Greg Bergé","email":"berge.greg@gmail.com"},"bugs":{"url":"https://github.com/smooth-code/loadable-components/issues"},"license":"MIT","readme":"

\n \"loadable-components\"\n

\n

React code splitting made easy. Reduce your bundle size without stress ✂️✨.

\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n[![Small size][size-badge]][build-min]\n\n[![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n[**Read the intro blogpost**](https://medium.com/smooth-code/introducing-loadable-components-%EF%B8%8F-646dd3ab0aa6)\n\n```sh\nnpm install loadable-components\n```\n\nWebpack allows modern code splitting via the [dynamic `import` syntax](https://webpack.js.org/guides/code-splitting/#dynamic-imports).\nLoadable Components makes it possible to use that awesome feature with React. It is compatible with **`react-router`** and **server side rendering**. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.\n\nWe use it in production on [smooth-code.com](https://www.smooth-code.com/), it's open source https://github.com/smooth-code/website.\n\n## Motivation\n\nSplitting your React application and rendering it server-side is complicated. Several have tried, [react-router gave up](https://reacttraining.com/react-router/web/guides/code-splitting), today only [next.js](https://github.com/zeit/next.js/) is doing it right. First I decided to not do it (afraid by react-router 😱) on my website. But then I think \"Fuck code splitting shouldn't be a problem today, let's do it.\".\n\nI tried several solutions, [react-async-components](https://github.com/ctrlplusb/react-async-component), [react-loadable](https://github.com/thejameskyle/react-loadable) and for each of them server-side rendering was very complicated. I decided to create Loadable Components with for main goal: reducing API in order to make it as easier as possible for the developer. I inspired from [Styled Components](https://www.styled-components.com/) and [Apollo](http://dev.apollodata.com/) for the API.\n\n## Getting started\n\n```js\n// Routes.js\nimport loadable from 'loadable-components'\n\nexport const Home = loadable(() => import('./Home'))\nexport const About = loadable(() => import('./About'))\nexport const Contact = loadable(() => import('./Contact'))\n```\n\n```js\n// App.js\nimport React from 'react'\nimport { Route } from 'react-router'\nimport * as Routes from './Routes'\n\nexport default () => (\n
\n \n \n \n
\n)\n```\n\n### Custom loading\n\nIt is possible to add a custom loading component, by default it will render nothing:\n\nUsing a component:\n\n```js\nconst Loading = () =>
Loading...
\n\nconst Home = loadable(() => import('./Home'), {\n LoadingComponent: Loading,\n})\n```\n\nOr using render props:\n\n```js\nimport React from 'react'\n\nconst Home = loadable(() => import('./Home'), {\n render: ({ Component, loading, ownProps }) => {\n if (loading) return
Loading...
\n return \n },\n})\n```\n\n### Error handling\n\nYou can configure the component rendered when an error occurs during loading, by default it will render nothing:\n\nUsing a component:\n\n```js\nconst ErrorDisplay = ({ error }) =>
Oups! {error.message}
\n\nconst Home = loadable(() => import('./Home'), {\n ErrorComponent: ErrorDisplay,\n})\n```\n\nOr using render props:\n\n```js\nimport React from 'react'\n\nconst Home = loadable(() => import('./Home'), {\n render: ({ Component, error, ownProps }) => {\n if (error) return
Oups! {error.message}
\n return \n },\n})\n```\n\n### Delay\n\nTo avoid flashing a loader if the loading is very fast, you could implement a minimum delay. There is no built-in API in `loadable-components` but you could do it using [`p-min-delay`](https://github.com/sindresorhus/p-min-delay).\n\n```js\nimport loadable from 'loadable-components'\nimport pMinDelay from 'p-min-delay'\n\n// Wait a minimum of 200ms before loading home.\nexport const Home = loadable(pMinDelay(() => import('./Home'), 200))\n```\n\nIf you want to avoid these delay server-side:\n\n```js\nimport loadable from 'loadable-components'\nimport pMinDelay from 'p-min-delay'\n\nconst delay = promise => {\n if (typeof window === 'undefined') return promise\n return pMinDelay(promise, 200)\n}\n\nexport const Home = loadable(delay(() => import('./Home')))\n```\n\n### Timeout\n\nInfinite loading is not good for user experience, to avoid it implementing a timeout is a good workaround. You can do it using a third party module like [`promise-timeout`](https://github.com/building5/promise-timeout):\n\n```js\nimport loadable from 'loadable-components'\nimport { timeout } from 'promise-timeout'\n\n// Wait a maximum of 2s before sending an error.\nexport const Home = loadable(timeout(() => import('./Home'), 2000))\n```\n\n### Loading multiple resources in parallel\n\nSince `loadable-components` accepts a simple callback function it is easy to load multiple resource in parallel. Simply do it in JavaScript!\n\n```js\nimport React from 'react'\nimport loadable from 'loadable-components'\n\nconst What = loadable(async () => {\n const [{ default: Books }, { default: books }] = await Promise.all([\n import('./Books'),\n import('./books.json'),\n ])\n\n return props => \n})\n```\n\n### Prefetching\n\nTo enhance user experience you can fetch routes before they are requested by the user.\n\n#### Prefetch on route loading\n\n```js\nimport React from 'react'\nimport { Route } from 'react-router'\nimport * as Routes from './Routes'\n\n// Prefetch contact component\nRoutes.Contact.load()\n\nconst App () => (\n
\n \n \n \n
\n)\n```\n\n#### Prefetch on hover\n\n```js\nimport React from 'react'\nimport { Contact } from './Routes'\n\nconst Links = () => (\n
\n \n Contact\n \n
\n)\n```\n\n### Server-side rendering\n\nFirst create a `Routes.js` containing all your loadable routes:\n\n```js\n// Routes.js\nimport loadable from 'loadable-components'\n\nexport const Home = loadable(() => import('client/Home'))\n```\n\nYou can use them in your application:\n\n```js\n// App.js\nimport React from 'react'\nimport { Home } from './Routes'\n\nconst App = () => (\n
\n \n
\n)\n\nexport default App\n```\n\nThen bootstrap your application client-side using `loadComponents`:\n\n```js\n// main.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter } from 'react-router-dom'\nimport { loadComponents } from 'loadable-components'\nimport App from './App'\n\n// Load all components needed before starting rendering\nloadComponents().then(() => {\n ReactDOM.render(\n \n \n ,\n document.getElementById('main'),\n )\n})\n```\n\nThe only thing you have to do on the server is calling `getLoadableState()` and inserting the loadable state in your html:\n\n```js\n// server.js\nimport React from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router'\nimport { getLoadableState } from 'loadable-components/server'\nimport App from './App'\n\nconst context = {}\n\nconst app = (\n \n \n \n)\n\n// Extract loadable state from application tree\ngetLoadableState(app).then(loadableState => {\n const html = renderToString(app)\n // Insert style tag into page\n const page = `\n \n \n \n \n
${html}
\n ${loadableState.getScriptTag()}\n \n \n `\n})\n```\n\n#### Configuring Babel\n\nServer-side rendering requires to specify which modules are loaded into your `loadable` callback:\n\n```js\nimport loadable from 'loadable-components'\n\nconst AsyncComponent = loadable(() => import('./MyComponent'), {\n modules: ['./MyComponent'],\n})\n```\n\nAs you can see this is relatively boring and can be automated using our babel plugin `loadable-components/babel`.\n\nDynamic `import` syntax is natively supported by Webpack / Parcel but not by node. That's why you have to configure Babel differently for server and client:\n\n**On the server**:\n\n```json\n{\n \"plugins\": [\"loadable-components/babel\", \"babel-plugin-dynamic-import-node\"]\n}\n```\n\n**On the client**:\n\n```json\n{\n \"plugins\": [\"loadable-components/babel\"]\n}\n```\n\nTo have a different configuration for client and server, you can use [Babel env option](https://babeljs.io/docs/usage/babelrc/#env-option).\n\n### Snapshoting\n\nAn alternative to server-side rendering is [snapshoting](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). Basically, you crawl your React website locally and you generate HTML pages.\n\nYou need to instruct your snapshot solution to save state of Loadable Components to the `window` in the end.\n\n`getState()` will return `{__LOADABLE_STATE__: {...} }`, and this should be converted to `` in the resulting html.\n\nFor example, to do this with [`react-snap`](https://github.com/stereobooster/react-snap) you can use following code:\n\n```js\nimport { getState } from 'loadable-components'\n\n// Set up for react-snap.\nwindow.snapSaveState = () => getState()\n```\n\n### Hot Reloading\n\nLoadable Components is Hot Reload friendly, it works out of the box with [React Hot Loader](https://github.com/gaearon/react-hot-loader).\n\n## API Reference\n\n### loadable\n\nThis is the default export. It's a factory used to create a loadable component. Props are passed to the loaded component.\n\n### Arguments\n\n1. `getComponent` _(Function)_: Function to load component asynchronously.\n2. `options` _(Object)_: Facultative options to configure component behavior.\n\n### options\n\n1. `ErrorComponent` _(ReactComponent)_: Component rendered when an error occurs, take two props: `error` and `ownProps`.\n2. `LoadingComponent` _(ReactComponent)_: Component rendered during loading, take the same props from loadable component.\n3. `render` _(Function)_: If specified this function is called with in render with an object: `{ loading, error, ownProps, Component }`. It takes precedence over `ErrorComponent` and `LoadingComponent`.\n4. `modules` _(Object)_: This options is only required if you do server-side rendering. It can be automated using babel plugin `loadable-components/babel`.\n\n```js\nimport loadable from 'loadable-components'\n\nconst MyLoadableComponent = loadable(() => import('./MyComponent'), {\n ErrorComponent: ({ error }) =>
{error.message}
,\n LoadingComponent: () =>
Loading...
,\n})\n```\n\n### loadComponents\n\nThis method is only required if you use server-side rendering. It loads components used in the page that has been rendered server-side.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { BrowserRouter } from 'react-router-dom'\nimport { loadComponents } from 'loadable-components'\nimport App from './App'\n\n// Load all components needed before starting rendering\nloadComponents().then(() => {\n ReactDOM.render(\n \n \n ,\n document.getElementById('main'),\n )\n})\n```\n\n### getLoadableState\n\nThis method is only required if you use server-side rendering. It loads components recursively and extract a loadable state from a React tree.\n\n```js\nimport React from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router'\nimport { getLoadableState } from 'loadable-components/server'\nimport App from './App'\n\nconst app = (\n \n \n \n)\n\n// Extract loadable state from application tree\ngetLoadableState(app).then(loadableState => {\n const html = renderToString()\n // Insert style tag into page\n const page = `\n \n \n \n \n
${html}
\n ${loadableState.getScriptTag()}\n \n \n `\n})\n```\n\nA loadable state has two methods to extract state:\n\n* `loadableState.getScriptTag()`: Returns a string representing a script tag.\n* `loadableState.getScriptElement()`: Returns a React element.\n\n## Interoperability\n\nYou can implement a loadable component by your own. To do it you have to add `LOADABLE` Symbol to your component:\n\n```js\nimport React from 'react'\nimport { LOADABLE, componentTracker } from 'loadable-components'\n\nclass ComponentWithTranslations extends React.Component {\n // Required\n static componentId = componentTracker.track(ComponentWithTranslations);\n\n static async load = () => {\n const response = await fetch('/translations.json')\n const translations = await response.json()\n ComponentWithTranslations.translations = translations\n return translations\n }\n\n static [LOADABLE] = () => ({\n componentId: ComponentWithTranslations.componentId,\n load: ComponentWithTranslations.load,\n })\n\n state = { translations: ComponentWithTranslations.translations }\n\n componentWillMount() {\n ComponentWithTranslations[LOADABLE].load()\n .then(translations => this.setState({ translations }))\n }\n\n render() {\n const { translations = { hello = 'hello' } } = this.props;\n\n return
{hello}
\n }\n}\n```\n\n## Other solutions\n\n[`react-loadable`](https://github.com/thejameskyle/react-loadable) offers an elegant API to load a component and enhance it. It supports a lot of features like delay and timeout. I chose to not implement it because it delay can be done in `LoadingComponent` and timeout can be done in `getComponent` function.\n\n[`react-async-component`](https://github.com/ctrlplusb/react-async-component) offers a simple API, very similar to `loadable-components` API.\n\n[`react-code-splitting`](https://github.com/didierfranc/react-code-splitting) is the basic approach of an async component, it doesn't support LoadingComponent, ErrorComponent and server-side rendering.\n\nThe main difference between these two libraries is the server-side rendering approach:\n\n* `react-loadable` requires a webpack plugin and a babel plugin. I think it's too complicated and we should not rely on it.\n* `react-async-component` has a better approach, analyzing tree + context, it also rely on another library. I like the idea but not the API.\n\nLoadable Components has a simpler approach, it relies on [dynamic-import-specification](https://github.com/tc39/proposal-dynamic-import) and assumes that [it is working for node and Webpack](https://babeljs.io/docs/plugins/syntax-dynamic-import/). Then it analyzes the tree server-side and waiting for every modules to be loaded. Client-side it loads modules before rendering the application. The API is as simple as possible, no context, no magic variable.\n\n## Inspirations\n\n* API inspired by [Styled Components](https://github.com/styled-components/styled-components)\n* React tree traversing from [React Apollo](https://github.com/apollographql/react-apollo)\n\n## MIT\n\n[build-badge]: https://img.shields.io/travis/smooth-code/loadable-components.svg?style=flat-square\n[build]: https://travis-ci.org/smooth-code/loadable-components\n[coverage-badge]: https://img.shields.io/codecov/c/github/smooth-code/loadable-components.svg?style=flat-square\n[coverage]: https://codecov.io/github/smooth-code/loadable-components\n[version-badge]: https://img.shields.io/npm/v/loadable-components.svg?style=flat-square\n[package]: https://www.npmjs.com/package/loadable-components\n[license-badge]: https://img.shields.io/npm/l/loadable-components.svg?style=flat-square\n[license]: https://github.com/smooth-code/loadable-components/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[chat]: https://gitter.im/smooth-code/loadable-components\n[chat-badge]: https://img.shields.io/gitter/room/smooth-code/loadable-components.svg?style=flat-square\n[github-watch-badge]: https://img.shields.io/github/watchers/smooth-code/loadable-components.svg?style=social\n[github-watch]: https://github.com/smooth-code/loadable-components/watchers\n[github-star-badge]: https://img.shields.io/github/stars/smooth-code/loadable-components.svg?style=social\n[github-star]: https://github.com/smooth-code/loadable-components/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20loadable-components!%20https://github.com/smooth-code/loadable-components%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/smooth-code/loadable-components.svg?style=social\n[size-badge]: http://img.badgesize.io/https://unpkg.com/loadable-components/dist/loadable-components.min.js?compression=gzip&style=flat-square\n[build-min]: https://unpkg.com/loadable-components/dist/loadable-components.min.js\n","readmeFilename":"README.md"}