diff --git a/js/elemwrapper.js b/js/elemwrapper.js
new file mode 100644
index 0000000..6b32d13
--- /dev/null
+++ b/js/elemwrapper.js
@@ -0,0 +1,14 @@
+export class ElemWrapper {
+ elem;
+ constructor(elem) {
+ this.elem = elem;
+ }
+ add(name, ...attrs) {
+ 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);
+ }
+}
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..41d279b
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,12 @@
+import { ElemWrapper } from "./elemwrapper";
+async function main() {
+ const root = new ElemWrapper(document.body);
+ const tabGroup = root.add("sl-tab-group");
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
+ .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+ tabGroup
+ .add("sl-tab", "slot", "nav", "panel", "tags")
+ .add("sl-icon", "name", "tags", "style", "font-size: 20px");
+}
+document.addEventListener("DOMContentLoaded", main);
diff --git a/justfile b/justfile
new file mode 100644
index 0000000..63826a8
--- /dev/null
+++ b/justfile
@@ -0,0 +1,9 @@
+default: build
+
+compile:
+ tsc
+
+bundle:
+ esbuild js/main.js --bundle --format=esm --outfile=static/app.js
+
+build: compile bundle
\ No newline at end of file
diff --git a/static/app.js b/static/app.js
new file mode 100644
index 0000000..2ee78fe
--- /dev/null
+++ b/static/app.js
@@ -0,0 +1,24 @@
+// js/elemwrapper.js
+var ElemWrapper = class _ElemWrapper {
+ elem;
+ constructor(elem) {
+ this.elem = elem;
+ }
+ add(name, ...attrs) {
+ 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);
+ }
+};
+
+// js/main.js
+async function main() {
+ const root = new ElemWrapper(document.body);
+ const tabGroup = root.add("sl-tab-group");
+ tabGroup.add("sl-tab", "slot", "nav", "panel", "tasks", "active", "").add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
+ tabGroup.add("sl-tab", "slot", "nav", "panel", "tags").add("sl-icon", "name", "tags", "style", "font-size: 20px");
+}
+document.addEventListener("DOMContentLoaded", main);
diff --git a/static/index.html b/static/index.html
index 060151b..c536563 100644
--- a/static/index.html
+++ b/static/index.html
@@ -43,7 +43,7 @@ body {
-
+
diff --git a/static/main.js b/static/main.js
deleted file mode 100644
index 4f9b965..0000000
--- a/static/main.js
+++ /dev/null
@@ -1,36 +0,0 @@
-"use strict";
-async function main() {
- console.log("Hello, world!");
- const root = new ElemWrapper(document.body);
- const tabGroup = root.add("sl-tab-group");
- tabGroup
- .add("sl-tab", "slot", "nav", "panel", "tasks", "active", "")
- .add("sl-icon", "name", "slash-circle", "style", "font-size: 20px");
- tabGroup
- .add("sl-tab", "slot", "nav", "panel", "tags")
- .add("sl-icon", "name", "tags", "style", "font-size: 20px");
-}
-function add(name, parent, ...attrs) {
- 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 {
- elem;
- constructor(elem) {
- this.elem = elem;
- this.elem = elem;
- }
- add(name, ...attrs) {
- 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);
diff --git a/ts/elemwrapper.ts b/ts/elemwrapper.ts
new file mode 100644
index 0000000..e8d0a68
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/ts/main.ts b/ts/main.ts
index 1dbfcc9..615f6d1 100644
--- a/ts/main.ts
+++ b/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);
diff --git a/tsconfig.json b/tsconfig.json
index a96e462..4b17ecb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
"target": "ESNext",
"module": "ESNext",
"strict": true,
- "outDir": "static"
+ "outDir": "js"
},
"include": ["ts"],
}
\ No newline at end of file