Use loadable-components instead of react-loadable

stereobooster · Nov 24, 2017 · ec0314f · ec0314f
1 parent 040612e
commit ec0314f
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "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#save-state",
     "readdirp": "^2.1.0",
     "s3-sync-aws": "^1.1.1",
     "sw-precache": "^5.2.0",
@@ -20,8 +20,8 @@
     "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",
+    "react-snap-loadable-components": "^0.3.6",
     "styled-components": "^2.2.3"
   },
   "scripts": {
@@ -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 "react-snap-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,36 @@ 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, forEach } from "react-snap-loadable-components";
+
+window.snapSaveState = () => {
+  const componentIds = [];
+  forEach(x => {
+    if (x.loadingPromise) componentIds.push(x.componentId);
+  });
+  return {
+    "__LOADABLE_COMPONENT_IDS__": componentIds
+  }
+}
+
+const AppWithRouter = (
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
 const rootElement = document.getElementById("root");
+
 if (rootElement.hasChildNodes()) {
-  hydrate(<App />, rootElement);
+  loadComponents().then(() => {
+    hydrate(AppWithRouter, rootElement);
+  });
 } else {
-  render(<App />, rootElement);
+  render(AppWithRouter, rootElement);
 }
 
 // render(<App />, rootElement);
-
-registerServiceWorker();
+// registerServiceWorker();
+unregister();