Ravenholdt/Calculateur-Talents-Wow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add simple route-based code splitting

Browse Source
This commit is contained in:
Melvin Valster
2019-07-26 23:45:47 +02:00
parent f80774c18f
commit 12702d7592
9 changed files with 98 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
-1
View File
@@ -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
+2
View File
@@ -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
+9 -5
View File
@@ -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
+18 -6
View File
@@ -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>
<Route exact path="/playground" component={Playground} />
<Route path="/:selectedClass?/:pointString?" component={IndexRoute} />
</Switch>
<div className="main">
<Switch>
<Route exact path="/playground" component={LoadablePlayground} />
<Route path="/:selectedClass?/:pointString?" component={LoadableHome} />
</Switch>
</div>
<footer>
<Link to="/">Home</Link>
src/components/PageLoader.tsx
+16
View File
@@ -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/components/IndexRoute.tsx → src/containers/Home.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react'
import { Calculator } from './Calculator'
import { ClassPicker } from './ClassPicker'
import { Calculator } from '../components/Calculator'
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/components/Playground.scss → src/containers/Playground.scss
View File
src/components/Playground.tsx → src/containers/Playground.tsx
+6 -6
View File
@@ -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 { Tooltip } from './Tooltip'
import { Talent } from './Talent'
import { Icon } from '../components/Icon'
import { Tooltip } from '../components/Tooltip'
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
+44 -1
View File
@@ -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"