From d3513679ed680e46967ca18555116c06e5a4b341 Mon Sep 17 00:00:00 2001 From: Will Van Rensselaer <35181014+wvanrensselaer@users.noreply.github.com> Date: Sun, 4 Apr 2021 23:54:30 -0600 Subject: [PATCH] feat: support multiple Webpack runtimes (#701) * feat: support multiple Webpack runtimes * namespace chunk loading global in loadableReady * Change namespace to chunkLoadingGlobal * Update size snapshot --- packages/component/.size-snapshot.json | 12 ++++++------ packages/component/src/loadableReady.js | 6 +++--- packages/webpack-plugin/src/index.js | 9 +++++---- .../src/pages/docs/api-loadable-component.mdx | 17 +++++++++-------- .../pages/docs/api-loadable-webpack-plugin.mdx | 15 ++++++++------- 5 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json index fde1593e4..e5c0b3392 100644 --- a/packages/component/.size-snapshot.json +++ b/packages/component/.size-snapshot.json @@ -1,13 +1,13 @@ { "dist/loadable.cjs.js": { - "bundled": 16354, - "minified": 7304, - "gzipped": 2565 + "bundled": 16504, + "minified": 7301, + "gzipped": 2586 }, "dist/loadable.esm.js": { - "bundled": 15975, - "minified": 7000, - "gzipped": 2495, + "bundled": 16125, + "minified": 6997, + "gzipped": 2516, "treeshaked": { "rollup": { "code": 276, diff --git a/packages/component/src/loadableReady.js b/packages/component/src/loadableReady.js index 45497513c..11e8dedf4 100644 --- a/packages/component/src/loadableReady.js +++ b/packages/component/src/loadableReady.js @@ -8,7 +8,7 @@ const BROWSER = typeof window !== 'undefined' export default function loadableReady( done = () => {}, - { namespace = '' } = {}, + { namespace = '', chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__' } = {}, ) { if (!BROWSER) { warn('`loadableReady()` must be called in browser only') @@ -49,8 +49,8 @@ export default function loadableReady( let resolved = false return new Promise(resolve => { - window.__LOADABLE_LOADED_CHUNKS__ = window.__LOADABLE_LOADED_CHUNKS__ || [] - const loadedChunks = window.__LOADABLE_LOADED_CHUNKS__ + window[chunkLoadingGlobal] = window[chunkLoadingGlobal] || [] + const loadedChunks = window[chunkLoadingGlobal] const originalPush = loadedChunks.push.bind(loadedChunks) function checkReadyState() { diff --git a/packages/webpack-plugin/src/index.js b/packages/webpack-plugin/src/index.js index f648ef9b0..77a868621 100644 --- a/packages/webpack-plugin/src/index.js +++ b/packages/webpack-plugin/src/index.js @@ -10,8 +10,9 @@ class LoadablePlugin { path, writeToDisk, outputAsset = true, + chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__', } = {}) { - this.opts = { filename, writeToDisk, outputAsset, path } + this.opts = { filename, writeToDisk, outputAsset, path, chunkLoadingGlobal } // The Webpack compiler instance this.compiler = null @@ -86,11 +87,11 @@ class LoadablePlugin { const version = 'jsonpFunction' in compiler.options.output ? 4 : 5 - // Add a custom chunk loading callback __LOADABLE_LOADED_CHUNKS__ + // Add a custom chunk loading callback if (version === 4) { - compiler.options.output.jsonpFunction = '__LOADABLE_LOADED_CHUNKS__' + compiler.options.output.jsonpFunction = this.opts.chunkLoadingGlobal } else { - compiler.options.output.chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__' + compiler.options.output.chunkLoadingGlobal = this.opts.chunkLoadingGlobal } if (this.opts.outputAsset || this.opts.writeToDisk) { diff --git a/website/src/pages/docs/api-loadable-component.mdx b/website/src/pages/docs/api-loadable-component.mdx index f651d1629..e95ca7611 100644 --- a/website/src/pages/docs/api-loadable-component.mdx +++ b/website/src/pages/docs/api-loadable-component.mdx @@ -26,6 +26,7 @@ const OtherComponent = loadable(() => import('./OtherComponent')) ``` ### `options.resolveComponent` + This is a function that receives the imported module (what the `import()` call resolves to) and the props, and returns the component. The default value assumes that the component is exported as a default export. @@ -43,17 +44,16 @@ export const Orange = () => 'Orange!' // loadable.js const LoadableApple = loadable(() => import('./components'), { - resolveComponent: (components) => components.Apple, + resolveComponent: components => components.Apple, }) const LoadableOrange = loadable(() => import('./components'), { - resolveComponent: (components) => components.Orange, + resolveComponent: components => components.Orange, }) const LoadableFruit = loadable(() => import('./components'), { resolveComponent: (components, props) => components[props.fruit], }) - ``` **Note:** The default `resolveComponent` breaks Typescript type inference due to CommonJS compatibility. @@ -169,11 +169,12 @@ A component created using `loadable.lib` or `lazy.lib`. Wait for all loadable components to be loaded. This method must only be used with Server Side Rendering, see [Server Side Rendering guide](/docs/server-side-rendering/). -| Arguments | Description | -| ------------------- | ----------------------------------------------------------------------------------------- | -| `done` | Function called when all components are loaded. | -| `options` | Optional options. | -| `options.namespace` | Namespace of your application (use only if you have several React apps on the same page). | +| Arguments | Description | +| ---------------------------- | ----------------------------------------------------------------------------------------- | +| `done` | Function called when all components are loaded. | +| `options` | Optional options. | +| `options.namespace` | Namespace of your application (use only if you have several React apps on the same page). | +| `options.chunkLoadingGlobal` | A custom `chunkLoadingGlobal` if set in the Webpack plugin | ```js import { loadableReady } from '@loadable/component' diff --git a/website/src/pages/docs/api-loadable-webpack-plugin.mdx b/website/src/pages/docs/api-loadable-webpack-plugin.mdx index bf1be8553..41cd1f0bb 100644 --- a/website/src/pages/docs/api-loadable-webpack-plugin.mdx +++ b/website/src/pages/docs/api-loadable-webpack-plugin.mdx @@ -10,13 +10,14 @@ order: 30 Create a webpack loadable plugin. -| Arguments | Description | -| ------------------------------ | ----------------------------------------------------------------------------------- | -| `options` | Optional options | -| `options.filename` | Stats filename (default to `loadable-stats.json`) | -| `options.outputAsset` | Always write stats file to the `output.path` directory. Defaults to `true` | -| `options.writeToDisk` | Accepts `boolean` or `object`. Always write stats file to disk. Default to `false`. | -| `options.writeToDisk.filename` | Write assets to disk at given `filename` location | +| Arguments | Description | +| ------------------------------ | -------------------------------------------------------------------------------------------- | +| `options` | Optional options | +| `options.filename` | Stats filename (default to `loadable-stats.json`) | +| `options.outputAsset` | Always write stats file to the `output.path` directory. Defaults to `true` | +| `options.writeToDisk` | Accepts `boolean` or `object`. Always write stats file to disk. Default to `false`. | +| `options.writeToDisk.filename` | Write assets to disk at given `filename` location | +| `options.chunkLoadingGlobal` | Overrides Webpack's `chunkLoadingGlobal` allowing multiple Webpack runtimes on the same page | ```js new LoadablePlugin({ filename: 'stats.json', writeToDisk: true })