added array & obj support to attrs.js

Polymer · May 22, 2013 · 8bdeba4 · 8bdeba4
1 parent cf10031
commit 8bdeba4
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 45 deletions.
diff --git a/polymer.min.js b/polymer.min.js
diff --git a/polymer.min.js.map b/polymer.min.js.map
diff --git a/polymer.native.min.js b/polymer.native.min.js
diff --git a/polymer.native.min.js.map b/polymer.native.min.js.map
diff --git a/src/attrs.js b/src/attrs.js
@@ -5,16 +5,16 @@
  */
 
 (function() {
-  
+
   // imports
-  
+
   var bindPattern = Polymer.bindPattern;
-  
+
   // constants
-  
+
   var published$ = '__published';
   var attributes$ = 'attributes';
-  var attrProps$ = 'publish'; 
+  var attrProps$ = 'publish';
   //var attrProps$ = 'attributeDefaults';
 
   var publishAttributes = function(inElement, inPrototype) {
@@ -83,53 +83,69 @@
         }
       }
     }, this);
-  };
+  }
 
   // return the published property matching name, or undefined
   function propertyForAttribute(name) {
     // matchable properties must be published
     var properties = Object.keys(this[published$]);
     // search for a matchable property
     return properties[properties.map(lowerCase).indexOf(name.toLowerCase())];
-  };
+  }
 
   var lowerCase = String.prototype.toLowerCase.call.bind(
     String.prototype.toLowerCase);
-
+
+  var typeHandlers = {
+    'string': function(value) {
+      return value;
+    },
+    'date': function(value) {
+      return new Date(Date.parse(value) || Date.now());
+    },
+    'boolean': function(value) {
+      if (value === '') {
+        return true;
+      }
+
+      return value === 'false' ? false : !!value;
+    },
+    'number': function(value) {
+      var floatVal = parseFloat(value);
+
+      return (String(floatVal) === value) ? floatVal : value;
+    },
+    'object': function(value, defaultValue) {
+      if (!defaultValue) {
+        return value;
+      }
+
+      try {
+        // If the string is an object, we can parse is with the JSON library.
+        // include convenience replace for single-quotes. If the author omits
+        // quotes altogether, parse will fail.
+        return JSON.parse(value.replace(/'/g, '"'));
+      } catch(e) {
+        // The object isn't valid JSON, return the raw value
+        return value;
+      }
+    }
+  };
 
   function deserializeValue(value, defaultValue) {
     // attempt to infer type from default value
     var inferredType = typeof defaultValue;
     if (defaultValue instanceof Date) {
       inferredType = 'date';
     }
-    // special handling for inferredTypes
-    switch (inferredType) {
-      case 'string':
-        return value;
-      case 'date':
-        return new Date(Date.parse(value) || Date.now());
-      case 'boolean':
-        if (value == '') {
-          return true;
-        }
-    }
-    // unless otherwise typed, convert 'true|false' to boolean values
-    switch (value) {
-      case 'true':
-        return true;
-      case 'false':
-        return false;
-    }
-    // unless otherwise typed, convert eponymous floats to float values
-    var float = parseFloat(value);
-    return (String(float) === value) ? float : value;
+
+    return typeHandlers[inferredType](value, defaultValue);
   }
 
   // exports
-  
+
   Polymer.takeAttributes = takeAttributes;
   Polymer.publishAttributes = publishAttributes;
   Polymer.propertyForAttribute = propertyForAttribute;
-  
+
 })();
diff --git a/test/html/take-attributes.html b/test/html/take-attributes.html
@@ -58,6 +58,7 @@
     <x-zot id="zot3"></x-zot>
     <x-zot id="zot4" bool="squid"></x-zot>
     <x-zot id="zot5" bool="0"></x-zot>
+    <x-zot id="zot6" num="185"></x-zot>    
 
     <element name="x-date" attributes="value">
       <script>
@@ -72,7 +73,31 @@
     <x-date id="date3" value="2014/12/25 11:45"></x-date>
     <x-date id="date4" value="2014/12/25 11:45:30"></x-date>
     <x-date id="date5" value="2014/12/25 11:45:30:33"></x-date>
+    <x-date id="dated" value="2014/12/25T11:45:30:33"></x-date>
 
+    <element name="x-array" attributes="values">
+      <script>
+        Polymer.register(this, {
+          values: []
+        });
+      </script>
+    </element>
+
+    <x-array id="arr1" values="[0, 1, 2]"></x-array>
+    <x-array id="arr2" values="[33]"></x-array>
+
+    <element name="x-obj" attributes="values">
+      <script>
+        Polymer.register(this, {
+          values: {}
+        });
+      </script>
+    </element>
+
+    <x-obj id="obj1" values='{ "name": "Brandon", "nums": [1, 22, 33] }'></x-obj>
+    <x-obj id="obj2" values='{ "color": "Red" }'></x-obj>
+    <x-obj id="obj3" values="{ 'movie': 'Buckaroo Banzai', 'DOB': '07/31/1978' }"></x-obj>
+
   <script>
       var assert = chai.assert;
       document.addEventListener('WebComponentsReady', function() {
@@ -83,7 +108,7 @@
         // this one is only 'truthy'
         assert.ok(document.querySelector("#foo4").bool);
         // this one is also 'truthy', but should it be?
-        assert.ok(document.querySelector("#foo4").bool);
+        assert.ok(document.querySelector("#foo5").bool);
         //
         assert.equal(document.querySelector("#foo0").num, 42);
         assert.equal(document.querySelector("#foo0").str, "don't panic");
@@ -95,7 +120,7 @@
         // this one is only 'truthy'
         assert.ok(document.querySelector("#bar4").bool);
         // this one is also 'truthy', but should it be?
-        assert.ok(document.querySelector("#bar4").bool);
+        assert.ok(document.querySelector("#bar5").bool);
         //
         assert.equal(document.querySelector("#bar0").num, 42);
         assert.equal(document.querySelector("#bar0").str, "don't panic");
@@ -107,20 +132,31 @@
         // this one is only 'truthy'
         assert.ok(document.querySelector("#zot4").bool);
         // this one is also 'truthy', but should it be?
-        assert.ok(document.querySelector("#zot4").bool);
+        assert.ok(document.querySelector("#zot5").bool);
         //
         assert.equal(document.querySelector("#zot0").num, 84);
+        assert.equal(document.querySelector("#zot6").num, 185);
         assert.equal(document.querySelector("#zot0").str, "don't panic");
         // 
         // Date deserialization tests
         assert.equal(String(document.querySelector("#date1").value), String(new Date(2014, 11, 25)));
         assert.equal(String(document.querySelector("#date2").value), String(new Date(2014, 11, 25)));
         assert.equal(String(document.querySelector("#date3").value), String(new Date(2014, 11, 25, 11, 45)));
         assert.equal(String(document.querySelector("#date4").value), String(new Date(2014, 11, 25, 11, 45, 30)));
+        // Failures on Firefox. Need to fix this with custom parsing
+        //assert.equal(String(document.querySelector("#date5").value), String(new Date(2014, 11, 25, 11, 45, 30)));
         //
         // milliseconds in the Date string not supported on Firefox
         //assert.equal(document.querySelector("#date5").value.getMilliseconds(), new Date(2014, 11, 25, 11, 45, 30, 33).getMilliseconds());
         //
+        // Array deserialization tests
+        assert.deepEqual(document.querySelector("#arr1").values, [0, 1, 2]);
+        assert.deepEqual(document.querySelector("#arr2").values, [33]);
+        // Object deserialization tests
+        assert.deepEqual(document.querySelector("#obj1").values, { name: 'Brandon', nums: [1, 22, 33] });
+        assert.deepEqual(document.querySelector("#obj2").values, { "color": "Red" });
+        assert.deepEqual(document.querySelector("#obj3").values, { movie: 'Buckaroo Banzai', DOB: '07/31/1978' });
+        //
         done();
       });
     </script>