From 60af0773a0f6eda225ca6e6b7d3c2a3482da99af Mon Sep 17 00:00:00 2001 From: DarkWiiPlayer Date: Sun, 2 May 2021 09:47:10 +0200 Subject: [PATCH] Make hyphenation in consistent with browser APIs Javascript snake-case gets turned into kebab-case in HTML Change name attribute in example to match --- BetterHTMLElement.js | 29 ++++++++++++++++------------- skooma.js | 6 +++--- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/BetterHTMLElement.js b/BetterHTMLElement.js index b0b9c5a..082dfc9 100644 --- a/BetterHTMLElement.js +++ b/BetterHTMLElement.js @@ -1,5 +1,8 @@ export class BetterHTMLElement extends HTMLElement { - attributeChangedCallback(name, old, value) { if (name+"Changed" in this) this[name+"Changed"](value, old) } + attributeChangedCallback(attr, old, value) { + let name = attr.replace(/-([a-z])/, (_, l) => l.toUpperCase()) + if (name+"Changed" in this) this[name+"Changed"](value, old) + } // Array of connected callbacks #connected = []; @@ -25,24 +28,23 @@ export class BetterHTMLElement extends HTMLElement { this.setContent(content) } - // Fancier way to register an element - // TODO: Unregister old names first - // TODO: Register name internally - static set tagName(name) { customElements.define(name, this) } - // Adds property/attribute mappings to the object. static initialize(name = this.name) { const names = Object .getOwnPropertyNames(this.prototype) .filter(name => name.search(/Changed$/)+1) .map(name => name.replace(/Changed$/, '')) + const attributes = names.map(attr => attr.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()) Object.defineProperty(this, "observedAttributes", { - get() { return names } + get() { return attributes } + }) + names.forEach(name => { + let attr = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() + Object.defineProperty(this.prototype, name, { + get() { return this.getAttribute(attr) }, + set(val) { this.setAttribute(attr, val) } + }) }) - names.forEach( attr => Object.defineProperty(this.prototype, attr, { - get() { return this.getAttribute(attr) }, - set(val) { this.setAttribute(attr, val) } - })) name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() customElements.define(name, this) return name @@ -54,10 +56,11 @@ export class BetterHTMLElement extends HTMLElement { constructor() { super(); this.attachShadow({mode: "open"}); - this.shadowRoot.innerHTML = `

Hello,

` + this.shadowRoot.innerHTML = `

Hello, !

` + this.userName = "World"; } - nameChanged(name) { this.shadowRoot.querySelector("#name").innerHTML=name; } + userNameChanged(name) { this.shadowRoot.querySelector('[part="name"]').innerHTML = this.userName; } } FooBar.initialize() */ diff --git a/skooma.js b/skooma.js index 99748fa..64aa0eb 100644 --- a/skooma.js +++ b/skooma.js @@ -18,15 +18,15 @@ const parseArgs = (element, args) => { parseArgs(element, arg) else for (key in arg) - element.setAttribute(key.replace("_", "-"), parseAttribute(arg[key])) + element.setAttribute(key.replace(/([a-z])([A-Z])/g, "$1-$2"), parseAttribute(arg[key])) } const node = (name, args, xmlns) => { let element if (xmlns) - element = document.createElementNS(xmlns, name.replace("_", "-")) + element = document.createElementNS(xmlns, name.replace(/([a-z])([A-Z])/g, "$1-$2")) else - element = document.createElement(name.replace("_", "-")) + element = document.createElement(name.replace(/([a-z])([A-Z])/g, "$1-$2")) parseArgs(element, args) return element }