Features/koa 2 (#31)

hung-phan · web-flow · commit ee515de07204 · 2016-07-16T23:46:56.000+07:00
* Tmp work for koa v2

* Working koa v2 version

* Update extracttextplugin, and store

* Update store

* Update fetchData
diff --git a/.eslintrc b/.eslintrc
@@ -10,6 +10,7 @@
   "rules": {
     "max-len": 0,
     "func-names": 0,
+    "no-param-reassign": 0,
     "mocha/no-exclusive-tests": 2,
     "global-require": 0,
     "no-underscore-dangle": 0
diff --git a/README.md b/README.md
@@ -29,6 +29,10 @@ In `server.js`, I initialse all middlewares from `config/middleware/index`, then
 from client side eventually will request to `/api/*`, which are created by `app/server/apis`. Rendering tasks will be delegated to
 [React-Router](https://github.com/rackt/react-router) to do server rendering for React.
 
+## Requirement
+
+Install [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension) to have better experience when developing.
+
 ### Require assets in server
 
 Leverage the power of [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) to hack `require` module with
diff --git a/app/app.js b/app/app.js
@@ -12,7 +12,7 @@ function render(store, routes, appDOM) {
   ReactDOM.render(<App store={store} routes={routes} />, appDOM);
 }
 
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV === 'development') {
   const { whyDidYouUpdate } = require('why-did-you-update');
 
   whyDidYouUpdate(React, {
diff --git a/app/client/components/main/app.js b/app/client/components/main/app.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import Debug from './debug';
 
 const App = ({ store, routes }) =>
   <Provider key="provider" store={store}>
     <div>
       {routes}
-      <Debug />
     </div>
   </Provider>;
 
diff --git a/app/client/components/main/debug.js b/app/client/components/main/debug.js
diff --git a/app/client/helpers/fetch-data.js b/app/client/helpers/fetch-data.js
@@ -23,7 +23,13 @@ export function clientFetchData(routes, store) {
       } else if (redirectLocation) {
         navigateTo(redirectLocation.pathname + redirectLocation.search);
       } else if (renderProps) {
-        trigger('fetchData', renderProps.components, getLocals(store, renderProps));
+        if (window.__data) {
+          // Delete initial data so that subsequent data fetches can occur:
+          delete window.__data;
+        } else {
+          // Fetch mandatory data dependencies for 2nd route change onwards:
+          trigger('fetchData', renderProps.components, getLocals(store, renderProps));
+        }
       } else {
         navigateTo('/404.html');
       }
diff --git a/app/client/main-store.js b/app/client/main-store.js
@@ -7,6 +7,7 @@ let middlewares = [
 ];
 let enhancers = [];
 
+// support for development
 if (process.env.NODE_ENV === 'development' && !process.env.SERVER_RENDERING) {
   const logger = require('redux-logger')({ level: 'info' });
   const { persistState } = require('redux-devtools');
@@ -15,20 +16,26 @@ if (process.env.NODE_ENV === 'development' && !process.env.SERVER_RENDERING) {
     ...middlewares,
     logger,
   ];
+
   enhancers = [
     ...enhancers,
-    require('./components/main/debug').default.instrument(),
     persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
   ];
 }
 
-const finalCreateStore = compose(
-  applyMiddleware(...middlewares),
-  ...enhancers
-)(createStore);
+// support redux-devtools
+if (process.env.RUNTIME_ENV === 'client' && window.devToolsExtension) {
+  enhancers = [
+    ...enhancers,
+    window.devToolsExtension(),
+  ];
+}
 
 export default function (initialState = {}) {
-  const store = finalCreateStore(reducers, initialState);
+  const store = createStore(reducers, initialState, compose(
+    applyMiddleware(...middlewares),
+    ...enhancers
+  ));
 
   if (module.hot) {
     module.hot.accept('./main-reducer', () =>
diff --git a/app/server-app.js b/app/server-app.js
@@ -1,10 +1,10 @@
-import koa from 'koa';
+import Koa from 'koa';
 import debug from 'debug';
 import * as config from 'server/middlewares';
 import apis from 'server/apis/base';
 import controllers from 'server/controllers/base';
 
-const app = koa();
+const app = new Koa();
 
 // setup middlewares
 config.loggingLayer(app);
diff --git a/app/server/apis/v1/todo.js b/app/server/apis/v1/todo.js
@@ -1,6 +1,6 @@
 export default function (router) {
-  router.get('/api/v1/todos', function *() {
-    this.body = [
+  router.get('/api/v1/todos', (ctx) => {
+    ctx.body = [
       {
         text: 'Todo 1',
         complete: false,
diff --git a/app/server/controllers/application.js b/app/server/controllers/application.js
@@ -1,5 +1,5 @@
 export default function (router) {
-  router.get('*', function* () {
-    this.body = yield this.prerender('application/index.marko');
+  router.get('*', async (ctx) => {
+    ctx.body = await ctx.prerender('application/index.marko');
   });
 }
diff --git a/app/server/controllers/base.js b/app/server/controllers/base.js
@@ -1,5 +1,5 @@
 import application from './application';
 
-export default function (router) {
+export default (router) => {
   application(router);
-}
+};
diff --git a/app/server/middlewares/custom/error.js b/app/server/middlewares/custom/error.js
@@ -1,62 +1,60 @@
 import http from 'http';
 import settings from 'server/initializers/settings';
 
-export default function error() {
-  return function* (next) {
-    try {
-      yield next;
+export default async (ctx, next) => {
+  try {
+    await next();
 
-      if (this.response.status === 404 && !this.response.body) {
-        this.throw(404);
-      }
-    } catch (err) {
-      this.status = err.status || 500;
+    if (ctx.response.status === 404 && !ctx.response.body) {
+      ctx.throw(404);
+    }
+  } catch (err) {
+    ctx.status = err.status || 500;
 
-      // application
-      this.app.emit('error', err, this);
+    // application
+    ctx.app.emit('error', err, ctx);
 
-      // accepted types
-      switch (this.accepts('html', 'text', 'json')) {
-        case 'text':
-          this.type = 'text/plain';
-          if (process.env.NODE_ENV === 'development' || err.expose) {
-            this.body = err.message;
-          } else {
-            throw err;
-          }
-          break;
+    // accepted types
+    switch (ctx.accepts('html', 'text', 'json')) {
+      case 'text':
+        ctx.type = 'text/plain';
+        if (process.env.NODE_ENV === 'development' || err.expose) {
+          ctx.body = err.message;
+        } else {
+          throw err;
+        }
+        break;
 
-        case 'json':
-          this.type = 'application/json';
-          if (process.env.NODE_ENV === 'development' || err.expose) {
-            this.body = {
-              error: err.message,
-            };
-          } else {
-            this.body = {
-              error: http.STATUS_CODES[this.status],
-            };
-          }
-          break;
+      case 'json':
+        ctx.type = 'application/json';
+        if (process.env.NODE_ENV === 'development' || err.expose) {
+          ctx.body = {
+            error: err.message,
+          };
+        } else {
+          ctx.body = {
+            error: http.STATUS_CODES[ctx.status],
+          };
+        }
+        break;
 
-        case 'html':
-          this.type = 'text/html';
-          if (process.env.NODE_ENV === 'development' || process.env.DEBUG) {
-            this.body = yield this.render('layouts/error.marko', {
-              ...settings, ctx: this, request: this.request, response: this.response,
-              status: this.status, error: err.message, stack: err.stack, code: err.code,
-            });
+      case 'html':
+        ctx.type = 'text/html';
+        if (process.env.NODE_ENV === 'development' || process.env.DEBUG) {
+          ctx.body = await ctx.render('layouts/error.marko', {
+            ...settings, ctx, request: ctx.request, response: ctx.response,
+            status: ctx.status, error: err.message, stack: err.stack, code: err.code,
+          });
+        } else {
+          if ([404, 422].includes(ctx.status)) {
+            ctx.redirect(`/${ctx.status}.html`);
           } else {
-            if ([404, 422].includes(this.status)) {
-              this.redirect(`/${this.status}.html`);
-            } else {
-              this.redirect('/500.html');
-            }
+            ctx.redirect('/500.html');
           }
-          break;
-        default:
-          throw err;
-      }
+        }
+        break;
+      default:
+        throw err;
     }
-  };
-}
+  }
+};
diff --git a/app/server/middlewares/custom/prerender.js b/app/server/middlewares/custom/prerender.js
@@ -1,24 +1,24 @@
-if (process.env.SERVER_RENDERING) {
-  const React = require('react');
-  const { renderToString } = require('react-dom/server');
-  const { match, RouterContext } = require('react-router');
-  const { getRoutes, getServerHistory } = require('app/routes');
-  const App = require('client/components/main/app').default;
-  const { serverFetchData } = require('client/helpers/fetch-data');
-  const configureStore = require('client/main-store').default;
+export default async (ctx, next) => {
+  if (process.env.SERVER_RENDERING) {
+    const React = require('react');
+    const { renderToString } = require('react-dom/server');
+    const { match, RouterContext } = require('react-router');
+    const { getRoutes, getServerHistory } = require('app/routes');
+    const App = require('client/components/main/app').default;
+    const { serverFetchData } = require('client/helpers/fetch-data');
+    const configureStore = require('client/main-store').default;
 
-  module.exports = function* (next) {
-    this.prerender = this.prerender ||
+    ctx.prerender = ctx.prerender ||
       function (template: string, parameters: Object = {}, initialState: Object = {}) {
         const store = configureStore(initialState);
-        const routes = getRoutes(getServerHistory(store, this.req.url));
+        const routes = getRoutes(getServerHistory(store, ctx.req.url));
 
         return new Promise((resolve, reject) => {
-          match({ routes, location: this.req.url }, (error, redirectLocation, renderProps) => {
+          match({ routes, location: ctx.req.url }, (error, redirectLocation, renderProps) => {
             if (error) {
-              this.throw(500, error.message);
+              ctx.throw(500, error.message);
             } else if (redirectLocation) {
-              this.redirect(redirectLocation.pathname + redirectLocation.search);
+              ctx.redirect(redirectLocation.pathname + redirectLocation.search);
             } else if (renderProps) {
               serverFetchData(renderProps, store)
                 .then(() => {
@@ -28,7 +28,7 @@ if (process.env.SERVER_RENDERING) {
                   );
                   const prerenderData = store.getState();
 
-                  this.render(template, {
+                  ctx.render(template, {
                     ...parameters,
                     prerenderComponent,
                     prerenderData,
@@ -37,16 +37,14 @@ if (process.env.SERVER_RENDERING) {
                   .catch(reject);
                 });
             } else {
-              this.throw(404);
+              ctx.throw(404);
             }
           });
         });
       };
-    yield next;
-  };
-} else {
-  module.exports = function* (next) {
-    this.prerender = this.render;
-    yield next;
-  };
-}
+    await next();
+  } else {
+    ctx.prerender = ctx.render;
+    await next();
+  }
+};
diff --git a/app/server/middlewares/custom/render.js b/app/server/middlewares/custom/render.js
@@ -2,10 +2,10 @@ import path from 'path';
 import marko from 'marko';
 import settings from 'server/initializers/settings';
 
-export default function* (next) {
-  this.render = this.render ||
+export default async (ctx, next) => {
+  ctx.render = ctx.render ||
     function (template: string, parameters: Object = {}) {
-      this.type = 'text/html';
+      ctx.type = 'text/html';
 
       return new Promise(resolve => {
         const templatePath = path.join(settings.path.ROOT, `${settings.path.TEMPLATES_DIR}/${template}`);
@@ -17,11 +17,11 @@ export default function* (next) {
           currentTemplate.stream({
             ...settings,
             ...parameters,
-            csrf: this.csrf,
+            csrf: ctx.csrf,
           })
         );
       });
     };
 
-  yield next;
-}
+  await next();
+};
diff --git a/app/server/middlewares/index.js b/app/server/middlewares/index.js
diff --git a/config/webpack/client/production.js b/config/webpack/client/production.js
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ function render(store, routes, appDOM) {`
`12`	`12`	`ReactDOM.render(<App store={store} routes={routes} />, appDOM);`
`13`	`13`	`}`
`14`	`14`
`15`		`-if (process.env.NODE_ENV !== 'production') {`
	`15`	`+if (process.env.NODE_ENV === 'development') {`
`16`	`16`	`const { whyDidYouUpdate } = require('why-did-you-update');`
`17`	`17`
`18`	`18`	`whyDidYouUpdate(React, {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`export default function (router) {`
`2`		`- router.get('/api/v1/todos', function *() {`
`3`		`- this.body = [`
	`2`	`+ router.get('/api/v1/todos', (ctx) => {`
	`3`	`+ ctx.body = [`
`4`	`4`	`{`
`5`	`5`	`text: 'Todo 1',`
`6`	`6`	`complete: false,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`export default function (router) {`
`2`		`- router.get('', function () {`
`3`		`- this.body = yield this.prerender('application/index.marko');`
	`2`	`+ router.get('*', async (ctx) => {`
	`3`	`+ ctx.body = await ctx.prerender('application/index.marko');`
`4`	`4`	`});`
`5`	`5`	`}`