From 04f676b9856a140695e8d86ab39a5e11f4fedccb Mon Sep 17 00:00:00 2001 From: jordangarcia Date: Wed, 23 Dec 2015 17:09:49 -0500 Subject: [PATCH] Add hot reloading example --- examples/hot-reloading/.babelrc | 7 +++++ examples/hot-reloading/.gitignore | 2 ++ examples/hot-reloading/index.html | 12 ++++++++ examples/hot-reloading/npm-debug.log | 25 ++++++++++++++++ examples/hot-reloading/package.json | 30 +++++++++++++++++++ examples/hot-reloading/src/actions/counter.js | 7 +++++ .../hot-reloading/src/components/counter.js | 24 +++++++++++++++ examples/hot-reloading/src/containers/app.js | 18 +++++++++++ examples/hot-reloading/src/main.js | 13 ++++++++ examples/hot-reloading/src/reactor.js | 16 ++++++++++ examples/hot-reloading/src/stores/counter.js | 11 +++++++ examples/hot-reloading/src/stores/index.js | 5 ++++ examples/hot-reloading/webpack-server.js | 15 ++++++++++ examples/hot-reloading/webpack.config.js | 28 +++++++++++++++++ 14 files changed, 213 insertions(+) create mode 100644 examples/hot-reloading/.babelrc create mode 100644 examples/hot-reloading/.gitignore create mode 100644 examples/hot-reloading/index.html create mode 100644 examples/hot-reloading/npm-debug.log create mode 100644 examples/hot-reloading/package.json create mode 100644 examples/hot-reloading/src/actions/counter.js create mode 100644 examples/hot-reloading/src/components/counter.js create mode 100644 examples/hot-reloading/src/containers/app.js create mode 100644 examples/hot-reloading/src/main.js create mode 100644 examples/hot-reloading/src/reactor.js create mode 100644 examples/hot-reloading/src/stores/counter.js create mode 100644 examples/hot-reloading/src/stores/index.js create mode 100644 examples/hot-reloading/webpack-server.js create mode 100644 examples/hot-reloading/webpack.config.js diff --git a/examples/hot-reloading/.babelrc b/examples/hot-reloading/.babelrc new file mode 100644 index 0000000..d5ee687 --- /dev/null +++ b/examples/hot-reloading/.babelrc @@ -0,0 +1,7 @@ +{ + presets: ['es2015', 'react'], + plugins: ['transform-decorators-legacy', 'syntax-decorators'], + ignore: [ + '**/nuclear-js-react-addons/**', + ] +} diff --git a/examples/hot-reloading/.gitignore b/examples/hot-reloading/.gitignore new file mode 100644 index 0000000..de4d1f0 --- /dev/null +++ b/examples/hot-reloading/.gitignore @@ -0,0 +1,2 @@ +dist +node_modules diff --git a/examples/hot-reloading/index.html b/examples/hot-reloading/index.html new file mode 100644 index 0000000..0c9b694 --- /dev/null +++ b/examples/hot-reloading/index.html @@ -0,0 +1,12 @@ + + + + NuclearJS Hot Reloading + + + +
+ + + + diff --git a/examples/hot-reloading/npm-debug.log b/examples/hot-reloading/npm-debug.log new file mode 100644 index 0000000..20288c0 --- /dev/null +++ b/examples/hot-reloading/npm-debug.log @@ -0,0 +1,25 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/Users/jordan/.nvm/versions/node/v5.0.0/bin/node', +1 verbose cli '/Users/jordan/.nvm/versions/node/v5.0.0/bin/npm', +1 verbose cli 'start' ] +2 info using npm@3.3.6 +3 info using node@v5.0.0 +4 verbose stack Error: missing script: start +4 verbose stack at run (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/lib/run-script.js:148:19) +4 verbose stack at /Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/lib/run-script.js:58:5 +4 verbose stack at /Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/read-package-json/read-json.js:345:5 +4 verbose stack at checkBinReferences_ (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/read-package-json/read-json.js:309:45) +4 verbose stack at final (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/read-package-json/read-json.js:343:3) +4 verbose stack at then (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/read-package-json/read-json.js:113:5) +4 verbose stack at ReadFileContext. (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/read-package-json/read-json.js:284:20) +4 verbose stack at ReadFileContext.callback (/Users/jordan/.nvm/versions/node/v5.0.0/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:76:16) +4 verbose stack at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:324:13) +5 verbose cwd /Users/jordan/code/nuclear/examples/hot-reloading +6 error Darwin 14.4.0 +7 error argv "/Users/jordan/.nvm/versions/node/v5.0.0/bin/node" "/Users/jordan/.nvm/versions/node/v5.0.0/bin/npm" "start" +8 error node v5.0.0 +9 error npm v3.3.6 +10 error missing script: start +11 error If you need help, you may report this error at: +11 error +12 verbose exit [ 1, true ] diff --git a/examples/hot-reloading/package.json b/examples/hot-reloading/package.json new file mode 100644 index 0000000..46fee4f --- /dev/null +++ b/examples/hot-reloading/package.json @@ -0,0 +1,30 @@ +{ + "name": "nuclear-js-hot-reloading-example", + "version": "1.0.0", + "description": "Hot Reloading with NuclearJS", + "main": "index.js", + "scripts": { + "start": "node webpack-server.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Jordan Garcia", + "license": "MIT", + "dependencies": { + "react": "^0.14.3", + "react-dom": "^0.14.3" + }, + "devDependencies": { + "babel-cli": "^6.3.17", + "babel-core": "^6.3.21", + "babel-loader": "^6.2.0", + "babel-plugin-syntax-decorators": "^6.3.13", + "babel-plugin-transform-decorators": "^6.3.13", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babel-preset-stage-0": "^6.3.13", + "react-hot-loader": "^1.3.0", + "webpack": "^1.12.9", + "webpack-dev-server": "^1.12.1" + } +} diff --git a/examples/hot-reloading/src/actions/counter.js b/examples/hot-reloading/src/actions/counter.js new file mode 100644 index 0000000..8b08153 --- /dev/null +++ b/examples/hot-reloading/src/actions/counter.js @@ -0,0 +1,7 @@ +export function increment(reactor) { + reactor.dispatch('increment') +} + +export function decrement(reactor) { + reactor.dispatch('decrement') +} diff --git a/examples/hot-reloading/src/components/counter.js b/examples/hot-reloading/src/components/counter.js new file mode 100644 index 0000000..faf0a5f --- /dev/null +++ b/examples/hot-reloading/src/components/counter.js @@ -0,0 +1,24 @@ +import React, { Component, PropTypes } from 'react' + +class Counter extends Component { + render() { + const { increment, decrement, counter } = this.props + return ( +

+ Clicked: {counter} times + {' '} + + {' '} + +

+ ) + } +} + +Counter.propTypes = { + increment: PropTypes.func.isRequired, + decrement: PropTypes.func.isRequired, + counter: PropTypes.number.isRequired +} + +export default Counter diff --git a/examples/hot-reloading/src/containers/app.js b/examples/hot-reloading/src/containers/app.js new file mode 100644 index 0000000..3797aac --- /dev/null +++ b/examples/hot-reloading/src/containers/app.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import { connect } from 'nuclear-js-react-addons' +import Counter from '../components/Counter' +import { increment, decrement } from '../actions/counter' + +@connect(props => ({ + counter: ['counter'] +})) +export default class AppContainer extends Component { + render() { + let { reactor, counter } = this.props + return + } +} diff --git a/examples/hot-reloading/src/main.js b/examples/hot-reloading/src/main.js new file mode 100644 index 0000000..2b4add9 --- /dev/null +++ b/examples/hot-reloading/src/main.js @@ -0,0 +1,13 @@ +import React from 'react' +import { render } from 'react-dom' +import { Provider } from 'nuclear-js-react-addons' +import App from './containers/App' +import reactor from './reactor' +debugger + +render( + + + , + document.getElementById('root') +) diff --git a/examples/hot-reloading/src/reactor.js b/examples/hot-reloading/src/reactor.js new file mode 100644 index 0000000..6a855c3 --- /dev/null +++ b/examples/hot-reloading/src/reactor.js @@ -0,0 +1,16 @@ +import { Reactor } from 'nuclear-js' +import * as stores from './stores' + +const reactor = new Reactor({ + debug: true, +}) +reactor.registerStores(stores) + +if (module.hot) { + // Enable Webpack hot module replacement for reducers + module.hot.accept('./stores', () => { + reactor.replaceStores(require('./stores')) + }) +} + +export default reactor diff --git a/examples/hot-reloading/src/stores/counter.js b/examples/hot-reloading/src/stores/counter.js new file mode 100644 index 0000000..10e9bc3 --- /dev/null +++ b/examples/hot-reloading/src/stores/counter.js @@ -0,0 +1,11 @@ +import { Store } from 'nuclear-js' + +export default new Store({ + getInitialState() { + return 0 + }, + initialize() { + this.on('increment', (state) => state + 1) + this.on('decrement', (state) => state - 1) + } +}) diff --git a/examples/hot-reloading/src/stores/index.js b/examples/hot-reloading/src/stores/index.js new file mode 100644 index 0000000..7509de6 --- /dev/null +++ b/examples/hot-reloading/src/stores/index.js @@ -0,0 +1,5 @@ +import counter from './counter' + +export { + counter +} diff --git a/examples/hot-reloading/webpack-server.js b/examples/hot-reloading/webpack-server.js new file mode 100644 index 0000000..5ac2b33 --- /dev/null +++ b/examples/hot-reloading/webpack-server.js @@ -0,0 +1,15 @@ +var webpack = require('webpack'); +var WebpackDevServer = require('webpack-dev-server'); +var config = require('./webpack.config'); + +new WebpackDevServer(webpack(config), { + publicPath: config.output.publicPath, + hot: true, + historyApiFallback: true +}).listen(3000, 'localhost', function (err, result) { + if (err) { + console.log(err); + } + + console.log('Listening at localhost:3000'); +}); diff --git a/examples/hot-reloading/webpack.config.js b/examples/hot-reloading/webpack.config.js new file mode 100644 index 0000000..4202924 --- /dev/null +++ b/examples/hot-reloading/webpack.config.js @@ -0,0 +1,28 @@ +var path = require('path'); +var webpack = require('webpack'); + +module.exports = { + entry: [ + 'webpack-dev-server/client?http://localhost:3000', + 'webpack/hot/only-dev-server', + './src/main' + ], + output: { + path: path.join(__dirname, 'public', 'dist'), + filename: 'app.js', + publicPath: 'http://localhost:3000/dist/' + }, + plugins: [ + new webpack.HotModuleReplacementPlugin() + ], + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loaders: ['react-hot', 'babel-loader'], + } + ] + }, + devtool: 'eval', +}