From a500c118e735769607a2d50e00fa8d9dd31b1f9d Mon Sep 17 00:00:00 2001
From: Rafael Weinstein <rafaelw@chromium.org>
Date: Fri, 9 Aug 2013 17:11:47 -0700
Subject: [PATCH] factored out Node-bind and PolymerExpressions, part 2

---
 benchmark/index.html                        |  14 +-
 examples/how_to/array_reduction.html        |   4 +-
 examples/how_to/bind_to_attributes.html     |   2 +-
 examples/how_to/bind_to_input_elements.html |   2 +-
 examples/how_to/bind_to_text.html           |   2 +-
 examples/how_to/conditional_attributes.html |   2 +-
 examples/how_to/conditional_template.html   |   2 +-
 examples/how_to/custom_syntax.html          |   6 +-
 examples/how_to/nested_templates.html       |   2 +-
 examples/how_to/recursive_templates.html    |   2 +-
 examples/how_to/template_ref.html           |   2 +-
 examples/tic-tac-toe.html                   |   2 +-
 examples/util/view_controller_test.html     |   2 +-
 load.js                                     |   9 +-
 sample.html                                 |   2 +-
 src/template-instantiation.js               | 305 +-------------------
 tests/index.html                            |  20 +-
 tests/template-instantiation-tests.js       |  10 +-
 18 files changed, 47 insertions(+), 343 deletions(-)
diff --git a/benchmark/index.html b/benchmark/index.html
index 258a868..737c71d 100644
--- a/benchmark/index.html
+++ b/benchmark/index.html
@@ -15,13 +15,13 @@
 limitations under the License.
 -->
 <head>
-  <title>MDV Benchmarks</title>
+  <title>Template instantiation benchmarks</title>
   <meta charset="utf-8">
-  <script src="../mdv.js"></script>
+  <script src="../load.js"></script>
   <script src="../node_modules/handlebars/dist/handlebars.js"></script>
-  <script src="../third_party/ObserveJS/benchmark/chartjs/Chart.js"></script>
-  <script src="../third_party/ObserveJS/benchmark/benchmark.js"></script>
-  <script src="mdv_benchmark.js"></script>
+  <script src="../../ObserveJS/benchmark/chartjs/Chart.js"></script>
+  <script src="../../ObserveJS/benchmark/benchmark.js"></script>
+  <script src="benchmark.js"></script>
   <style>
     * {
       font-family: arial, helvetica, sans-serif;
@@ -35,7 +35,7 @@
   </style>
 </head>
 <body>
-<h1>MDV Benchmarks</h1>
+<h1>Template instantiation benchmarks</h1>
 
 Width: <select id="widthSelect">
   <option selected>2
@@ -154,7 +154,7 @@ <h3 style="margin-left: 440px">Binding Density</h3>
   });
 
   function benchmarkComplete(results) {
-    if (Observer._allObserversCount > 2)
+    if (Observer._allObserversCount > 4)
       alert('Error. All Observer Count: ' + Observer._allObserversCount);
 
     datasets = [];
diff --git a/examples/how_to/array_reduction.html b/examples/how_to/array_reduction.html
index 44eb7e7..a9f0a3e 100644
--- a/examples/how_to/array_reduction.html
+++ b/examples/how_to/array_reduction.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
-    <script src="../../third_party/ObserveJS/util/array_reduction.js"></script>
+    <script src="../../load.js"></script>
+    <script src="../../../ObserveJS/util/array_reduction.js"></script>
   </head>
   <body>
     <h1>Reduction</h1>
diff --git a/examples/how_to/bind_to_attributes.html b/examples/how_to/bind_to_attributes.html
index 33d8b39..5f45768 100644
--- a/examples/how_to/bind_to_attributes.html
+++ b/examples/how_to/bind_to_attributes.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Bind To Attributes</h1>
diff --git a/examples/how_to/bind_to_input_elements.html b/examples/how_to/bind_to_input_elements.html
index bd10f14..a2e6bc8 100644
--- a/examples/how_to/bind_to_input_elements.html
+++ b/examples/how_to/bind_to_input_elements.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Bind to Input Elements</h1>
diff --git a/examples/how_to/bind_to_text.html b/examples/how_to/bind_to_text.html
index 9f338e9..536863f 100644
--- a/examples/how_to/bind_to_text.html
+++ b/examples/how_to/bind_to_text.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Bind To Text</h1>
diff --git a/examples/how_to/conditional_attributes.html b/examples/how_to/conditional_attributes.html
index 965e913..f7cc753 100644
--- a/examples/how_to/conditional_attributes.html
+++ b/examples/how_to/conditional_attributes.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Conditional Attributes</h1>
diff --git a/examples/how_to/conditional_template.html b/examples/how_to/conditional_template.html
index 3047c32..fb8acc0 100644
--- a/examples/how_to/conditional_template.html
+++ b/examples/how_to/conditional_template.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Conditional Template</h1>
diff --git a/examples/how_to/custom_syntax.html b/examples/how_to/custom_syntax.html
index 9c283d5..4a409e8 100644
--- a/examples/how_to/custom_syntax.html
+++ b/examples/how_to/custom_syntax.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
-    <h1>Custom Syntax</h1>
+    <h1>Binding Delegate API</h1>
 
     <ul>
-    <template id="example" bind syntax="MyCustom">
+    <template id="example" bind>
       <span>Amount: <input value="{{ value }}">, Twice Amount: {{ 2x: value }}</span>
     </template>
     </ul>
diff --git a/examples/how_to/nested_templates.html b/examples/how_to/nested_templates.html
index a4adc31..9de32ff 100644
--- a/examples/how_to/nested_templates.html
+++ b/examples/how_to/nested_templates.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Nested Template</h1>
diff --git a/examples/how_to/recursive_templates.html b/examples/how_to/recursive_templates.html
index 6761cc3..35d2039 100644
--- a/examples/how_to/recursive_templates.html
+++ b/examples/how_to/recursive_templates.html
@@ -1,4 +1,4 @@
-<script src="../../mdv.js"></script>
+<script src="../../load.js"></script>
 
 <h1>Recursive Template</h1>
 <ul>
diff --git a/examples/how_to/template_ref.html b/examples/how_to/template_ref.html
index 1fb3e56..1fdfa92 100644
--- a/examples/how_to/template_ref.html
+++ b/examples/how_to/template_ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../mdv.js"></script>
+    <script src="../../load.js"></script>
   </head>
   <body>
     <h1>Re-using templates</h1>
diff --git a/examples/tic-tac-toe.html b/examples/tic-tac-toe.html
index 483332a..4a14d7f 100644
--- a/examples/tic-tac-toe.html
+++ b/examples/tic-tac-toe.html
@@ -17,7 +17,7 @@
 -->
 <head>
 <title>Tic Tac Toe Sample</title>
-<script src="../mdv.js"></script>
+<script src="../load.js"></script>
 <script src="util/view_controller.js"></script>
 <style>
 
diff --git a/examples/util/view_controller_test.html b/examples/util/view_controller_test.html
index a44a068..1a3ac96 100644
--- a/examples/util/view_controller_test.html
+++ b/examples/util/view_controller_test.html
@@ -26,7 +26,7 @@
 var forceCollectObservers = true;
 
 </script>
-<script src="../../mdv.js"></script>
+<script src="../../load.js"></script>
 <script src="view_controller.js"></script>
 </head>
 <body>
diff --git a/load.js b/load.js
index 96b83e4..62729bc 100644
--- a/load.js
+++ b/load.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 (function() {
-  var thisFile = 'mdv.js';
+  var thisFile = 'load.js';
   var libLocation = '';
 
   function write(inSrc) {
@@ -28,9 +28,8 @@
       libLocation + 'src/template_element.css">');
 
   [
-    'third_party/ObserveJS/src/observe.js',
-    'src/template_element.js',
-    'third_party/esprima/esprima.js',
-    'util/expression_syntax.js'
+    '../ObserveJS/src/observe.js',
+    '../Node-bind/src/node-bind.js',
+    'src/template-instantiation.js'
   ].forEach(write);
 })();
diff --git a/sample.html b/sample.html
index c87c94f..d34ad0e 100644
--- a/sample.html
+++ b/sample.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="mdv.js"></script>
+    <script src="load.js"></script>
   </head>
   <body>
     <h1>Model-driven Views</h1>
diff --git a/src/template-instantiation.js b/src/template-instantiation.js
index bbed4d0..e2a982f 100644
--- a/src/template-instantiation.js
+++ b/src/template-instantiation.js
@@ -22,8 +22,6 @@
 
   var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
 
-  var filter = Array.prototype.filter.call.bind(Array.prototype.filter);
-
   function getTreeScope(node) {
     while (node.parentNode) {
       node = node.parentNode;
@@ -126,303 +124,6 @@
       };
   }();
 
-  function isNodeInDocument(node) {
-    return node.ownerDocument.contains(node);
-  }
-
-  Node.prototype.bind = function(name, model, path) {
-    console.error('Unhandled binding to Node: ', this, name, model, path);
-  };
-
-  Node.prototype.unbind = function(name) {
-    this.bindings = this.bindings || {};
-    var binding = this.bindings[name];
-    if (binding && typeof binding.close === 'function')
-      binding.close();
-    delete this.bindings[name];
-  };
-
-  Node.prototype.unbindAll = function() {
-    if (!this.bindings)
-      return;
-    var names = Object.keys(this.bindings);
-    for (var i = 0; i < names.length; i++) {
-      var binding = this.bindings[names[i]];
-      if (binding)
-        binding.close();
-    }
-
-    this.bindings = {};
-  };
-
-  function NodeBinding(node, property, model, path) {
-    this.closed = false;
-    this.node = node;
-    this.property = property;
-    this.model = model;
-    this.path = path || '';
-    this.observer = new PathObserver(this.model, this.path,
-                                     this.boundValueChanged,
-                                     this);
-    this.boundValueChanged(this.value);
-  }
-
-  NodeBinding.prototype = {
-    boundValueChanged: function(value) {
-      this.node[this.property] = this.sanitizeBoundValue(value);
-    },
-
-    sanitizeBoundValue: function(value) {
-      return value == undefined ? '' : String(value);
-    },
-
-    close: function() {
-      if (this.closed)
-        return;
-      this.observer.close();
-      this.observer = undefined;
-      this.node = undefined;
-      this.model = undefined;
-      this.closed = true;
-    },
-
-    get value() {
-      return this.observer.value;
-    },
-
-    set value(value) {
-      PathObserver.setValueAtPath(this.model, this.path, value);
-    },
-
-    reset: function() {
-      this.observer.reset();
-    }
-  };
-
-  Text.prototype.bind = function(name, model, path) {
-    if (name !== 'textContent')
-      return Node.prototype.bind.call(this, name, model, path);
-
-    this.unbind(name);
-    return this.bindings[name] = new NodeBinding(this, 'data', model, path);
-  }
-
-  function AttributeBinding(element, attributeName, model, path) {
-    this.conditional = attributeName[attributeName.length - 1] == '?';
-    if (this.conditional) {
-      element.removeAttribute(attributeName);
-      attributeName = attributeName.slice(0, -1);
-    }
-
-    NodeBinding.call(this, element, attributeName, model, path);
-  }
-
-  AttributeBinding.prototype = createObject({
-    __proto__: NodeBinding.prototype,
-
-    boundValueChanged: function(value) {
-      if (this.conditional) {
-        if (value)
-          this.node.setAttribute(this.property, '');
-        else
-          this.node.removeAttribute(this.property);
-        return;
-      }
-
-      this.node.setAttribute(this.property, this.sanitizeBoundValue(value));
-    }
-  });
-
-  Element.prototype.bind = function(name, model, path) {
-    this.unbind(name);
-    return this.bindings[name] = new AttributeBinding(this, name, model, path);
-  };
-
-  var checkboxEventType;
-  (function() {
-    // Attempt to feature-detect which event (change or click) is fired first
-    // for checkboxes.
-    var div = document.createElement('div');
-    var checkbox = div.appendChild(document.createElement('input'));
-    checkbox.setAttribute('type', 'checkbox');
-    var first;
-    var count = 0;
-    checkbox.addEventListener('click', function(e) {
-      count++;
-      first = first || 'click';
-    });
-    checkbox.addEventListener('change', function() {
-      count++;
-      first = first || 'change';
-    });
-
-    var event = document.createEvent('MouseEvent');
-    event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,
-        false, false, false, 0, null);
-    checkbox.dispatchEvent(event);
-    // WebKit/Blink don't fire the change event if the element is outside the
-    // document, so assume 'change' for that case.
-    checkboxEventType = count == 1 ? 'change' : first;
-  })();
-
-  function getEventForInputType(element) {
-    switch (element.type) {
-      case 'checkbox':
-        return checkboxEventType;
-      case 'radio':
-      case 'select-multiple':
-      case 'select-one':
-        return 'change';
-      default:
-        return 'input';
-    }
-  }
-
-  function InputBinding(node, property, model, path) {
-    NodeBinding.call(this, node, property, model, path);
-    this.eventType = getEventForInputType(this.node);
-    this.boundNodeValueToModel = this.nodeValueChanged.bind(this);
-    this.node.addEventListener(this.eventType, this.boundNodeValueToModel,
-                               true);
-  }
-
-  InputBinding.prototype = createObject({
-    __proto__: NodeBinding.prototype,
-
-    nodeValueChanged: function() {
-      this.value = this.node[this.property];
-      this.reset();
-      this.postUpdateBinding();
-      Platform.performMicrotaskCheckpoint();
-    },
-
-    postUpdateBinding: function() {},
-
-    close: function() {
-      if (this.closed)
-        return;
-
-      this.node.removeEventListener(this.eventType,
-                                    this.boundNodeValueToModel,
-                                    true);
-      NodeBinding.prototype.close.call(this);
-    }
-  });
-
-  // |element| is assumed to be an HTMLInputElement with |type| == 'radio'.
-  // Returns an array containing all radio buttons other than |element| that
-  // have the same |name|, either in the form that |element| belongs to or,
-  // if no form, in the document tree to which |element| belongs.
-  //
-  // This implementation is based upon the HTML spec definition of a
-  // "radio button group":
-  //   http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#radio-button-group
-  //
-  function getAssociatedRadioButtons(element) {
-    if (!isNodeInDocument(element))
-      return [];
-    if (element.form) {
-      return filter(element.form.elements, function(el) {
-        return el != element &&
-            el.tagName == 'INPUT' &&
-            el.type == 'radio' &&
-            el.name == element.name;
-      });
-    } else {
-      var radios = element.ownerDocument.querySelectorAll(
-          'input[type="radio"][name="' + element.name + '"]');
-      return filter(radios, function(el) {
-        return el != element && !el.form;
-      });
-    }
-  }
-
-  function CheckedBinding(element, model, path) {
-    InputBinding.call(this, element, 'checked', model, path);
-  }
-
-  CheckedBinding.prototype = createObject({
-    __proto__: InputBinding.prototype,
-
-    sanitizeBoundValue: function(value) {
-      return Boolean(value);
-    },
-
-    postUpdateBinding: function() {
-      // Only the radio button that is getting checked gets an event. We
-      // therefore find all the associated radio buttons and update their
-      // CheckedBinding manually.
-      if (this.node.tagName === 'INPUT' &&
-          this.node.type === 'radio') {
-        getAssociatedRadioButtons(this.node).forEach(function(radio) {
-          var checkedBinding = radio.bindings.checked;
-          if (checkedBinding) {
-            // Set the value directly to avoid an infinite call stack.
-            checkedBinding.value = false;
-          }
-        });
-      }
-    }
-  });
-
-  HTMLInputElement.prototype.bind = function(name, model, path) {
-    if (name !== 'value' && name !== 'checked')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
-
-    this.unbind(name);
-    this.removeAttribute(name);
-    return this.bindings[name] = name === 'value' ?
-        new InputBinding(this, 'value', model, path) :
-        new CheckedBinding(this, model, path);
-  }
-
-  HTMLTextAreaElement.prototype.bind = function(name, model, path) {
-    if (name !== 'value')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
-
-    this.unbind(name);
-    this.removeAttribute(name);
-    return this.bindings[name] = new InputBinding(this, name, model, path);
-  }
-
-  function SelectedIndexBinding(element, model, path) {
-    InputBinding.call(this, element, 'selectedIndex', model, path);
-  }
-
-  SelectedIndexBinding.prototype = createObject({
-    __proto__: InputBinding.prototype,
-
-    boundValueChanged: function(value) {
-      var newValue = Number(value);
-      if (newValue <= this.node.length) {
-        this.node[this.property] = newValue;
-        return;
-      }
-
-      // The binding may wish to bind to an <option> which has not yet been
-      // produced by a child <template>. Delay a maximum of two times: once for
-      // each of <optgroup> and <option>
-      var maxRetries = 2;
-      var self = this;
-      function delaySetSelectedIndex() {
-        if (newValue > self.node.length && maxRetries--)
-          ensureScheduled(delaySetSelectedIndex);
-        else
-          self.node[self.property] = newValue;
-      }
-      ensureScheduled(delaySetSelectedIndex);
-    }
-  });
-
-  HTMLSelectElement.prototype.bind = function(name, model, path) {
-    if (name.toLowerCase() !== 'selectedindex')
-      return HTMLElement.prototype.bind.call(this, name, model, path);
-
-    this.unbind(name);
-    this.removeAttribute(name);
-    return this.bindings[name] = new SelectedIndexBinding(this, model, path);
-  }
-
   var BIND = 'bind';
   var REPEAT = 'repeat';
   var IF = 'if';
@@ -768,15 +469,12 @@
     this.node = node;
     this.property = property;
     this.model = model;
-    this.path = path || ''
+    this.path = path || '';
     this.iterator = iterator;
     this.iterator.inputs.bind(this.property, this.model, this.path);
   }
 
   TemplateBinding.prototype = createObject({
-    __proto__: NodeBinding.prototype,
-    get value() {},
-    boundValueChanged: function() {},
     close: function() {
       if (this.closed)
         return;
@@ -793,7 +491,6 @@
       if (name !== BIND && name !== REPEAT && name !== IF)
         return HTMLElement.prototype.bind.call(this, name, model, path);
 
-
       var iterator = TemplateIterator.getOrCreate(this);
       this.unbind(name);
 
diff --git a/tests/index.html b/tests/index.html
index 77d6efe..2834806 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -16,14 +16,24 @@
 -->
 <html>
 <head>
-<title>MDV Tests</title>
+<title>Template-instantiation tests</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="../node_modules/mocha/mocha.css">
 <script src="../node_modules/chai/chai.js"></script>
 <script src="../node_modules/mocha/mocha.js"></script>
-<script src="setup.js"></script>
+<script>
+var parserHasNativeTemplate = function() {
+  var div = document.createElement('div');
+  div.innerHTML = '<table><template>';
+  return div.firstChild.firstChild &&
+         div.firstChild.firstChild.tagName == 'TEMPLATE';
+}();
 
-<script src="../mdv.js"></script>
+var forceCollectObservers = true;
+</script>
+<script src="../../ObserveJS/src/observe.js"></script>
+<script src="../../Node-bind/src/node-bind.js"></script>
+<script src="../src/template-instantiation.js"></script>
 </head>
 <body>
 <script>
@@ -36,9 +46,7 @@
 var assert = chai.assert;
 
 </script>
-<script src="node_bindings.js"></script>
-<script src="template_element.js"></script>
-<script src="expression_syntax.js"></script>
+<script src="template-instantiation-tests.js"></script>
 <div id="mocha"></div>
 <script>
 mocha.run();
diff --git a/tests/template-instantiation-tests.js b/tests/template-instantiation-tests.js
index ede99d2..0603fda 100644
--- a/tests/template-instantiation-tests.js
+++ b/tests/template-instantiation-tests.js
@@ -30,7 +30,7 @@ function doTeardown() {
   document.body.removeChild(testDiv);
   unbindAll(testDiv);
   Platform.performMicrotaskCheckpoint();
-  assert.strictEqual(2, Observer._allObserversCount);
+  assert.strictEqual(4, Observer._allObserversCount);
 }
 
 function createTestHtml(s) {
@@ -52,7 +52,7 @@ function recursivelySetTemplateModel(node, model, delegate) {
   });
 }
 
-suite('Template Element', function() {
+suite('Template Instantiation', function() {
 
   setup(doSetup)
 
@@ -1782,7 +1782,7 @@ suite('Template Element', function() {
 });
 
 
-suite('Template Syntax', function() {
+suite('Binding Delegate API', function() {
 
   setup(doSetup)
 
@@ -1850,7 +1850,7 @@ suite('Template Syntax', function() {
     var model = [{ foo: 1 }, { foo: 2 }, { foo: 3 }];
 
     var div = createTestHtml(
-        '<template repeat syntax="Test">' +
+        '<template repeat>' +
         '{{ foo }}</template>');
     var template = div.firstChild;
 
@@ -1897,7 +1897,7 @@ suite('Template Syntax', function() {
     var model = [0, 1, 2];
 
     var div = createTestHtml(
-        '<template repeat syntax="Test">' +
+        '<template repeat>' +
         '{{}}</template>');
     var template = div.firstChild;
     var count = 0;
