bundle

ts/elemwrapper.ts

@@ -0,0 +1,14 @@
+export class ElemWrapper {
+    constructor(private elem: HTMLElement) {}
+
+    add(name: string, ...attrs: string[]): ElemWrapper {
+        const elem = document.createElement(name);
+        this.elem.appendChild(elem);
+
+        for (let i = 0; i < attrs.length; i += 2) {
+            elem.setAttribute(attrs[i], attrs[i + 1]);
+        }
+
+        return new ElemWrapper(elem);
+    }
+}

ts/main.ts

@@ -1,8 +1,7 @@
+import { ElemWrapper } from "./elemwrapper";
+
 async function main() {
-    console.log("Hello, world!");
-
     const root = new ElemWrapper(document.body);
-
     const tabGroup = root.add("sl-tab-group");
 
     tabGroup
@@ -14,32 +13,5 @@ async function main() {
         .add("sl-icon", "name", "tags", "style", "font-size: 20px");
 }
 
-function add(name: string, parent: HTMLElement, ...attrs: any[]) {
-    const elem = document.createElement(name);
-    parent.appendChild(elem);
-
-    for (let i = 0; i < attrs.length; i += 2) {
-        elem.setAttribute(attrs[i], attrs[i + 1]);
-    }
-
-    return elem;
-}
-
-class ElemWrapper {
-    constructor(private elem: HTMLElement) {
-        this.elem = elem;
-    }
-
-    add(name: string, ...attrs: string[]): ElemWrapper {
-        const elem = document.createElement(name);
-        this.elem.appendChild(elem);
-
-        for (let i = 0; i < attrs.length; i += 2) {
-            elem.setAttribute(attrs[i], attrs[i + 1]);
-        }
-
-        return new ElemWrapper(elem);
-    }
-}
 
 document.addEventListener("DOMContentLoaded", main);