Index: js/io-element.js =================================================================== new file mode 100644 --- /dev/null +++ b/js/io-element.js @@ -0,0 +1,60 @@ +/* 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`