add example

Macil · Aug 17, 2015 · 5be92dd · 5be92dd
1 parent 7043400
commit 5be92dd
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 35 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 *~
 .DS_Store
-/node_modules
+node_modules
 npm-debug.log
+/example/bundle.js
diff --git a/.npmignore b/.npmignore
@@ -3,3 +3,4 @@
 /node_modules
 npm-debug.log
 /test
+/example
diff --git a/README.md b/README.md
@@ -1,15 +1,27 @@
-# browserify-hmr
+# Browserify-HMR
 
 This an implementation of Webpack's [Hot Module Replacement
 API](http://webpack.github.io/docs/hot-module-replacement.html) as a plugin for
 Browserify. This project seems to work, but it is still in development and
 is likely under-documented and under-tested!
 
-Build your project like this, passing the u/url parameter to tell the script
-what URL it should try to reload itself from:
+## Quick Example
+
+```bash
+git clone https://github.com/AgentME/browserify-hmr.git
+cd browserify-hmr/example
+npm i && npm start
+```
+
+Open http://localhost:8080/ and try updating `label.js`.
+
+## Usage
+
+Build your project like this, passing the u/url option to tell the script what
+URL it should try to reload itself from:
 
     npm i browserify-hmr
-    browserify -p [ browserify-hmr -u /bundle.js ] index.js -o bundle.js
+    watchify -p [ browserify-hmr -u /bundle.js ] index.js -o bundle.js
 
 Then use code like the following somewhere in your project to poll for changes:
 
@@ -34,6 +46,19 @@ if (module.hot) {
 }
 ```
 
+Browserify-HMR works with Node too! Use the m/mode option to tell it to use the
+"fs" method to update itself:
+
+    watchify --node -p [ browserify-hmr -m fs ] index.js -o bundle.js
+
+Watchify is not required. Browserify can be run multiple times manually instead
+if more control over the timing of the reloads is desired.
+
+    browserify -p [ browserify-hmr -u /bundle.js ] index.js -o bundle.js
+    nano foo.js # make some edits
+    nano bar.js # edit some more files
+    browserify -p [ browserify-hmr -u /bundle.js ] index.js -o bundle.js
+
 ## TODO and gotchas
 
 * sourcemaps support

diff --git a/example/a.js b/example/a.js
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Browserify-HMR</title>
+  <script src="/bundle.js"></script>
+</head>
+<body>
+  <div id="main"></div>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -1,25 +1,20 @@
-global.runCount = (global.runCount||0) + 1;
-
-console.log('index start');
-require('./a');
-console.log('index end');
+require('./label');
 
 if (module.hot) {
-  module.hot.accept('./a', function() {
-    console.log('index accepted new a');
-    console.log('exports of a', require('./a'));
-  });
-
-  if (global.runCount === 1) {
-    setInterval(function() {
-      module.hot.check(function(err, outdatedModules) {
-        console.log('check callback', err, outdatedModules);
-        if (outdatedModules) {
-          module.hot.apply(function(err, outdatedModules) {
-            console.log('apply callback', err, outdatedModules);
-          });
-        }
-      });
-    }, 1000);
-  }
+  var doCheck = function() {
+    module.hot.check(function(err, outdated) {
+      if (err) {
+        console.error('Check error', err);
+      }
+      if (outdated) {
+        module.hot.apply(function(err, updated) {
+          console.log('Replaced modules', updated);
+          setTimeout(doCheck, 2000);
+        });
+      } else {
+        setTimeout(doCheck, 2000);
+      }
+    });
+  };
+  doCheck();
 }
diff --git a/example/label.js b/example/label.js
@@ -0,0 +1,12 @@
+var $ = require('jquery');
+
+$(window).ready(function() {
+  $("#main").text('this text can update');
+});
+
+if (module.hot) {
+  module.hot.accept();
+  module.hot.dispose(function() {
+    // cleanup code here
+  });
+}
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "example",
+  "private": true,
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "./scripts/run",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "browserify": "^11.0.1",
+    "browserify-hmr": "^0.1.0",
+    "http-server": "^0.8.0",
+    "watchify": "^3.3.1"
+  },
+  "dependencies": {
+    "jquery": "^2.1.4"
+  }
+}
diff --git a/example/scripts/run b/example/scripts/run
@@ -0,0 +1,4 @@
+#!/bin/bash
+./node_modules/.bin/watchify -vp [ browserify-hmr -u /bundle.js ] index.js -o bundle.js  &
+./node_modules/.bin/http-server &
+wait