- update ReactRouter to 2.8.1

- update Reflux to 0.5.x
- provide a dynamic routers and api proxy demo
- ES6 & ESLint

Author: wenzhao.fw

README.md

@@ -6,6 +6,18 @@ This template is used by [nowa init](https://github.com/nowa-webpack/nowa-init).
 
 ## Usage
 
-```shell
+```
 nowa init https://github.com/nowa-webpack/template-uxcore/archive/master.zip
 ```
+
+## Changes
+
+This version has made some big changes as below:
+
+- ReactRouter
+ReactRouter has upgraded to v2.8.1. A huge SPA demo is provided.
+
+- All code was written with ECMAScript2015
+
+- Reflux
+[Reflux](https://github.com/reflux/refluxjs) is 0.5.x now. setState method in page is not worked and mixin is no longer used. 

mod.js

@@ -1,43 +1,32 @@
-require('./<%- Name %>.less');
-
+import './<%- Name %>.less';
+<% if (i18n) { %>
+import i18n from 'i18n';
+<% } %>
+const {PureRenderMixin} = React.addons;
 class <%- Name %> extends React.Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-        };
-    }
-
-    render() {
-        let me = this;
-        return (
-            <div className="<%= name %>">
-                component <%= name %>
-            </div>
-        );
-    }
-
-    componentWillMount() {
-    }
-
-    componentDidMount() {
-    }
-
-    componentWillReceiveProps(nextProps) {
-    }
+  constructor(props) {
+    super(props);
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+  }
+
+  render() {
+    let me = this;
+    return (
+      <div className="mod-<%= name %>">
+        component <%= name %>
+      </div>
+    );
+  }
+}
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return true;
-    }
 
-    componentWillUpdate(nextProps, nextState) {
-    }
+<%- Name %>.defaultProps ={
 
-    componentDidUpdate(prevProps, prevState) {
-    }
+}
 
-    componentWillUnmount() {
-    }
+<%- Name %>.propTypes = {
+  
 }
 
-module.exports = <%- Name %>;
+export default <%- Name %>;

mod/src/components/__name__/__Name__.js

@@ -1,3 +1,3 @@
-.<%= name %> {
-    background-color: #f60;
+.mod-<%= name %> {
+  background-color: #f60;
 }

mod/src/components/__name__/__Name__.less

@@ -1 +1 @@
-module.exports = require('./<%- Name %>');
+export default from './<%- Name %>';

mod/src/components/__name__/index.js

@@ -1,46 +1,51 @@
 // prompt for page
-exports.prompts = [
-  {
+exports.prompts = [{
     name: 'store',
     type: 'confirm',
     message: 'Generate store & actions?'
-  }
-];
+}];
 
 // answer for mod
 exports.answers = function(answers, abc) {
-  answers.name = answers.name.toLowerCase();
-  answers.Name = answers.name.replace(/[\W_]+(.)/g, function(p, p1) {
-    return p1.toUpperCase();
-  }).replace(/^./, function(p) {
-    return p.toUpperCase();
-  });
-  answers.libraries = !!abc.options.libraries;
-  answers.suffix = suffixByVars(abc.options.vars, abc.options.buildvars);
-  return answers;
+    answers.name = answers.name.toLowerCase();
+    answers.Name = answers.name.replace(/[\W_]+(.)/g, function(p, p1) {
+        return p1.toUpperCase();
+    }).replace(/^./, function(p) {
+        return p.toUpperCase();
+    });
+    answers.i18n = !!abc.options.vars.locale;
+    answers.libraries = !!abc.options.libraries;
+    answers.suffix = suffixByVars(abc.options.vars, abc.options.buildvars);
+    answers.SPA = !abc.options.pages;
+    return answers;
 };
 
 // filter out files
 exports.filter = function(source, data) {
-  if (!data.store) {
-    return !/(actions|store)\.js$/.test(source);
-  }
+    var flag = true;
+    if(data.SPA) {
+      flag = !/\.html$/.test(source);
+    }
+    if (flag !== false && !data.store) {
+      flag = !/(actions|store)\.js$/.test(source);
+    }
+    return flag;
 };
 
 // make filename suffix by vars
 function suffixByVars(vars, buildvars) {
-  if (vars) {
-    var suffix = '';
-    for (var key in vars) {
-      var value = vars[key];
+    if (vars) {
+        var suffix = '';
+        for (var key in vars) {
+            var value = vars[key];
 
-      // filename suffix will not contain `/`
-      if (value !== undefined && buildvars && buildvars[key] && buildvars[key].length > 1) {
-        suffix += '-' + value.toString().replace(/\//, '');
-      }
+            // filename suffix will not contain `/`
+            if (value !== undefined && buildvars && buildvars[key] && buildvars[key].length > 1) {
+                suffix += '-' + value.toString().replace(/\//, '');
+            }
+        }
+        return suffix;
+    } else {
+        return '';
     }
-    return suffix;
-  } else {
-    return '';
-  }
 }

page.js

@@ -6,28 +6,29 @@
 
 <!-- 外部样式资源加载 -->
 <% if (libraries) { %>
-<link rel="stylesheet" href="//g.alicdn.com/??platform/common/s/1.1/global/global.css,uxcore/uxcore-kuma/2.0.14/orange.min.css">
+<link rel="stylesheet" href="//g.alicdn.com/??platform/common/s/1.1/global/global.css,uxcore/uxcore-kuma/2.0.15/orange.min.css">
 <% } else { %>
 <link rel="stylesheet" href="//g.alicdn.com/??platform/common/s/1.1/global/global.css">
 <% } %>
 
 <!-- 项目样式资源加载 -->
 <link rel="stylesheet" href="/app.css">
-<link rel="stylesheet" href="/<%= name %>.css">
 
 <!-- 外部脚本资源加载 -->
 <!--[if lte IE 9]>
 <script src="//g.alicdn.com/platform/c/??es5-shim/4.1.12/es5-shim.min.js,es5-shim/4.1.12/es5-sham.min.js,console-polyfill/0.2.1/index.min.js,respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
-<script src="//g.alicdn.com/platform/c/??jquery/1.11.3/dist/jquery.min.js,lodash/3.10.1/lodash.min.js,react/0.14.2/react-with-addons.min.js,react/0.14.2/react-dom.min.js,lie/3.0.2/dist/lie.polyfill.min.js,natty-db/1.0.2/dist/natty-db.pc.min.js,reflux/0.4.1/dist/reflux.min.js"></script>
+<script src="//g.alicdn.com/platform/c/??jquery/1.11.3/dist/jquery.min.js,lodash/3.10.1/lodash.min.js,react/0.14.2/react-with-addons.min.js,react/0.14.2/react-dom.min.js,lie/3.0.2/dist/lie.polyfill.min.js,natty-db/1.0.2/dist/natty-db.pc.min.js,reflux/0.5.0rc1/dist/reflux.min.js"></script>
 <!-- 使用 Uxcore.Mention 时，需要引入 rangy -->
 <!-- <script src="//g.alicdn.com/platform/c/rangy/1.3.0/rangy-core.min.js"></script> -->
 <!-- 使用 Uxcore.Tinymce 或 Uxcore.Form.EditorFormField 时，需要引入 tinymce -->
 <!-- <script src="//g.alicdn.com/platform/c/tinymce/4.3.12/tinymce.min.js"></script> -->
 
-<% if (libraries) { %>      
-<!-- 项目中订制的 uxcore -->        
-<script src="/uxcore.js"></script>        
+<% if (library) { %>
+<!-- 项目中订制的 uxcore -->
+<script src="/uxcore.js"></script>
+<% } else { %>
+<script src="//g.alicdn.com/uxcore/uxcore/0.1.5/uxcore.min.js"></script>
 <% } %>
 
 </head>

page/html/__name__.html

@@ -1,51 +1,50 @@
-require('./Page<%- Name %>.less');
-<% if (store) { %>
-const reactMixin = require('react-mixin');
+import './Page<%- Name %>.less';
 
-const Actions = require('./actions');
-const Store = require('./store');
+import classnames from 'classnames';
+<% if (i18n) { %>
+import i18n from 'i18n';
 <% } %>
-class <%- Name %> extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-        };
-    }
-
-    render() {
-        return (
-            <div className="<%= name %>">
-                page <%= name %>
-            </div>
-        );
-    }
-
-    componentWillMount() {
-    }
-
-    componentDidMount() {
-    }
-
-    componentWillReceiveProps(nextProps) {
-    }
+<% if (store) { %>
+import Actions from './actions';
+import Store from './store';
 
-    shouldComponentUpdate(nextProps, nextState) {
-        return true;
-    }
+class Page<%- Name %> extends Reflux.Component {
 
-    componentWillUpdate(nextProps, nextState) {
-    }
+  constructor(props) {
+    super(props);
+    this.store = Store;
+  }
 
-    componentDidUpdate(prevProps, prevState) {
-    }
+  render() {
+    return (
+      <div className="page-<%= name %>">
+        page <%= name %>
+      </div>
+    );
+  }
 
-    componentWillUnmount() {
-    }
 }
-<% if (store) { %>
-reactMixin.onClass(<%- Name %>, Reflux.connect(Store, '<%- Name %>'));
+<% } else { %>
+class Page<%- Name %> extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="page-<%= name %>">
+        page <%= name %>
+      </div>
+    );
+  }
+}
+
 <% } %>
-ReactDOM.render(<<%- Name %>/>, document.getElementById('App'));
 
-module.exports = <%- Name %>;
+<% if(SPA){ %>
+export default ReactRouter.withRouter(Page<%- Name %>);
+<% } else {%>
+export default Page<%- Name %>;
+<% } %>

page/src/pages/__name__/Page__Name__.js

@@ -1,3 +1,3 @@
-.<%= name %> {
-    background-color: #fff;
+.page-<%= name %> {
+  background-color: #fff;
 }

page/src/pages/__name__/Page__Name__.less

@@ -1,3 +1,19 @@
-module.exports = Reflux.createActions([
-    'fetch'
-]);
+import DB from '../../app/db';
+
+const Actions = Reflux.createActions({
+  updateState: {},
+  search: {
+    asyncResult: true,
+  },
+});
+
+Actions.updateState.listen((params) => {
+
+});
+
+Actions.search.listenAndPromise((params) => {
+  const getSomeInfo = DB.SomeModuleAPI.getSomeInfo(params);
+  return getSomeInfo;
+});
+
+export default Actions;

page/src/pages/__name__/actions.js

@@ -1 +1 @@
-module.exports = require('./Page<%- Name %>');
+export default from './Page<%- Name %>';

page/src/pages/__name__/index.js

@@ -1,25 +1,28 @@
-const Actions = require('./actions');
+import Actions from './actions';
 
-const DB = require('../../app/db');
+export default class <%- Name %>Store extends Reflux.Store {
+  constructor() {
+    super();
+    this.listenables = Actions;
+    this.state = {};
+  }
 
-module.exports = Reflux.createStore({
-    listenables: [Actions],
-    data: {
-        loaded: false
-    },
+  onUpdateState(obj) {
+    this.setState(obj);
+  }
 
-    onFetch: function(params, cb) {
-        let t = this;
-        t.data.loaded = true;
-        t.updateComponent();
-        cb && cb(t.data);
-    },
+  onSearch(content) {
+  }
 
-    updateComponent: function() {
-        this.trigger(this.data);
-    },
+  onSearchCompleted(content) {
+    this.setState({ content });
+  }
 
-    getInitialState: function() {
-        return this.data;
-    }
-});
+  onSearchFailed(error) {
+    this.setState({ error });
+  }
+
+  static get id() {
+    return '<%- Name %>Store'
+  }
+}