Use the debounce component

tidies up the messy logic arround waiting for the user to stop typing.

Author: Forbes Lindesay

build/build.css

@@ -0,0 +1 @@
+

build/build.js

@@ -24,7 +24,7 @@ function require(p, parent, orig){
   if (!mod.exports) {
     mod.exports = {};
     mod.client = mod.component = true;
-    mod.call(mod.exports, mod, mod.exports, require.relative(path));
+    mod.call(this, mod, mod.exports, require.relative(path));
   }
 
   return mod.exports;
@@ -68,7 +68,7 @@ require.resolve = function(path){
     || require.modules[index] && index
     || require.modules[indexJSON] && indexJSON
     || require.modules[orig] && orig
-    || null;
+    || require.aliases[index];
 };
 
 /**
@@ -83,8 +83,7 @@ require.resolve = function(path){
 require.normalize = function(curr, path) {
   var segs = [];
 
-  // foo
-  if ('.' != path[0]) return path;
+  if ('.' != path.charAt(0)) return path;
 
   curr = curr.split('/');
   path = path.split('/');
@@ -137,15 +136,25 @@ require.alias = function(from, to){
 require.relative = function(parent) {
   var p = require.normalize(parent, '..');
 
+  /**
+   * lastIndexOf helper.
+   */
+
+  function lastIndexOf(arr, obj){
+    var i = arr.length;
+    while (i--) {
+      if (arr[i] === obj) return i;
+    }
+    return -1;
+  }
+
   /**
    * The relative require() itself.
    */
 
   function fn(path){
     var orig = path;
     path = fn.resolve(path);
-    var alias = require.aliases[path + '/index.js'];
-    if (alias) path = alias;
     return require(path, parent, orig);
   }
 
@@ -157,9 +166,9 @@ require.relative = function(parent) {
     // resolve deps by returning
     // the dep in the nearest "deps"
     // directory
-    if ('.' != path[0]) {
+    if ('.' != path.charAt(0)) {
       var segs = parent.split('/');
-      var i = segs.lastIndexOf('deps') + 1;
+      var i = lastIndexOf(segs, 'deps') + 1;
       if (!i) i = 0;
       path = segs.slice(0, i + 1).join('/') + '/deps/' + path;
       return path;
@@ -229,15 +238,44 @@ function pathtoRegexp(path, keys, options) {
 
   return new RegExp('^' + path + '$', sensitive ? '' : 'i');
 };
+});
+require.register("MatthewMueller-debounce/index.js", function(module, exports, require){
+/**
+ * Debounce
+ *
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ *
+ * @param {Function} func
+ * @param {Number} wait
+ * @param {Boolean} immediate
+ * @return {Function}
+ */
+
+module.exports = function(func, wait, immediate) {
+  var timeout, result;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) result = func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) result = func.apply(context, args);
+    return result;
+  };
+};
+
 });
 require.register("ert/index.js", function(module, exports, require){
 $(function () {
     var pathRegexp = require('path-to-regexp');
-    var t;
-    $('#inputRoute, #inputPath').keyup(function () {
-        clearTimeout(t);
-        t = setTimeout(update, 200);
-    });
+    var debounce = require('debounce');
+    $('#inputRoute, #inputPath').keyup(debounce(update, 200));
     function update() {
         var keys = [];
         var regexp = pathRegexp($('#inputRoute').val(), keys);
@@ -269,5 +307,7 @@ $(function () {
 });
 });
 require.alias("component-path-to-regexp/index.js", "ert/deps/path-to-regexp/index.js");
-window.ert = require("ert");
+
+require.alias("MatthewMueller-debounce/index.js", "ert/deps/debounce/index.js");
+window.a = require("ert");
 })();

component.json

@@ -1,7 +1,8 @@
 {
     "name": "ert",
     "dependencies": {
-        "component/path-to-regexp": "*"
+        "component/path-to-regexp": "*",
+        "MatthewMueller/debounce": "*"
     },
     "scripts": ["index.js"]
 }

components/MatthewMueller-debounce/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "debounce",
+  "repo": "matthewmueller/debounce",
+  "description": "Creates and returns a new debounced version of the passed function that will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked",
+  "version": "0.0.1",
+  "keywords": [],
+  "dependencies": {},
+  "development": {},
+  "license": "MIT",
+  "scripts": [
+    "index.js"
+  ]
+}

components/MatthewMueller-debounce/index.js

@@ -0,0 +1,29 @@
+/**
+ * Debounce
+ *
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing.
+ *
+ * @param {Function} func
+ * @param {Number} wait
+ * @param {Boolean} immediate
+ * @return {Function}
+ */
+
+module.exports = function(func, wait, immediate) {
+  var timeout, result;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) result = func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) result = func.apply(context, args);
+    return result;
+  };
+};

index.html

@@ -57,6 +57,9 @@ <h2>Results</h2>
           <div class="alert alert-success is-match">
             The path matches the route
           </div>
+          <p class="is-match">
+            And the keys have the following values:
+          </p>
           <div id="keys-results-display" class="is-match">
           </div>
         </div><!--/span-->

index.js

@@ -1,10 +1,7 @@
 $(function () {
     var pathRegexp = require('path-to-regexp');
-    var t;
-    $('#inputRoute, #inputPath').keyup(function () {
-        clearTimeout(t);
-        t = setTimeout(update, 200);
-    });
+    var debounce = require('debounce');
+    $('#inputRoute, #inputPath').keyup(debounce(update, 200));
     function update() {
         var keys = [];
         var regexp = pathRegexp($('#inputRoute').val(), keys);
@@ -18,8 +15,7 @@ $(function () {
         }
 
         var path = $('#inputPath').val();
-        var isMatch = regexp.test(path);
-        if (isMatch) {
+        if (regexp.test(path)) {
             $('.is-not-match').hide();
             $('.is-match').show();
             var result = regexp.exec(path);