Fix #51 - Automatically addressed refs

Author: Andrea Giammarchi

cjs/index.js

@@ -17,6 +17,8 @@ const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||
 const setPrototypeOf = O.setPrototypeOf ||
                       ((o, p) => (o.__proto__ = p, o));
 const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
+const {attachShadow} = HTMLElement.prototype;
+const sr = new WeakMap;
 
 class HyperHTMLElement extends HTMLElement {
 
@@ -229,21 +231,37 @@ class HyperHTMLElement extends HTMLElement {
     return Class;
   }
 
+  // weakly relate the shadowRoot for refs usage
+  attachShadow() {
+    const shadowRoot = attachShadow.apply(this, arguments);
+    sr.set(this, shadowRoot);
+    return shadowRoot;
+  }
+
+  // returns elements by ref
+  get refs() {
+    const value = {};
+    if ('_html$' in this) {
+      const all = (sr.get(this) || this).querySelectorAll('[ref]');
+      for (let {length} = all, i = 0; i < length; i++) {
+        const node = all[i];
+        value[node.getAttribute('ref')] = node;
+      }
+      Object.defineProperty(this, 'refs', {value});
+      return value;
+    }
+    return value;
+  }
+
   // lazily bind once hyperHTML logic
   // to either the shadowRoot, if present and open,
   // the _shadowRoot property, if set due closed shadow root,
   // or the custom-element itself if no Shadow DOM is used.
   get html() {
     return this._html$ || (this.html = bind(
-      // in case of Shadow DOM {mode: "open"}, use it
-      this.shadowRoot ||
-      // in case of Shadow DOM {mode: "close"}, use it
-      // this needs the following reference created upfront
-      // this._shadowRoot = this.attachShadow({mode: "close"});
-      this._shadowRoot ||
-      // if no Shadow DOM is used, simply use the component
-      // as container for its own content (it just works too)
-      this
+      // in a way or another, bind to the right node
+      // backward compatible, first two could probably go already
+      this.shadowRoot || this._shadowRoot || sr.get(this) || this
     ));
   }
 

es5.js

@@ -2011,6 +2011,9 @@ var HyperHTMLElement = (function (exports) {
     });
   };
 
+  var _attachShadow = HTMLElement.prototype.attachShadow;
+  var sr = new WeakMap();
+
   var HyperHTMLElement =
   /*#__PURE__*/
   function (_HTMLElement) {
@@ -2023,6 +2026,16 @@ var HyperHTMLElement = (function (exports) {
     }
 
     _createClass(HyperHTMLElement, [{
+      key: "attachShadow",
+      // weakly relate the shadowRoot for refs usage
+      value: function attachShadow() {
+        var shadowRoot = _attachShadow.apply(this, arguments);
+
+        sr.set(this, shadowRoot);
+        return shadowRoot;
+      } // returns elements by ref
+
+    }, {
       key: "render",
       // overwrite this method with your own render
       value: function render() {} // ---------------------//
@@ -2048,19 +2061,36 @@ var HyperHTMLElement = (function (exports) {
         return this;
       }
     }, {
-      key: "html",
-      // lazily bind once hyperHTML logic
+      key: "refs",
+      get: function get() {
+        var value = {};
+
+        if ('_html$' in this) {
+          var all = (sr.get(this) || this).querySelectorAll('[ref]');
+
+          for (var length = all.length, i = 0; i < length; i++) {
+            var node = all[i];
+            value[node.getAttribute('ref')] = node;
+          }
+
+          Object.defineProperty(this, 'refs', {
+            value: value
+          });
+          return value;
+        }
+
+        return value;
+      } // lazily bind once hyperHTML logic
       // to either the shadowRoot, if present and open,
       // the _shadowRoot property, if set due closed shadow root,
       // or the custom-element itself if no Shadow DOM is used.
+
+    }, {
+      key: "html",
       get: function get() {
-        return this._html$ || (this.html = bind( // in case of Shadow DOM {mode: "open"}, use it
-        this.shadowRoot || // in case of Shadow DOM {mode: "close"}, use it
-        // this needs the following reference created upfront
-        // this._shadowRoot = this.attachShadow({mode: "close"});
-        this._shadowRoot || // if no Shadow DOM is used, simply use the component
-        // as container for its own content (it just works too)
-        this));
+        return this._html$ || (this.html = bind( // in a way or another, bind to the right node
+        // backward compatible, first two could probably go already
+        this.shadowRoot || this._shadowRoot || sr.get(this) || this));
       } // it can be set too if necessary, it won't invoke render()
       ,
       set: function set(value) {

es5.min.js

@@ -16,6 +16,8 @@ const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||
 const setPrototypeOf = O.setPrototypeOf ||
                       ((o, p) => (o.__proto__ = p, o));
 const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
+const {attachShadow} = HTMLElement.prototype;
+const sr = new WeakMap;
 
 class HyperHTMLElement extends HTMLElement {
 
@@ -228,21 +230,37 @@ class HyperHTMLElement extends HTMLElement {
     return Class;
   }
 
+  // weakly relate the shadowRoot for refs usage
+  attachShadow() {
+    const shadowRoot = attachShadow.apply(this, arguments);
+    sr.set(this, shadowRoot);
+    return shadowRoot;
+  }
+
+  // returns elements by ref
+  get refs() {
+    const value = {};
+    if ('_html$' in this) {
+      const all = (sr.get(this) || this).querySelectorAll('[ref]');
+      for (let {length} = all, i = 0; i < length; i++) {
+        const node = all[i];
+        value[node.getAttribute('ref')] = node;
+      }
+      Object.defineProperty(this, 'refs', {value});
+      return value;
+    }
+    return value;
+  }
+
   // lazily bind once hyperHTML logic
   // to either the shadowRoot, if present and open,
   // the _shadowRoot property, if set due closed shadow root,
   // or the custom-element itself if no Shadow DOM is used.
   get html() {
     return this._html$ || (this.html = bind(
-      // in case of Shadow DOM {mode: "open"}, use it
-      this.shadowRoot ||
-      // in case of Shadow DOM {mode: "close"}, use it
-      // this needs the following reference created upfront
-      // this._shadowRoot = this.attachShadow({mode: "close"});
-      this._shadowRoot ||
-      // if no Shadow DOM is used, simply use the component
-      // as container for its own content (it just works too)
-      this
+      // in a way or another, bind to the right node
+      // backward compatible, first two could probably go already
+      this.shadowRoot || this._shadowRoot || sr.get(this) || this
     ));
   }
 

esm/index.js

@@ -2061,6 +2061,8 @@ var HyperHTMLElement = (function (exports) {
   const setPrototypeOf = O.setPrototypeOf ||
                         ((o, p) => (o.__proto__ = p, o));
   const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
+  const {attachShadow} = HTMLElement.prototype;
+  const sr = new WeakMap;
 
   class HyperHTMLElement extends HTMLElement {
 
@@ -2273,21 +2275,37 @@ var HyperHTMLElement = (function (exports) {
       return Class;
     }
 
+    // weakly relate the shadowRoot for refs usage
+    attachShadow() {
+      const shadowRoot = attachShadow.apply(this, arguments);
+      sr.set(this, shadowRoot);
+      return shadowRoot;
+    }
+
+    // returns elements by ref
+    get refs() {
+      const value = {};
+      if ('_html$' in this) {
+        const all = (sr.get(this) || this).querySelectorAll('[ref]');
+        for (let {length} = all, i = 0; i < length; i++) {
+          const node = all[i];
+          value[node.getAttribute('ref')] = node;
+        }
+        Object.defineProperty(this, 'refs', {value});
+        return value;
+      }
+      return value;
+    }
+
     // lazily bind once hyperHTML logic
     // to either the shadowRoot, if present and open,
     // the _shadowRoot property, if set due closed shadow root,
     // or the custom-element itself if no Shadow DOM is used.
     get html() {
       return this._html$ || (this.html = bind(
-        // in case of Shadow DOM {mode: "open"}, use it
-        this.shadowRoot ||
-        // in case of Shadow DOM {mode: "close"}, use it
-        // this needs the following reference created upfront
-        // this._shadowRoot = this.attachShadow({mode: "close"});
-        this._shadowRoot ||
-        // if no Shadow DOM is used, simply use the component
-        // as container for its own content (it just works too)
-        this
+        // in a way or another, bind to the right node
+        // backward compatible, first two could probably go already
+        this.shadowRoot || this._shadowRoot || sr.get(this) || this
       ));
     }
 

index.js

@@ -93,7 +93,7 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "ascjs": "^3.0.0",
-    "basichtml": "^0.21.0",
+    "basichtml": "^0.21.1",
     "coveralls": "^3.0.2",
     "istanbul": "^0.4.5",
     "npm-dollar": "^2.1.3",

min.js

@@ -257,12 +257,13 @@ setTimeout(function () {
   // delegated handleEvent
   class MyDelegatedHandler extends HyperHTMLElement {
     whenClickHappens() { tressa.assert(true, 'whenClickHappens event dispatched'); }
-    created() { this.html`<span data-call="whenClickHappens" onclick="${this}">click me</span>`; }
+    created() { this.html`<span ref="span" data-call="whenClickHappens" onclick="${this}">click me</span>`; }
   }
 
   MyDelegatedHandler.define('my-delegated-handler');
 
   el = new MyDelegatedHandler();
+  tressa.assert(!el.refs.span, 'no span until created');
   document.body.appendChild(el);
   var evt = new CustomEvent('click');
   el.firstChild.dispatchEvent(evt);
@@ -271,6 +272,17 @@ setTimeout(function () {
   el.firstChild.onclick = el.whenClickHappens;
   el.firstChild.dispatchEvent(new CustomEvent('click'));
 
+  tressa.assert(el.refs.span === el.querySelector('span'), 'span after creation');
+
+  class MyShadow extends HyperHTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({mode: 'open'});
+      this.html`<p ref="gotcha" />`;
+    }
+  }
+
+  tressa.assert(!!(new MyShadow).refs.gotcha, 'ref works in shadow dom too');
 
   // double created
   let createdInstances = 0;

package.json

@@ -37,11 +37,12 @@ class MyInput extends HyperHTMLElement {
   oninput(e) {
     this.value = e.target.value;
     this.render();
+    console.assert(this.refs.input === this.querySelector('input'), 'input as ref');
   }
 
   render() {
     return this.html`
-    <input value="${this.value}" oninput="${this}">`;
+    <input ref="input" value="${this.value}" oninput="${this}">`;
   }
 
 }

test.js

@@ -16,9 +16,10 @@ class MyInput extends HyperHTMLElement {
   oninput(e) {
     this.value = e.target.value;
     this.render();
+    console.assert(this.refs.input === this.querySelector('input'), 'input as ref');
   }
   render() { return this.html`
-    <input value="${this.value}" oninput="${this}">`;
+    <input ref="input" value="${this.value}" oninput="${this}">`;
   }
 }
 MyInput.define('my-input');