feat: support multiple Webpack runtimes (#701)

* feat: support multiple Webpack runtimes * namespace chunk loading global in loadableReady * Change namespace to chunkLoadingGlobal * Update size snapshot
gregberge · Apr 5, 2021 · d351367 · d351367
1 parent b640c82
commit d351367
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 })