Issue 6487 - IOElement as base component for ABP UI

js/io-element.js

+/* globals module, require */
+
+"use strict";
+
+// Custom Elements ponyfill (a polyfill triggered on demand)
+const customElementsPonyfill = require("document-register-element/pony");
+if (typeof customElements !== "object")
+  customElementsPonyfill(window);
+
+// external dependencies
+const {default: HyperHTMLElement} = require("hyperhtml-element/cjs");
+
+// provides a unique-id suffix per each component
+let counter = 0;
+
+// common Custom Element class to extend
+class IOElement extends HyperHTMLElement
+{
+  // get a unique ID or, if null, set one and returns it
+  static getID(element)
+  {
+    return element.getAttribute("id") || IOElement.setID(element);
+  }
+
+  // set a unique ID to a generic element and returns the ID
+  static setID(element)
+  {
+    const id = `${element.nodeName.toLowerCase()}-${counter++}`;
+    element.setAttribute("id", id);
+    return id;
+  }
+
+  // lazily retrieve or define a custom element ID
+  get id()
+  {
+    return IOElement.getID(this);
+  }
+
+  // whenever an element is created, render its content once
+  created() { this.render(); }
+
+  // by default, render is a no-op
+  render() {}
+}
+
+// whenever an interpolation with ${{i18n: 'string-id'}} is found
+// transform such value into the expected content
+// example:
+//  render() {
+//    return this.html`<div>${{i18n:'about-abp'}}</div>`;
+//  }
+const {setElementText} = ext.i18n;
+IOElement.intent("i18n", id =>
+{
+  const fragment = document.createDocumentFragment();
+  setElementText(fragment, id);
+  return fragment;
+});
+
+module.exports = IOElement;