Add hot reloading example

optimizely · Dec 23, 2015 · 04f676b · 04f676b
1 parent d6200bd
commit 04f676b
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 0 deletions.
diff --git a/examples/hot-reloading/.babelrc 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
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/examples/hot-reloading/index.html b/examples/hot-reloading/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <title>NuclearJS Hot Reloading</title>
+  </head>
+
+  <body style="padding: 30px;">
+    <div id="root"></div>
+    <script src="http://localhost:3000/dist/app.js"></script>
+  </body>
+</html>
+
diff --git a/examples/hot-reloading/npm-debug.log 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 [email protected]
+3 info using [email protected]
+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.<anonymous> (/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     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]
diff --git a/examples/hot-reloading/package.json 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
@@ -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
@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react'
+
+class Counter extends Component {
+  render() {
+    const { increment, decrement, counter } = this.props
+    return (
+      <p>
+        Clicked: {counter} times
+        {' '}
+        <button onClick={increment}>+</button>
+        {' '}
+        <button onClick={decrement}>-</button>
+      </p>
+    )
+  }
+}
+
+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
@@ -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 <Counter
+      counter={counter}
+      increment={increment.bind(null, reactor)}
+      decrement={decrement.bind(null, reactor)}
+    />
+  }
+}
diff --git a/examples/hot-reloading/src/main.js 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(
+  <Provider reactor={reactor}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
diff --git a/examples/hot-reloading/src/reactor.js 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
@@ -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
@@ -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
@@ -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
@@ -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',
+}