feat: add stateless render test

app/controller/home.js

@@ -11,6 +11,16 @@ module.exports = app => {
       await ctx.render('list.js', Model.getPage(1, 10));
     }
 
+    async stateless() {
+      const { ctx } = this;
+      await ctx.render('stateless.js', Model.getPage(1, 10));
+    }
+
+    async promise() {
+      const { ctx } = this;
+      await ctx.render('promise.js', { message: 'React Promise Hook Test' });
+    }
+
     async client() {
       const { ctx } = this;
       await ctx.renderClient('list.js', Model.getPage(1, 10));

app/router.js

@@ -3,5 +3,7 @@ module.exports = app => {
   app.get('/', app.controller.home.index);
   app.get('/about', app.controller.home.index);
   app.get('/list', app.controller.home.list);
+  app.get('/stateless', app.controller.home.stateless);
+  app.get('/promise', app.controller.home.promise);
   app.get('/api/article/list', app.controller.home.pager);
 };

app/web/page/app/index.js

@@ -30,38 +30,35 @@ const clientRender = () => {
     module.hot.accept();
   }
   render(Entry);
-  import('service-worker-register').then(sw =>{
-    sw.default.register('service-worker.js');
-  });
-
 };
 
-const serverRender = (context, options)=> {
-  const url = context.state.url;
-  console.log('>>>>url', url);
-  const branch = matchRoutes(routes, url);
-  const promises = branch.map(({route}) => {
-    const fetch = route.component.fetch;
-    return fetch instanceof Function ? fetch() : Promise.resolve(null)
-  });
-  return Promise.all(promises).then(data => {
-    const initState = context.state;
-    data.forEach(item => {
-      Object.assign(initState, item);
+const serverRender = ()=> {
+  return context => {
+    const url = context.state.url;
+    const branch = matchRoutes(routes, url);
+    const promises = branch.map(({route}) => {
+      const fetch = route.component.fetch;
+      return fetch instanceof Function ? fetch() : Promise.resolve(null)
+    });
+    return Promise.all(promises).then(data => {
+      const initState = context.state;
+      data.forEach(item => {
+        Object.assign(initState, item);
+      });
+      context.state = Object.assign({}, context.state, initState);
+      const store = create(initState);
+      return () =>(
+        <Layout>
+          <div>
+            <Provider store={store}>
+              <StaticRouter location={url} context={{}}>
+                <App url={url}/>
+              </StaticRouter>
+            </Provider>
+          </div>
+        </Layout>
+      )
     });
-    context.state = Object.assign({}, context.state, initState);
-    const store = create(initState);
-    return () =>(
-      <Layout>
-        <div>
-          <Provider store={store}>
-            <StaticRouter location={url} context={{}}>
-              <App url={url}/>
-            </StaticRouter>
-          </Provider>
-        </div>
-      </Layout>
-    )
-  });
+  }
 };
-export default EASY_ENV_IS_NODE ?  serverRender : clientRender();
+export default EASY_ENV_IS_NODE ?  serverRender() : clientRender();

app/web/page/list/promise.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Layout from '../../component/layout.jsx';
+import List from './componets/list';
+import './index.css';
+
+
+const Entry = (props) => {
+  return <Layout>
+    <div className="main">
+      <div className="page-container page-component">
+        <h1>{props.message}</h1>
+      </div>
+    </div>
+  </Layout>;
+};
+
+
+const clientRender = () => {
+  const state = create(window.__INITIAL_STATE__);
+  const render = Page =>{
+    ReactDOM.hydrate(EASY_ENV_IS_DEV ? <AppContainer><Page {...state} /></AppContainer> : <Page />, document.getElementById('app'));
+  };
+  if (EASY_ENV_IS_DEV && module.hot) {
+    module.hot.accept();
+  }
+  render(Entry);
+};
+
+const serverRender = ()=> {
+  return context => {
+    return Promise.resolve( () => {
+      return <Entry {...context.state} />
+    });
+  }
+};
+export default EASY_ENV_IS_NODE ?  serverRender() : clientRender();

app/web/page/list/stateless.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import Layout from '../../component/layout.jsx';
+import List from './componets/list';
+import './index.css';
+
+export default (props) => {
+  return <Layout>
+    <div className="main">
+      <div className="page-container page-component">
+        <List list={props.list}></List>
+      </div>
+    </div>
+  </Layout>;
+};

package.json

@@ -21,7 +21,7 @@
     "egg-scripts": "^2.8.1",
     "egg-serviceworker": "^1.0.0",
     "egg-validate": "^2.0.2",
-    "egg-view-react-ssr": "^2.2.6",
+    "egg-view-react-ssr": "next",
     "extend": "~3.0.0",
     "history": "^4.7.2",
     "lodash": "^4.17.4",

webpack.config.js

@@ -1,9 +1,8 @@
 module.exports = {
   entry: {
     app: 'app/web/page/app/index.js',
-    list: 'app/web/page/list/index.jsx'
-  },
-  plugins:[
-    { serviceworker: true }
-  ]
+    list: 'app/web/page/list/index.jsx',
+    stateless: 'app/web/page/list/stateless.js',
+    promise: 'app/web/page/list/promise.js'
+  }
 };