Real world example with react, babel and code splitting by routes

.babelrc

@@ -0,0 +1,39 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": [
+          ">1%",
+          "last 4 versions",
+          "Firefox ESR",
+          "not ie < 10"
+        ]
+      }
+    }],
+    ["es2015", { "modules": false }],
+    "react"
+  ],
+  "plugins": [
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    ["transform-object-rest-spread", { useBuiltIns: true }],
+    ["transform-react-jsx", { useBuiltIns: true }],
+    ["transform-runtime", {
+      "helpers": false,
+      "polyfill": false,
+      "regenerator": true,
+      "moduleName": "babel-runtime"
+    }],
+    "transform-es2015-parameters",
+    ["transform-regenerator", {"async": false}]
+  ],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"],
+      "plugins": [
+        "transform-react-jsx-source",
+        "transform-react-jsx-self"
+      ]
+    }
+  }
+}

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+.DS_Store
 
 # Runtime data
 pids

TODO.md

@@ -0,0 +1,2 @@
+## TODO
+- [ ] Continue with router code splitting. Not clear how to do it right :/

package.json

@@ -1,26 +1,52 @@
 {
   "name": "webpack-long-term-cache-demo",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A demo project which leverages long-term caching for webpack assets",
   "main": "",
   "scripts": {
-    "start": "webpack",
+    "start": "NODE_ENV=production node server.js",
+    "build": "npm run clean && NODE_ENV=production webpack --config webpack/production.js",
+    "clean": "./node_modules/rimraf/bin.js build/*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "webpack",
     "cache",
     "long-term",
     "demo",
-    "sample"
+    "sample",
+    "react",
+    "babel"
   ],
   "author": "@okonetchnikov",
   "license": "ISC",
   "devDependencies": {
-    "chunk-manifest-webpack-plugin": "0.0.1",
-    "node-libs-browser": "^0.5.2",
-    "webpack": "^1.10.1",
-    "webpack-manifest-plugin": "^0.3.0",
+    "babel-core": "6.22.1",
+    "babel-loader": "6.2.10",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
+    "babel-plugin-transform-react-jsx-self": "6.22.0",
+    "babel-plugin-transform-react-jsx-source": "6.22.0",
+    "babel-plugin-transform-runtime": "6.22.0",
+    "babel-polyfill": "6.22.0",
+    "babel-preset-env": "1.1.8",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-react": "6.22.0",
+    "babel-preset-react-hmre": "1.1.1",
+    "babel-preset-stage-0": "6.22.0",
+    "html-webpack-plugin": "2.26.0",
+    "inline-manifest-webpack-plugin": "^3.0.1",
+    "rimraf": "2.5.4",
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.2.1",
     "webpack-md5-hash": "0.0.5"
+  },
+  "dependencies": {
+    "lodash": "4.17.4",
+    "mobx": "2.7.0",
+    "mobx-react": "4.1.0",
+    "mobx-react-devtools": "4.2.11",
+    "react": "15.4.2",
+    "react-dom": "15.4.2",
+    "react-router": "3.0.2"
   }
 }

server.js

@@ -0,0 +1,21 @@
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+
+const config = require('./webpack/production')
+
+const server = new WebpackDevServer(webpack(config), {
+  contentBase: './src',
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  stats: {
+    chunks: false,
+    colors: true,
+  },
+})
+
+server.listen(8000, 'localhost', function (err, result) {
+  if (err) console.log(err)
+
+  console.log('Listening at localhost:8000')
+})

src/Routes/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Router, browserHistory } from 'react-router'
+import rootRoute from './root'
+
+@observer
+export default class Routes extends React.Component {
+  rootRoute () {
+    return {
+      childRoutes: [
+        rootRoute
+      ]
+    }
+  }
+
+  render () {
+    return (
+      <Router
+        history={browserHistory}
+        routes={this.rootRoute()}
+      />
+    )
+  }
+}

src/Routes/root/component/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Link } from 'react-router'
+
+@observer
+export default class RootContainer extends React.Component {
+  render () {
+    return (
+      <div>
+        <h1>Long term webpack caching</h1>
+        <ul>
+          <li><Link to='/'>HOME</Link></li>
+          <li><Link to='route-a'>Route A</Link></li>
+          <li><Link to='route-b'>Route B</Link></li>
+        </ul>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/Routes/root/index.js

@@ -0,0 +1,17 @@
+import component from './component'
+import indexComponent from './indexComponent'
+
+import routeA from '../routeA'
+import routeB from '../routeB'
+
+export default {
+  path: '/',
+  component,
+  indexRoute: {
+    component: indexComponent
+  },
+  childRoutes: [
+    routeA,
+    routeB
+  ]
+}

src/Routes/root/indexComponent/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default class IndexRootComponent extends React.Component {
+  render () {
+    return (
+      <h3>Index root component</h3>
+    )
+  }
+}

src/Routes/routeA/childComponent/component/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+@observer
+export default class ChildComponent extends React.Component {
+  render () {
+    return (
+      <div>
+        Here we're with params ID: <strong>route-A-ID-{this.props.params.id}</strong>
+      </div>
+    )
+  }
+}

src/Routes/routeA/childComponent/index.jsx

@@ -0,0 +1,7 @@
+import component from './component'
+
+export default {
+  path: 'child/:id',
+  sectionLevel: 2,
+  component
+}

src/Routes/routeA/component/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Link } from 'react-router'
+
+@observer
+export default class Container extends React.Component {
+  render () {
+    return (
+      <div>
+        <p>You're on <strong>Route A</strong></p>
+        <ul>
+          <li><Link to='/route-a/child/1'>Route A child with ID 1</Link></li>
+          <li><Link to='/route-a/child/2'>Route A child with ID 2</Link></li>
+        </ul>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/Routes/routeA/index.jsx

@@ -0,0 +1,29 @@
+//import Authorize from 'components/Authorize'
+//import component from './component'
+//import indexComponent from './indexComponent'
+//import childComponent from './childComponent'
+
+/**
+ * indexRoute: {
+ * component: Authorize({ isAdmin: true, admin: indexComponent })
+ * },
+ */
+export default {
+  path: 'route-a',
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      cb(null, require('./component'))
+    })
+  },
+  getIndexRoute(partialNextState, cb) {
+    // do something async here
+    cb(null, require('./indexComponent'))
+  },
+  getChildRoutes(location, cb) {
+    require.ensure([], (require) => {
+      cb(null, [
+        require('./childComponent'),
+      ])
+    })
+  }
+}

src/Routes/routeA/indexComponent/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+@observer
+export default class IndexComponent extends React.Component {
+  render () {
+    return (
+      <div>
+        Just an index component
+      </div>
+    )
+  }
+}

src/Routes/routeB/childComponent/component/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+@observer
+export default class ChildComponent extends React.Component {
+  render () {
+    return (
+      <div>
+        Here we're with params ID: <strong>route-B-ID-{this.props.params.id}</strong>
+      </div>
+    )
+  }
+}

src/Routes/routeB/childComponent/index.jsx

@@ -0,0 +1,7 @@
+import component from './component'
+
+export default {
+  path: 'child/:id',
+  sectionLevel: 2,
+  component
+}

src/Routes/routeB/component/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Link } from 'react-router'
+
+@observer
+export default class Container extends React.Component {
+  render () {
+    return (
+      <div>
+        <p>You're on <strong>Route A</strong></p>
+        <ul>
+          <li><Link to='/route-b/child/1'>Route B child with ID 1</Link></li>
+          <li><Link to='/route-b/child/2'>Route B child with ID 2</Link></li>
+        </ul>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/Routes/routeB/index.jsx

@@ -0,0 +1,15 @@
+import Authorize from 'components/Authorize'
+import component from './component'
+import indexComponent from './indexComponent'
+import childComponent from './childComponent'
+
+export default {
+  path: 'route-b',
+  component: component,
+  indexRoute: {
+    component: Authorize({ isAdmin: true, admin: indexComponent })
+  },
+  childRoutes: [
+    childComponent
+  ]
+}

src/Routes/routeB/indexComponent/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import _map from 'lodash/map';
+
+
+@observer
+export default class IndexComponent extends React.Component {
+  render () {
+    const mapAdd = _map([1, 2, 3], (item) => item + 1);
+    console.log('chunk', mapAdd);
+    return (
+      <div>
+        Just an index component
+      </div>
+    )
+  }
+}

src/components/Authorize/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import NotFound from 'components/NotFound'
+
+export default (options) => {
+  return observer(class Proxy extends React.Component {
+    render () {
+      const AdminComponent = options.admin || NotFound
+      const BasicComponent = options.basic || NotFound
+      console.log('admin', options.isAdmin);
+
+      if (options.isAdmin) {
+        return <AdminComponent {...this.props} />
+      } else {
+        return <BasicComponent {...this.props} />
+      }
+    }
+  })
+}