Merge pull request #1300 from Polymer/0.8-attributes-lib

Separate attributes function from annotations

src/features/micro/attributes.html

@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../../lib/annotations/annotations.html">
+<link rel="import" href="../../lib/case-map.html"> 
 
 <script>
 
@@ -80,7 +80,7 @@
 
     _takeAttributesToModel: function(model) {
       for (var propName in this.properties) {
-        var attrName = Polymer.Annotations.camelToDashCase(propName);
+        var attrName = Polymer.CaseMap.camelToDashCase(propName);
         if (this.hasAttribute(attrName)) {
           var val = this.getAttribute(attrName);
           var type = this.getPropertyType(propName);
@@ -92,7 +92,7 @@
     setAttributeToProperty: function(model, attrName) {
       // Don't deserialize back to property if currently reflecting
       if (!this._serializing) {
-        var propName = Polymer.Annotations.dashToCamelCase(attrName);
+        var propName = Polymer.CaseMap.dashToCamelCase(attrName);
         if (propName in this.properties) {
           var type = this.getPropertyType(propName);
           var val = this.getAttribute(attrName);
@@ -112,7 +112,7 @@
       var str = this.serialize(value);
       (node || this)
         [str === undefined ? 'removeAttribute' : 'setAttribute']
-          (Polymer.Annotations.camelToDashCase(attribute), str);
+          (Polymer.CaseMap.camelToDashCase(attribute), str);
     },
 
     deserialize: function(value, type) {

src/features/standard/notify-path.html

@@ -7,6 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+<link rel="import" href="../../lib/case-map.html"> 
 <script>
 
   /**
@@ -247,7 +248,7 @@
 
     _notifyPath: function(path, value) {
       var rootName = this._modelForPath(path);
-      var dashCaseName = Polymer.Annotations.camelToDashCase(rootName); 
+      var dashCaseName = Polymer.CaseMap.camelToDashCase(rootName); 
       var eventName = dashCaseName + this._EVENT_CHANGED;
       this.fire(eventName, { 
         path: path, 

src/lib/annotations/annotations.html

@@ -8,6 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../module.html">
+<link rel="import" href="../case-map.html"> 
 
 <script>
 /**
@@ -219,7 +220,7 @@
         // camel-case: `foo-bar` becomes `fooBar`.
         // Attribute bindings are excepted.
         if (kind === 'property') {
-          name = Polymer.Annotations.dashToCamelCase(name);
+          name = Polymer.CaseMap.dashToCamelCase(name);
         }
         return {
           kind: kind,
@@ -231,26 +232,6 @@
       }
     },
 
-    dashToCamelCase: function(dash) {
-      // TODO(sjmiles): is rejection test actually helping perf?
-      if (dash.indexOf('-') < 0) {
-        return dash;
-      }
-      return dash.replace(/-([a-z])/g, 
-        function(m) {
-          return m[1].toUpperCase(); 
-        }
-      );
-    },
-
-    camelToDashCase: function(camel) {
-      return camel.replace(/([a-z][A-Z])/g, 
-        function (g) { 
-          return g[0] + '-' + g[1].toLowerCase() 
-        }
-      );
-    },
-
     // instance-time
 
     _localSubTree: function(node, host) {

src/lib/bind/bind-effects.html

@@ -7,6 +7,7 @@
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+<link rel="import" href="../case-map.html"> 
 <script>
 
   Polymer.Bind.addComputedPropertyEffect = function(model, name, expression) {
@@ -29,23 +30,6 @@
     }
   };
 
-  // TODO(sjmiles): case shenanigans
-  // TODO(sjmiles): ad hoc?
-  // TODO(sjmiles): other places where Annotations.camelToDashCase(name)
-  // is being employed should be using this method instead
-  Polymer.Bind.mapCase = function(name) {
-    var mapped = Polymer.Bind._caseMap[name];
-    if (mapped) {
-      return mapped;
-    }
-    return Polymer.Bind._caseMap[name] = 
-      Polymer.Annotations.camelToDashCase(name);
-  };
-
-  // case mapping memoizations
-  Polymer.Bind._caseMap = {
-  };
-
   // TODO(sjmiles): the effect system could be data-driven, but it evolved
   // as code-generation because (1) we emulated hand-written application
   // sources and (2) performance.
@@ -61,8 +45,7 @@
   // the border between code-generation and machine techniques.   
 
   Polymer.Bind._notifyChange = function(property) {
-    // TODO(sjmiles): case shenanigans
-    var eventName = Polymer.Bind.mapCase(property) + '-changed';
+    var eventName = Polymer.CaseMap.camelToDashCase(property) + '-changed';
     this.fire(eventName, {
       value: this[property]
     }, null, false);
@@ -126,8 +109,7 @@
     annotation: function(model, hostProperty, info) {
       var property = info.name;
       if (Polymer.Bind._shouldAddListener(info)) {
-        // TODO(sjmiles): case shenanigans
-        var dashCaseProperty = Polymer.Bind.mapCase(property);
+        var dashCaseProperty = Polymer.CaseMap.camelToDashCase(property);
         // <node>.on.<dash-case-property>-changed: <path> = e.detail.value
         Polymer.Bind._addAnnotatedListener(model, info.index, 
           dashCaseProperty, info.value);

src/lib/case-map.html

@@ -0,0 +1,46 @@
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script>
+
+  Polymer.CaseMap = {
+
+    _caseMap: {},
+
+    dashToCamelCase: function(dash) {
+      var mapped = Polymer.CaseMap._caseMap[dash];
+      if (mapped) {
+        return mapped;
+      }
+      // TODO(sjmiles): is rejection test actually helping perf?
+      if (dash.indexOf('-') < 0) {
+        return Polymer.CaseMap._caseMap[dash] = dash;
+      }
+      return Polymer.CaseMap._caseMap[dash] = dash.replace(/-([a-z])/g, 
+        function(m) {
+          return m[1].toUpperCase(); 
+        }
+      );
+    },
+
+    camelToDashCase: function(camel) {
+      var mapped = Polymer.CaseMap._caseMap[camel];
+      if (mapped) {
+        return mapped;
+      }
+      return Polymer.CaseMap._caseMap[camel] = camel.replace(/([a-z][A-Z])/g, 
+        function (g) { 
+          return g[0] + '-' + g[1].toLowerCase() 
+        }
+      );
+    }
+
+  };
+
+</script>

test/unit/attributes.html

@@ -32,7 +32,7 @@
   >
 </x-basic>
 
-<x-reflect id="reflectDefault"></x-basic>
+<x-reflect id="reflectDefault"></x-reflect>
 
 <x-reflect id="reflectConfigured"
   object='{"foo": "bar", "nested": {"meaning": 42}, "arr": [0, "foo", true]}'
@@ -44,7 +44,7 @@
   dash-case="The quick brown fox"
   no-type="Should be String"
   >
-</x-basic>
+</x-reflect>
 
 <script>
 
@@ -157,6 +157,11 @@
     assert.strictEqual(el.bool, false);
   });
 
+  test('basic change dashCase attribute', function() {
+    el.setAttribute('dash-case', 'Changed');
+    assert.strictEqual(el.dashCase, 'Changed');
+  });
+
 });
 
 suite('imperative attribute change (reflect)', function() {
@@ -203,10 +208,17 @@
   });
 
   test('basic change boolean attribute false', function() {
+    el.setAttribute('bool', '');
+    assert.strictEqual(el.bool, true);
     el.removeAttribute('bool');
     assert.strictEqual(el.bool, false);
   });
 
+  test('basic change dashCase attribute', function() {
+    el.setAttribute('dash-case', 'Changed');
+    assert.strictEqual(el.dashCase, 'Changed');
+  });
+
   test('change non-`properties` property that natively reflects', function() {
     el.hidden = true;
     assert.strictEqual(el.hidden, true);