Allow webpack cache isReady only for initial chunks

packages/babel-plugin/src/__snapshots__/index.test.js.snap

@@ -13,7 +13,7 @@ exports[`plugin Magic comment should remove only needed comments 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -69,7 +69,7 @@ exports[`plugin Magic comment should transpile arrow functions 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -125,7 +125,7 @@ exports[`plugin Magic comment should transpile function expression 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -184,7 +184,7 @@ exports[`plugin Magic comment should transpile shortand properties 1`] = `
     isReady(props) {
       const key = this.resolve(props);
 
-      if (this.resolved[key] === false) {
+      if (this.resolved[key] !== true) {
         return false;
       }
 
@@ -245,7 +245,7 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -305,7 +305,7 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -361,7 +361,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support comp
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -419,7 +419,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -479,7 +479,7 @@ exports[`plugin aggressive import without "webpackChunkName" should support simp
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -535,7 +535,7 @@ exports[`plugin loadable.lib should be transpiled too 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -591,7 +591,7 @@ exports[`plugin simple import in a complex promise should work 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -647,7 +647,7 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -703,7 +703,7 @@ exports[`plugin simple import should work with * in name 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -759,7 +759,7 @@ exports[`plugin simple import should work with + concatenation 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -815,7 +815,7 @@ exports[`plugin simple import should work with template literal 1`] = `
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -871,7 +871,7 @@ exports[`plugin simple import with "webpackChunkName" comment should use it 1`]
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -927,7 +927,7 @@ exports[`plugin simple import with "webpackChunkName" comment should use it even
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 
@@ -983,7 +983,7 @@ exports[`plugin simple import without "webpackChunkName" comment should add it 1
   isReady(props) {
     const key = this.resolve(props);
 
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false;
     }
 

packages/babel-plugin/src/properties/isReady.js

@@ -1,7 +1,7 @@
 export default function isReadyProperty({ types: t, template }) {
   const statements = template.ast(`
     const key=this.resolve(props)
-    if (this.resolved[key] === false) {
+    if (this.resolved[key] !== true) {
       return false
     }
 

packages/component/.size-snapshot.json

@@ -0,0 +1,21 @@
+{
+  "dist/loadable.cjs.js": {
+    "bundled": 12852,
+    "minified": 6137,
+    "gzipped": 2208
+  },
+  "dist/loadable.esm.js": {
+    "bundled": 12469,
+    "minified": 5828,
+    "gzipped": 2141,
+    "treeshaked": {
+      "rollup": {
+        "code": 259,
+        "import_statements": 259
+      },
+      "webpack": {
+        "code": 5061
+      }
+    }
+  }
+}

packages/component/src/createLoadable.js

@@ -2,6 +2,7 @@
 import React from 'react'
 import { invariant } from './util'
 import Context from './Context'
+import {LOADABLE_SHARED} from "./shared";
 
 function resolveConstructor(ctor) {
   if (typeof ctor === 'function') {
@@ -82,7 +83,13 @@ function createLoadable({ resolve = identity, render, onLoad }) {
         // If module is already loaded, we use a synchronous loading
         // Only perform this synchronous loading if the component has not
         // been marked with no SSR, else we risk hydration mismatches
-        if (options.ssr !== false && ctor.isReady && ctor.isReady(props)) {
+        if (options.ssr !== false && (
+          // is ready - was loaded in this session
+          (ctor.isReady && ctor.isReady(props)) ||
+          // is ready - was loaded during SSR process
+          (ctor.chunkName && LOADABLE_SHARED.initialChunks[ctor.chunkName(props)])
+          )
+        ) {
           this.loadSync()
         }
       }

packages/component/src/loadableReady.js

@@ -2,6 +2,7 @@
 /* eslint-env browser */
 import { warn } from './util'
 import { getRequiredChunkKey } from './sharedInternals'
+import {LOADABLE_SHARED} from "./shared";
 
 const BROWSER = typeof window !== 'undefined'
 
@@ -19,7 +20,10 @@ export default function loadableReady(
   if (BROWSER) {
     const dataElement = document.getElementById(getRequiredChunkKey(namespace))
     if (dataElement) {
-      requiredChunks = JSON.parse(dataElement.textContent)
+      requiredChunks = JSON.parse(dataElement.textContent);
+      requiredChunks.forEach(chunk => {
+        LOADABLE_SHARED.initialChunks[chunk] = true;
+      });
     }
   }
 

packages/component/src/shared.js

@@ -0,0 +1,3 @@
+export const LOADABLE_SHARED = {
+  initialChunks: {}
+}

yarn.lock

@@ -6531,6 +6531,13 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+make-dir@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
 make-fetch-happen@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz#aa8387104f2687edca01c8687ee45013d02d19bd"