Update example to full ES2015-y goodness.

Fixes #221

Author: timdorr

examples/.gitignore

@@ -1,2 +1,3 @@
-node_modules
-dist
+node_modules/
+dist/
+*.log

examples/basic/.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015"]
+    "presets": ["es2015", "react", "stage-1"]
 }

examples/basic/actions/count.js

@@ -1,17 +1,15 @@
-const constants = require('../constants');
+import { INCREASE, DECREASE } from '../constants'
 
-function increase(n) {
+export function increase(n) {
   return {
-    type: constants.INCREASE,
+    type: INCREASE,
     amount: n
-  };
+  }
 }
 
-function decrease(n) {
+export function decrease(n) {
   return {
-    type: constants.DECREASE,
+    type: DECREASE,
     amount: n
-  };
+  }
 }
-
-module.exports = { increase, decrease };

examples/basic/app.js

@@ -1,37 +1,38 @@
-import { createDevTools } from 'redux-devtools';
-import LogMonitor from 'redux-devtools-log-monitor';
-import DockMonitor from 'redux-devtools-dock-monitor';
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-const { applyMiddleware, compose, createStore, combineReducers } = require('redux');
-const { Provider } = require('react-redux');
-const { Router, Route, IndexRoute } = require('react-router');
-const createHistory = require('history/lib/createHashHistory');
-const { syncHistory, routeReducer } = require('redux-simple-router');
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
+import { Provider } from 'react-redux'
+import { Router, Route, IndexRoute } from 'react-router'
+import createHistory from 'history/lib/createHashHistory'
+import { syncHistory, routeReducer } from 'redux-simple-router'
 
-const reducers = require('./reducers');
-const { App, Home, Foo, Bar } = require('./components');
+import * as reducers from './reducers'
+import { App, Home, Foo, Bar } from './components'
 
-const history = createHistory();
-const middleware = syncHistory(history);
-const reducer = combineReducers(Object.assign({}, reducers, {
+const history = createHistory()
+const middleware = syncHistory(history)
+const reducer = combineReducers({
+  ...reducers,
   routing: routeReducer
-}));
+})
 
 const DevTools = createDevTools(
-  <DockMonitor toggleVisibilityKey='ctrl-h'
-               changePositionKey='ctrl-q'>
-    <LogMonitor theme='tomorrow' />
+  <DockMonitor toggleVisibilityKey="ctrl-h"
+               changePositionKey="ctrl-q">
+    <LogMonitor theme="tomorrow" />
   </DockMonitor>
-);
+)
 
 const finalCreateStore = compose(
   applyMiddleware(middleware),
   DevTools.instrument()
-)(createStore);
-const store = finalCreateStore(reducer);
-middleware.listenForReplays(store);
+)(createStore)
+const store = finalCreateStore(reducer)
+middleware.listenForReplays(store)
 
 ReactDOM.render(
   <Provider store={store}>
@@ -47,4 +48,4 @@ ReactDOM.render(
     </div>
   </Provider>,
   document.getElementById('mount')
-);
+)

examples/basic/components/App.js

@@ -1,7 +1,7 @@
-const React = require('react');
-const { Link } = require('react-router');
-const { connect } = require('react-redux');
-const { routeActions } = require('redux-simple-router');
+import React from 'react'
+import { Link } from 'react-router'
+import { connect } from 'react-redux'
+import { routeActions } from 'redux-simple-router'
 
 function App({ push, children }) {
   return (
@@ -18,12 +18,12 @@ function App({ push, children }) {
       <div>
         <button onClick={() => push('/foo')}>Go to /foo</button>
       </div>
-      <div style={{marginTop: '1.5em'}}>{children}</div>
+      <div style={{ marginTop: '1.5em' }}>{children}</div>
     </div>
-  );
-};
+  )
+}
 
-module.exports = connect(
+export default connect(
   null,
-  { push: routeActions.push }
-)(App);
+  routeActions
+)(App)

examples/basic/components/Bar.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react'
 
-module.exports = function Bar() {
-  return <div>And I am Bar!</div>;
+export default function Bar() {
+  return <div>And I am Bar!</div>
 }

examples/basic/components/Foo.js

@@ -1,5 +1,5 @@
-const React = require('react');
+import React from 'react'
 
-module.exports = function Foo() {
-  return <div>I am Foo!</div>;
+export default function Foo() {
+  return <div>I am Foo!</div>
 }

examples/basic/components/Home.js

@@ -1,6 +1,6 @@
-const React = require('react');
-const { connect } = require('react-redux');
-const { increase, decrease } = require('../actions/count');
+import React from 'react'
+import { connect } from 'react-redux'
+import { increase, decrease } from '../actions/count'
 
 function Home({ number, increase, decrease }) {
   return (
@@ -10,10 +10,10 @@ function Home({ number, increase, decrease }) {
       <button onClick={() => increase(1)}>Increase</button>
       <button onClick={() => decrease(1)}>Decrease</button>
     </div>
-  );
-};
+  )
+}
 
-module.exports = connect(
+export default connect(
   state => ({ number: state.count.number }),
   { increase, decrease }
-)(Home);
+)(Home)

examples/basic/components/index.js

@@ -1,6 +1,4 @@
-const App = require('./App');
-const Home = require('./Home');
-const Foo = require('./Foo');
-const Bar = require('./Bar');
-
-module.exports = { App, Home, Foo, Bar };
+export App from './App'
+export Home from './Home'
+export Foo from './Foo'
+export Bar from './Bar'

examples/basic/constants.js

@@ -1,5 +1,3 @@
 
-module.exports = {
-  INCREASE: 'INCREASE',
-  DECREASE: 'DECREASE'
-}
+export const INCREASE = 'INCREASE'
+export const DECREASE = 'DECREASE'

examples/basic/package.json

@@ -1,6 +1,8 @@
 {
   "name": "rsr-basic-example",
   "version": "0.0.0",
+  "repository": "rackt/redux-simple-router",
+  "license": "MIT",
   "dependencies": {
     "history": "^1.14.0",
     "react": "^0.14.2",
@@ -12,9 +14,14 @@
   },
   "devDependencies": {
     "babel-core": "^6.1.21",
+    "babel-eslint": "^5.0.0-beta6",
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
+    "babel-preset-stage-1": "^6.3.13",
+    "eslint": "^1.10.3",
+    "eslint-config-rackt": "^1.1.1",
+    "eslint-plugin-react": "^3.15.0",
     "redux-devtools": "^3.0.0",
     "redux-devtools-dock-monitor": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.1",

examples/basic/reducers/count.js

@@ -1,17 +1,15 @@
-const constants = require('../constants');
+import { INCREASE, DECREASE } from '../constants'
 
 const initialState = {
   number: 1
 }
 
-function update(state = initialState, action) {
-  if(action.type === constants.INCREASE) {
-    return { number: state.number + action.amount };
+export default function update(state = initialState, action) {
+  if(action.type === INCREASE) {
+    return { number: state.number + action.amount }
   }
-  else if(action.type === constants.DECREASE) {
-    return { number: state.number - action.amount };
+  else if(action.type === DECREASE) {
+    return { number: state.number - action.amount }
   }
-  return state;
+  return state
 }
-
-module.exports = update;

examples/basic/reducers/index.js

@@ -1,3 +1 @@
-const count = require('./count');
-
-module.exports = { count };
+export count from './count'

examples/basic/webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const path = require('path');
 
 module.exports = {
@@ -9,7 +10,7 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.js$/,
-      loaders: ['babel?presets[]=react,presets[]=es2015'],
+      loader: 'babel',
       exclude: /node_modules/,
       include: __dirname
     }]