Merge pull request #589 from gregberge/fix-chunk-numbers

hotfix: chunk numbers
gregberge · Jul 2, 2020 · dd9e905 · dd9e905
2 parents fb0cc38 + 4a0879a
commit dd9e905
Show file tree

Hide file tree

Showing 7 changed files with 321 additions and 211 deletions.
diff --git a/examples/server-side-rendering/package.json b/examples/server-side-rendering/package.json
@@ -5,7 +5,8 @@
     "build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
     "build:webpack": "webpack",
     "build:lib": "babel -d lib src",
-    "start": "NODE_ENV=production node lib/server/main.js"
+    "start": "NODE_ENV=production node lib/server/main.js",
+    "link:all": "yarn link @loadable/babel-plugin && yarn link @loadable/server && yarn link @loadable/component"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

diff --git a/packages/codemod/package.json b/packages/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "loadable-codemod",
-  "description": "Various codemods related to @loadable/components for easier migration/ugprades.",
+  "description": "Various codemods related to @loadable/components for easier migration/upgrades.",
   "version": "5.13.0",
   "repository": "git@github.com:gregberge/loadable-components.git",
   "author": "Jacky Efendi <jacky.efendi1@gmail.com>",

diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 13566,
-    "minified": 6556,
-    "gzipped": 2340
+    "bundled": 13945,
+    "minified": 6737,
+    "gzipped": 2397
   },
   "dist/loadable.esm.js": {
-    "bundled": 13187,
-    "minified": 6252,
-    "gzipped": 2269,
+    "bundled": 13566,
+    "minified": 6433,
+    "gzipped": 2326,
     "treeshaked": {
       "rollup": {
         "code": 276,

diff --git a/packages/component/src/loadableReady.js b/packages/component/src/loadableReady.js
@@ -1,14 +1,15 @@
 /* eslint-disable no-underscore-dangle, camelcase */
 /* eslint-env browser */
-import { warn } from './util'
-import { getRequiredChunkKey } from './sharedInternals'
+import {warn} from './util'
+import {getRequiredChunkKey} from './sharedInternals'
 import {LOADABLE_SHARED} from "./shared";
 
 const BROWSER = typeof window !== 'undefined'
 
 export default function loadableReady(
-  done = () => {},
-  { namespace = '' } = {},
+  done = () => {
+  },
+  {namespace = ''} = {},
 ) {
   if (!BROWSER) {
     warn('`loadableReady()` must be called in browser only')
@@ -18,12 +19,21 @@ export default function loadableReady(
 
   let requiredChunks = null
   if (BROWSER) {
-    const dataElement = document.getElementById(getRequiredChunkKey(namespace))
+    const id = getRequiredChunkKey(namespace)
+    const dataElement = document.getElementById(id)
     if (dataElement) {
       requiredChunks = JSON.parse(dataElement.textContent);
-      requiredChunks.forEach(chunk => {
-        LOADABLE_SHARED.initialChunks[chunk] = true;
-      });
+
+      const extElement = document.getElementById(`${id}_ext`);
+      if (extElement) {
+        const {namedChunks} = JSON.parse(extElement.textContent);
+        namedChunks.forEach(chunkName => {
+          LOADABLE_SHARED.initialChunks[chunkName] = true;
+        });
+      } else {
+        // version mismatch
+        throw new Error('loadable-component: @loabable/server does not match @loadable/component');
+      }
     }
   }
 

diff --git a/packages/server/__fixtures__/stats.json b/packages/server/__fixtures__/stats.json
@@ -204,7 +204,7 @@
     },
     "letters-A": {
       "chunks": [
-        "letters-A"
+        "chunk-0-for-letters-A"
       ],
       "assets": [
         "letters-A.css",

diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
@@ -5,9 +5,9 @@ import uniq from 'lodash/uniq'
 import uniqBy from 'lodash/uniqBy'
 import flatMap from 'lodash/flatMap'
 import React from 'react'
-import { invariant, getRequiredChunkKey } from './sharedInternals'
+import {invariant, getRequiredChunkKey} from './sharedInternals'
 import ChunkExtractorManager from './ChunkExtractorManager'
-import { smartRequire, joinURLPath } from './util'
+import {smartRequire, joinURLPath} from './util'
 
 const EXTENSION_SCRIPT_TYPES = {
   '.js': 'script',
@@ -64,7 +64,7 @@ function assetToScriptElement(asset, extraProps) {
   )
 }
 
-function assetToStyleString(asset, { inputFileSystem }) {
+function assetToStyleString(asset, {inputFileSystem}) {
   return new Promise((resolve, reject) => {
     inputFileSystem.readFile(asset.path, 'utf8', (err, data) => {
       if (err) {
@@ -82,7 +82,7 @@ function assetToStyleTag(asset, extraProps) {
   }"${getSriHtmlAttributes(asset)}${extraPropsToString(asset, extraProps)}>`
 }
 
-function assetToStyleTagInline(asset, extraProps, { inputFileSystem }) {
+function assetToStyleTagInline(asset, extraProps, {inputFileSystem}) {
   return new Promise((resolve, reject) => {
     inputFileSystem.readFile(asset.path, 'utf8', (err, data) => {
       if (err) {
@@ -113,7 +113,7 @@ function assetToStyleElement(asset, extraProps) {
   )
 }
 
-function assetToStyleElementInline(asset, extraProps, { inputFileSystem }) {
+function assetToStyleElementInline(asset, extraProps, {inputFileSystem}) {
   return new Promise((resolve, reject) => {
     inputFileSystem.readFile(asset.path, 'utf8', (err, data) => {
       if (err) {
@@ -124,7 +124,7 @@ function assetToStyleElementInline(asset, extraProps, { inputFileSystem }) {
         <style
           key={asset.url}
           data-chunk={asset.chunk}
-          dangerouslySetInnerHTML={{ __html: data }}
+          dangerouslySetInnerHTML={{__html: data}}
           {...handleExtraProps(asset, extraProps)}
         />,
       )
@@ -172,14 +172,14 @@ function isValidChunkAsset(chunkAsset) {
 
 class ChunkExtractor {
   constructor({
-    statsFile,
-    stats,
-    entrypoints = ['main'],
-    namespace = '',
-    outputPath,
-    publicPath,
-    inputFileSystem = fs,
-  } = {}) {
+                statsFile,
+                stats,
+                entrypoints = ['main'],
+                namespace = '',
+                outputPath,
+                publicPath,
+                inputFileSystem = fs,
+              } = {}) {
     this.namespace = namespace
     this.stats = stats || smartRequire(statsFile)
     this.publicPath = publicPath || this.stats.publicPath
@@ -200,7 +200,7 @@ class ChunkExtractor {
     return chunkGroup
   }
 
-  createChunkAsset({ filename, chunk, type, linkType }) {
+  createChunkAsset({filename, chunk, type, linkType}) {
     return {
       filename,
       scriptType: extensionToScriptType(
@@ -279,27 +279,47 @@ class ChunkExtractor {
     return JSON.stringify(this.getChunkDependencies(this.chunks))
   }
 
+  getRequiredChunksNamesScriptContent() {
+    return JSON.stringify({
+      namedChunks: this.chunks,
+    })
+  }
+
   getRequiredChunksScriptTag(extraProps) {
-    return `<script id="${getRequiredChunkKey(
-      this.namespace,
-    )}" type="application/json"${extraPropsToString(
+    const id = getRequiredChunkKey(this.namespace);
+    const props = `type="application/json"${extraPropsToString(
       null,
       extraProps,
-    )}>${this.getRequiredChunksScriptContent()}</script>`
+    )}`;
+    return [
+      `<script id="${id}" ${props}>${this.getRequiredChunksScriptContent()}</script>`,
+      `<script id="${id}_ext" ${props}>${this.getRequiredChunksNamesScriptContent()}</script>`,
+    ].join('');
   }
 
   getRequiredChunksScriptElement(extraProps) {
-    return (
+    const id = getRequiredChunkKey(this.namespace);
+    const props = {
+      type: "application/json",
+      ...handleExtraProps(null, extraProps)
+    }
+    return [
       <script
-        key="required"
-        id={getRequiredChunkKey(this.namespace)}
-        type="application/json"
+        id={id}
         dangerouslySetInnerHTML={{
           __html: this.getRequiredChunksScriptContent(),
         }}
-        {...handleExtraProps(null, extraProps)}
+        {...props}
+
+      />,
+      <script
+        id={`${id}_ext`}
+        dangerouslySetInnerHTML={{
+          __html: this.getRequiredChunksNamesScriptContent(),
+        }}
+        {...props}
       />
-    )
+    ]
   }
 
   // Public methods
@@ -325,7 +345,7 @@ class ChunkExtractor {
     invariant(mainAsset, 'asset not found')
 
     this.stats.assets
-      .filter(({ name }) => {
+      .filter(({name}) => {
         const type = extensionToScriptType(
           path
             .extname(name)
@@ -334,7 +354,7 @@ class ChunkExtractor {
         )
         return type === 'script'
       })
-      .forEach(({ name }) => {
+      .forEach(({name}) => {
         smartRequire(path.join(this.outputPath, name.split('?')[0]))
       })