Added listeners to array-hook in JDOM-Template

interaapps · Mar 9, 2024 · edbc285 · edbc285
1 parent 5da5c7e
commit edbc285
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# JDOM `3.1.7`
+# JDOM `3.1.8`
 ## A wrapper for query selector and html elements + templating & reactivity framework
 
 - [Installation or embedding](#install)
@@ -28,12 +28,12 @@ npm install jdomjs
 
 ### Module
 ```js
-import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.7'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/jdomjs@3.1.8'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.7/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jdom@3.1.8/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation

diff --git a/dist/jdom.js b/dist/jdom.js
diff --git a/ex/index.html b/ex/index.html
@@ -0,0 +1,6 @@
+<html>
+<head></head>
+<body>
+<script type=module src="main.js"></script>
+</body>
+</html>
diff --git a/ex/main.js b/ex/main.js
@@ -0,0 +1,17 @@
+import { JDOMComponent, html, $r, $, computed, Hook } from 'https://esm.run/jdomjs@3.1.7'
+
+class MyComponent extends JDOMComponent {
+    example = new Hook('Hello World')
+
+    render() {
+        setTimeout(() => this.example.value = "Yooo", 5000)
+
+        return html`
+            <div>${computed(() => this.example.value, [this.example])}</div>
+        `
+    }
+}
+
+$r('my-component', MyComponent)
+
+$(document).append(html`<my-component></my-component>`)
diff --git a/examples/example.html b/examples/example.html
@@ -21,27 +21,14 @@
     import Hook from "../src/Hook.js";
     import { ForEach, Awaiting } from "../src/template/helper/components.js";
 
-    const a = state(0)
-
     function Test(props) {
         console.log(props)
         return html`
             <h3>Halloooo</h3>
         `
     }
 
-    html`
-        <button @click=${()=> a.value++}>Plus</button>
-
-        <h1 :if=${computed(() => a.value === 0, [a])}>Hallo</h1>
-        <${Test} :else-if=${computed(() => a.value === 3, [a])} />
-        <h1 :else>ESLE</h1>
-
-
-
-    `.appendTo(document)
 
-    /*
     const paste = fetch(`https://pastefy.app/api/v2/paste/9XH0KD7g`)
         .then(r => r.json())
         .then(r => JSON.parse(r.content))

diff --git a/examples/js-components/main.js b/examples/js-components/main.js
@@ -4,6 +4,7 @@ import Hook from "../../src/Hook.js";
 class ToDoApp extends JDOMComponent {
     tasks = new Hook([]);
     newTaskText = new Hook('');
+
     constructor() {
         super();
     }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
   "types": "./types/index.d.ts",

diff --git a/src/Hook.js b/src/Hook.js
@@ -41,13 +41,13 @@ export default class Hook {
             set: (target, prop, value) => {
                 if (Object.hasOwn(target, prop) || prop in target || prop === 'value') {
                     if (target[prop] === value)
-                        return;
+                        return true;
 
                     return Reflect.set(target, prop, value);
                 }
                 if (typeof target._value === 'object' && !Array.isArray(target._value) && target._value !== null) {
                     if (target._value[prop] === value)
-                        return;
+                        return true;
 
                     return Reflect.set(target._value, prop, value);
                 }
@@ -69,7 +69,7 @@ export default class Hook {
         return new Proxy(val, {
             set: (target, prop, value) => {
                 if (val === val[prop])
-                    return;
+                    return true;
 
                 val[prop] = value
                 this.setValue(val)

diff --git a/src/hooks.js b/src/hooks.js
@@ -3,17 +3,17 @@ import Hook from './Hook.js'
 /**
  * @template T
  * @param {T} initialValue
- * @return {Hook}
+ * @return {Hook<T>}
  */
 export function state(initialValue) {
     return new Hook(initialValue)
 }
 
 /**
- *
- * @param {function()} callable
+ * @template T
+ * @param {function(): T} callable
  * @param {Hook[]} dependencies
- * @return {Hook}
+ * @return {Hook<T>}
  */
 export function computed(callable, dependencies = []) {
     const hook = new Hook(callable())

diff --git a/src/template/TemplateDOMAdapter.js b/src/template/TemplateDOMAdapter.js
@@ -144,7 +144,7 @@ export default class TemplateDOMAdapter {
                         }
                     })
 
-                    model.listeners.push(val => {
+                    model.addListener(val => {
                         if (elem.value !== model.value) {
                             elem.value = val
                             elem.dispatchEvent(new InputEvent('input:value'))
@@ -329,18 +329,15 @@ export default class TemplateDOMAdapter {
             })
 
             if (isArray) {
-                const comment = document.createComment('JDOM-Templating:arrhook')
+                const comment = document.createComment('JDOM-Templating:arrhook1')
                 outputElement = comment
 
                 let elements = []
 
-                removeEl = () => elements.forEach(e => e.forEach(i => this.removeElement(i)))
                 const setElements = () => {
                     for (const item of elements) {
-                        item.elements.forEach(e => this.removeElement(e))
-                        elements = elements.filter(e => e !== item)
+                        this.removeElement(item)
                     }
-                    let i = 0
 
                     if (!Array.isArray(state.value)) {
                         this.replaceElement(outputElement, this.createFromValue({ value: state.value }))
@@ -349,17 +346,37 @@ export default class TemplateDOMAdapter {
                     }
 
                     let lastEl = comment
+                    let i = 0
                     for (const item of state.value) {
                         let itemEls = this.createFromValue({value: item})
                         if (!Array.isArray(itemEls))
                             itemEls = [itemEls]
 
-                        elements = [...elements, {
-                            key: ++i,
-                            elements: itemEls
-                        }]
+                        const currentIndex = i++
+                        elements = [...elements, ...itemEls]
 
-                        itemEls.forEach(e => lastEl = this.afterElement(lastEl, e))
+                        itemEls.forEach((e) => {
+                            lastEl = this.afterElement(lastEl, e)
+
+                            const addReplaceListener = toRepl => {
+                                toRepl.addEventListener(':replaced_with', ({detail: {to}}) => {
+                                    for (const e of to) {
+                                        addReplaceListener(e)
+                                        elements.push(e)
+                                    }
+                                })
+
+                                toRepl.addEventListener(':attached', () => {
+                                    elements.push(toRepl)
+                                })
+
+                                toRepl.addEventListener(':detached', () => {
+                                    elements = elements.filter(e => e !== toRepl)
+                                })
+                            }
+
+                            addReplaceListener(lastEl)
+                        })
                     }
                 }
 
@@ -369,12 +386,7 @@ export default class TemplateDOMAdapter {
 
                 setElements()
 
-                let out = []
-
-                for (const item of elements) {
-                    item.elements.forEach(e => out = [...out, e])
-                }
-                return [comment, ...out]
+                return [comment, ...elements]
             } else if (typeof state.value === 'string' || typeof state.value === 'number' || typeof state.value === 'boolean') {
                 outputElement = this.createText({value: state.value})
 
@@ -446,6 +458,7 @@ export default class TemplateDOMAdapter {
     replaceElement(from, to) {
         const replElements = Array.isArray(from) ? [...from] : [from]
         const endElements = Array.isArray(to) ? [...to] : [to]
+        const finalEndElements = [...endElements]
 
         if (endElements.length === 0)
             endElements.push(document.createComment('JDOM-Templating:REPLACEMENT'))
@@ -456,7 +469,7 @@ export default class TemplateDOMAdapter {
         const firstEndEl = endElements.shift()
 
 
-        firstEl.dispatchEvent(new CustomEvent(':replace_with', { to }))
+        firstEl.dispatchEvent(new CustomEvent(':replace_with', { detail: { to: finalEndElements } }))
         firstEl.dispatchEvent(new CustomEvent(':detach'))
         firstEndEl.dispatchEvent(new CustomEvent(':child_attach'))
         firstEl.replaceWith(firstEndEl)
@@ -468,7 +481,7 @@ export default class TemplateDOMAdapter {
             lastEl = this.afterElement(lastEl, e)
         })
 
-        firstEl.dispatchEvent(new CustomEvent(':replaced_with', { to }))
+        firstEl.dispatchEvent(new CustomEvent(':replaced_with', { detail: { to: finalEndElements } }))
         firstEl.dispatchEvent(new CustomEvent(':detached'))
         firstEndEl.dispatchEvent(new CustomEvent(':child_attached'))
 

diff --git a/src/template/template.js b/src/template/template.js
@@ -11,16 +11,20 @@ import Hook from '../Hook.js'
  * @return {JDOM}
  */
 export function html(strings, ...values) {
-    // console.time("myFunction");
     const parser = JDOMTemplateParser.fromTemplate(strings, ...values)
 
     const parsed = parser.parse()
 
     const adapter = new TemplateJDOMAdapter(parsed)
-    // console.timeEnd("myFunction");
     return adapter.create()
 }
-
+/**
+ * Usage: css`h1 {font-size: 20px}`
+ *
+ * @param strings
+ * @param values
+ * @return string
+ */
 export function css(strings, ...values) {
     let out = ''
     let i = 0
@@ -45,9 +49,9 @@ export function css(strings, ...values) {
  * `
  * ```
  *
- * @param {string[]} strings
- * @param {...any} values
- * @return {Hook}
+ * @param strings
+ * @param values
+ * @return {Hook<string>}
  */
 export function comp(strings, ...values) {
     return computed(() => {

diff --git a/types/src/hooks.d.ts b/types/src/hooks.d.ts
@@ -1,16 +1,16 @@
 /**
  * @template T
  * @param {T} initialValue
- * @return {Hook}
+ * @return {Hook<T>}
  */
-export function state<T>(initialValue: T): Hook<any>;
+export function state<T>(initialValue: T): Hook<T>;
 /**
- *
- * @param {function()} callable
+ * @template T
+ * @param {function(): T} callable
  * @param {Hook[]} dependencies
- * @return {Hook}
+ * @return {Hook<T>}
  */
-export function computed(callable: () => any, dependencies?: Hook<any>[]): Hook<any>;
+export function computed<T>(callable: () => T, dependencies?: Hook<any>[]): Hook<T>;
 /**
  * @param {Hook[]} hooks
  * @param {function()} callable

diff --git a/types/src/router/Router.d.ts b/types/src/router/Router.d.ts
@@ -25,7 +25,7 @@ export default class Router {
      * @type Route[]
      */
     routes: Route[];
-    view: import("src/Hook.js").default<any>;
+    view: import("src/Hook.js").default<null>;
     link: (to: any, text: any) => any;
     /**
      * @param to

diff --git a/types/src/template/template.d.ts b/types/src/template/template.d.ts
@@ -6,6 +6,13 @@
  * @return {JDOM}
  */
 export function html(strings: any, ...values: any[]): JDOM;
+/**
+ * Usage: css`h1 {font-size: 20px}`
+ *
+ * @param strings
+ * @param values
+ * @return string
+ */
 export function css(strings: any, ...values: any[]): string;
 /**
  * usage:
@@ -18,9 +25,9 @@ export function css(strings: any, ...values: any[]): string;
  * `
  * ```
  *
- * @param {string[]} strings
- * @param {...any} values
- * @return {Hook}
+ * @param strings
+ * @param values
+ * @return {Hook<string>}
  */
-export function comp(strings: string[], ...values: any[]): Hook<any>;
+export function comp(strings: any, ...values: any[]): Hook<string>;
 import Hook from '../Hook.js';