summaryrefslogtreecommitdiff
path: root/web/src/html.ts
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/html.ts')
-rw-r--r--web/src/html.ts44
1 files changed, 28 insertions, 16 deletions
diff --git a/web/src/html.ts b/web/src/html.ts
index 8802e50..a118849 100644
--- a/web/src/html.ts
+++ b/web/src/html.ts
@@ -1,3 +1,29 @@
+export function createElement<T extends HTMLElement>(
+ tag: string,
+ ...children: (Node | string)[]
+): T;
+
+export function createElement<T extends HTMLElement>(
+ tag: string,
+ attrs: Partial<T>,
+ ...children: (Node | string)[]
+): T;
+
+export function createElement(tag: string, ...args: any[]) {
+ const el = document.createElement(tag);
+
+ if (args[0]?.constructor === Object) {
+ const { dataset, style, ...attrs } = args.shift();
+ Object.assign(el, attrs);
+ if (dataset) Object.assign(el.dataset, dataset);
+ if (style) Object.assign(el.style, style);
+ }
+
+ el.append(...args.flat());
+
+ return el;
+}
+
export type CreateElement<T extends HTMLElement> = {
(...children: (Node | string)[]): T;
(attrs: Partial<T>, ...children: (Node | string)[]): T;
@@ -9,23 +35,9 @@ type ElementCreator = {
const h = new Proxy({} as ElementCreator, {
get:
- (_, tag: string) =>
+ (_, tagName: string) =>
(...args: any[]) => {
- const el = document.createElement(tag);
-
- if (args[0]?.constructor === Object) {
- const { dataset, ...attrs } = args.shift();
-
- Object.assign(el, attrs);
-
- if (dataset) {
- Object.assign(el.dataset, dataset);
- }
- }
-
- el.append(...args.flat());
-
- return el;
+ return createElement(tagName, ...args);
},
});