routing + code splitting option (#2)

Author: huygn

README.md

@@ -2,8 +2,10 @@
 
 > React template for web app, powered by [Poi](https://poi.js.org/).
 
-- [x] prettier + eslint
-- [x] PWA
+- [x] [prettier](https://github.com/prettier/prettier) + eslint
+- [x] PWA support (by [offline-plugin](https://github.com/NekR/offline-plugin))
+- [x] [TailwindCSS](https://tailwindcss.com/) & SASS
+- [x] Routing & code splitting (by [curi](https://github.com/pshrmn/curi))
 
 ## Usage
 

sao.js

@@ -17,6 +17,11 @@ module.exports = {
       type: 'confirm',
       default: true,
     },
+    routing: {
+      message: 'Routing?',
+      type: 'confirm',
+      default: true,
+    },
     pwa: {
       message: 'PWA support?',
       type: 'confirm',
@@ -32,6 +37,9 @@ module.exports = {
     'static/manifest.json': 'pwa',
     'tailwind.js': 'tailwindcss',
     'src/styles/tailwind.scss': 'tailwindcss',
+    'src/pages/**': 'routing',
+    'src/router/**': 'routing',
+    'src/App.css': '!routing',
   },
   move: {
     gitignore: '.gitignore',

template/package.json

@@ -7,7 +7,12 @@
     "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
     "lint:fix": "eslint --fix --ext .js,.jsx --ignore-path .gitignore ."
   },
-  "dependencies": {<% if (pwa) { %>
+  "dependencies": {<% if (routing) { %>
+    "@curi/core": "^1.0.0-beta.35",
+    "@curi/react": "^1.0.0-beta.26",
+    "@curi/route-active": "^1.0.0-beta.6",
+    "@hickory/browser": "^1.0.0-beta.7",<% } %>
+    "loadable-components": "2.2.2",<% if (pwa) { %>
     "offline-plugin": "^5.0.3",<% } %>
     "react": "^16.4.0",
     "react-dom": "^16.4.0"
@@ -34,5 +39,9 @@
     "react-hot-loader": "^4.2.0",
     "sass-loader": "^6.0.7"<% if(tailwindcss) { %>,
     "tailwindcss": "^0.5.3"<% } %>
+  },
+  "resolutions": {
+    "react": "16.4.0",
+    "react-dom": "16.4.0"
   }
 }

template/src/App.js

@@ -1,23 +1,39 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { hot } from 'react-hot-loader';
+<% if(routing) { %>
+import { CuriProvider } from '@curi/react';
 
-import logo from './logo.svg';
+const App = ({ router }) => {
+  return (
+    <CuriProvider router={router}>
+      {({ response, router }) => {
+        return (
+          <main>
+            <response.body
+              params={response.params}
+              location={response.location}
+              router={router}
+            />
+          </main>
+        );
+      }}
+    </CuriProvider>
+  );
+};
+<% } else { %>
 import './App.css';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro text-lg">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
+const App = () => {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1 className="App-title">Welcome to React</h1>
+      </header>
+      <p className="App-intro text-xl">
+        To get started, edit <code>src/App.js</code> and save to reload.
+      </p>
+    </div>
+  );
+};
+<% } %>
 export default hot(module)(App);

template/src/index.js

@@ -2,10 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import './styles';
-import App from './App';
+import App from './App';<% if(routing) { %>
+import { setupRouter } from './router';
 
+const makeRender = () => ({ router }) => {
+  ReactDOM.render(<App router={router} />, document.getElementById('app'));
+};
+
+const router = setupRouter();
+router.respond(makeRender());
+<% } else { %>
 const render = Component => {
   ReactDOM.render(<Component />, document.getElementById('app'));
 };
 
 render(App);
+<% } %>

template/src/pages/404.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NotFound = () => {
+  return <div>NotFound</div>;
+};
+
+export default NotFound;

template/src/pages/Home.css

@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

template/src/pages/Home.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+import logo from './logo.svg';
+import './Home.css';
+
+class Home extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro text-xl">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default Home;

template/src/App.test.js renamed to template/src/pages/Home.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Home from './Home';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<Home />, div);
 });

template/src/logo.svg renamed to template/src/pages/logo.svg

@@ -0,0 +1,13 @@
+import Browser from '@hickory/browser';
+import curi from '@curi/core';
+import createActiveAddon from '@curi/route-active';
+
+import getRoutes from './routes';
+
+const history = Browser();
+
+export const setupRouter = () => {
+  return curi(history, getRoutes(), {
+    route: [createActiveAddon()],
+  });
+};

template/src/router/index.js

@@ -0,0 +1,27 @@
+import loadable from '@/utils/loadable';
+
+const Home = loadable(() => import('@/pages/Home'));
+const NotFound = loadable(() => import('@/pages/404'));
+
+export default () => {
+  return [
+    {
+      name: 'Home',
+      path: '',
+      response() {
+        return {
+          body: Home,
+        };
+      },
+    },
+    {
+      name: 'NotFound',
+      path: '(.*)',
+      response() {
+        return {
+          body: NotFound,
+        };
+      },
+    },
+  ];
+};

template/src/router/routes.js

@@ -0,0 +1,3 @@
+import loadable from 'loadable-components';
+
+export default loadable;