Added better typescript defs and fixed bugs

README.md

@@ -140,11 +140,11 @@ import {CustomElement, State, Attribute} from "jdomjs/decorator.ts";
 @CustomElement('example-component')
 class ExampleComponent extends JDOMComponent {
   @State()
-  private name: Hook<String> = 'John'
+  private name = new Hook<String>('John')
 
   @State()
   @Attribute({ name: 'last-name' })
-  private lastName: Hook<String> = 'default'
+  private lastName = new Hook<String>('default')
 
   @Computed(s => [s.name])
   private greetings() {

examples/example.html

@@ -21,6 +21,55 @@
     import Hook from "../src/Hook.js";
     import { ForEach, Awaiting } from "../src/template/helper/components.js";
 
+    const a = state(['asc', 'asd'])
+
+    watch([a], () => console.log(a.value))
+
+    html`
+        <button @click=${()=> a.value = typeof a.value === 'string' ? ['a', 'b', 'c'] : 'Hallo'}>Toggle</button>
+
+        ${a}
+
+    `.appendTo(document)
+
+    /*
+    const paste = fetch(`https://pastefy.app/api/v2/paste/9XH0KD7g`)
+        .then(r => r.json())
+        .then(r => JSON.parse(r.content))
+
+    function a({name, contents}) {
+        console.log(name, contents)
+        return html`
+            <h1  ${{name}}>${name}</h1>
+            <pre ${{name}}>${contents}</pre>
+        `
+    }
+
+    html`
+        <h1>Test</h1>
+
+        ${computed(() => [
+            [
+                $n('h2').text('yo'),
+                $n('h2').text('yo2')
+            ],
+            $n('h2').text('yo3'),
+            $n('h2').text('yo4')
+        ])}
+
+
+        <${Awaiting}
+                promise=${paste}
+                finished=${r => html`<${ForEach}
+                    value=${r}
+                    content=${a}}
+                >`}
+                error=${e => `Error while loading: ${e}`}
+        />
+    `.appendTo(document)
+
+
+
     function showDialog() {
         // language = css
         const dialog = html`
@@ -52,6 +101,8 @@ <h2>Yee</h2>
         },
     ]);
 
+    watch([elements], v => console.log(v))
+
     function waitforme() {
         return new Promise((res) => {
             setTimeout(() => {
@@ -70,6 +121,7 @@ <h2>Yee</h2>
     const prom = waitforme();
 
     html`
+
         <${ForEach}
             :bind=${list}
             content=${(value, index) => {
@@ -165,6 +217,7 @@ <h2>Yee</h2>
         >
             Add Element
         </button>
+
     `;
 
     console.log(myHTML);

examples/ts-components/main.ts

@@ -10,30 +10,30 @@ interface Task {
 @CustomElement('todo-app')
 class ToDoApp extends JDOMComponent {
     @State()
-    private tasks: Hook<Task> = [];
+    private tasks = new Hook<Task[]>([]);
 
     @State()
-    private newTaskText: Hook<String> = '';
+    private newTaskText = new Hook<String>('');
 
     constructor() {
         super();
     }
 
     addTask() {
         if (this.newTaskText.value.trim()) {
-            this.tasks = [...this.tasks.value, { text: this.newTaskText.value.trim(), done: false }];
-            this.newTaskText = ''; // Clear input field
+            this.tasks.value = [...this.tasks.value, { text: this.newTaskText.value.trim(), done: false }];
+            this.newTaskText.value = ''; // Clear input field
         }
     }
 
     toggleDone(index: number) {
-        this.tasks = this.tasks.value.map((task, i) =>
+        this.tasks.value = this.tasks.value.map((task, i) =>
             index === i ? { ...task, done: !task.done } : task
         );
     }
 
     removeTask(index: number) {
-        this.tasks = this.tasks.value.filter((_, i) => i !== index);
+        this.tasks.value = this.tasks.value.filter((_, i) => i !== index);
     }
 
     @Computed(s => [s.tasks])