Added detached and detach lifecycle to JDOMComponent

README.md

@@ -1,4 +1,4 @@
-# JDOM `3.1.6`
+# JDOM `3.1.7`
 ## 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/[email protected].6'
+import { $, $n, $c, $r, $h, JDOM } from 'https://cdn.jsdelivr.net/npm/[email protected].7'
 ```
 
 ### HTML import
 ```js
-<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/jdom.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].7/dist/jdom.js"></script>
 ```
 
 ## DOM Manipulation

index.js

@@ -2,6 +2,7 @@ import _JDOM from './src/JDOM.js'
 import { html as _html, comp as _comp, css as _css } from './src/template/template.js'
 import * as hooks from './src/hooks.js'
 import _JDOMComponent from './src/JDOMComponent.js'
+import _Hook from './src/Hook.js'
 
 /**
  * @param {Node|JDOM|NodeList|string} el
@@ -24,6 +25,7 @@ export const html = _html
 export const css = _css
 export const comp = _comp
 export const JDOMComponent = _JDOMComponent
+export const Hook = _Hook
 
 export const state = hooks.state
 export const watch = hooks.watch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdomjs",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "A wrapper for query selector and html elements",
   "main": "./index.js",
   "types": "./types/index.d.ts",

src/Hook.js

@@ -40,9 +40,15 @@ export default class Hook {
             },
             set: (target, prop, value) => {
                 if (Object.hasOwn(target, prop) || prop in target || prop === 'value') {
+                    if (target[prop] === value)
+                        return;
+
                     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 Reflect.set(target._value, prop, value);
                 }
                 return Reflect.set(target, prop, value);
@@ -56,15 +62,15 @@ export default class Hook {
     setValue(val) {
         const old = this._value
         this._value = val
-        if (typeof val === 'object' && !Array.isArray(val) && val !== null) {
-            this._value = this.#createObserver(val)
-        }
         this.dispatchListener(old)
     }
 
     #createObserver(val) {
         return new Proxy(val, {
             set: (target, prop, value) => {
+                if (val === val[prop])
+                    return;
+
                 val[prop] = value
                 this.setValue(val)
 

src/JDOMComponent.js

@@ -35,6 +35,11 @@ export default class JDOMComponent extends HTMLElement {
         if (this.#jdomConnectedAlready)
             return;
 
+        this.addEventListener(':attach', () => this.attach())
+        this.addEventListener(':attached', () => this.attached())
+        this.addEventListener(':detach', () => this.detach())
+        this.addEventListener(':detached', () => this.detached())
+
         this.#jdomConnectedAlready = true
 
         const { shadowed = true, style = null } = this.options
@@ -118,6 +123,11 @@ export default class JDOMComponent extends HTMLElement {
         this.attributeListeners.push({ key, options })
     }
 
+    detach() {}
+    detached() {}
+    attach() {}
+    attached() {}
+
     /**
      * @param {string} style
      */

src/template/TemplateDOMAdapter.js

@@ -438,8 +438,9 @@ export default class TemplateDOMAdapter {
     }
 
     removeElement(el) {
-        el.dispatchEvent(new CustomEvent('jdom:detach'))
+        el.dispatchEvent(new CustomEvent(':detach'))
         el.remove()
+        el.dispatchEvent(new CustomEvent(':detached'))
     }
 
     replaceElement(from, to) {
@@ -455,8 +456,8 @@ export default class TemplateDOMAdapter {
         const firstEndEl = endElements.shift()
 
 
-        firstEl.dispatchEvent(new CustomEvent('jdom:replace_with', { to }))
-        firstEl.dispatchEvent(new CustomEvent('jdom:detach'))
+        firstEl.dispatchEvent(new CustomEvent(':replace_with', { to }))
+        firstEl.dispatchEvent(new CustomEvent(':detach'))
         firstEndEl.dispatchEvent(new CustomEvent(':child_attach'))
         firstEl.replaceWith(firstEndEl)
 
@@ -467,8 +468,8 @@ export default class TemplateDOMAdapter {
             lastEl = this.afterElement(lastEl, e)
         })
 
-        firstEl.dispatchEvent(new CustomEvent('jdom:replaced_with', { to }))
-        firstEl.dispatchEvent(new CustomEvent('jdom:detached'))
+        firstEl.dispatchEvent(new CustomEvent(':replaced_with', { to }))
+        firstEl.dispatchEvent(new CustomEvent(':detached'))
         firstEndEl.dispatchEvent(new CustomEvent(':child_attached'))
 
         return finalEnd

types/index.d.ts

@@ -13,6 +13,7 @@ export const html: typeof _html;
 export const css: typeof _css;
 export const comp: typeof _comp;
 export const JDOMComponent: typeof _JDOMComponent;
+export const Hook: typeof _Hook;
 export const state: typeof hooks.state;
 export const watch: typeof hooks.watch;
 export const computed: typeof hooks.computed;
@@ -37,4 +38,5 @@ import { html as _html } from './src/template/template.js';
 import { css as _css } from './src/template/template.js';
 import { comp as _comp } from './src/template/template.js';
 import _JDOMComponent from './src/JDOMComponent.js';
+import _Hook from './src/Hook.js';
 import * as hooks from './src/hooks.js';

types/src/Hook.d.ts

@@ -13,7 +13,7 @@ export default class Hook<T> {
      * @param {T} val
      */
     setValue(val: T): void;
-    _value: any;
+    _value: T | undefined;
     /**
      * @param {T} val
      */

types/src/JDOMComponent.d.ts

@@ -22,6 +22,10 @@ export default class JDOMComponent extends HTMLElement {
      */
     addAttributeListener(key: any, options?: {}): void;
     attributeListeners: any[] | undefined;
+    detach(): void;
+    detached(): void;
+    attach(): void;
+    attached(): void;
     /**
      * @param {string} style
      */