From f03c6475bcb931ad562f685bf858370c219178e8 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sat, 12 Oct 2024 23:29:48 +0200
Subject: [PATCH] allow stuff like style to be easily specified using the old
 fashioned way

---
 makeDOM.ts | 105 +++++++++++++++++++++++++++++------------------------
 1 file changed, 58 insertions(+), 47 deletions(-)

diff --git a/makeDOM.ts b/makeDOM.ts
index b80bfe9..0668784 100644
--- a/makeDOM.ts
+++ b/makeDOM.ts
@@ -2,68 +2,79 @@
 // Licensed under AGPL-3.0, check `LICENSE` for the full text.
 
 type ElementProperties<T extends keyof HTMLElementTagNameMap> = {
-  [key in keyof HTMLElementTagNameMap[T]]: HTMLElementTagNameMap[T][key];
+	[key in keyof HTMLElementTagNameMap[T]]:
+		| HTMLElementTagNameMap[T][key]
+		| string;
 } & {
-  [key in keyof HTMLElementEventMap as `@${key}`]: (
-    this: HTMLElement,
-    ev: HTMLElementEventMap[key]
-  ) => void;
+	[key in keyof HTMLElementEventMap as `@${key}`]: (
+		this: HTMLElement,
+		ev: HTMLElementEventMap[key],
+	) => void;
 };
 
 type DOMElem = Node | string;
 
 type WithClassOrId<T extends keyof HTMLElementTagNameMap> =
-  | `${T}#${string}`
-  | `${T}.${string}`;
+	| `${T}#${string}`
+	| `${T}.${string}`;
 
 export function $el<T extends keyof HTMLElementTagNameMap>(
-  name: T | WithClassOrId<T>,
-  ...desc: [Partial<ElementProperties<T>>, ...DOMElem[]] | DOMElem[]
+	name: T | WithClassOrId<T>,
+	...desc: [Partial<ElementProperties<T>>, ...DOMElem[]] | DOMElem[]
 ): HTMLElementTagNameMap[T] {
-  // Take off ID or class from the name
-  let elementName = name as string;
-  let className = "";
-  let id = "";
+	// Take off ID or class from the name
+	let elementName = name as string;
+	let className = "";
+	let id = "";
 
-  if (name.includes("#")) {
-    [elementName, id] = name.split("#");
-  }
+	if (name.includes("#")) {
+		[elementName, id] = name.split("#");
+	}
 
-  if (name.includes(".")) {
-    [elementName, className] = name.split(".");
-  }
+	if (name.includes(".")) {
+		[elementName, className] = name.split(".");
+	}
 
-  // Create the element and add the attributes (if found)
-  const el = document.createElement(elementName as T);
-  if (className) {
-    el.className = className;
-  }
-  if (id) {
-    el.id = id;
-  }
+	// Create the element and add the attributes (if found)
+	const el = document.createElement(elementName as T);
+	if (className) {
+		el.className = className;
+	}
+	if (id) {
+		el.id = id;
+	}
 
-  const attributes = desc[0];
-  if (typeof attributes === "object" && !(attributes instanceof Node)) {
-    for (const attr in attributes) {
-      const value = (attributes as Record<string, any>)[attr];
-      if (attr.startsWith("@")) {
-        el.addEventListener(attr.substring(1), value);
-      } else if (attr === "dataset") {
-        for (const key in value) {
-          el.dataset[key] = value[key];
-        }
-      } else {
-        el[attr as keyof HTMLElementTagNameMap[T]] = value;
-      }
-    }
-    desc.shift();
-  }
+	const attributes = desc[0];
+	if (typeof attributes === "object" && !(attributes instanceof Node)) {
+		for (const attr in attributes) {
+			const value = (attributes as Record<string, unknown>)[attr];
+			if (attr.startsWith("@")) {
+				el.addEventListener(
+					attr.substring(1),
+					value as EventListenerOrEventListenerObject,
+				);
+			} else if (attr === "dataset") {
+				for (const key in value as Record<string, unknown>) {
+					el.dataset[key] = (value as Record<string, string>)[key];
+				}
+			} else {
+				// For some tricky attributes, set them the old fashioned way using strings
+				if (typeof value === "string") {
+					el.setAttribute(attr, value as string);
+				} else {
+					el[attr as keyof HTMLElementTagNameMap[T]] =
+						value as HTMLElementTagNameMap[T][keyof HTMLElementTagNameMap[T]];
+				}
+			}
+		}
+		desc.shift();
+	}
 
-  for (const item of desc as DOMElem[]) {
-    el.appendChild(item instanceof Node ? item : document.createTextNode(item));
-  }
+	for (const item of desc as DOMElem[]) {
+		el.appendChild(item instanceof Node ? item : document.createTextNode(item));
+	}
 
-  return el;
+	return el;
 }
 
 export default $el;