Merge pull request #1 from matthewp/complex

Implements CustomAttributeRegistry::get
matthewp · Sep 10, 2016 · 8d72a67 · 8d72a67
2 parents a8022c0 + 52b133d
commit 8d72a67
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 7 deletions.
diff --git a/attr.js b/attr.js
@@ -7,18 +7,24 @@ class CustomAttributeRegistry {
     }
 
     this.ownerDocument = ownerDocument;
-    this._attrs = {};
+    this._attrMap = new Map();
     this._elementMap = new WeakMap();
     this._observe();
   }
 
   define(attrName, Constructor) {
-    this._attrs[attrName] = Constructor;
+    this._attrMap.set(attrName, Constructor);
     this._upgradeAttr(attrName);
   }
 
-  get(attrName){
-    return this._attrs[attrName];
+  get(element, attrName) {
+    var map = this._elementMap.get(element);
+    if(!map) return;
+    return map.get(attrName);
+  }
+
+  _getConstructor(attrName){
+    return this._attrMap.get(attrName);
   }
 
   _observe(){
@@ -28,7 +34,7 @@ class CustomAttributeRegistry {
 
     this.attrMO = new MutationObserver(function(mutations){
       forEach.call(mutations, function(m){
-        var attr = customAttributes.get(m.attributeName);
+        var attr = customAttributes._getConstructor(m.attributeName);
         if(attr) {
           customAttributes._found(m.attributeName, m.target, m.oldValue);
         }
@@ -68,7 +74,7 @@ class CustomAttributeRegistry {
     if(element.nodeType !== 1) return;
 
     for(var attr of element.attributes) {
-      if(this.get(attr.name)) {
+      if(this._getConstructor(attr.name)) {
         this._found(attr.name, element);
       }
     }
@@ -97,7 +103,7 @@ class CustomAttributeRegistry {
     var inst = map.get(attrName);
     var newVal = el.getAttribute(attrName);
     if(!inst) {
-      var Constructor = this.get(attrName);
+      var Constructor = this._getConstructor(attrName);
       inst = new Constructor();
       map.set(attrName, inst);
       inst.ownerElement = el;

diff --git a/test/all.html b/test/all.html
@@ -25,6 +25,7 @@
   </div>
   <div class="tests">
     <iframe src="./change.html"></iframe>
+    <iframe src="./get.html"></iframe>
   </div>
 </body>
 </html>
diff --git a/test/get.html b/test/get.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+  <title>get() tests</title>
+
+  <script src="../node_modules/webcomponents.js/webcomponents-lite.min.js" defer></script>
+  <script src="../attr.js" defer></script>
+  <link rel="import" href="../node_modules/mocha-test/mocha-test.html" defer>
+</head>
+<body>
+<div id="fixture"></div>
+<mocha-test>
+<template>
+<script>
+  describe('get()', function(){
+    function later(fn){
+      setTimeout(fn, 0);
+    }
+
+    afterEach(function(){
+      fixture.innerHTML = '';
+    });
+
+    it('gets the attribute instance', function(done){
+      class Foobar {}
+      customAttributes.define('foo-bar', Foobar);
+
+      var el = document.createElement('span');
+      el.setAttribute('foo-bar', 'baz');
+      fixture.appendChild(el);
+
+      later(function(){
+        var fooBar = customAttributes.get(el, 'foo-bar');
+        assert.ok(fooBar instanceof Foobar);
+        done();
+      });
+    });
+
+    it('allows passing more complex data types', function(done){
+      class Foobar {
+        set baz(val) {
+          assert.equal(val, 'hello world');
+          done();
+        }
+      }
+      customAttributes.define('foo-bar', Foobar);
+
+      var el = document.createElement('span');
+      el.setAttribute('foo-bar', 'bam');
+      fixture.appendChild(el);
+
+      later(function(){
+        var fooBar = customAttributes.get(el, 'foo-bar');
+        fooBar.baz = 'hello world';
+      });
+    });
+  });
+</script>
+</template>
+</mocha-test>
+</body>
+</html>