Use loadable-components instead of react-loadable

stereobooster · Nov 23, 2017 · 7df1073 · 7df1073
1 parent 040612e
commit 7df1073
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -7,20 +7,20 @@
     "level": "^2.0.1",
     "prettier": "^1.8.2",
     "react-scripts": "^1.0.17",
-    "react-snap": "1.0.5",
+    "react-snap": "https://github.com/stereobooster/react-snap.git#fix-for-46",
     "readdirp": "^2.1.0",
     "s3-sync-aws": "^1.1.1",
     "sw-precache": "^5.2.0",
     "uglifyjs": "^2.4.11"
   },
   "dependencies": {
     "appcache-nanny": "^1.1.0",
+    "loadable-components": "^0.3.0",
     "preact": "^8.2.6",
     "preact-compat": "^3.17.0",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
     "react-helmet": "^5.2.0",
-    "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2",
     "styled-components": "^2.2.3"
   },
@@ -40,10 +40,11 @@
   "reactSnap": {
     "cacheAjaxRequests": true,
     "inlineCss": true,
-    "asyncScriptTags": true,
+    "asyncScriptTags": false,
     "removeStyleTags": false,
     "include": [
       "/shell.html"
-    ]
+    ],
+    "asyncComponentsTrick": true
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,27 +1,23 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import Helmet from "react-helmet";
 import Wrapper from "./components/Wrapper";
 import Title from "./components/Title";
 import Nav from "./components/Nav";
 import NavLink from "./components/NavLink";
-import Loadable from "react-loadable";
+import loadable from "loadable-components";
 
-const Home = Loadable({
-  loader: () => import("./views/Home"),
-  loading: () => null
+const Home = loadable(() => import("./views/Home"), {
+  LoadingComponent: () => null
 });
-const About = Loadable({
-  loader: () => import("./views/About"),
-  loading: () => null
+const About = loadable(() => import("./views/About"), {
+  LoadingComponent: () => null
 });
-const Countries = Loadable({
-  loader: () => import("./views/Countries"),
-  loading: () => null
+const Countries = loadable(() => import("./views/Countries"), {
+  LoadingComponent: () => null
 });
-const NoMatch = Loadable({
-  loader: () => import("./views/NoMatch"),
-  loading: () => null
+const NoMatch = loadable(() => import("./views/NoMatch"), {
+  LoadingComponent: () => null
 });
 
 const title = "You Are Doing Great";
@@ -81,27 +77,29 @@ class App extends Component {
 
   render() {
     return (
-      <Router>
-        <Wrapper>
-          <Helmet titleTemplate={`%s - ${title}`} />
-          <Title>YADG</Title>
-          <Nav>
-            <h1>Navigation</h1>
-            {routes.map((route, i) => (
-              <NavLink
-                key={i}
-                {...route}
-                reload={this.state.serviceWorkerState === "new"}
-              />
-            ))}
-          </Nav>
-          <Switch>
-            {routes.map((route, i) => <Route key={i} {...route} />)}
-            <Route key={"/shell.html"} path="/shell.html" component={() => null} />
-            <Route key={"/404.html"} component={NoMatch} />
-          </Switch>
-        </Wrapper>
-      </Router>
+      <Wrapper>
+        <Helmet titleTemplate={`%s - ${title}`} />
+        <Title>YADG</Title>
+        <Nav>
+          <h1>Navigation</h1>
+          {routes.map((route, i) => (
+            <NavLink
+              key={i}
+              {...route}
+              reload={this.state.serviceWorkerState === "new"}
+            />
+          ))}
+        </Nav>
+        <Switch>
+          {routes.map((route, i) => <Route key={i} {...route} />)}
+          <Route
+            key={"/shell.html"}
+            path="/shell.html"
+            component={() => null}
+          />
+          <Route key={"/404.html"} component={NoMatch} />
+        </Switch>
+      </Wrapper>
     );
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -3,15 +3,28 @@ import { hydrate, render } from "react-dom";
 // import { render } from 'react-dom';
 import App from "./App";
 import "./index.css";
-import registerServiceWorker from "./registerServiceWorker";
+import registerServiceWorker, { unregister } from "./registerServiceWorker";
 
+import { BrowserRouter } from "react-router-dom";
+import { loadComponents } from "loadable-components";
+
+const AppWithRouter = (
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
 const rootElement = document.getElementById("root");
+
 if (rootElement.hasChildNodes()) {
-  hydrate(<App />, rootElement);
+  window.bootReactSnapApp = () => {
+    loadComponents().then(() => {
+      hydrate(AppWithRouter, rootElement);
+    });
+  };
 } else {
-  render(<App />, rootElement);
+  render(AppWithRouter, rootElement);
 }
 
 // render(<App />, rootElement);
-
-registerServiceWorker();
+// registerServiceWorker();
+unregister();
diff --git a/yarn.lock b/yarn.lock
@@ -4546,6 +4546,10 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
+loadable-components@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/loadable-components/-/loadable-components-0.3.0.tgz#19c8b2cf57c22a00090aa0563b43dd92e1473d82"
+
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -5844,7 +5848,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6078,12 +6082,6 @@ react-helmet@^5.2.0:
     prop-types "^15.5.4"
     react-side-effect "^1.1.0"
 
-react-loadable@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd"
-  dependencies:
-    prop-types "^15.5.0"
-
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -6157,9 +6155,9 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^0.2.2"
 
-react-snap@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-snap/-/react-snap-1.0.5.tgz#33330b31d6f551c7354352bb6bb05bdd1f025f32"
+"react-snap@https://github.com/stereobooster/react-snap.git#fix-for-46":
+  version "1.0.7"
+  resolved "https://github.com/stereobooster/react-snap.git#b2e9ff1b0407e8dbd20a4b5fda0636207d55f4a1"
   dependencies:
     clean-css "^4.1.9"
     express "^4.16.1"