cotomy 0.3.1 → 0.3.3

package/README.md

@@ -43,6 +43,7 @@ The View layer provides thin wrappers around DOM elements and window events.
 - Static helpers
   - `CotomyElement.encodeHtml(text)`
   - `CotomyElement.first(selector, type?)`
+  - `CotomyElement.last(selector, type?)`
   - `CotomyElement.find(selector, type?)`
   - `CotomyElement.contains(selector)` / `CotomyElement.containsById(id)`
   - `CotomyElement.byId(id, type?)`
@@ -71,7 +72,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `firstChild(selector = "*", type?)`
   - `lastChild(selector = "*", type?)`
   - `closest(selector, type?)`
-  - `find(selector, type?)` / `first(selector = "*", type?)` / `contains(selector)`
+  - `find(selector, type?)` / `first(selector = "*", type?)` / `last(selector = "*", type?)` / `contains(selector)`
   - `append(child): this` / `prepend(child): this` / `appendAll(children): this`
   - `insertBefore(sibling): this` / `insertAfter(sibling): this`
   - `appendTo(target): this` / `prependTo(target): this`
@@ -99,6 +100,8 @@ The View layer provides thin wrappers around DOM elements and window events.
   - Focus: `focus`, `blur`, `focusin`, `focusout`
   - Viewport: `inview`, `outview` (uses `IntersectionObserver`)
   - Layout (custom): `resize`, `scroll`, `changelayout` — requires `listenLayoutEvents()` on the element
+  - Move lifecycle: `cotomy:transitstart`, `cotomy:transitend` — emitted automatically by `append`, `prepend`, `insertBefore/After`, `appendTo`, and `prependTo`. While moving, the element (and its descendants) receive a temporary `data-cotomy-moving` attribute so removal observers know the node is still in transit.
+  - Removal: `removed` — fired when an element actually leaves the DOM (MutationObserver-backed). Because `cotomy:transitstart`/`transitend` manage the `data-cotomy-moving` flag, `removed` only runs for true detachments, making it safe for cleanup.
   - File: `filedrop(handler: (files: File[]) => void)`
 
 Example (scoped CSS and events):

package/dist/browser/cotomy.js

@@ -892,6 +892,10 @@ class CotomyElement {
         const ctor = (type ?? CotomyElement);
         return new ctor(element);
     }
+    static last(selector, type) {
+        const elements = this.find(selector, type);
+        return elements.pop();
+    }
     static find(selector, type) {
         const elements = document.querySelectorAll(selector);
         const ctor = (type ?? CotomyElement);
@@ -939,10 +943,24 @@ class CotomyElement {
                 }
             }
         }
-        this.removed(() => {
-            this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
-            EventRegistry.instance.clear(this);
-        });
+        if (!this.instanceId) {
+            this.attribute("data-cotomy-instance", `__cotomy_instance_${cuid_default()()}`);
+            this.removed(() => {
+                this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
+                EventRegistry.instance.clear(this);
+            });
+            this.on("cotomy:transitstart", () => {
+                this.attribute("data-cotomy-moving", "");
+                this.find("[data-cotomy-instance]").forEach(e => e.attribute("data-cotomy-moving", ""));
+            });
+            this.on("cotomy:transitend", () => {
+                this.attribute("data-cotomy-moving", null);
+                this.find("[data-cotomy-instance]").forEach(e => e.attribute("data-cotomy-moving", null));
+            });
+        }
+    }
+    get instanceId() {
+        return this.attribute("data-cotomy-instance");
     }
     get scopeId() {
         if (!this._scopeId) {
@@ -1389,15 +1407,32 @@ class CotomyElement {
         const elements = this.find(selector, type);
         return elements.shift() ?? undefined;
     }
+    last(selector = "*", type) {
+        const elements = this.find(selector, type);
+        return elements.pop() ?? undefined;
+    }
     contains(selector) {
         return this.find(selector).length > 0;
     }
+    static runWithMoveEvents(target, operation) {
+        target.trigger("cotomy:transitstart");
+        try {
+            operation();
+        }
+        finally {
+            target.trigger("cotomy:transitend");
+        }
+    }
     prepend(prepend) {
-        this._element.prepend(prepend.element);
+        CotomyElement.runWithMoveEvents(prepend, () => {
+            this.element.prepend(prepend.element);
+        });
         return this;
     }
     append(target) {
-        this.element.append(target.element);
+        CotomyElement.runWithMoveEvents(target, () => {
+            this.element.append(target.element);
+        });
         return this;
     }
     appendAll(targets) {
@@ -1405,19 +1440,27 @@ class CotomyElement {
         return this;
     }
     insertBefore(append) {
-        this.element.before(append.element);
+        CotomyElement.runWithMoveEvents(append, () => {
+            this.element.before(append.element);
+        });
         return this;
     }
     insertAfter(append) {
-        this.element.after(append.element);
+        CotomyElement.runWithMoveEvents(append, () => {
+            this.element.after(append.element);
+        });
         return this;
     }
     appendTo(target) {
-        target.element.append(this.element);
+        CotomyElement.runWithMoveEvents(this, () => {
+            target.element.append(this.element);
+        });
         return this;
     }
     prependTo(target) {
-        target.element.prepend(this.element);
+        CotomyElement.runWithMoveEvents(this, () => {
+            target.element.prepend(this.element);
+        });
         return this;
     }
     trigger(event, e) {
@@ -1815,7 +1858,9 @@ class CotomyWindow {
                     mutation.removedNodes.forEach(node => {
                         if (typeof HTMLElement !== "undefined" && node instanceof HTMLElement) {
                             const element = new CotomyElement(node);
-                            element.trigger("removed");
+                            if (!element.hasAttribute("data-cotomy-moving") && !element.attached) {
+                                element.trigger("removed");
+                            }
                         }
                     });
                 });