Add simple route-based code splitting

TODO.md

@@ -13,5 +13,4 @@
   - [ ] Reset button per tree (?)
 - [ ] Tooltips: 
   - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport)
-- [ ] [Code splitting?](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) 
 - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2

package.json

@@ -13,6 +13,7 @@
     "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-loadable": "^5.5.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "typescript": "3.5.3"
@@ -45,6 +46,7 @@
   "devDependencies": {
     "@types/cheerio": "^0.22.12",
     "@types/node-fetch": "^2.5.0",
+    "@types/react-loadable": "^5.5.1",
     "@types/request": "^2.48.2",
     "@welldone-software/why-did-you-render": "^3.2.1",
     "cheerio": "^1.0.0-rc.3",

src/App.scss

@@ -1,10 +1,18 @@
 @import "sass/config";
 
+.main {
+  min-height: 85vh;
+}
+
+html, body {
+  padding: 0;
+  height: 0;
+}
+
 body {
   color: white;
   background-color: #111;
   font-family: Verdana;
-  margin: 0;
 }
 
 // Normalize etc.
@@ -52,10 +60,6 @@ a {
   }
 }
 
-.index {
-  min-height: 85vh;
-}
-
 .index__class-picker {
   margin: 2em 0;
 }

src/App.tsx

@@ -1,18 +1,30 @@
 import React from 'react'
 import './App.scss'
-import { IndexRoute } from './components/IndexRoute'
-import { Playground } from './components/Playground'
 import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
+import Loadable from 'react-loadable'
+import { PageLoader } from './components/PageLoader'
+
+const LoadableHome = Loadable({
+  loader: () => import('./containers/Home'),
+  loading: PageLoader
+})
+
+const LoadablePlayground = Loadable({
+  loader: () => import('./containers/Playground'),
+  loading: PageLoader
+})
 
 const App: React.FC = () => {
   return (
     <Router>
     {/* <Router basename={process.env.NODE_ENV !== 'development' ? '%PUBLIC_URL%' : ''}> */}
       <div className="App">
-        <Switch>
+        <div className="main">
-          <Route exact path="/playground" component={Playground} />
+          <Switch>
-          <Route path="/:selectedClass?/:pointString?" component={IndexRoute} />
+            <Route exact path="/playground" component={LoadablePlayground} />
-        </Switch>
+            <Route path="/:selectedClass?/:pointString?" component={LoadableHome} />
+          </Switch>
+        </div>
 
         <footer>
           <Link to="/">Home</Link>

src/components/PageLoader.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { LoadingComponentProps as Props } from 'react-loadable'
+
+export const PageLoader: FC<Props> = ({ isLoading, pastDelay, error, retry, timedOut }) => {
+  const retryButton = <button onClick={retry}>retry</button>
+
+  if (error) {
+    return <div>Something went awry... do you wish to {retryButton}?</div>
+  } else if (timedOut) {
+    return <div>Taking some time... {retryButton}?</div>
+  } else if (pastDelay) {
+    return <div>Loading...</div>
+  } else {
+    return null
+  }
+}

src/containers/Home.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Calculator } from './Calculator'
+import { Calculator } from '../components/Calculator'
-import { ClassPicker } from './ClassPicker'
+import { ClassPicker } from '../components/ClassPicker'
 import { match } from 'react-router-dom'
 import { RouteComponentProps } from 'react-router'
 import { decodeKnownTalents } from '../lib/tree'
@@ -13,7 +13,7 @@ interface Props extends RouteComponentProps {
   }>
 }
 
-export class IndexRoute extends React.PureComponent<Props> {
+export default class Home extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   componentDidMount() {

src/containers/Playground.tsx

@@ -1,13 +1,13 @@
 import './Playground.scss'
 import React, { FC } from 'react'
-import { ClassPicker } from './ClassPicker'
+import { ClassPicker } from '../components/ClassPicker'
 import { RouteComponentProps } from 'react-router'
-import { Icon } from './Icon'
+import { Icon } from '../components/Icon'
-import { Tooltip } from './Tooltip'
+import { Tooltip } from '../components/Tooltip'
-import { Talent } from './Talent'
+import { Talent } from '../components/Talent'
 import { talentsById } from '../data/talents'
 import { Map } from 'immutable'
-import { SpellTooltip } from './SpellTooltip';
+import { SpellTooltip } from '../components/SpellTooltip';
 import classNames from 'classnames'
 
 interface Props extends RouteComponentProps {
@@ -48,7 +48,7 @@ const Section: FC<any> = (props) => {
   </div>
 }
 
-export class Playground extends React.PureComponent<Props> {
+export default class Playground extends React.PureComponent<Props> {
   static whyDidYouRender = true
 
   state = {

yarn.lock

@@ -1238,6 +1238,11 @@
     "@svgr/plugin-svgo" "^4.0.3"
     loader-utils "^1.1.0"
 
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -1354,6 +1359,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-loadable@^5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@types/react-loadable/-/react-loadable-5.5.1.tgz#f04a262f16e9f088098ddad1aa50682ad0984aa7"
+  integrity sha512-PSmh6IT9vHeO9QjhApMMiJ65T0Amrpf3fom+04ur872IdgCZK9MzjeN3Q11bzgQMkrV448sbT8WopQw9o0LX1g==
+  dependencies:
+    "@types/react" "*"
+    "@types/webpack" "*"
+
 "@types/react-router-dom@^4.3.4":
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.4.tgz#63a7a8558129d2f4ff76e4bdd099bf4b98e25a0d"
@@ -1394,11 +1407,34 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/tapable@*":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
+  integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
+
 "@types/tough-cookie@*":
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-2.3.5.tgz#9da44ed75571999b65c37b60c9b2b88db54c585d"
   integrity sha512-SCcK7mvGi3+ZNz833RRjFIxrn4gI1PPR3NtuIS+6vMkvmsGjosqTJwRt5bAEFLRz+wtJMWv8+uOnZf2hi2QXTg==
 
+"@types/uglify-js@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
+  integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==
+  dependencies:
+    source-map "^0.6.1"
+
+"@types/webpack@*":
+  version "4.32.1"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.32.1.tgz#6e95010e806f808abd6551c112097ac09035aacf"
+  integrity sha512-9n38CBx9uga1FEAdTipnt0EkbKpsCJFh7xJb1LE65FFb/A6OOLFX022vYsGC1IyVCZ/GroNg9u/RMmlDxGcLIw==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    source-map "^0.6.0"
+
 "@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
   version "12.0.12"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
@@ -8180,7 +8216,7 @@ prompts@^2.0.1:
     kleur "^3.0.2"
     sisteransi "^1.0.0"
 
-prop-types@^15.6.2:
+prop-types@^15.5.0, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8412,6 +8448,13 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-loadable@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
+  integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
+  dependencies:
+    prop-types "^15.5.0"
+
 react-router-dom@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"