diff --git a/examples/async/.babelrc b/examples/async/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/async/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/async/.gitignore b/examples/async/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/async/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/async/README.md b/examples/async/README.md new file mode 100644 index 0000000000..62f5e47f18 --- /dev/null +++ b/examples/async/README.md @@ -0,0 +1,34 @@ +# Redux Async Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + diff --git a/examples/async/index.html b/examples/async/index.html index b89496eae0..76356722a6 100644 --- a/examples/async/index.html +++ b/examples/async/index.html @@ -1,11 +1,21 @@ - - + + - Redux async example + + + Redux Async Example -
-
- +
+ diff --git a/examples/async/index.js b/examples/async/index.js deleted file mode 100644 index 12bcb25c37..0000000000 --- a/examples/async/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import 'babel-polyfill' -import React from 'react' -import { render } from 'react-dom' -import { Provider } from 'react-redux' -import App from './containers/App' -import configureStore from './store/configureStore' - -const store = configureStore() - -render( - - - , - document.getElementById('root') -) diff --git a/examples/async/package.json b/examples/async/package.json index 6eb76c1b18..7da912facc 100644 --- a/examples/async/package.json +++ b/examples/async/package.json @@ -1,51 +1,24 @@ { - "name": "redux-async-example", - "version": "0.0.0", - "description": "Redux async example", - "scripts": { - "start": "node server.js" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "keywords": [ - "react", - "reactjs", - "hot", - "reload", - "hmr", - "live", - "edit", - "webpack", - "flux" - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "async", + "version": "0.0.1", + "private": true, + "devDependencies": { + "react-scripts": "^0.4.0", + "redux-logger": "^2.6.1" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "isomorphic-fetch": "^2.1.1", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1", - "redux-logger": "^2.4.0", - "redux-thunk": "^1.0.3" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2", + "redux-thunk": "^2.1.0" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "expect": "^1.6.0", - "express": "^4.13.3", - "node-libs-browser": "^0.5.2", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/async/server.js b/examples/async/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/async/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/async/actions/index.js b/examples/async/src/actions/index.js similarity index 97% rename from examples/async/actions/index.js rename to examples/async/src/actions/index.js index 6553788c63..d5c5f7954e 100644 --- a/examples/async/actions/index.js +++ b/examples/async/src/actions/index.js @@ -1,5 +1,3 @@ -import fetch from 'isomorphic-fetch' - export const REQUEST_POSTS = 'REQUEST_POSTS' export const RECEIVE_POSTS = 'RECEIVE_POSTS' export const SELECT_REDDIT = 'SELECT_REDDIT' diff --git a/examples/async/components/Picker.js b/examples/async/src/components/Picker.js similarity index 100% rename from examples/async/components/Picker.js rename to examples/async/src/components/Picker.js diff --git a/examples/async/components/Posts.js b/examples/async/src/components/Posts.js similarity index 100% rename from examples/async/components/Posts.js rename to examples/async/src/components/Posts.js diff --git a/examples/async/containers/App.js b/examples/async/src/containers/App.js similarity index 100% rename from examples/async/containers/App.js rename to examples/async/src/containers/App.js diff --git a/examples/async/src/index.js b/examples/async/src/index.js new file mode 100644 index 0000000000..002dfc60e7 --- /dev/null +++ b/examples/async/src/index.js @@ -0,0 +1,25 @@ +import React from 'react' +import { render } from 'react-dom' +import { createStore, applyMiddleware } from 'redux' +import { Provider } from 'react-redux' +import thunk from 'redux-thunk' +import createLogger from 'redux-logger' +import reducer from './reducers' +import App from './containers/App' + +const middleware = [ thunk ] +if (process.env.NODE_ENV !== 'production') { + middleware.push(createLogger()) +} + +const store = createStore( + reducer, + applyMiddleware(...middleware) +) + +render( + + + , + document.getElementById('root') +) diff --git a/examples/async/reducers/index.js b/examples/async/src/reducers/index.js similarity index 84% rename from examples/async/reducers/index.js rename to examples/async/src/reducers/index.js index f936cbced3..e27431ea59 100644 --- a/examples/async/reducers/index.js +++ b/examples/async/src/reducers/index.js @@ -20,21 +20,24 @@ function posts(state = { }, action) { switch (action.type) { case INVALIDATE_REDDIT: - return Object.assign({}, state, { + return { + ...state, didInvalidate: true - }) + } case REQUEST_POSTS: - return Object.assign({}, state, { + return { + ...state, isFetching: true, didInvalidate: false - }) + } case RECEIVE_POSTS: - return Object.assign({}, state, { + return { + ...state, isFetching: false, didInvalidate: false, items: action.posts, lastUpdated: action.receivedAt - }) + } default: return state } @@ -45,9 +48,10 @@ function postsByReddit(state = { }, action) { case INVALIDATE_REDDIT: case RECEIVE_POSTS: case REQUEST_POSTS: - return Object.assign({}, state, { + return { + ...state, [action.reddit]: posts(state[action.reddit], action) - }) + } default: return state } diff --git a/examples/async/store/configureStore.js b/examples/async/store/configureStore.js deleted file mode 100644 index c8964c2dca..0000000000 --- a/examples/async/store/configureStore.js +++ /dev/null @@ -1,22 +0,0 @@ -import { createStore, applyMiddleware } from 'redux' -import thunkMiddleware from 'redux-thunk' -import createLogger from 'redux-logger' -import rootReducer from '../reducers' - -export default function configureStore(preloadedState) { - const store = createStore( - rootReducer, - preloadedState, - applyMiddleware(thunkMiddleware, createLogger()) - ) - - if (module.hot) { - // Enable Webpack hot module replacement for reducers - module.hot.accept('../reducers', () => { - const nextRootReducer = require('../reducers').default - store.replaceReducer(nextRootReducer) - }) - } - - return store -} diff --git a/examples/async/webpack.config.js b/examples/async/webpack.config.js deleted file mode 100644 index 2a6d9582c4..0000000000 --- a/examples/async/webpack.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: ['babel'], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/examples/counter/.babelrc b/examples/counter/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/counter/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/counter/.gitignore b/examples/counter/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/counter/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/counter/README.md b/examples/counter/README.md new file mode 100644 index 0000000000..9659749d2d --- /dev/null +++ b/examples/counter/README.md @@ -0,0 +1,33 @@ +# Redux Counter Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/examples/counter/index.html b/examples/counter/index.html index 1eff16a567..2efecb6471 100644 --- a/examples/counter/index.html +++ b/examples/counter/index.html @@ -1,11 +1,21 @@ - - + + - Redux counter example + + + Redux Counter Example -
-
- +
+ diff --git a/examples/counter/package.json b/examples/counter/package.json index bb69e653c9..46fa4fb5fc 100644 --- a/examples/counter/package.json +++ b/examples/counter/package.json @@ -1,43 +1,25 @@ { - "name": "redux-counter-example", - "version": "0.0.0", - "description": "Redux counter example", - "scripts": { - "start": "node server.js", - "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register", - "test:watch": "npm test -- --watch" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "counter", + "version": "0.0.1", + "private": true, + "devDependencies": { + "enzyme": "^2.4.1", + "react-addons-test-utils": "^15.3.0", + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "babel-register": "^6.3.13", - "cross-env": "^1.0.7", - "enzyme": "^2.0.0", - "expect": "^1.6.0", - "express": "^4.13.3", - "mocha": "^2.2.5", - "node-libs-browser": "^0.5.2", - "react-addons-test-utils": "^0.14.7", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject", + "test": "react-scripts test" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/counter/server.js b/examples/counter/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/counter/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/counter/components/Counter.js b/examples/counter/src/components/Counter.js similarity index 100% rename from examples/counter/components/Counter.js rename to examples/counter/src/components/Counter.js diff --git a/examples/counter/test/components/Counter.spec.js b/examples/counter/src/components/Counter.spec.js similarity index 76% rename from examples/counter/test/components/Counter.spec.js rename to examples/counter/src/components/Counter.spec.js index 4e5258d0ad..769b77e40c 100644 --- a/examples/counter/test/components/Counter.spec.js +++ b/examples/counter/src/components/Counter.spec.js @@ -1,12 +1,11 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import Counter from '../../components/Counter' +import Counter from './Counter' function setup(value = 0) { const actions = { - onIncrement: expect.createSpy(), - onDecrement: expect.createSpy() + onIncrement: jest.fn(), + onDecrement: jest.fn() } const component = shallow( @@ -29,38 +28,38 @@ describe('Counter component', () => { it('first button should call onIncrement', () => { const { buttons, actions } = setup() buttons.at(0).simulate('click') - expect(actions.onIncrement).toHaveBeenCalled() + expect(actions.onIncrement).toBeCalled() }) it('second button should call onDecrement', () => { const { buttons, actions } = setup() buttons.at(1).simulate('click') - expect(actions.onDecrement).toHaveBeenCalled() + expect(actions.onDecrement).toBeCalled() }) it('third button should not call onIncrement if the counter is even', () => { const { buttons, actions } = setup(42) buttons.at(2).simulate('click') - expect(actions.onIncrement).toNotHaveBeenCalled() + expect(actions.onIncrement).not.toBeCalled() }) it('third button should call onIncrement if the counter is odd', () => { const { buttons, actions } = setup(43) buttons.at(2).simulate('click') - expect(actions.onIncrement).toHaveBeenCalled() + expect(actions.onIncrement).toBeCalled() }) it('third button should call onIncrement if the counter is odd and negative', () => { const { buttons, actions } = setup(-43) buttons.at(2).simulate('click') - expect(actions.onIncrement).toHaveBeenCalled() + expect(actions.onIncrement).toBeCalled() }) it('fourth button should call onIncrement in a second', (done) => { const { buttons, actions } = setup() buttons.at(3).simulate('click') setTimeout(() => { - expect(actions.onIncrement).toHaveBeenCalled() + expect(actions.onIncrement).toBeCalled() done() }, 1000) }) diff --git a/examples/counter/index.js b/examples/counter/src/index.js similarity index 100% rename from examples/counter/index.js rename to examples/counter/src/index.js diff --git a/examples/counter/reducers/index.js b/examples/counter/src/reducers/index.js similarity index 100% rename from examples/counter/reducers/index.js rename to examples/counter/src/reducers/index.js diff --git a/examples/counter/test/reducers/counter.spec.js b/examples/counter/src/reducers/index.spec.js similarity index 88% rename from examples/counter/test/reducers/counter.spec.js rename to examples/counter/src/reducers/index.spec.js index c51d16adf4..0a31dce738 100644 --- a/examples/counter/test/reducers/counter.spec.js +++ b/examples/counter/src/reducers/index.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import counter from '../../reducers' +import counter from './index' describe('reducers', () => { describe('counter', () => { diff --git a/examples/counter/test/.eslintrc b/examples/counter/test/.eslintrc deleted file mode 100644 index 7eeefc33b6..0000000000 --- a/examples/counter/test/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "mocha": true - } -} diff --git a/examples/counter/webpack.config.js b/examples/counter/webpack.config.js deleted file mode 100644 index 1c7f5f2dc1..0000000000 --- a/examples/counter/webpack.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/examples/real-world/.babelrc b/examples/real-world/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/real-world/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/real-world/.gitignore b/examples/real-world/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/real-world/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/real-world/README.md b/examples/real-world/README.md new file mode 100644 index 0000000000..d7c696d980 --- /dev/null +++ b/examples/real-world/README.md @@ -0,0 +1,33 @@ +# Redux Real World Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/examples/real-world/index.html b/examples/real-world/index.html index b4d9068ec0..72e10e94c6 100644 --- a/examples/real-world/index.html +++ b/examples/real-world/index.html @@ -1,11 +1,21 @@ - - + + - Redux real-world example + + + React App -
-
- +
+ diff --git a/examples/real-world/package.json b/examples/real-world/package.json index 314e11e5dc..810af36576 100644 --- a/examples/real-world/package.json +++ b/examples/real-world/package.json @@ -1,47 +1,31 @@ { - "name": "redux-real-world-example", - "version": "0.0.0", - "description": "Redux real-world example", - "scripts": { - "start": "node server.js" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "real-world", + "version": "0.0.1", + "private": true, + "devDependencies": { + "react-scripts": "^0.4.0", + "redux-devtools": "^3.3.1", + "redux-devtools-dock-monitor": "^1.1.1", + "redux-devtools-log-monitor": "^1.0.11", + "redux-logger": "^2.6.1" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "humps": "^0.6.0", - "isomorphic-fetch": "^2.1.1", - "lodash": "^4.0.0", - "normalizr": "^2.0.0", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "react-router": "2.0.0", - "react-router-redux": "^4.0.0-rc.1", - "redux": "^3.2.1", - "redux-logger": "^2.4.0", - "redux-thunk": "^1.0.3" + "humps": "^1.1.0", + "normalizr": "^2.2.1", + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "react-router": "^2.6.1", + "react-router-redux": "^4.0.5", + "redux": "^3.5.2", + "redux-thunk": "^2.1.0" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "concurrently": "^0.1.1", - "express": "^4.13.3", - "redux-devtools": "^3.1.0", - "redux-devtools-dock-monitor": "^1.0.1", - "redux-devtools-log-monitor": "^1.0.3", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/real-world/server.js b/examples/real-world/server.js deleted file mode 100644 index 348676d009..0000000000 --- a/examples/real-world/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.use(function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/real-world/actions/index.js b/examples/real-world/src/actions/index.js similarity index 100% rename from examples/real-world/actions/index.js rename to examples/real-world/src/actions/index.js diff --git a/examples/real-world/components/Explore.js b/examples/real-world/src/components/Explore.js similarity index 100% rename from examples/real-world/components/Explore.js rename to examples/real-world/src/components/Explore.js diff --git a/examples/real-world/components/List.js b/examples/real-world/src/components/List.js similarity index 100% rename from examples/real-world/components/List.js rename to examples/real-world/src/components/List.js diff --git a/examples/real-world/components/Repo.js b/examples/real-world/src/components/Repo.js similarity index 100% rename from examples/real-world/components/Repo.js rename to examples/real-world/src/components/Repo.js diff --git a/examples/real-world/components/User.js b/examples/real-world/src/components/User.js similarity index 89% rename from examples/real-world/components/User.js rename to examples/real-world/src/components/User.js index c52ade2a3a..2af63b26dc 100644 --- a/examples/real-world/components/User.js +++ b/examples/real-world/src/components/User.js @@ -8,7 +8,7 @@ export default class User extends Component { return (
- + {login}

{login} {name && ({name})}

diff --git a/examples/real-world/containers/App.js b/examples/real-world/src/containers/App.js similarity index 100% rename from examples/real-world/containers/App.js rename to examples/real-world/src/containers/App.js diff --git a/examples/real-world/containers/DevTools.js b/examples/real-world/src/containers/DevTools.js similarity index 100% rename from examples/real-world/containers/DevTools.js rename to examples/real-world/src/containers/DevTools.js diff --git a/examples/real-world/containers/RepoPage.js b/examples/real-world/src/containers/RepoPage.js similarity index 100% rename from examples/real-world/containers/RepoPage.js rename to examples/real-world/src/containers/RepoPage.js diff --git a/examples/real-world/containers/Root.dev.js b/examples/real-world/src/containers/Root.dev.js similarity index 100% rename from examples/real-world/containers/Root.dev.js rename to examples/real-world/src/containers/Root.dev.js diff --git a/examples/real-world/containers/Root.js b/examples/real-world/src/containers/Root.js similarity index 100% rename from examples/real-world/containers/Root.js rename to examples/real-world/src/containers/Root.js diff --git a/examples/real-world/containers/Root.prod.js b/examples/real-world/src/containers/Root.prod.js similarity index 100% rename from examples/real-world/containers/Root.prod.js rename to examples/real-world/src/containers/Root.prod.js diff --git a/examples/real-world/containers/UserPage.js b/examples/real-world/src/containers/UserPage.js similarity index 100% rename from examples/real-world/containers/UserPage.js rename to examples/real-world/src/containers/UserPage.js diff --git a/examples/real-world/index.js b/examples/real-world/src/index.js similarity index 94% rename from examples/real-world/index.js rename to examples/real-world/src/index.js index aacfee6fb5..ceda560db2 100644 --- a/examples/real-world/index.js +++ b/examples/real-world/src/index.js @@ -1,4 +1,3 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' import { browserHistory } from 'react-router' diff --git a/examples/real-world/middleware/api.js b/examples/real-world/src/middleware/api.js similarity index 100% rename from examples/real-world/middleware/api.js rename to examples/real-world/src/middleware/api.js diff --git a/examples/real-world/reducers/index.js b/examples/real-world/src/reducers/index.js similarity index 100% rename from examples/real-world/reducers/index.js rename to examples/real-world/src/reducers/index.js diff --git a/examples/real-world/reducers/paginate.js b/examples/real-world/src/reducers/paginate.js similarity index 100% rename from examples/real-world/reducers/paginate.js rename to examples/real-world/src/reducers/paginate.js diff --git a/examples/real-world/routes.js b/examples/real-world/src/routes.js similarity index 100% rename from examples/real-world/routes.js rename to examples/real-world/src/routes.js diff --git a/examples/real-world/store/configureStore.dev.js b/examples/real-world/src/store/configureStore.dev.js similarity index 100% rename from examples/real-world/store/configureStore.dev.js rename to examples/real-world/src/store/configureStore.dev.js diff --git a/examples/real-world/store/configureStore.js b/examples/real-world/src/store/configureStore.js similarity index 100% rename from examples/real-world/store/configureStore.js rename to examples/real-world/src/store/configureStore.js diff --git a/examples/real-world/store/configureStore.prod.js b/examples/real-world/src/store/configureStore.prod.js similarity index 100% rename from examples/real-world/store/configureStore.prod.js rename to examples/real-world/src/store/configureStore.prod.js diff --git a/examples/real-world/webpack.config.js b/examples/real-world/webpack.config.js deleted file mode 100644 index 1c7f5f2dc1..0000000000 --- a/examples/real-world/webpack.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/examples/shopping-cart/.babelrc b/examples/shopping-cart/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/shopping-cart/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/shopping-cart/.gitignore b/examples/shopping-cart/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/shopping-cart/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/shopping-cart/README.md b/examples/shopping-cart/README.md new file mode 100644 index 0000000000..b84289d6b7 --- /dev/null +++ b/examples/shopping-cart/README.md @@ -0,0 +1,33 @@ +# Redux Shopping Cart Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/examples/shopping-cart/index.html b/examples/shopping-cart/index.html index b74cd00a98..5fb87aa68a 100644 --- a/examples/shopping-cart/index.html +++ b/examples/shopping-cart/index.html @@ -1,11 +1,21 @@ - - + + - Redux shopping cart example + + + Redux Shopping Cart Example -
-
- +
+ diff --git a/examples/shopping-cart/package.json b/examples/shopping-cart/package.json index cc4c8f42ff..1c5f48f22c 100644 --- a/examples/shopping-cart/package.json +++ b/examples/shopping-cart/package.json @@ -1,46 +1,27 @@ { - "name": "redux-shopping-cart-example", - "version": "0.0.0", - "description": "Redux shopping-cart example", - "scripts": { - "start": "node server.js", - "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register", - "test:watch": "npm test -- --watch" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "shopping-cart", + "version": "0.0.1", + "private": true, + "devDependencies": { + "enzyme": "^2.4.1", + "react-addons-test-utils": "^15.3.0", + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1", - "redux-thunk": "^1.0.3" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2", + "redux-logger": "^2.6.1", + "redux-thunk": "^2.1.0" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "cross-env": "^1.0.7", - "enzyme": "^2.0.0", - "expect": "^1.20.1", - "express": "^4.13.3", - "json-loader": "^0.5.3", - "react-addons-test-utils": "^0.14.7", - "redux-logger": "^2.0.1", - "mocha": "^2.2.5", - "node-libs-browser": "^0.5.2", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject", + "test": "react-scripts test" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/shopping-cart/server.js b/examples/shopping-cart/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/shopping-cart/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/shopping-cart/actions/index.js b/examples/shopping-cart/src/actions/index.js similarity index 100% rename from examples/shopping-cart/actions/index.js rename to examples/shopping-cart/src/actions/index.js diff --git a/examples/shopping-cart/api/products.json b/examples/shopping-cart/src/api/products.json similarity index 100% rename from examples/shopping-cart/api/products.json rename to examples/shopping-cart/src/api/products.json diff --git a/examples/shopping-cart/api/shop.js b/examples/shopping-cart/src/api/shop.js similarity index 100% rename from examples/shopping-cart/api/shop.js rename to examples/shopping-cart/src/api/shop.js diff --git a/examples/shopping-cart/components/Cart.js b/examples/shopping-cart/src/components/Cart.js similarity index 100% rename from examples/shopping-cart/components/Cart.js rename to examples/shopping-cart/src/components/Cart.js diff --git a/examples/shopping-cart/test/components/Cart.spec.js b/examples/shopping-cart/src/components/Cart.spec.js similarity index 88% rename from examples/shopping-cart/test/components/Cart.spec.js rename to examples/shopping-cart/src/components/Cart.spec.js index d47e69c22e..fe915ee554 100644 --- a/examples/shopping-cart/test/components/Cart.spec.js +++ b/examples/shopping-cart/src/components/Cart.spec.js @@ -1,12 +1,11 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import Cart from '../../components/Cart' -import Product from '../../components/Product' +import Cart from './Cart' +import Product from './Product' function setup(total, products = []) { const actions = { - onCheckoutClicked: expect.createSpy() + onCheckoutClicked: jest.fn() } const component = shallow( @@ -68,7 +67,7 @@ describe('Cart component', () => { it('should call action on button click', () => { const { button, actions } = setup('9.99', product) button.simulate('click') - expect(actions.onCheckoutClicked).toHaveBeenCalled() + expect(actions.onCheckoutClicked).toBeCalled() }) }) }) diff --git a/examples/shopping-cart/components/Product.js b/examples/shopping-cart/src/components/Product.js similarity index 100% rename from examples/shopping-cart/components/Product.js rename to examples/shopping-cart/src/components/Product.js diff --git a/examples/shopping-cart/test/components/Product.spec.js b/examples/shopping-cart/src/components/Product.spec.js similarity index 90% rename from examples/shopping-cart/test/components/Product.spec.js rename to examples/shopping-cart/src/components/Product.spec.js index a8d0deab7a..d937233f41 100644 --- a/examples/shopping-cart/test/components/Product.spec.js +++ b/examples/shopping-cart/src/components/Product.spec.js @@ -1,7 +1,6 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import Product from '../../components/Product' +import Product from './Product' function setup(props) { const component = shallow( diff --git a/examples/shopping-cart/components/ProductItem.js b/examples/shopping-cart/src/components/ProductItem.js similarity index 100% rename from examples/shopping-cart/components/ProductItem.js rename to examples/shopping-cart/src/components/ProductItem.js diff --git a/examples/shopping-cart/test/components/ProductItem.spec.js b/examples/shopping-cart/src/components/ProductItem.spec.js similarity index 86% rename from examples/shopping-cart/test/components/ProductItem.spec.js rename to examples/shopping-cart/src/components/ProductItem.spec.js index 1d960a2e19..7a208cb46d 100644 --- a/examples/shopping-cart/test/components/ProductItem.spec.js +++ b/examples/shopping-cart/src/components/ProductItem.spec.js @@ -1,12 +1,11 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import Product from '../../components/Product' -import ProductItem from '../../components/ProductItem' +import Product from './Product' +import ProductItem from './ProductItem' function setup(product) { const actions = { - onAddToCartClicked: expect.createSpy() + onAddToCartClicked: jest.fn() } const component = shallow( @@ -50,7 +49,7 @@ describe('ProductItem component', () => { it('should call action on button click', () => { const { button, actions } = setup(productProps) button.simulate('click') - expect(actions.onAddToCartClicked).toHaveBeenCalled() + expect(actions.onAddToCartClicked).toBeCalled() }) describe('when product inventory is 0', () => { diff --git a/examples/shopping-cart/components/ProductsList.js b/examples/shopping-cart/src/components/ProductsList.js similarity index 100% rename from examples/shopping-cart/components/ProductsList.js rename to examples/shopping-cart/src/components/ProductsList.js diff --git a/examples/shopping-cart/test/components/ProductsList.spec.js b/examples/shopping-cart/src/components/ProductsList.spec.js similarity index 88% rename from examples/shopping-cart/test/components/ProductsList.spec.js rename to examples/shopping-cart/src/components/ProductsList.spec.js index 8c34274dfc..633782ad71 100644 --- a/examples/shopping-cart/test/components/ProductsList.spec.js +++ b/examples/shopping-cart/src/components/ProductsList.spec.js @@ -1,7 +1,6 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import ProductsList from '../../components/ProductsList' +import ProductsList from './ProductsList' function setup(props) { const component = shallow( diff --git a/examples/shopping-cart/constants/ActionTypes.js b/examples/shopping-cart/src/constants/ActionTypes.js similarity index 100% rename from examples/shopping-cart/constants/ActionTypes.js rename to examples/shopping-cart/src/constants/ActionTypes.js diff --git a/examples/shopping-cart/containers/App.js b/examples/shopping-cart/src/containers/App.js similarity index 100% rename from examples/shopping-cart/containers/App.js rename to examples/shopping-cart/src/containers/App.js diff --git a/examples/shopping-cart/containers/CartContainer.js b/examples/shopping-cart/src/containers/CartContainer.js similarity index 100% rename from examples/shopping-cart/containers/CartContainer.js rename to examples/shopping-cart/src/containers/CartContainer.js diff --git a/examples/shopping-cart/containers/ProductsContainer.js b/examples/shopping-cart/src/containers/ProductsContainer.js similarity index 100% rename from examples/shopping-cart/containers/ProductsContainer.js rename to examples/shopping-cart/src/containers/ProductsContainer.js diff --git a/examples/shopping-cart/index.js b/examples/shopping-cart/src/index.js similarity index 76% rename from examples/shopping-cart/index.js rename to examples/shopping-cart/src/index.js index 1b475e4714..1f0c247753 100644 --- a/examples/shopping-cart/index.js +++ b/examples/shopping-cart/src/index.js @@ -1,17 +1,17 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { Provider } from 'react-redux' -import logger from 'redux-logger' +import createLogger from 'redux-logger' import thunk from 'redux-thunk' import reducer from './reducers' import { getAllProducts } from './actions' import App from './containers/App' -const middleware = process.env.NODE_ENV === 'production' ? - [ thunk ] : - [ thunk, logger() ] +const middleware = [ thunk ]; +if (process.env.NODE_ENV !== 'production') { + middleware.push(createLogger()); +} const store = createStore( reducer, diff --git a/examples/shopping-cart/reducers/cart.js b/examples/shopping-cart/src/reducers/cart.js similarity index 100% rename from examples/shopping-cart/reducers/cart.js rename to examples/shopping-cart/src/reducers/cart.js diff --git a/examples/shopping-cart/test/reducers/cart.spec.js b/examples/shopping-cart/src/reducers/cart.spec.js similarity index 94% rename from examples/shopping-cart/test/reducers/cart.spec.js rename to examples/shopping-cart/src/reducers/cart.spec.js index 353e58b832..e2e2bd7fd8 100644 --- a/examples/shopping-cart/test/reducers/cart.spec.js +++ b/examples/shopping-cart/src/reducers/cart.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import cart from '../../reducers/cart' +import cart from './cart' describe('reducers', () => { describe('cart', () => { diff --git a/examples/shopping-cart/reducers/index.js b/examples/shopping-cart/src/reducers/index.js similarity index 81% rename from examples/shopping-cart/reducers/index.js rename to examples/shopping-cart/src/reducers/index.js index a9ff991d02..ed75ca0ebe 100644 --- a/examples/shopping-cart/reducers/index.js +++ b/examples/shopping-cart/src/reducers/index.js @@ -27,12 +27,8 @@ export function getTotal(state) { } export function getCartProducts(state) { - return getAddedIds(state).map(id => Object.assign( - {}, - getProduct(state, id), - { - quantity: getQuantity(state, id) - } - )) + return getAddedIds(state).map(id => ({ + ...getProduct(state, id), + quantity: getQuantity(state, id) + })) } - diff --git a/examples/shopping-cart/test/reducers/selectors.spec.js b/examples/shopping-cart/src/reducers/index.spec.js similarity index 94% rename from examples/shopping-cart/test/reducers/selectors.spec.js rename to examples/shopping-cart/src/reducers/index.spec.js index e07d4e0b56..c49c2d3baf 100644 --- a/examples/shopping-cart/test/reducers/selectors.spec.js +++ b/examples/shopping-cart/src/reducers/index.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import { getTotal, getCartProducts } from '../../reducers' +import { getTotal, getCartProducts } from './index' describe('selectors', () => { describe('getTotal', () => { diff --git a/examples/shopping-cart/reducers/products.js b/examples/shopping-cart/src/reducers/products.js similarity index 83% rename from examples/shopping-cart/reducers/products.js rename to examples/shopping-cart/src/reducers/products.js index eee1a0200b..3f9b0f4e99 100644 --- a/examples/shopping-cart/reducers/products.js +++ b/examples/shopping-cart/src/reducers/products.js @@ -4,9 +4,10 @@ import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../constants/ActionTypes' function products(state, action) { switch (action.type) { case ADD_TO_CART: - return Object.assign({}, state, { + return { + ...state, inventory: state.inventory - 1 - }) + } default: return state } @@ -15,19 +16,20 @@ function products(state, action) { function byId(state = {}, action) { switch (action.type) { case RECEIVE_PRODUCTS: - return Object.assign({}, - state, - action.products.reduce((obj, product) => { + return { + ...state, + ...action.products.reduce((obj, product) => { obj[product.id] = product return obj }, {}) - ) + } default: const { productId } = action if (productId) { - return Object.assign({}, state, { + return { + ...state, [productId]: products(state[productId], action) - }) + } } return state } diff --git a/examples/shopping-cart/test/reducers/products.spec.js b/examples/shopping-cart/src/reducers/products.spec.js similarity index 93% rename from examples/shopping-cart/test/reducers/products.spec.js rename to examples/shopping-cart/src/reducers/products.spec.js index c5c8a6f016..d920d31b82 100644 --- a/examples/shopping-cart/test/reducers/products.spec.js +++ b/examples/shopping-cart/src/reducers/products.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import products from '../../reducers/products' +import products from './products' describe('reducers', () => { describe('products', () => { diff --git a/examples/shopping-cart/test/.eslintrc b/examples/shopping-cart/test/.eslintrc deleted file mode 100644 index 7eeefc33b6..0000000000 --- a/examples/shopping-cart/test/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "mocha": true - } -} diff --git a/examples/shopping-cart/webpack.config.js b/examples/shopping-cart/webpack.config.js deleted file mode 100644 index a5a0be32c2..0000000000 --- a/examples/shopping-cart/webpack.config.js +++ /dev/null @@ -1,35 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - }, - { - test: /\.json$/, - loaders: [ 'json' ], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/examples/todomvc/.babelrc b/examples/todomvc/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/todomvc/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/todomvc/.gitignore b/examples/todomvc/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/todomvc/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/todomvc/README.md b/examples/todomvc/README.md new file mode 100644 index 0000000000..ebd0ac50b2 --- /dev/null +++ b/examples/todomvc/README.md @@ -0,0 +1,33 @@ +# Redux TodoMVC Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/examples/todomvc/index.html b/examples/todomvc/index.html index d956cdb86a..78bccfeeca 100644 --- a/examples/todomvc/index.html +++ b/examples/todomvc/index.html @@ -1,11 +1,21 @@ - - + + - Redux TodoMVC example + + + Redux TodoMVC Example -
-
- +
+ diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json index 94760de194..8aaba87eb7 100644 --- a/examples/todomvc/package.json +++ b/examples/todomvc/package.json @@ -1,49 +1,27 @@ { - "name": "redux-todomvc-example", - "version": "0.0.0", - "description": "Redux TodoMVC example", - "scripts": { - "start": "node server.js", - "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js", - "test:watch": "npm test -- --watch" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "todomvc", + "version": "0.0.1", + "private": true, + "devDependencies": { + "enzyme": "^2.4.1", + "react-addons-test-utils": "^15.3.0", + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "classnames": "^2.1.2", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1" + "classnames": "^2.2.5", + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2", + "todomvc-app-css": "^2.0.6" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "babel-register": "^6.3.13", - "cross-env": "^1.0.7", - "enzyme": "^2.2.0", - "expect": "^1.8.0", - "express": "^4.13.3", - "jsdom": "^5.6.1", - "mocha": "^2.2.5", - "node-libs-browser": "^0.5.2", - "raw-loader": "^0.5.1", - "react-addons-test-utils": "^0.14.7", - "style-loader": "^0.12.3", - "todomvc-app-css": "^2.0.1", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject", + "test": "react-scripts test" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/todomvc/server.js b/examples/todomvc/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/todomvc/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/todomvc/actions/index.js b/examples/todomvc/src/actions/index.js similarity index 100% rename from examples/todomvc/actions/index.js rename to examples/todomvc/src/actions/index.js diff --git a/examples/todomvc/test/actions/todos.spec.js b/examples/todomvc/src/actions/index.spec.js similarity index 89% rename from examples/todomvc/test/actions/todos.spec.js rename to examples/todomvc/src/actions/index.spec.js index 0feb331fbf..06c894c1a5 100644 --- a/examples/todomvc/test/actions/todos.spec.js +++ b/examples/todomvc/src/actions/index.spec.js @@ -1,6 +1,5 @@ -import expect from 'expect' -import * as types from '../../constants/ActionTypes' -import * as actions from '../../actions' +import * as types from '../constants/ActionTypes' +import * as actions from './index' describe('todo actions', () => { it('addTodo should create ADD_TODO action', () => { diff --git a/examples/todomvc/components/Footer.js b/examples/todomvc/src/components/Footer.js similarity index 100% rename from examples/todomvc/components/Footer.js rename to examples/todomvc/src/components/Footer.js diff --git a/examples/todomvc/test/components/Footer.spec.js b/examples/todomvc/src/components/Footer.spec.js similarity index 90% rename from examples/todomvc/test/components/Footer.spec.js rename to examples/todomvc/src/components/Footer.spec.js index b482a2d343..4d46ac08cd 100644 --- a/examples/todomvc/test/components/Footer.spec.js +++ b/examples/todomvc/src/components/Footer.spec.js @@ -1,16 +1,15 @@ -import expect from 'expect' import React from 'react' import TestUtils from 'react-addons-test-utils' -import Footer from '../../components/Footer' -import { SHOW_ALL, SHOW_ACTIVE } from '../../constants/TodoFilters' +import Footer from './Footer' +import { SHOW_ALL, SHOW_ACTIVE } from '../constants/TodoFilters' function setup(propOverrides) { const props = Object.assign({ completedCount: 0, activeCount: 0, filter: SHOW_ALL, - onClearCompleted: expect.createSpy(), - onShow: expect.createSpy() + onClearCompleted: jest.fn(), + onShow: jest.fn() }, propOverrides) const renderer = TestUtils.createRenderer() @@ -76,7 +75,7 @@ describe('components', () => { const [ , filters ] = output.props.children const filterLink = filters.props.children[1].props.children filterLink.props.onClick({}) - expect(props.onShow).toHaveBeenCalledWith(SHOW_ACTIVE) + expect(props.onShow).toBeCalledWith(SHOW_ACTIVE) }) it('shouldnt show clear button when no completed todos', () => { @@ -96,7 +95,7 @@ describe('components', () => { const { output, props } = setup({ completedCount: 1 }) const [ , , clear ] = output.props.children clear.props.onClick({}) - expect(props.onClearCompleted).toHaveBeenCalled() + expect(props.onClearCompleted).toBeCalled() }) }) }) diff --git a/examples/todomvc/components/Header.js b/examples/todomvc/src/components/Header.js similarity index 100% rename from examples/todomvc/components/Header.js rename to examples/todomvc/src/components/Header.js diff --git a/examples/todomvc/test/components/Header.spec.js b/examples/todomvc/src/components/Header.spec.js similarity index 80% rename from examples/todomvc/test/components/Header.spec.js rename to examples/todomvc/src/components/Header.spec.js index 474a76886c..eab9bd91f9 100644 --- a/examples/todomvc/test/components/Header.spec.js +++ b/examples/todomvc/src/components/Header.spec.js @@ -1,12 +1,11 @@ -import expect from 'expect' import React from 'react' import TestUtils from 'react-addons-test-utils' -import Header from '../../components/Header' -import TodoTextInput from '../../components/TodoTextInput' +import Header from './Header' +import TodoTextInput from './TodoTextInput' function setup() { const props = { - addTodo: expect.createSpy() + addTodo: jest.fn() } const renderer = TestUtils.createRenderer() @@ -42,9 +41,9 @@ describe('components', () => { const { output, props } = setup() const input = output.props.children[1] input.props.onSave('') - expect(props.addTodo.calls.length).toBe(0) + expect(props.addTodo).not.toBeCalled() input.props.onSave('Use Redux') - expect(props.addTodo.calls.length).toBe(1) + expect(props.addTodo).toBeCalled() }) }) }) diff --git a/examples/todomvc/components/MainSection.js b/examples/todomvc/src/components/MainSection.js similarity index 100% rename from examples/todomvc/components/MainSection.js rename to examples/todomvc/src/components/MainSection.js diff --git a/examples/todomvc/test/components/MainSection.spec.js b/examples/todomvc/src/components/MainSection.spec.js similarity index 86% rename from examples/todomvc/test/components/MainSection.spec.js rename to examples/todomvc/src/components/MainSection.spec.js index e3e980adfd..245b4aeb2b 100644 --- a/examples/todomvc/test/components/MainSection.spec.js +++ b/examples/todomvc/src/components/MainSection.spec.js @@ -1,10 +1,9 @@ -import expect from 'expect' import React from 'react' import TestUtils from 'react-addons-test-utils' -import MainSection from '../../components/MainSection' -import TodoItem from '../../components/TodoItem' -import Footer from '../../components/Footer' -import { SHOW_ALL, SHOW_COMPLETED } from '../../constants/TodoFilters' +import MainSection from './MainSection' +import TodoItem from './TodoItem' +import Footer from './Footer' +import { SHOW_ALL, SHOW_COMPLETED } from '../constants/TodoFilters' function setup(propOverrides) { const props = Object.assign({ @@ -20,11 +19,11 @@ function setup(propOverrides) { } ], actions: { - editTodo: expect.createSpy(), - deleteTodo: expect.createSpy(), - completeTodo: expect.createSpy(), - completeAll: expect.createSpy(), - clearCompleted: expect.createSpy() + editTodo: jest.fn(), + deleteTodo: jest.fn(), + completeTodo: jest.fn(), + completeAll: jest.fn(), + clearCompleted: jest.fn() } }, propOverrides) @@ -73,7 +72,7 @@ describe('components', () => { const { output, props } = setup() const [ toggle ] = output.props.children toggle.props.onChange({}) - expect(props.actions.completeAll).toHaveBeenCalled() + expect(props.actions.completeAll).toBeCalled() }) }) @@ -100,7 +99,7 @@ describe('components', () => { const { output, props } = setup() const [ , , footer ] = output.props.children footer.props.onClearCompleted() - expect(props.actions.clearCompleted).toHaveBeenCalled() + expect(props.actions.clearCompleted).toBeCalled() }) }) diff --git a/examples/todomvc/components/TodoItem.js b/examples/todomvc/src/components/TodoItem.js similarity index 100% rename from examples/todomvc/components/TodoItem.js rename to examples/todomvc/src/components/TodoItem.js diff --git a/examples/todomvc/test/components/TodoItem.spec.js b/examples/todomvc/src/components/TodoItem.spec.js similarity index 86% rename from examples/todomvc/test/components/TodoItem.spec.js rename to examples/todomvc/src/components/TodoItem.spec.js index abbe22b97a..7d02036140 100644 --- a/examples/todomvc/test/components/TodoItem.spec.js +++ b/examples/todomvc/src/components/TodoItem.spec.js @@ -1,8 +1,7 @@ -import expect from 'expect' import React from 'react' import TestUtils from 'react-addons-test-utils' -import TodoItem from '../../components/TodoItem' -import TodoTextInput from '../../components/TodoTextInput' +import TodoItem from './TodoItem' +import TodoTextInput from './TodoTextInput' function setup( editing = false ) { const props = { @@ -11,9 +10,9 @@ function setup( editing = false ) { text: 'Use Redux', completed: false }, - editTodo: expect.createSpy(), - deleteTodo: expect.createSpy(), - completeTodo: expect.createSpy() + editTodo: jest.fn(), + deleteTodo: jest.fn(), + completeTodo: jest.fn() } const renderer = TestUtils.createRenderer() @@ -66,14 +65,14 @@ describe('components', () => { const { output, props } = setup() const input = output.props.children.props.children[0] input.props.onChange({}) - expect(props.completeTodo).toHaveBeenCalledWith(0) + expect(props.completeTodo).toBeCalledWith(0) }) it('button onClick should call deleteTodo', () => { const { output, props } = setup() const button = output.props.children.props.children[2] button.props.onClick({}) - expect(props.deleteTodo).toHaveBeenCalledWith(0) + expect(props.deleteTodo).toBeCalledWith(0) }) it('label onDoubleClick should put component in edit state', () => { @@ -100,13 +99,13 @@ describe('components', () => { it('TodoTextInput onSave should call editTodo', () => { const { output, props } = setup(true) output.props.children.props.onSave('Use Redux') - expect(props.editTodo).toHaveBeenCalledWith(0, 'Use Redux') + expect(props.editTodo).toBeCalledWith(0, 'Use Redux') }) it('TodoTextInput onSave should call deleteTodo if text is empty', () => { const { output, props } = setup(true) output.props.children.props.onSave('') - expect(props.deleteTodo).toHaveBeenCalledWith(0) + expect(props.deleteTodo).toBeCalledWith(0) }) it('TodoTextInput onSave should exit component from edit state', () => { diff --git a/examples/todomvc/components/TodoTextInput.js b/examples/todomvc/src/components/TodoTextInput.js similarity index 100% rename from examples/todomvc/components/TodoTextInput.js rename to examples/todomvc/src/components/TodoTextInput.js diff --git a/examples/todomvc/test/components/TodoTextInput.spec.js b/examples/todomvc/src/components/TodoTextInput.spec.js similarity index 88% rename from examples/todomvc/test/components/TodoTextInput.spec.js rename to examples/todomvc/src/components/TodoTextInput.spec.js index b712a8d440..c55aee2727 100644 --- a/examples/todomvc/test/components/TodoTextInput.spec.js +++ b/examples/todomvc/src/components/TodoTextInput.spec.js @@ -1,11 +1,10 @@ -import expect from 'expect' import React from 'react' import TestUtils from 'react-addons-test-utils' -import TodoTextInput from '../../components/TodoTextInput' +import TodoTextInput from './TodoTextInput' function setup(propOverrides) { const props = Object.assign({ - onSave: expect.createSpy(), + onSave: jest.fn(), text: 'Use Redux', placeholder: 'What needs to be done?', editing: false, @@ -56,7 +55,7 @@ describe('components', () => { it('should call onSave on return key press', () => { const { output, props } = setup() output.props.onKeyDown({ which: 13, target: { value: 'Use Redux' } }) - expect(props.onSave).toHaveBeenCalledWith('Use Redux') + expect(props.onSave).toBeCalledWith('Use Redux') }) it('should reset state on return key press if newTodo', () => { @@ -69,13 +68,13 @@ describe('components', () => { it('should call onSave on blur', () => { const { output, props } = setup() output.props.onBlur({ target: { value: 'Use Redux' } }) - expect(props.onSave).toHaveBeenCalledWith('Use Redux') + expect(props.onSave).toBeCalledWith('Use Redux') }) it('shouldnt call onSave on blur if newTodo', () => { const { output, props } = setup({ newTodo: true }) output.props.onBlur({ target: { value: 'Use Redux' } }) - expect(props.onSave.calls.length).toBe(0) + expect(props.onSave).not.toBeCalled() }) }) }) diff --git a/examples/todomvc/constants/ActionTypes.js b/examples/todomvc/src/constants/ActionTypes.js similarity index 100% rename from examples/todomvc/constants/ActionTypes.js rename to examples/todomvc/src/constants/ActionTypes.js diff --git a/examples/todomvc/constants/TodoFilters.js b/examples/todomvc/src/constants/TodoFilters.js similarity index 100% rename from examples/todomvc/constants/TodoFilters.js rename to examples/todomvc/src/constants/TodoFilters.js diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/src/containers/App.js similarity index 100% rename from examples/todomvc/containers/App.js rename to examples/todomvc/src/containers/App.js diff --git a/examples/todomvc/index.js b/examples/todomvc/src/index.js similarity index 71% rename from examples/todomvc/index.js rename to examples/todomvc/src/index.js index 988cc99ccd..44f50ab269 100644 --- a/examples/todomvc/index.js +++ b/examples/todomvc/src/index.js @@ -1,12 +1,12 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' +import { createStore } from 'redux' import { Provider } from 'react-redux' import App from './containers/App' -import configureStore from './store/configureStore' +import reducer from './reducers' import 'todomvc-app-css/index.css' -const store = configureStore() +const store = createStore(reducer) render( diff --git a/examples/todomvc/reducers/index.js b/examples/todomvc/src/reducers/index.js similarity index 100% rename from examples/todomvc/reducers/index.js rename to examples/todomvc/src/reducers/index.js diff --git a/examples/todomvc/reducers/todos.js b/examples/todomvc/src/reducers/todos.js similarity index 84% rename from examples/todomvc/reducers/todos.js rename to examples/todomvc/src/reducers/todos.js index 1655999bb6..5afb9bccbf 100644 --- a/examples/todomvc/reducers/todos.js +++ b/examples/todomvc/src/reducers/todos.js @@ -16,7 +16,7 @@ export default function todos(state = initialState, action) { id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1, completed: false, text: action.text - }, + }, ...state ] @@ -28,20 +28,21 @@ export default function todos(state = initialState, action) { case EDIT_TODO: return state.map(todo => todo.id === action.id ? - Object.assign({}, todo, { text: action.text }) : + { ...todo, text: action.text } : todo ) case COMPLETE_TODO: return state.map(todo => todo.id === action.id ? - Object.assign({}, todo, { completed: !todo.completed }) : + { ...todo, completed: !todo.completed } : todo ) case COMPLETE_ALL: const areAllMarked = state.every(todo => todo.completed) - return state.map(todo => Object.assign({}, todo, { + return state.map(todo => ({ + ...todo, completed: !areAllMarked })) diff --git a/examples/todomvc/test/reducers/todos.spec.js b/examples/todomvc/src/reducers/todos.spec.js similarity index 97% rename from examples/todomvc/test/reducers/todos.spec.js rename to examples/todomvc/src/reducers/todos.spec.js index c7e887c29d..1ddded36fb 100644 --- a/examples/todomvc/test/reducers/todos.spec.js +++ b/examples/todomvc/src/reducers/todos.spec.js @@ -1,6 +1,5 @@ -import expect from 'expect' -import todos from '../../reducers/todos' -import * as types from '../../constants/ActionTypes' +import todos from './todos' +import * as types from '../constants/ActionTypes' describe('todos reducer', () => { it('should handle initial state', () => { diff --git a/examples/todomvc/store/configureStore.js b/examples/todomvc/store/configureStore.js deleted file mode 100644 index 9070823177..0000000000 --- a/examples/todomvc/store/configureStore.js +++ /dev/null @@ -1,16 +0,0 @@ -import { createStore } from 'redux' -import rootReducer from '../reducers' - -export default function configureStore(preloadedState) { - const store = createStore(rootReducer, preloadedState) - - if (module.hot) { - // Enable Webpack hot module replacement for reducers - module.hot.accept('../reducers', () => { - const nextReducer = require('../reducers').default - store.replaceReducer(nextReducer) - }) - } - - return store -} diff --git a/examples/todomvc/test/.eslintrc b/examples/todomvc/test/.eslintrc deleted file mode 100644 index 7eeefc33b6..0000000000 --- a/examples/todomvc/test/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "mocha": true - } -} diff --git a/examples/todomvc/test/setup.js b/examples/todomvc/test/setup.js deleted file mode 100644 index c2e0f0cab2..0000000000 --- a/examples/todomvc/test/setup.js +++ /dev/null @@ -1,5 +0,0 @@ -import { jsdom } from 'jsdom' - -global.document = jsdom('') -global.window = document.defaultView -global.navigator = global.window.navigator diff --git a/examples/todomvc/webpack.config.js b/examples/todomvc/webpack.config.js deleted file mode 100644 index 992b26b40b..0000000000 --- a/examples/todomvc/webpack.config.js +++ /dev/null @@ -1,34 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - }, - { - test: /\.css?$/, - loaders: [ 'style', 'raw' ], - include: __dirname - } - ] - } -} diff --git a/examples/todos-with-undo/.babelrc b/examples/todos-with-undo/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/todos-with-undo/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/todos-with-undo/.gitignore b/examples/todos-with-undo/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/todos-with-undo/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/todos-with-undo/README.md b/examples/todos-with-undo/README.md new file mode 100644 index 0000000000..015e04b8b2 --- /dev/null +++ b/examples/todos-with-undo/README.md @@ -0,0 +1,34 @@ +# Redux Todos with Undo Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + diff --git a/examples/todos-with-undo/index.html b/examples/todos-with-undo/index.html index 9ffefbdf3a..93ec0cfad8 100644 --- a/examples/todos-with-undo/index.html +++ b/examples/todos-with-undo/index.html @@ -1,11 +1,21 @@ - - + + - Redux Todos with Undo example + + + Redux Todos with Undo Example -
-
- +
+ diff --git a/examples/todos-with-undo/package.json b/examples/todos-with-undo/package.json index fa6d02bb6f..a1ea550795 100644 --- a/examples/todos-with-undo/package.json +++ b/examples/todos-with-undo/package.json @@ -1,38 +1,23 @@ { - "name": "redux-todos-with-undo-example", - "version": "0.0.0", - "description": "Redux todos with undo example", - "scripts": { - "start": "node server.js" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "todos-with-undo", + "version": "0.0.1", + "private": true, + "devDependencies": { + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1", - "redux-undo": "^1.0.0-beta2" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2", + "redux-undo": "^1.0.0-beta9" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "expect": "^1.6.0", - "express": "^4.13.3", - "node-libs-browser": "^0.5.2", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/todos-with-undo/server.js b/examples/todos-with-undo/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/todos-with-undo/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/todos-with-undo/actions/index.js b/examples/todos-with-undo/src/actions/index.js similarity index 100% rename from examples/todos-with-undo/actions/index.js rename to examples/todos-with-undo/src/actions/index.js diff --git a/examples/todos-with-undo/components/App.js b/examples/todos-with-undo/src/components/App.js similarity index 100% rename from examples/todos-with-undo/components/App.js rename to examples/todos-with-undo/src/components/App.js diff --git a/examples/todos-with-undo/components/Footer.js b/examples/todos-with-undo/src/components/Footer.js similarity index 100% rename from examples/todos-with-undo/components/Footer.js rename to examples/todos-with-undo/src/components/Footer.js diff --git a/examples/todos-with-undo/components/Link.js b/examples/todos-with-undo/src/components/Link.js similarity index 100% rename from examples/todos-with-undo/components/Link.js rename to examples/todos-with-undo/src/components/Link.js diff --git a/examples/todos-with-undo/components/Todo.js b/examples/todos-with-undo/src/components/Todo.js similarity index 100% rename from examples/todos-with-undo/components/Todo.js rename to examples/todos-with-undo/src/components/Todo.js diff --git a/examples/todos-with-undo/components/TodoList.js b/examples/todos-with-undo/src/components/TodoList.js similarity index 100% rename from examples/todos-with-undo/components/TodoList.js rename to examples/todos-with-undo/src/components/TodoList.js diff --git a/examples/todos-with-undo/containers/AddTodo.js b/examples/todos-with-undo/src/containers/AddTodo.js similarity index 100% rename from examples/todos-with-undo/containers/AddTodo.js rename to examples/todos-with-undo/src/containers/AddTodo.js diff --git a/examples/todos-with-undo/containers/FilterLink.js b/examples/todos-with-undo/src/containers/FilterLink.js similarity index 100% rename from examples/todos-with-undo/containers/FilterLink.js rename to examples/todos-with-undo/src/containers/FilterLink.js diff --git a/examples/todos-with-undo/containers/UndoRedo.js b/examples/todos-with-undo/src/containers/UndoRedo.js similarity index 100% rename from examples/todos-with-undo/containers/UndoRedo.js rename to examples/todos-with-undo/src/containers/UndoRedo.js diff --git a/examples/todos-with-undo/containers/VisibleTodoList.js b/examples/todos-with-undo/src/containers/VisibleTodoList.js similarity index 92% rename from examples/todos-with-undo/containers/VisibleTodoList.js rename to examples/todos-with-undo/src/containers/VisibleTodoList.js index 1d3ab4ee17..345b218d3a 100644 --- a/examples/todos-with-undo/containers/VisibleTodoList.js +++ b/examples/todos-with-undo/src/containers/VisibleTodoList.js @@ -10,6 +10,8 @@ const getVisibleTodos = (todos, filter) => { return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) + default: + throw new Error('Unknown filter: ' + filter) } } diff --git a/examples/todos/index.js b/examples/todos-with-undo/src/index.js similarity index 75% rename from examples/todos/index.js rename to examples/todos-with-undo/src/index.js index 8904faa67f..5ae6bb98a1 100644 --- a/examples/todos/index.js +++ b/examples/todos-with-undo/src/index.js @@ -1,12 +1,11 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' -import { Provider } from 'react-redux' import { createStore } from 'redux' -import todoApp from './reducers' +import { Provider } from 'react-redux' import App from './components/App' +import reducer from './reducers' -let store = createStore(todoApp) +const store = createStore(reducer) render( diff --git a/examples/todos-with-undo/reducers/index.js b/examples/todos-with-undo/src/reducers/index.js similarity index 100% rename from examples/todos-with-undo/reducers/index.js rename to examples/todos-with-undo/src/reducers/index.js diff --git a/examples/todos-with-undo/reducers/todos.js b/examples/todos-with-undo/src/reducers/todos.js similarity index 94% rename from examples/todos-with-undo/reducers/todos.js rename to examples/todos-with-undo/src/reducers/todos.js index 1777081e96..e37e0ebbf7 100644 --- a/examples/todos-with-undo/reducers/todos.js +++ b/examples/todos-with-undo/src/reducers/todos.js @@ -13,9 +13,10 @@ const todo = (state, action) => { return state } - return Object.assign({}, state, { + return { + ...state, completed: !state.completed - }) + } default: return state } diff --git a/examples/todos-with-undo/reducers/visibilityFilter.js b/examples/todos-with-undo/src/reducers/visibilityFilter.js similarity index 100% rename from examples/todos-with-undo/reducers/visibilityFilter.js rename to examples/todos-with-undo/src/reducers/visibilityFilter.js diff --git a/examples/todos-with-undo/webpack.config.js b/examples/todos-with-undo/webpack.config.js deleted file mode 100644 index c0ad469127..0000000000 --- a/examples/todos-with-undo/webpack.config.js +++ /dev/null @@ -1,27 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [{ - test: /\.js$/, - loaders: ['babel'], - exclude: /node_modules/, - include: __dirname - }] - } -} diff --git a/examples/todos/.babelrc b/examples/todos/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/todos/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/todos/.gitignore b/examples/todos/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/todos/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/todos/README.md b/examples/todos/README.md new file mode 100644 index 0000000000..ddaced00d1 --- /dev/null +++ b/examples/todos/README.md @@ -0,0 +1,34 @@ +# Redux Todos Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + diff --git a/examples/todos/index.html b/examples/todos/index.html index 0ad17df3d6..2e474bce12 100644 --- a/examples/todos/index.html +++ b/examples/todos/index.html @@ -1,11 +1,21 @@ - - + + - Redux Todos example + + + Redux Todos Example -
-
- +
+ diff --git a/examples/todos/package.json b/examples/todos/package.json index 11ba840fec..9ecd5d3a02 100644 --- a/examples/todos/package.json +++ b/examples/todos/package.json @@ -1,44 +1,25 @@ { - "name": "redux-todos-example", - "version": "0.0.0", - "description": "Redux Todos example", - "scripts": { - "start": "node server.js", - "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js", - "test:watch": "npm test -- --watch" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "todos", + "version": "0.0.1", + "private": true, + "devDependencies": { + "enzyme": "^2.4.1", + "react-addons-test-utils": "^15.3.0", + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.1.2", - "redux": "^3.1.2" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "babel-register": "^6.3.13", - "cross-env": "^1.0.7", - "expect": "^1.8.0", - "express": "^4.13.3", - "jsdom": "^5.6.1", - "mocha": "^2.2.5", - "node-libs-browser": "^0.5.2", - "react-addons-test-utils": "^0.14.7", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject", + "test": "react-scripts test" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/todos/server.js b/examples/todos/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/todos/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/todos/actions/index.js b/examples/todos/src/actions/index.js similarity index 100% rename from examples/todos/actions/index.js rename to examples/todos/src/actions/index.js diff --git a/examples/todos/test/actions/todos.spec.js b/examples/todos/src/actions/index.spec.js similarity index 89% rename from examples/todos/test/actions/todos.spec.js rename to examples/todos/src/actions/index.spec.js index 0fe068c895..37596590ec 100644 --- a/examples/todos/test/actions/todos.spec.js +++ b/examples/todos/src/actions/index.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import * as actions from '../../actions' +import * as actions from './index' describe('todo actions', () => { it('addTodo should create ADD_TODO action', () => { diff --git a/examples/todos/components/App.js b/examples/todos/src/components/App.js similarity index 100% rename from examples/todos/components/App.js rename to examples/todos/src/components/App.js diff --git a/examples/todos/components/Footer.js b/examples/todos/src/components/Footer.js similarity index 100% rename from examples/todos/components/Footer.js rename to examples/todos/src/components/Footer.js diff --git a/examples/todos/components/Link.js b/examples/todos/src/components/Link.js similarity index 100% rename from examples/todos/components/Link.js rename to examples/todos/src/components/Link.js diff --git a/examples/todos/components/Todo.js b/examples/todos/src/components/Todo.js similarity index 100% rename from examples/todos/components/Todo.js rename to examples/todos/src/components/Todo.js diff --git a/examples/todos/components/TodoList.js b/examples/todos/src/components/TodoList.js similarity index 100% rename from examples/todos/components/TodoList.js rename to examples/todos/src/components/TodoList.js diff --git a/examples/todos/containers/AddTodo.js b/examples/todos/src/containers/AddTodo.js similarity index 100% rename from examples/todos/containers/AddTodo.js rename to examples/todos/src/containers/AddTodo.js diff --git a/examples/todos/containers/FilterLink.js b/examples/todos/src/containers/FilterLink.js similarity index 100% rename from examples/todos/containers/FilterLink.js rename to examples/todos/src/containers/FilterLink.js diff --git a/examples/todos/containers/VisibleTodoList.js b/examples/todos/src/containers/VisibleTodoList.js similarity index 92% rename from examples/todos/containers/VisibleTodoList.js rename to examples/todos/src/containers/VisibleTodoList.js index dc301c99eb..19c7d67721 100644 --- a/examples/todos/containers/VisibleTodoList.js +++ b/examples/todos/src/containers/VisibleTodoList.js @@ -10,6 +10,8 @@ const getVisibleTodos = (todos, filter) => { return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) + default: + throw new Error('Unknown filter: ' + filter) } } diff --git a/examples/todos-with-undo/index.js b/examples/todos/src/index.js similarity index 60% rename from examples/todos-with-undo/index.js rename to examples/todos/src/index.js index 300183e756..5ae6bb98a1 100644 --- a/examples/todos-with-undo/index.js +++ b/examples/todos/src/index.js @@ -1,17 +1,15 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import App from './components/App' -import todoApp from './reducers' +import reducer from './reducers' -const store = createStore(todoApp) +const store = createStore(reducer) -const rootElement = document.getElementById('root') render( , - rootElement + document.getElementById('root') ) diff --git a/examples/todos/reducers/index.js b/examples/todos/src/reducers/index.js similarity index 100% rename from examples/todos/reducers/index.js rename to examples/todos/src/reducers/index.js diff --git a/examples/todos/reducers/todos.js b/examples/todos/src/reducers/todos.js similarity index 92% rename from examples/todos/reducers/todos.js rename to examples/todos/src/reducers/todos.js index c019cdcd8e..ee50fea903 100644 --- a/examples/todos/reducers/todos.js +++ b/examples/todos/src/reducers/todos.js @@ -11,9 +11,10 @@ const todo = (state, action) => { return state } - return Object.assign({}, state, { + return { + ...state, completed: !state.completed - }) + } default: return state } diff --git a/examples/todos/test/reducers/todos.spec.js b/examples/todos/src/reducers/todos.spec.js similarity index 96% rename from examples/todos/test/reducers/todos.spec.js rename to examples/todos/src/reducers/todos.spec.js index 9fc41423a8..88eca35d78 100644 --- a/examples/todos/test/reducers/todos.spec.js +++ b/examples/todos/src/reducers/todos.spec.js @@ -1,5 +1,4 @@ -import expect from 'expect' -import todos from '../../reducers/todos' +import todos from './todos' describe('todos reducer', () => { it('should handle initial state', () => { diff --git a/examples/todos/reducers/visibilityFilter.js b/examples/todos/src/reducers/visibilityFilter.js similarity index 100% rename from examples/todos/reducers/visibilityFilter.js rename to examples/todos/src/reducers/visibilityFilter.js diff --git a/examples/todos/test/.eslintrc b/examples/todos/test/.eslintrc deleted file mode 100644 index 7eeefc33b6..0000000000 --- a/examples/todos/test/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "mocha": true - } -} diff --git a/examples/todos/test/setup.js b/examples/todos/test/setup.js deleted file mode 100644 index c2e0f0cab2..0000000000 --- a/examples/todos/test/setup.js +++ /dev/null @@ -1,5 +0,0 @@ -import { jsdom } from 'jsdom' - -global.document = jsdom('') -global.window = document.defaultView -global.navigator = global.window.navigator diff --git a/examples/todos/webpack.config.js b/examples/todos/webpack.config.js deleted file mode 100644 index 1c7f5f2dc1..0000000000 --- a/examples/todos/webpack.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/examples/tree-view/.babelrc b/examples/tree-view/.babelrc deleted file mode 100644 index d0962f5695..0000000000 --- a/examples/tree-view/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["es2015", "react"], - "env": { - "development": { - "presets": ["react-hmre"] - } - } -} diff --git a/examples/tree-view/.gitignore b/examples/tree-view/.gitignore new file mode 100644 index 0000000000..8e8b40aff5 --- /dev/null +++ b/examples/tree-view/.gitignore @@ -0,0 +1,11 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# production +build + +# misc +.DS_Store +npm-debug.log diff --git a/examples/tree-view/README.md b/examples/tree-view/README.md new file mode 100644 index 0000000000..ba08412164 --- /dev/null +++ b/examples/tree-view/README.md @@ -0,0 +1,33 @@ +# Redux Tree View Example + +This project template was built with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/examples/tree-view/index.html b/examples/tree-view/index.html index 43ce38e965..7154a496d6 100644 --- a/examples/tree-view/index.html +++ b/examples/tree-view/index.html @@ -1,11 +1,21 @@ - - + + - Redux tree-view example + + + Redux Tree View Example -
-
- +
+ diff --git a/examples/tree-view/package.json b/examples/tree-view/package.json index a63324bb89..67fb2eb0da 100644 --- a/examples/tree-view/package.json +++ b/examples/tree-view/package.json @@ -1,46 +1,26 @@ { - "name": "redux-tree-view-example", - "version": "0.0.0", - "description": "Redux tree-view example", - "scripts": { - "start": "node server.js", - "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register", - "test:watch": "npm test -- --watch" - }, - "repository": { - "type": "git", - "url": "https://github.com/reactjs/redux.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/reactjs/redux/issues" + "name": "tree-view", + "version": "0.0.1", + "private": true, + "devDependencies": { + "deep-freeze": "0.0.1", + "enzyme": "^2.4.1", + "react-addons-test-utils": "^15.3.0", + "react-scripts": "^0.4.0" }, - "homepage": "http://redux.js.org", "dependencies": { - "babel-polyfill": "^6.3.14", - "react": "^0.14.7", - "react-dom": "^0.14.7", - "react-redux": "^4.2.1", - "redux": "^3.2.1" + "react": "^15.3.0", + "react-dom": "^15.3.0", + "react-redux": "^4.4.5", + "redux": "^3.5.2" }, - "devDependencies": { - "babel-core": "^6.3.15", - "babel-loader": "^6.2.0", - "babel-preset-es2015": "^6.3.13", - "babel-preset-react": "^6.3.13", - "babel-preset-react-hmre": "^1.1.1", - "babel-register": "^6.4.3", - "deep-freeze": "0.0.1", - "cross-env": "^1.0.7", - "enzyme": "^2.0.0", - "expect": "^1.6.0", - "express": "^4.13.3", - "jsdom": "^5.6.1", - "mocha": "^2.2.5", - "node-libs-browser": "^0.5.2", - "react-addons-test-utils": "^0.14.7", - "webpack": "^1.9.11", - "webpack-dev-middleware": "^1.2.0", - "webpack-hot-middleware": "^2.9.1" + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject", + "test": "react-scripts test" + }, + "eslintConfig": { + "extends": "./node_modules/react-scripts/config/eslint.js" } } diff --git a/examples/tree-view/server.js b/examples/tree-view/server.js deleted file mode 100644 index d655597867..0000000000 --- a/examples/tree-view/server.js +++ /dev/null @@ -1,23 +0,0 @@ -var webpack = require('webpack') -var webpackDevMiddleware = require('webpack-dev-middleware') -var webpackHotMiddleware = require('webpack-hot-middleware') -var config = require('./webpack.config') - -var app = new (require('express'))() -var port = 3000 - -var compiler = webpack(config) -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) -app.use(webpackHotMiddleware(compiler)) - -app.get("/", function(req, res) { - res.sendFile(__dirname + '/index.html') -}) - -app.listen(port, function(error) { - if (error) { - console.error(error) - } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port) - } -}) diff --git a/examples/tree-view/actions/index.js b/examples/tree-view/src/actions/index.js similarity index 100% rename from examples/tree-view/actions/index.js rename to examples/tree-view/src/actions/index.js diff --git a/examples/tree-view/containers/Node.js b/examples/tree-view/src/containers/Node.js similarity index 100% rename from examples/tree-view/containers/Node.js rename to examples/tree-view/src/containers/Node.js diff --git a/examples/tree-view/test/node.spec.js b/examples/tree-view/src/containers/Node.spec.js similarity index 75% rename from examples/tree-view/test/node.spec.js rename to examples/tree-view/src/containers/Node.spec.js index 7f01cb5977..9b9948abbf 100644 --- a/examples/tree-view/test/node.spec.js +++ b/examples/tree-view/src/containers/Node.spec.js @@ -1,19 +1,18 @@ -import expect from 'expect' import React from 'react' import { shallow } from 'enzyme' -import ConnectedNode, { Node } from '../containers/Node' +import ConnectedNode, { Node } from './Node' function setup(id, counter, childIds, parentId) { const actions = { - increment: expect.createSpy(), - removeChild: expect.createSpy(), - deleteNode: expect.createSpy(), - createNode: expect.createSpy(), - addChild: expect.createSpy() + increment: jest.fn(), + removeChild: jest.fn(), + deleteNode: jest.fn(), + createNode: jest.fn(), + addChild: jest.fn() } const eventArgs = { - preventDefault: expect.createSpy() + preventDefault: jest.fn() } const component = shallow( @@ -41,7 +40,7 @@ describe('Node component', () => { const { button, actions } = setup(1, 23, []) button.simulate('click') - expect(actions.increment).toHaveBeenCalledWith(1) + expect(actions.increment).toBeCalledWith(1) }) it('should not render remove link', () => { @@ -51,19 +50,19 @@ describe('Node component', () => { it('should call createNode action on Add child click', () => { const { addLink, actions, eventArgs } = setup(2, 1, []) - actions.createNode.andReturn({ nodeId: 3 }) + actions.createNode.mockReturnValue({ nodeId: 3 }) addLink.simulate('click', eventArgs) - expect(actions.createNode).toHaveBeenCalled() + expect(actions.createNode).toBeCalled() }) it('should call addChild action on Add child click', () => { const { addLink, actions, eventArgs } = setup(2, 1, []) - actions.createNode.andReturn({ nodeId: 3 }) + actions.createNode.mockReturnValue({ nodeId: 3 }) addLink.simulate('click', eventArgs) - expect(actions.addChild).toHaveBeenCalledWith(2, 3) + expect(actions.addChild).toBeCalledWith(2, 3) }) describe('when given childIds', () => { @@ -78,14 +77,14 @@ describe('Node component', () => { const { removeLink, actions, eventArgs } = setup(2, 1, [], 1) removeLink.simulate('click', eventArgs) - expect(actions.removeChild).toHaveBeenCalledWith(1, 2) + expect(actions.removeChild).toBeCalledWith(1, 2) }) it('should call deleteNode action on remove link click', () => { const { removeLink, actions, eventArgs } = setup(2, 1, [], 1) removeLink.simulate('click', eventArgs) - expect(actions.deleteNode).toHaveBeenCalledWith(2) + expect(actions.deleteNode).toBeCalledWith(2) }) }) }) diff --git a/examples/tree-view/generateTree.js b/examples/tree-view/src/generateTree.js similarity index 100% rename from examples/tree-view/generateTree.js rename to examples/tree-view/src/generateTree.js diff --git a/examples/tree-view/index.js b/examples/tree-view/src/index.js similarity index 73% rename from examples/tree-view/index.js rename to examples/tree-view/src/index.js index 31458aff8b..5b3e5d2752 100644 --- a/examples/tree-view/index.js +++ b/examples/tree-view/src/index.js @@ -1,13 +1,13 @@ -import 'babel-polyfill' import React from 'react' import { render } from 'react-dom' +import { createStore } from 'redux' import { Provider } from 'react-redux' -import Node from './containers/Node' -import configureStore from './store/configureStore' +import reducer from './reducers' import generateTree from './generateTree' +import Node from './containers/Node' const tree = generateTree() -const store = configureStore(tree) +const store = createStore(reducer, tree) render( diff --git a/examples/tree-view/reducers/index.js b/examples/tree-view/src/reducers/index.js similarity index 88% rename from examples/tree-view/reducers/index.js rename to examples/tree-view/src/reducers/index.js index 7e2493c3b6..65b508c97b 100644 --- a/examples/tree-view/reducers/index.js +++ b/examples/tree-view/src/reducers/index.js @@ -20,14 +20,16 @@ function node(state, action) { childIds: [] } case INCREMENT: - return Object.assign({}, state, { + return { + ...state, counter: state.counter + 1 - }) + } case ADD_CHILD: case REMOVE_CHILD: - return Object.assign({}, state, { + return { + ...state, childIds: childIds(state.childIds, action) - }) + } default: return state } @@ -40,7 +42,7 @@ function getAllDescendantIds(state, nodeId) { } function deleteMany(state, ids) { - state = Object.assign({}, state) + state = { ...state } ids.forEach(id => delete state[id]) return state } @@ -56,7 +58,8 @@ export default function (state = {}, action) { return deleteMany(state, [ nodeId, ...descendantIds ]) } - return Object.assign({}, state, { + return { + ...state, [nodeId]: node(state[nodeId], action) - }) + } } diff --git a/examples/tree-view/test/reducer.spec.js b/examples/tree-view/src/reducers/index.spec.js similarity index 98% rename from examples/tree-view/test/reducer.spec.js rename to examples/tree-view/src/reducers/index.spec.js index 1dd222e86d..5fbd5b5d0f 100644 --- a/examples/tree-view/test/reducer.spec.js +++ b/examples/tree-view/src/reducers/index.spec.js @@ -1,6 +1,5 @@ -import expect from 'expect' import deepFreeze from 'deep-freeze' -import reducer from '../reducers' +import reducer from './index' import { increment, createNode, deleteNode, addChild, removeChild } from '../actions' describe('reducer', () => { diff --git a/examples/tree-view/store/configureStore.js b/examples/tree-view/store/configureStore.js deleted file mode 100644 index 18d40c0a9b..0000000000 --- a/examples/tree-view/store/configureStore.js +++ /dev/null @@ -1,16 +0,0 @@ -import { createStore } from 'redux' -import reducer from '../reducers' - -export default function configureStore(preloadedState) { - const store = createStore(reducer, preloadedState) - - if (module.hot) { - // Enable Webpack hot module replacement for reducers - module.hot.accept('../reducers', () => { - const nextReducer = require('../reducers').default - store.replaceReducer(nextReducer) - }) - } - - return store -} diff --git a/examples/tree-view/test/.eslintrc b/examples/tree-view/test/.eslintrc deleted file mode 100644 index 7eeefc33b6..0000000000 --- a/examples/tree-view/test/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "env": { - "mocha": true - } -} diff --git a/examples/tree-view/webpack.config.js b/examples/tree-view/webpack.config.js deleted file mode 100644 index 1c7f5f2dc1..0000000000 --- a/examples/tree-view/webpack.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path') -var webpack = require('webpack') - -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js', - publicPath: '/static/' - }, - plugins: [ - new webpack.optimize.OccurrenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin() - ], - module: { - loaders: [ - { - test: /\.js$/, - loaders: [ 'babel' ], - exclude: /node_modules/, - include: __dirname - } - ] - } -} diff --git a/package.json b/package.json index 6f11014836..447b6d03b9 100644 --- a/package.json +++ b/package.json @@ -15,13 +15,15 @@ ], "scripts": { "clean": "rimraf lib dist es coverage", - "lint": "eslint src test examples build", + "lint": "npm run lint:src && npm run lint:examples", + "lint:src": "eslint src test build", + "lint:examples": "eslint examples", "test": "cross-env BABEL_ENV=commonjs mocha --compilers js:babel-register --recursive", "test:watch": "npm test -- --watch", "test:cov": "cross-env BABEL_ENV=commonjs babel-node $(npm bin)/isparta cover $(npm bin)/_mocha -- --recursive", "test:examples": "cross-env BABEL_ENV=commonjs babel-node examples/testAll.js", - "check:src": "npm run lint && npm run test", - "check:examples": "npm run build:examples && npm run test:examples", + "check:src": "npm run lint:src && npm run test", + "check:examples": "npm run build:examples && npm run lint:examples && npm run test:examples", "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib", "build:es": "cross-env BABEL_ENV=es babel src --out-dir es", "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js dist/redux.js",