From 60af0773a0f6eda225ca6e6b7d3c2a3482da99af Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
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 = `<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()
 */
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
 }