Merge pull request #196 from sladiri/master

Add amok example (node module, npm scripts, code in browser.js).

Author: Raynos

examples/hot-reload/README.md

@@ -1,4 +1,4 @@
-# Hot module replacement with browserify/watchify or webpack
+# Hot module replacement with browserify/watchify, webpack or amok
 
 Using hot reloading while developing can improve your workflow.
 No more clicking through your application to a particular state each time you change the rendering code!
@@ -16,13 +16,22 @@ To install and run:
     // for webpack
     npm run hot-webpack
 
+    // for amok
+    npm run hot-amok
+
+### browserify and webpack
 Edit [package.json][] if you want to run on a different port.
 If you're running inside a container or VM, add `--host 0.0.0.0` (webpack) so you can access the dev server from your host machine.
 
 Try clicking to increment the counter, then edit [render.js][]!
 Your changes should instantly appear on the page without refreshing or upsetting the counter's value.
 Note that if you edit [browser.js][], your page will refresh and your state will be reset (only using webpack).
 
+### amok
+Amok starts its own web server to provide hot reloading and also starts the browser. Live editing is not limited to the render function. It uses a V8 feature instead of eval and is limited to Chrome or Chromium browsers. Change the counter increment in `browser.js` for example.
+
+Edit [package.json][] to switch the web browser to use (Chrome or Chromium).
+
 [package.json]: ./package.json
 [render.js]: ./render.js
 [browser.js]: ./browser.js
@@ -38,6 +47,11 @@ We have to be careful to not reseat any references - so we pass a function that
 ### browserify/watchify
 The main difference to webpack is that browserify does not come with a dev-server which is why we use [http-server][] to host our example. Other than that it works quite similar. Under the hood [browserify-hmr][] imitates webpack's hot module replacement.
 
+### amok
+[Amok][] uses watchify to fire a `patch` event on the window object when a file is changed. Similarly to the webpack/browserify, we must change the state so Mercury re-renders automatically. Without this action, the changes in the code would only be seen after we clicked the button in the example. (The button click would change the state and trigger a re-render as well.)
+
 [hot module replacement]: https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
 [http-server]: https://github.com/indexzero/http-server
 [browserify-hmr]: https://github.com/AgentME/browserify-hmr
+[Amok]: https://github.com/caspervonb/amok
+

examples/hot-reload/browser.js

@@ -2,6 +2,7 @@
 
 var hg = require('../../index.js');
 var document = require('global/document');
+var window = require('global/window');
 
 // Copied from examples/count.js
 function App() {
@@ -18,23 +19,34 @@ function incrementCount(state) {
     state.count.set(state.count() + 1);
 }
 
-// This render function may be replaced!
+// This render function may be replaced by webpack and browserify!
 var render = require('./render.js');
 App.render = function renderApp(state) {
     return render(state);
 };
 
 // Need a reference to this below.
 var appState = App();
+
 hg.app(document.body, appState, App.render);
 
-// Special sauce: detect changes to the rendering code and swap the rendering
+// Special sauce for webpack and browserify:
+// Detect changes to the rendering code and swap the rendering
 // function out without reloading the page.
 if (module.hot) {
     module.hot.accept('./render.js', function swapModule() {
         render = require('./render.js');
-        // Force a re-render by changing the application state.
-        appState._hotVersion.set(appState._hotVersion() + 1);
+        forceRerender(appState);
         return true;
     });
 }
+
+// Otherwise, if using amok, an event is fired when a file changes.
+window.addEventListener('patch', function() {
+    forceRerender(appState);
+});
+
+// Force a re-render by changing the application state.
+function forceRerender(appState) {
+    appState._hotVersion.set(appState._hotVersion() + 1);
+}

examples/hot-reload/package.json

@@ -1,11 +1,15 @@
 {
   "scripts": {
-    "hot-browserify": "npm run http-server && npm run watchify",
+    "hot-browserify": "npm run http-server && npm run watchify-hmr",
     "hot-webpack": "webpack-dev-server --port 8080 --hot --progress --colors --inline ./browser.js",
     "http-server": "http-server -c 1 -a localhost &",
-    "watchify": "watchify -p browserify-hmr browser.js -o bundle.js"
+    "watchify-hmr": "watchify -p browserify-hmr browser.js -o bundle.js",
+    "hot-amok": "npm run watchify & npm run amok-html",
+    "watchify": "watchify browser.js -o bundle.js",
+    "amok-html": "amok file://$PWD/index.html --browser chrome --hot"
   },
   "devDependencies": {
+    "amok": "^1.1.3",
     "browserify-hmr": "^0.2.2",
     "http-server": "^0.8.0",
     "watchify": "^3.4.0",