Commit 7d964f2bef52e9913aa6872a034f7e967653274b
Merged from upstream
Don Smith committed on 12/28/2015, 1:14:07 AMParent: 933707b15a97d425b47f252ba48ad6d5643f4550
Parent: 7eb00ba7b58a21dd513f2151dc5ce33c0cd09dca
Files changed
.babelrc | changed |
app/components/dev-tools.js | changed |
app/components/landing/index.css | added |
app/components/landing/index.js | added |
app/containers/app.js | changed |
app/containers/landing.js | changed |
app/containers/no-match.js | changed |
app/containers/todos.js | changed |
app/containers/dev-root.js | added |
app/containers/root.js | deleted |
app/package.json | changed |
app/routes.js | changed |
app/server.js | changed |
app/store.js | changed |
package.json | changed |
server.js | changed |
assets/.gitkeep | added |
.babelrc | ||
---|---|---|
@@ -5,6 +5,22 @@ | ||
5 | 5 | ], |
6 | 6 | "plugins": [ |
7 | 7 | "transform-runtime", |
8 | 8 | "transform-object-rest-spread" |
9 | - ] | |
9 | + ], | |
10 | + "env": { | |
11 | + "hot": { | |
12 | + "plugins": [ | |
13 | + ["react-transform", { | |
14 | + "transforms": [{ | |
15 | + "transform": "react-transform-hmr", | |
16 | + "imports": ["react"], | |
17 | + "locals": ["module"] | |
18 | + }, { | |
19 | + "transform": "react-transform-catch-errors", | |
20 | + "imports": ["react", "redbox-react"] | |
21 | + }] | |
22 | + }] | |
23 | + ] | |
24 | + } | |
25 | + } | |
10 | 26 | } |
app/components/dev-tools.js | ||
---|---|---|
@@ -1,8 +1,8 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { createDevTools } = require('redux-devtools') |
3 | -const LogMonitor = require('redux-devtools-log-monitor') | |
4 | -const DockMonitor = require('redux-devtools-dock-monitor') | |
3 | +const LogMonitor = require('redux-devtools-log-monitor').default | |
4 | +const DockMonitor = require('redux-devtools-dock-monitor').default | |
5 | 5 | |
6 | 6 | const DevTools = createDevTools( |
7 | 7 | <DockMonitor toggleVisibilityKey='H' |
8 | 8 | changePositionKey='Q'> |
app/components/landing/index.js | ||
---|---|---|
@@ -1,0 +1,13 @@ | ||
1 | +const React = require('react') | |
2 | + | |
3 | +const style = require('./index.css') | |
4 | + | |
5 | +class Landing extends React.Component { | |
6 | + render () { | |
7 | + return <div className={style.container}> | |
8 | + landing! | |
9 | + </div> | |
10 | + } | |
11 | +} | |
12 | + | |
13 | +module.exports = Landing |
app/containers/app.js | ||
---|---|---|
@@ -1,8 +1,8 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { connect } = require('react-redux') |
3 | 3 | |
4 | -class App extends React.Component { | |
4 | +class AppContainer extends React.Component { | |
5 | 5 | render () { |
6 | 6 | const { children } = this.props |
7 | 7 | |
8 | 8 | return <div> |
@@ -12,6 +12,6 @@ | ||
12 | 12 | } |
13 | 13 | } |
14 | 14 | |
15 | 15 | module.exports = connect( |
16 | - (state) => { return {} } | |
17 | -)(App) | |
16 | + (state) => ({}) | |
17 | +)(AppContainer) |
app/containers/landing.js | ||
---|---|---|
@@ -1,14 +1,14 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { connect } = require('react-redux') |
3 | 3 | |
4 | -class Landing extends React.Component { | |
4 | +const Landing = require('app/components/landing') | |
5 | + | |
6 | +class LandingContainer extends React.Component { | |
5 | 7 | render () { |
6 | - return <div> | |
7 | - landing! | |
8 | - </div> | |
8 | + return <Landing /> | |
9 | 9 | } |
10 | 10 | } |
11 | 11 | |
12 | 12 | module.exports = connect( |
13 | - (state) => { return {} } | |
14 | -)(Landing) | |
13 | + (state) => ({}) | |
14 | +)(LandingContainer) |
app/containers/no-match.js | ||
---|---|---|
@@ -1,14 +1,14 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { connect } = require('react-redux') |
3 | 3 | |
4 | -class NoMatch extends React.Component { | |
4 | +class NoMatchContainer extends React.Component { | |
5 | 5 | render () { |
6 | 6 | return <div> |
7 | 7 | no match! |
8 | 8 | </div> |
9 | 9 | } |
10 | 10 | } |
11 | 11 | |
12 | 12 | module.exports = connect( |
13 | - (state) => { return {} } | |
14 | -)(NoMatch) | |
13 | + (state) => ({}) | |
14 | +)(NoMatchContainer) |
app/containers/todos.js | ||
---|---|---|
@@ -1,14 +1,14 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { connect } = require('react-redux') |
3 | 3 | |
4 | -class Todos extends React.Component { | |
4 | +class TodosContainer extends React.Component { | |
5 | 5 | render () { |
6 | 6 | return <div> |
7 | 7 | todo list! |
8 | 8 | </div> |
9 | 9 | } |
10 | 10 | } |
11 | 11 | |
12 | 12 | module.exports = connect( |
13 | - (state) => { return {} } | |
14 | -)(Todos) | |
13 | + (state) => ({}) | |
14 | +)(TodosContainer) |
app/containers/dev-root.js | ||
---|---|---|
@@ -1,0 +1,31 @@ | ||
1 | +const React = require('react') | |
2 | +const { Provider } = require('react-redux') | |
3 | +const { ReduxRouter } = require('redux-router') | |
4 | + | |
5 | +const routes = require('app/routes') | |
6 | + | |
7 | +if (process.env.NODE_ENV === 'development') { | |
8 | + var DevTools = require('app/components/dev-tools') | |
9 | +} | |
10 | + | |
11 | +class Root extends React.Component { | |
12 | + render() { | |
13 | + const { store } = this.props; | |
14 | + | |
15 | + return ( | |
16 | + <Provider store={store}> | |
17 | + <div> | |
18 | + <ReduxRouter> | |
19 | + { routes } | |
20 | + </ReduxRouter> | |
21 | + { | |
22 | + (process.env.NODE_ENV === 'development') ? | |
23 | + <DevTools /> : null | |
24 | + } | |
25 | + </div> | |
26 | + </Provider> | |
27 | + ) | |
28 | + } | |
29 | +} | |
30 | + | |
31 | +module.exports = Root |
app/containers/root.js | ||
---|---|---|
@@ -1,31 +1,0 @@ | ||
1 | -const React = require('react') | |
2 | -const { Provider } = require('react-redux') | |
3 | -const { ReduxRouter } = require('redux-router') | |
4 | - | |
5 | -const routes = require('app/routes') | |
6 | - | |
7 | -if (process.env.NODE_ENV === 'development') { | |
8 | - var DevTools = require('app/components/dev-tools') | |
9 | -} | |
10 | - | |
11 | -class Root extends React.Component { | |
12 | - render() { | |
13 | - const { store } = this.props; | |
14 | - | |
15 | - return ( | |
16 | - <Provider store={store}> | |
17 | - <div> | |
18 | - <ReduxRouter> | |
19 | - { routes } | |
20 | - </ReduxRouter> | |
21 | - { | |
22 | - (process.env.NODE_ENV === 'development') ? | |
23 | - <DevTools /> : null | |
24 | - } | |
25 | - </div> | |
26 | - </Provider> | |
27 | - ) | |
28 | - } | |
29 | -} | |
30 | - | |
31 | -module.exports = Root |
app/package.json | ||
---|---|---|
@@ -4,12 +4,12 @@ | ||
4 | 4 | "./config.js": "./config-browser.js" |
5 | 5 | }, |
6 | 6 | "browserify": { |
7 | 7 | "transform": [ |
8 | + ["cssify", { "modules": true }], | |
8 | 9 | "babelify", |
9 | 10 | "envify", |
10 | 11 | ["evalify", { "files": [ "config-browser.js" ] } ], |
11 | - "bulkify", | |
12 | - "sheetify/transform" | |
12 | + "bulkify" | |
13 | 13 | ] |
14 | 14 | } |
15 | 15 | } |
app/routes.js | ||
---|---|---|
@@ -1,17 +1,17 @@ | ||
1 | 1 | const React = require('react') |
2 | 2 | const { Route, IndexRoute } = require('react-router') |
3 | 3 | |
4 | -const App = require('app/containers/app') | |
5 | -const Landing = require('app/containers/landing') | |
6 | -const Todos = require('app/containers/todos') | |
7 | -const NoMatch = require('app/containers/no-match') | |
4 | +const AppContainer = require('app/containers/app') | |
5 | +const LandingContainer = require('app/containers/landing') | |
6 | +const TodosContainer = require('app/containers/todos') | |
7 | +const NoMatchContainer = require('app/containers/no-match') | |
8 | 8 | |
9 | 9 | const routes = ( |
10 | - <Route path='/' component={App}> | |
11 | - <IndexRoute component={Landing} /> | |
12 | - <Route path='todos' component={Todos} /> | |
13 | - <Route path="*" component={NoMatch} /> | |
10 | + <Route path='/' component={AppContainer}> | |
11 | + <IndexRoute component={LandingContainer} /> | |
12 | + <Route path='todos' component={TodosContainer} /> | |
13 | + <Route path="*" component={NoMatchContainer} /> | |
14 | 14 | </Route> |
15 | 15 | ) |
16 | 16 | |
17 | 17 | module.exports = routes |
app/server.js | ||
---|---|---|
@@ -1,6 +1,4 @@ | ||
1 | -const { mapObjIndexed, reduce, toPairs } = require('ramda') | |
2 | - | |
3 | 1 | const createStack = require('app/stack') |
4 | 2 | |
5 | 3 | module.exports = createServer |
6 | 4 |
app/store.js | ||
---|---|---|
@@ -39,8 +39,15 @@ | ||
39 | 39 | ...storeEnhancers |
40 | 40 | )(createStore) |
41 | 41 | |
42 | 42 | function finalCreateStore(initialState) { |
43 | + | |
44 | + if (module.hot) { | |
45 | + module.hot.accept('app/reducers', () => { | |
46 | + store.replaceReducer(require('app/reducers')) | |
47 | + }) | |
48 | + } | |
49 | + | |
43 | 50 | return createEnhancedStore(reducer, initialState) |
44 | 51 | } |
45 | 52 | |
46 | 53 | module.exports = finalCreateStore |
package.json | ||
---|---|---|
@@ -1,17 +1,17 @@ | ||
1 | 1 | { |
2 | 2 | "name": "craftworks-todomvc", |
3 | 3 | "version": "0.0.0", |
4 | 4 | "description": "real-world production-quality TodoMVC example", |
5 | - "main": "index.js", | |
5 | + "main": "server", | |
6 | 6 | "scripts": { |
7 | 7 | "postinstall": "lnfs app node_modules/app", |
8 | 8 | "lint": "snazzy", |
9 | 9 | "format": "snazzy --format", |
10 | - "test": "(npm run spec & npm run feature)", | |
11 | - "spec": "node spec", | |
12 | - "feature": "node feature", | |
13 | - "dev:client": "watchify client -o assets/bundle.js -dv", | |
10 | + "test": "npm-run-all -p test:*", | |
11 | + "test:spec": "node spec", | |
12 | + "test:feature": "node feature", | |
13 | + "dev:client": "BABEL_ENV=hot watchify client -o assets/bundle.js -dv -p browserify-hmr", | |
14 | 14 | "dev:assets": "cpx \"app/assets/**/*\" assets -w", |
15 | 15 | "dev:server": "node-dev server", |
16 | 16 | "prod:client": "browserify client -o assets/bundle.js -g envify -g uglifyify", |
17 | 17 | "prod:assets": "cpx \"app/assets/**/*\" assets", |
@@ -46,11 +46,16 @@ | ||
46 | 46 | "node": "^4.0.0", |
47 | 47 | "npm": "^3.0.0" |
48 | 48 | }, |
49 | 49 | "devDependencies": { |
50 | + "babel-plugin-react-transform": "^2.0.0", | |
51 | + "browserify-hmr": "^0.3.1", | |
50 | 52 | "cuke-tap": "^1.0.2", |
51 | 53 | "jsdom": "^7.1.0", |
52 | 54 | "node-dev": "^2.7.1", |
55 | + "react-transform-catch-errors": "^1.0.0", | |
56 | + "react-transform-hmr": "^1.0.1", | |
57 | + "redbox-react": "^1.2.0", | |
53 | 58 | "redux-devtools": "^3.0.0", |
54 | 59 | "redux-devtools-dock-monitor": "^1.0.1", |
55 | 60 | "redux-devtools-log-monitor": "^1.0.1", |
56 | 61 | "redux-logger": "^2.0.4", |
@@ -68,8 +73,10 @@ | ||
68 | 73 | "browserify": "^12.0.1", |
69 | 74 | "bulk-require": "^0.2.1", |
70 | 75 | "bulkify": "^1.1.1", |
71 | 76 | "cpx": "^1.2.1", |
77 | + "css-modules-require-hook": "^2.1.0", | |
78 | + "cssify": "^1.0.2", | |
72 | 79 | "envify": "^3.4.0", |
73 | 80 | "evalify": "^1.0.1", |
74 | 81 | "feathers": "^1.2.0", |
75 | 82 | "history": "^1.13.1", |
@@ -84,8 +91,7 @@ | ||
84 | 91 | "redux": "^3.0.5", |
85 | 92 | "redux-simple-router": "0.0.10", |
86 | 93 | "redux-thunk": "^1.0.0", |
87 | 94 | "serve-static": "^1.10.0", |
88 | - "sheetify": "^3.1.0", | |
89 | 95 | "uglifyify": "^3.0.1" |
90 | 96 | } |
91 | 97 | } |
server.js | ||
---|---|---|
@@ -1,5 +1,6 @@ | ||
1 | 1 | require('babel-core/register') |
2 | +require('css-modules-require-hook') | |
2 | 3 | |
3 | 4 | const createServer = require('app/server') |
4 | 5 | const config = require('app/config') |
5 | 6 |
assets/.gitkeep |
---|
Built with git-ssb-web