add puer client api

README.md

@@ -99,13 +99,54 @@ module.exports = {
 
 ```
 
-It is just a  config for routers, you need export an [Object] containing router config. The keys join with 【METHOD】 and 【PATH】, and the  values represent the callback。This function is based on [express](http://expressjs.com)'s router, you can check its documentation for more help。
 
 __[【check the  usage record 】](http://leeluolee.github.io/attach/2014-10/puer-step-2.gif)__
 
+It is just a  config for routers, you need export an [Object] containing router config. The keys join with 【METHOD】 and 【PATH】, and the  values represent the callback。This function is based on [express](http://expressjs.com)'s router, you can check its documentation for more help。
+
+example from above is just equal code in express like:
+
+```javascript
+app.get("/v1/posts/:id", function(req, res, next){
+  // response json format
+  res.send({
+    title: "title changed",
+    content: "tow post hahahah"
+  })
+})
+
+app.put("/v1/posts/:id", function(){})
+app.post("/v1/posts", function(){})
+app.delete("/v1/posts/:id", function(){})
+```
+
+
 Once `route.js` is changed, puer will refresh it. There is no need to restart puer.
 
 
+__the route.js style__
+
+__Function __ : just like showed before, you can use the express's Response and Request Method
+
+__String__: if the passin is a [String], puer will find the File first, if file is not exsit, will directly response with the origin [String]
+
+```javascript
+{
+  "GET /v1/posts/:id": "hello.html" 
+}
+```
+
+__Object | Array__: will respone a json format. 
+
+```javascript
+
+  {
+    "GET /v1/posts/:id": {message: "some message"}
+    "GET /v1/posts": [{message: "some message"}]
+  }
+
+```
+
 
 ###__proxy support__
 
@@ -162,5 +203,33 @@ server.listen(8001, function(){
 ```
 You must use puer middleware before route and static middleware(before any middle may return 'text/html')
 
+
+### Other
+
+<a name="client-event"></a>
+#### client event
+
+puer will inject a namespace __`puer` in global__. it is a Emitter instance. has `on`, `off` and  `emit`.
+
+you can register `update` event to control the reload logic
+
+
+```javascript
+
+puer.on("update", function(ev){
+  console.log(ev.path) // the absolute path , the file change
+  console.log(ev.css) // whether css file is change
+  if(ev.path.match(/\.js$/)){
+    ev.stop = true; // if you set ev.stop = true.  the reload will be stoped;
+  }
+
+})
+
+```
+
+Example above means that: if js file is changed,  reloading won't be actived.
+
+
+
 ###LICENSE
 MIT

package.json

@@ -2,7 +2,7 @@
   "name": "puer",
   "description": "more than a live-reload server , built for efficient frontend development",
   "author": "leeluolee",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/leeluolee/puer"

src/index.coffee

@@ -155,22 +155,26 @@ puer = module.exports = (options = {}) ->
               addon.routes = require addon.name;
 
               for own pt, callback of addon.routes
+                type = typeof callback;
                 tmp = pt.split /\s+/  
                 if tmp.length > 1
                   pt = tmp[1]
                   method = tmp[0]
                 else
                   pt = tmp[0]
                   method = 'GET'
-                if typeof callback is "string"
+                if type is "string"
                   callback = do (callback)->
                     return (req, res, next)->
                       fs.readFile path.join( path.dirname(options.addon), callback), 'utf8', (err, content)->
                         if not err 
                           res.send content
                         else
                           next()
-
+                if type is "array" or type is 'object'
+                  callback = do (callback)->
+                    return (req, res, next)->
+                      res.send(callback)
 
                 addon.router.route(method, pt, callback)
               helper.log("addon update !!!" + addon.name)

test/connect.js

@@ -19,3 +19,5 @@ app.use("/home", function(req, res, next){
 server.listen(8001, function(){
     console.log("listen on 8001 port")
 })
+
+

test/fixtures/css/style.css

@@ -12,4 +12,4 @@ body {
 }
 a {
   color: #00B7FF;
-}
+}

test/route.js

@@ -1,5 +1,7 @@
 module.exports = {
   "GET /home2/**": "fixtures/index.html",
+  "GET /testarray": [{array:1}],
+  "GET /testobject": {object:1},
   "GET /home/code/:id": function(req, res, next){
 
   },

vendor/js/reload.js

@@ -3312,39 +3312,118 @@ var io = ('undefined' === typeof module ? {} : module.exports);
   , 'undefined' != typeof io ? io : module.parent.exports
   , this
 );
+
 })();
 
-function addListener(el, type, cb) {
-    if (el.addEventListener) return el.addEventListener(type, cb, false)
-    else if (el.attachEvent) return el.attachEvent("on" + type, cb);
-}
+void function(){
+  var extend = function(o1, o2, override){
+    for(var i in o2) if(override || o1[i] === undefined){
+      o1[i] = o2[i]
+    }
+    return o1;
+  }
 
-// autoreload
-var autoreload=function(){
-      var location = window.location,
-          origin = location.protocol+"//"+location.host;
 
-      var socket = io.connect(origin); 
+  var emitable = (function(){
+    var API = {
+      once: function(event, fn){
+        var callback = function(){
+          fn.apply(this, arguments)
+          this.off(event, callback)
+        }
+        return this.on(event, callback)
+      },
+      on: function(event, fn) {
+        if(typeof event === 'object'){
+          for (var i in event) {
+            this.on(i, event[i]);
+          }
+        }else{
+          var handles = this._handles || (this._handles = {}),
+            calls = handles[event] || (handles[event] = []);
+          calls.push(fn);
+        }
+        return this;
+      },
+      off: function(event, fn) {
+        if(!event || !this._handles) this._handles = {};
+        if(!this._handles) return;
 
-      var stylesheets = document.getElementsByTagName("link");
+        var handles = this._handles , calls;
 
-      var cacheBuster = function(url){
-          var date = Math.round(+new Date/1000).toString();
-          url = url.replace(/(\\&|\\\\?)cacheBuster=\\d*/, '');
-          return url + (url.indexOf('?') >= 0 ? '&' : '?') +'cacheBuster=' + date;
-      };
-      var updateStyle = function(stylePathName){
-        for(var i = stylesheets.length;i--;){
-          var href = stylesheets[i].getAttribute("href");
-          stylesheets[i].setAttribute("href",cacheBuster(stylesheets[i].getAttribute("href")));
+        if (calls = handles[event]) {
+          if (!fn) {
+            handles[event] = [];
+            return this;
+          }
+          for (var i = 0, len = calls.length; i < len; i++) {
+            if (fn === calls[i]) {
+              calls.splice(i, 1);
+              return this;
+            }
+          }
         }
-        return true;
+        return this;
+      },
+      emit: function(event){
+        var args = [].slice.call(arguments, 1),
+          handles = this._handles, calls;
+
+        if (!handles || !(calls = handles[event])) return this;
+        for (var i = 0, len = calls.length; i < len; i++) {
+          calls[i].apply(this, args)
+        }
+        return this;
       }
-
-      socket.on('update', function(data){
-        if(data.css && updateStyle(data.css)) return true;
-        window.location.reload();     
-      })
     }
+    return function(obj){
+        obj = typeof obj == "function" ? obj.prototype : obj;
+        return extend(obj, API)
+    }
+  })();
+
+
+  function addListener(el, type, cb) {
+      if (el.addEventListener) return el.addEventListener(type, cb, false)
+      else if (el.attachEvent) return el.attachEvent("on" + type, cb);
+  }
+
+  var puer = emitable({});
+  // autoreload
+  var autoreload=function(){
+    var location = window.location,
+        origin = location.protocol+"//"+location.host;
+
+    var socket = io.connect(origin); 
+
+    var stylesheets = document.getElementsByTagName("link");
+
+    var cacheBuster = function(url){
+        var date = Math.round(+new Date/1000).toString();
+        url = url.replace(/(\\&|\\\\?)cacheBuster=\\d*/, '');
+        return url + (url.indexOf('?') >= 0 ? '&' : '?') +'cacheBuster=' + date;
+    };
+    var updateStyle = function(stylePathName){
+      for(var i = stylesheets.length;i--;){
+        var href = stylesheets[i].getAttribute("href");
+        stylesheets[i].setAttribute("href",cacheBuster(stylesheets[i].getAttribute("href")));
+      }
+      return true;
+    }
+
+    socket.on('update', function(data){
+      var evt = {path: data.path, css: !!data.css, stop: false}
+      puer.emit("update", evt);
+      if(data.css && updateStyle(data.css)) return true;
+      if(!evt.stop){
+        window.location.reload();     
+      }
+    })
+  }
+
+  addListener(window, 'load', autoreload)
+
+
+  window.puer = puer;
+}()
 
-addListener(window, 'load', autoreload)