Make hyphenation in consistent with browser APIs

Javascript snake-case gets turned into kebab-case in HTML

Change name attribute in example to match
This commit is contained in:
Talia 2021-05-02 09:47:10 +02:00
parent 6f85103c63
commit 60af0773a0
No known key found for this signature in database
GPG key ID: AD727AD22802D0D6
2 changed files with 19 additions and 16 deletions

View file

@ -1,5 +1,8 @@
export class BetterHTMLElement extends HTMLElement { 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 // Array of connected callbacks
#connected = []; #connected = [];
@ -25,24 +28,23 @@ export class BetterHTMLElement extends HTMLElement {
this.setContent(content) 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. // Adds property/attribute mappings to the object.
static initialize(name = this.name) { static initialize(name = this.name) {
const names = Object const names = Object
.getOwnPropertyNames(this.prototype) .getOwnPropertyNames(this.prototype)
.filter(name => name.search(/Changed$/)+1) .filter(name => name.search(/Changed$/)+1)
.map(name => name.replace(/Changed$/, '')) .map(name => name.replace(/Changed$/, ''))
const attributes = names.map(attr => attr.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase())
Object.defineProperty(this, "observedAttributes", { Object.defineProperty(this, "observedAttributes", {
get() { return names } get() { return attributes }
}) })
names.forEach( attr => Object.defineProperty(this.prototype, attr, { 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) }, get() { return this.getAttribute(attr) },
set(val) { this.setAttribute(attr, val) } set(val) { this.setAttribute(attr, val) }
})) })
})
name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() name = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
customElements.define(name, this) customElements.define(name, this)
return name return name
@ -54,10 +56,11 @@ export class BetterHTMLElement extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({mode: "open"}); this.attachShadow({mode: "open"});
this.shadowRoot.innerHTML = `<h1>Hello, <span id="name"></span></h1>` this.shadowRoot.innerHTML = `<h1>Hello, <span part="name"></span>!</h1>`
this.userName = "World";
} }
nameChanged(name) { this.shadowRoot.querySelector("#name").innerHTML=name; } userNameChanged(name) { this.shadowRoot.querySelector('[part="name"]').innerHTML = this.userName; }
} }
FooBar.initialize() FooBar.initialize()
*/ */

View file

@ -18,15 +18,15 @@ const parseArgs = (element, args) => {
parseArgs(element, arg) parseArgs(element, arg)
else else
for (key in arg) 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) => { const node = (name, args, xmlns) => {
let element let element
if (xmlns) if (xmlns)
element = document.createElementNS(xmlns, name.replace("_", "-")) element = document.createElementNS(xmlns, name.replace(/([a-z])([A-Z])/g, "$1-$2"))
else else
element = document.createElement(name.replace("_", "-")) element = document.createElement(name.replace(/([a-z])([A-Z])/g, "$1-$2"))
parseArgs(element, args) parseArgs(element, args)
return element return element
} }