v3.1.1: added webpack 2 and react 4 support.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grommet-cli",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "main": "src/grommet.js",
   "description": "Command line interface for Grommet.",
   "authors": [

templates/app/.gitignore

@@ -39,7 +39,6 @@ jspm_packages
 bin/**
 dist/**
 dist-server/**
-
 .eslintcache
-
 .DS_Store
+.vscode

templates/app/package.json

@@ -18,14 +18,14 @@
     "compression": "^1.6.2",
     "cookie-parser": "^1.4.3",
     "express": "^4.14.0",
-    "grommet": "^1.1.0",
+    "grommet": "^1.3.4",
     "morgan": "^1.7.0",
     "path-to-regexp": "^1.7.0",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-intl": "^2.1.5",
     "react-redux": "^4.4.5",
-    "react-router": "^3.0.0",
+    "react-router-dom": "^4.0.0",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "ws": "^1.1.1"
@@ -59,7 +59,7 @@
     "react-dev-utils": "^0.4.2",
     "react-test-renderer": "^15.4.1",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.3",
     "webpack": "^2.2.1"
   },
   "jest": {

templates/app/src/js/App.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Router, browserHistory as history } from 'react-router';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import { getCurrentLocale, getLocaleData } from 'grommet/utils/Locale';
 import { Provider } from 'react-redux';
 import { initialize } from './actions/session';
 import store from './store';
-import routes from './routes';
+import Main from './components/Main';
 
 const locale = getCurrentLocale();
 addLocaleData(en);
@@ -18,13 +17,14 @@ try {
 }
 const localeData = getLocaleData(messages, locale);
 
-store.dispatch(initialize(window.location.pathname));
+if (window.location.pathname !== '/login') {
+  store.dispatch(initialize(window.location.pathname));
+}
 
 export default () => (
   <Provider store={store}>
     <IntlProvider locale={localeData.locale} messages={localeData.messages}>
-      <Router routes={routes} history={history}
-        onUpdate={() => document.getElementById('content').focus()} />
+      <Main />
     </IntlProvider>
   </Provider>
 );

templates/app/src/js/actions/session.js

@@ -1,4 +1,3 @@
-import { browserHistory as history } from 'react-router';
 import { SESSION_LOAD, SESSION_LOGIN, SESSION_LOGOUT } from '../actions';
 import { deleteSession, postSession } from '../api/session';
 import { updateHeaders } from '../api/utils';
@@ -13,12 +12,12 @@ export function initialize() {
         type: SESSION_LOAD, payload: { email, name, token }
       });
     } else {
-      history.push('/login');
+      window.location = '/login';
     }
   };
 }
 
-export function login(email, password, targetPath) {
+export function login(email, password, done) {
   return dispatch => (
     postSession(email, password)
       .then((payload) => {
@@ -34,7 +33,7 @@ export function login(email, password, targetPath) {
             'browsing mode.'
           );
         }
-        history.push(targetPath);
+        done();
       })
       .catch(payload => dispatch({
         type: SESSION_LOGIN,

templates/app/src/js/components/Main.js

@@ -1,12 +1,19 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import App from 'grommet/components/App';
 import Split from 'grommet/components/Split';
 
 import NavSidebar from './NavSidebar';
 import { navResponsive } from '../actions/nav';
 
+import Login from '../screens/Login';
+import Dashboard from '../screens/Dashboard';
+import Tasks from '../screens/Tasks';
+import Task from '../screens/Task';
+import NotFound from '../screens/NotFound';
+
 class Main extends Component {
 
   constructor() {
@@ -31,18 +38,26 @@ class Main extends Component {
 
     return (
       <App centered={false}>
-        <Split priority={priority} flex='right'
-          onResponsive={this._onResponsive}>
-          {nav}
-          {this.props.children}
-        </Split>
+        <Router>
+          <Split priority={priority} flex='right'
+            onResponsive={this._onResponsive}>
+            {nav}
+            <Switch>
+              <Route exact={true} path='/' component={Dashboard} />
+              <Route path='/dashboard' component={Dashboard} />
+              <Route path='/login' component={Login} />
+              <Route path='/tasks/:id' component={Task} />
+              <Route path='/tasks' component={Tasks} />
+              <Route path='/*' component={NotFound} />
+            </Switch>
+          </Split>
+        </Router>
       </App>
     );
   }
 }
 
 Main.propTypes = {
-  children: PropTypes.any.isRequired,
   dispatch: PropTypes.func.isRequired,
   nav: PropTypes.shape({
     active: PropTypes.bool,

templates/app/src/js/screens/Login.js

@@ -33,7 +33,10 @@ class Login extends Component {
 
   _onSubmit(fields) {
     const { dispatch } = this.props;
-    dispatch(login(fields.username, fields.password, '/dashboard'));
+    const { router } = this.context;
+    dispatch(login(fields.username, fields.password, () => (
+      router.history.push('/dashboard')
+    )));
   }
 
   render() {
@@ -76,6 +79,10 @@ Login.propTypes = {
   })
 };
 
+Login.contextTypes = {
+  router: PropTypes.object.isRequired,
+};
+
 const select = state => ({
   session: state.session
 });

templates/app/src/js/screens/Task.js

@@ -22,13 +22,13 @@ import { pageLoaded } from './utils';
 class Task extends Component {
 
   componentDidMount() {
-    const { params, dispatch } = this.props;
+    const { match: { params }, dispatch } = this.props;
     pageLoaded('Task');
     dispatch(loadTask(params.id));
   }
 
   componentWillUnmount() {
-    const { params, dispatch } = this.props;
+    const { match: { params }, dispatch } = this.props;
     dispatch(unloadTask(params.id));
   }
 
@@ -87,7 +87,7 @@ class Task extends Component {
 Task.propTypes = {
   dispatch: PropTypes.func.isRequired,
   error: PropTypes.object,
-  params: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired,
   task: PropTypes.object
 };
 

templates/app/webpack.config.babel.js

@@ -104,7 +104,14 @@ export default Object.assign({
         test: /\.scss$/,
         use: [
           { loader: 'file-loader', options: { name: '[name].css' } },
-          { loader: 'sass-loader', options: { outputStyle: 'compressed' } }
+          { loader: 'sass-loader',
+            options: {
+              outputStyle: 'compressed',
+              includePaths: [
+                './node_modules'
+              ]
+            }
+          }
         ]
       }
     ]

templates/basic/.gitignore

@@ -38,7 +38,6 @@ jspm_packages
 
 bin/**
 dist/**
-
 .eslintcache
-
 .DS_Store
+.vscode

templates/basic/package.json

@@ -11,7 +11,7 @@
     "dist": "cross-env NODE_ENV=production grommet pack"
   },
   "dependencies": {
-    "grommet": "https://github.com/grommet/grommet/tarball/stable",
+    "grommet": "^1.3.4",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
   },
@@ -40,7 +40,7 @@
     "react-dev-utils": "^0.4.2",
     "react-test-renderer": "^15.4.1",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.3",
     "webpack": "^2.2.1"
   },
   "jest": {

templates/basic/webpack.config.babel.js

@@ -101,7 +101,14 @@ export default Object.assign({
         test: /\.scss$/,
         use: [
           { loader: 'file-loader', options: { name: '[name].css' } },
-          { loader: 'sass-loader', options: { outputStyle: 'compressed' } }
+          { loader: 'sass-loader',
+            options: {
+              outputStyle: 'compressed',
+              includePaths: [
+                './node_modules'
+              ]
+            }
+          }
         ]
       }
     ]

templates/docs/.gitignore

@@ -38,7 +38,6 @@ jspm_packages
 
 bin/**
 dist/**
-
 .eslintcache
-
 .DS_Store
+.vscode

templates/docs/package.json

@@ -11,7 +11,7 @@
     "dist": "cross-env NODE_ENV=production grommet pack"
   },
   "dependencies": {
-    "grommet": "^1.1.0",
+    "grommet": "^1.3.4",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-router": "^3.0.0"
@@ -47,7 +47,7 @@
     "react-test-renderer": "^15.4.1",
     "static-site-generator-webpack-plugin": "^2.1.0",
     "sass-lint": "^1.10.2",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.3",
     "webpack": "^2.2.1"
   },
   "jest": {

templates/docs/webpack.config.babel.js

@@ -96,7 +96,14 @@ const baseConfig = Object.assign({
         test: /\.scss$/,
         use: [
           { loader: 'file-loader', options: { name: '[name].css' } },
-          { loader: 'sass-loader', options: { outputStyle: 'compressed' } }
+          { loader: 'sass-loader',
+            options: {
+              outputStyle: 'compressed',
+              includePaths: [
+                './node_modules'
+              ]
+            }
+          }
         ]
       },
       {