Merge pull request #11 from dmarcos/templateBug

It stores the template string so components can be extended over the …

README.md

@@ -58,6 +58,43 @@ myComponent.setAttribute('custom-attr', 'foo');
 myComponent.customAttr; //=> 'foo';
 ```
 
+### Component Extension
+
+Components can extend other components:
+
+```js
+var MyComponent = component.register('my-component', {
+  // extend component from the given prototype
+  extends: HTMLButtonElement.prototype,
+  ...
+});
+
+var YourComponent = component.register('your-component', {
+  // extend component from the given prototype
+  extends: MyComponent.prototype,
+  ...
+});
+```
+
+If the property ```extensible: false``` is set the registered component
+cannot be extended:
+
+```js
+var MyComponent = component.register('my-component', {
+  // extend component from the given prototype
+  extends: HTMLButtonElement.prototype,
+  extensible: false,
+  ...
+});
+```
+
+Extensible components come with a little bit of overhead. For instance, 
+they store a copy of the template string that derived components
+will use to properly inherit the styles. With the extensible flag set to false 
+components won't store the template string and some memory will be saved. 
+This is an optimization for production systems and large component hierarchies. 
+Registed components are extensible by default.
+
 ## Tests
 
 1. Ensure Firefox Nightly is installed on your machine.

gaia-component.js

@@ -20,13 +20,26 @@ var noop  = function() {};
  */
 exports.register = function(name, props) {
   var baseProto = getBaseProto(props.extends);
+  var template = props.template || baseProto.templateString;
+
+  // Components are extensible by default but can be declared
+  // as non extensible as an optimization to avoid
+  // storing the template strings
+  var extensible = props.extensible = props.hasOwnProperty('extensible')?
+    props.extensible : true;
 
   // Clean up
   delete props.extends;
 
   // Pull out CSS that needs to be in the light-dom
-  if (props.template) {
-    var output = processCss(props.template, name);
+  if (template) {
+    // Stores the string to be reprocessed when
+    // a new component extends this one
+    if (extensible && props.template) {
+      props.templateString = props.template;
+    }
+
+    var output = processCss(template, name);
 
     props.template = document.createElement('template');
     props.template.innerHTML = output.template;

test/test.js

@@ -197,6 +197,42 @@ suite('gaia-component', function() {
       var el = new this.Component();
       assert.ok(el instanceof HTMLElement);
     });
+
+    test('it stores the template string by default', function() {
+      var El = component.register('test-extends-template-string', {
+        extends: HTMLInputElement,
+        template: `<div class="inner"></div>`
+      });
+      assert.ok(El.prototype.templateString);
+    });
+
+    test('it does not store the template string if the' +
+         'component is declared as non extensible', function() {
+      var El = component.register('test-extends-non-extensible', {
+        extends: HTMLInputElement,
+        extensible: false,
+        template: `<div class="inner"></div>`
+      });
+      assert.isUndefined(El.prototype.templateString);
+    });
+
+    test('a child inherits parent style template', function() {
+      var Parent = component.register('test-extensible-parent', {
+        extends: HTMLInputElement,
+        template: `
+          <div class="inner"></div>
+          <style>::host { display: block; background-color: pink; } </style>
+        `
+      });
+      var Child = component.register('test-extensible-child', {
+        extends: Parent.prototype
+      });
+      var el = new Child();
+      var lightCSS = el.querySelector('style').innerHTML;
+      assert.isTrue(!!~lightCSS.indexOf(
+        'test-extensible-child { display: block; background-color: pink; }'));
+    });
+
   });
 
   suite('rtl', function() {
@@ -262,4 +298,5 @@ suite('gaia-component', function() {
       }
     });
   }
+
 });