Apply effect value from compound parts.

Author: kevinpschaaf

src/lib/annotations/annotations.html

@@ -156,7 +156,9 @@
         var annote = {
           bindings: [{
             kind: 'text',
-            parts: parts
+            name: 'textContent',
+            parts: parts,
+            isCompound: parts.length !== 1
           }]
         };
         list.push(annote);

src/lib/bind/effects.html

@@ -20,6 +20,10 @@
              !effect.parts[0].negate;
     },
 
+    _compoundInitializationEffect: function(source, value, effect) {
+      this._applyEffectValue(effect);
+    },
+
     _annotationEffect: function(source, value, effect) {
       if (source != effect.value) {
         value = this._get(effect.value);
@@ -30,7 +34,7 @@
       // are used, since the target element may not dirty check (e.g. <input>)
       if (!effect.customEvent ||
           this._nodes[effect.index][effect.name] !== calc) {
-        return this._applyEffectValue(calc, effect);
+        return this._applyEffectValue(effect, calc);
       }
     },
 
@@ -95,7 +99,7 @@
           if (effect.negate) {
             computedvalue = !computedvalue;
           }
-          this._applyEffectValue(computedvalue, effect);
+          this._applyEffectValue(effect, computedvalue);
         }
       } else {
         computedHost._warn(computedHost._logf('_annotatedComputationEffect',

src/standard/annotations.html

@@ -221,6 +221,7 @@
     // push configuration references at configure time
     _configureAnnotationReferences: function() {
       this._configureTemplateContent();
+      this._configureCompoundBindings();
     },
 
     // nested template contents have been stored prototypically to avoid
@@ -236,6 +237,26 @@
       }, this);
     },
 
+    // Compound bindings utilize private storage on the node to store
+    // the current state of each value that will be concatenated to generate
+    // the final property/attribute/text value
+    // Here we initialize the private storage array on the node with any
+    // literal parts that won't change (could get fancy and use WeakMap)
+    _configureCompoundBindings: function() {
+      this._notes.forEach(function(note, i) {
+        var node = this._nodes[i];
+        note.bindings.forEach(function(binding) {
+          if (binding.isCompound) {
+            var storage = node.__compoundStorage__ ||
+              (node.__compoundStorage__ = {});
+            storage[binding.name] = binding.parts.map(function(part) {
+              return part.literal;
+            });
+          }
+        });
+      }, this);
+    },
+
     // construct `$` map (from id annotations)
     _marshalIdNodes: function() {
       this.$ = {};

src/standard/effectBuilder.html

@@ -150,6 +150,14 @@
           });
         }
       }
+      // We need to ensure compound bindings with literals push the literals
+      // through regardless of whether annotation dependencies initialized
+      // this is done with a special compoundInitialization effect which simply
+      // kicks _applyEffectValue to push the literals through
+      if (note.isCompound) {
+        note.index = index;
+        this._addPropertyEffect('__static__', 'compoundInitialization', note);
+      }
     },
 
     _addAnnotatedComputationEffect: function(note, part, index) {
@@ -262,11 +270,14 @@
       Polymer.Bind.setupBindListeners(this);
     },
 
-    _applyEffectValue: function(value, info) {
+    _applyEffectValue: function(info, value) {
       var node = this._nodes[info.index];
-      // TODO(sorvell): ideally, the info object is normalized for easy
-      // lookup here.
-      var property = info.name || 'textContent';
+      var property = info.name;
+      if (info.isCompound) {
+        var storage = node.__compoundStorage__[property];
+        storage[info.compoundIndex] = value;
+        value = storage.join('');
+      }
       // special processing for 'class' and 'className'; 'class' handled
       // when attr is serialized.
       if (info.kind == 'attribute') {

test/unit/bind-elements.html

@@ -24,13 +24,21 @@
       computed-from-tricky-literals2='{{computeFromTrickyLiterals(3,"tricky\,'zot'" )}}'
       computed-from-no-args="{{computeFromNoArgs( )}}"
       no-computed="{{foobared(noInlineComputed)}}"
+      compound1="{{cpnd1}}{{ cpnd2 }}{{cpnd3.prop}}{{ computeCompound(cpnd4, cpnd5, 'literal')}}"
+      compound2="literal1 {{cpnd1}} literal2 {{cpnd2}}{{cpnd3.prop}} literal3 {{computeCompound(cpnd4, cpnd5, 'literal')}} literal4"
+      compoundAttr1$="{{cpnd1}}{{ cpnd2 }}{{cpnd3.prop}}{{ computeCompound(cpnd4, cpnd5, 'literal')}}"
+      compoundAttr2$="literal1 {{cpnd1}} literal2 {{cpnd2}}{{cpnd3.prop}} literal3 {{computeCompound(cpnd4, cpnd5, 'literal')}} literal4"
       >
       Test
       </div>
       <span id="boundText">{{text}}</span>
       <span idtest id="{{boundId}}"></span>
       <s id="computedContent">{{computeFromTrickyLiterals(3, 'tricky\,\'zot\'')}}</s>
       <input id="boundInput" value="{{text::input}}">
+      <div id="compound1">{{cpnd1}}{{cpnd2}}{{cpnd3.prop}}{{computeCompound(cpnd4, cpnd5, 'literal')}}</div>
+      <div id="compound2">
+        literal1 {{cpnd1}} literal2 {{cpnd2}}{{cpnd3.prop}} literal3 {{computeCompound(cpnd4, cpnd5, 'literal')}} literal4
+      </div>
   </template>
   <script>
     Polymer({
@@ -237,6 +245,9 @@
       },
       computeNegativeNumber: function (num) {
         return num;
+      },
+      computeCompound: function(a, b, c) {
+        return '' + c + b + a;
       }
     });
   </script>

test/unit/bind.html

@@ -688,22 +688,115 @@
 
 });
 
-</script>
+suite('binding corner cases', function() {
 
-<script>
-  suite('binding corner cases', function() {
+  // IE can create adjacent text nodes that split bindings; this test
+  // ensures the code that addresses this is functional
+  test('text binding after entity', function() {
+    var el = document.createElement('x-entity-and-binding');
+    assert.equal(el.$.binding.textContent, 'binding');
+  });
 
-    // IE can create adjacent text nodes that split bindings; this test
-    // ensures the code that addresses this is functional
-    test('text binding after entity', function() {
-      var el = document.createElement('x-entity-and-binding');
-      assert.equal(el.$.binding.textContent, 'binding');
-    });
+});
 
+suite('compound binding / string interpolation', function() {
+
+  test('compound adjacent property bindings', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.boundChild.compound1, '');
+    el.cpnd2 = 'cpnd2';
+    assert.equal(el.$.boundChild.compound1, 'cpnd2');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd3 = {prop: 'cpnd3'};
+    assert.equal(el.$.boundChild.compound1, 'cpnd1cpnd2cpnd3');
+    el.cpnd4 = 'cpnd4';
+    assert.equal(el.$.boundChild.compound1, 'cpnd1cpnd2cpnd3');
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.boundChild.compound1, 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
+  });
+
+  test('compound property bindings with literals', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.boundChild.compound2, 'literal1  literal2  literal3  literal4');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd2 = 'cpnd2';
+    el.cpnd3 = {prop: 'cpnd3'};
+    el.cpnd4 = 'cpnd4';
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.boundChild.compound2, 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
+    el.cpnd1 = null;
+    el.cpnd2 = undefined;
+    el.cpnd3 = {};
+    el.cpnd4 = '';
+    el.cpnd5 = '';
+    assert.equal(el.$.boundChild.compound2, 'literal1  literal2  literal3 literal literal4');
+  });
+
+  test('compound adjacent property bindings', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), '');
+    el.cpnd2 = 'cpnd2';
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd2');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd3 = {prop: 'cpnd3'};
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3');
+    el.cpnd4 = 'cpnd4';
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3');
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr1'), 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
+  });
+
+  test('compound property bindings with literals', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1  literal2  literal3  literal4');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd2 = 'cpnd2';
+    el.cpnd3 = {prop: 'cpnd3'};
+    el.cpnd4 = 'cpnd4';
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
+    el.cpnd1 = null;
+    el.cpnd2 = undefined;
+    el.cpnd3 = {};
+    el.cpnd4 = '';
+    el.cpnd5 = '';
+    assert.equal(el.$.boundChild.getAttribute('compoundAttr2'), 'literal1  literal2  literal3 literal literal4');
+  });
+
+  test('compound adjacent textNode bindings', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.compound1.textContent, '');
+    el.cpnd2 = 'cpnd2';
+    assert.equal(el.$.compound1.textContent, 'cpnd2');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd3 = {prop: 'cpnd3'};
+    assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3');
+    el.cpnd4 = 'cpnd4';
+    assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3');
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.compound1.textContent, 'cpnd1cpnd2cpnd3literalcpnd5cpnd4');
+  });
+
+  test('compound textNode bindings with literals', function() {
+    var el = document.createElement('x-basic');
+    assert.equal(el.$.compound2.textContent.trim(), 'literal1  literal2  literal3  literal4');
+    el.cpnd1 = 'cpnd1';
+    el.cpnd2 = 'cpnd2';
+    el.cpnd3 = {prop: 'cpnd3'};
+    el.cpnd4 = 'cpnd4';
+    el.cpnd5 = 'cpnd5';
+    assert.equal(el.$.compound2.textContent.trim(), 'literal1 cpnd1 literal2 cpnd2cpnd3 literal3 literalcpnd5cpnd4 literal4');
+    el.cpnd1 = null;
+    el.cpnd2 = undefined;
+    el.cpnd3 = {};
+    el.cpnd4 = '';
+    el.cpnd5 = '';
+    assert.equal(el.$.compound2.textContent.trim(), 'literal1  literal2  literal3 literal literal4');
   });
-</script>
 
+});
 
+</script>
 
 </body>
 </html>