typed-dom - npm Package Compare versions

Comparing version 0.0.323 to 0.0.324

dist/dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

dist/identity.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

dist/index.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -717,10 +717,5 @@ if(typeof exports === 'object' && typeof module === 'object')
 class Listeners {
-  static from(target) {
+  static of(target) {
     return target[symbols.listeners] ?? target.element[symbols.proxy]?.[symbols.listeners];
   }
-  static hasConnectionListener(target) {
-    const listeners = this.from(target);
-    if (!listeners) return false;
-    return listeners.targets.length > 0 || listeners.connect || listeners.disconnect;
-  }
   constructor(element) {
@@ -730,11 +725,14 @@ this.element = element;
   }
-  get mutate() {
+  get mutation() {
     return 'onmutate' in this.element && null != this.element['onmutate'];
   }
-  get connect() {
+  get connection() {
     return 'onconnect' in this.element && null != this.element['onconnect'];
   }
-  get disconnect() {
+  get disconnection() {
     return 'ondisconnect' in this.element && null != this.element['ondisconnect'];
   }
+  haveConnectionListener() {
+    return this.targets.length > 0 || this.connection || this.disconnection;
+  }
   add(target) {
@@ -749,3 +747,3 @@ const i = this.targets.indexOf(target);
   dispatchMutateEvent() {
-    if (!this.mutate) return;
+    if (!this.mutation) return;
     this.element.dispatchEvent(new Event('mutate', {
@@ -760,5 +758,5 @@ bubbles: false,
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchConnectEvent();
-      if (!listeners?.connect) continue;
+      if (!listeners?.connection) continue;
       target.element.dispatchEvent(new Event('connect', {
@@ -774,5 +772,5 @@ bubbles: false,
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchDisconnectEvent();
-      if (!listeners?.disconnect) continue;
+      if (!listeners?.disconnection) continue;
       target.element.dispatchEvent(new Event('disconnect', {
@@ -833,3 +831,3 @@ bubbles: false,
     }
-    throwErrorIfNotUsable(this);
+    throwErrorIfUnavailable(this);
     this.element[internal_1.symbols.proxy] = this;
@@ -922,3 +920,3 @@ switch (this.type) {
     const addedChildren = [];
-    const listeners = internal_1.Listeners.from(this);
+    const listeners = this[internal_1.symbols.listeners];
     let isMutated = false;
@@ -934,12 +932,11 @@ switch (this.type) {
         {
-          if (this.isInit || !listeners?.mutate) {
+          if (listeners.mutation) {
+            const newText = children;
+            const oldText = this.children;
+            if (newText === oldText) break;
+            container.textContent = newText;
+            isMutated = true;
+          } else {
             container.textContent = children;
-            isMutated = true;
-            break;
           }
-          const newText = children;
-          const oldText = this.children;
-          if (newText === oldText) break;
-          container.textContent = newText;
-          isMutated = true;
           break;
@@ -955,8 +952,10 @@ }
             const oldChild = targetChildren[i];
-            throwErrorIfNotUsable(newChild, container);
+            throwErrorIfUnavailable(newChild, container);
             isMutated ||= newChild.element !== oldChild.element;
             if (newChild.element.parentNode !== container) {
               this.scope(newChild);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
+            } else if (!this.isInit) {
+              continue;
             }
+            internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
           }
@@ -973,5 +972,4 @@ if (container.firstChild) {
             const oldChild = targetChildren[i];
-            if (oldChild.element.parentNode !== container) {
-              internal_1.Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners.del(oldChild);
-            }
+            if (oldChild.element.parentNode === container) continue;
+            internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
           }
@@ -987,6 +985,8 @@ break;
               const newChild = sourceChildren[name];
-              throwErrorIfNotUsable(newChild, container);
-              this.scope(newChild);
-              newChild.element.parentNode !== container && container.appendChild(newChild.element);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
+              throwErrorIfUnavailable(newChild, container);
+              if (newChild.element.parentNode !== container) {
+                this.scope(newChild);
+                container.appendChild(newChild.element);
+              }
+              internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
               isMutated = true;
@@ -998,3 +998,2 @@ }
           const targetChildren = this.$children;
-          if (sourceChildren === targetChildren) break;
           for (const name in sourceChildren) {
@@ -1006,12 +1005,8 @@ if (!(0, alias_1.hasOwnProperty)(sourceChildren, name)) continue;
             if (newChild === oldChild) continue;
-            throwErrorIfNotUsable(newChild, container);
-            if (newChild !== oldChild && newChild.element.parentNode !== oldChild.element.parentNode) {
+            throwErrorIfUnavailable(newChild, container);
+            if (newChild.element.parentNode !== oldChild.element.parentNode) {
               this.scope(newChild);
               container.replaceChild(newChild.element, oldChild.element);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
-              internal_1.Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners.del(oldChild);
-            } else {
-              const ref = newChild.element.nextSibling;
-              container.insertBefore(newChild.element, oldChild.element);
-              container.insertBefore(oldChild.element, ref);
+              internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
+              internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
             }
@@ -1026,5 +1021,5 @@ isMutated = true;
     }
-    listeners?.dispatchDisconnectEvent(removedChildren);
-    listeners?.dispatchConnectEvent(addedChildren);
-    isMutated && listeners?.dispatchMutateEvent();
+    listeners.dispatchDisconnectEvent(removedChildren);
+    listeners.dispatchConnectEvent(addedChildren);
+    isMutated && listeners.dispatchMutateEvent();
   }
@@ -1034,3 +1029,3 @@ }
 _a = internal_1.symbols.listeners;
-function throwErrorIfNotUsable(child, newParent) {
+function throwErrorIfUnavailable(child, newParent) {
   const oldParent = child.element.parentNode;
@@ -1037,0 +1032,0 @@ if (!oldParent || oldParent === newParent || !(internal_1.symbols.proxy in oldParent)) return;

dist/listener.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

dist/query.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

dist/src/internal.d.ts

@@ -13,8 +13,8 @@ export declare namespace symbols {
     private readonly element;
-    static from(target: Target): Listeners | undefined;
-    static hasConnectionListener(target: Target): boolean;
+    static of(target: Target): Listeners | undefined;
     constructor(element: Element);
-    get mutate(): boolean;
-    get connect(): boolean;
-    get disconnect(): boolean;
+    get mutation(): boolean;
+    get connection(): boolean;
+    get disconnection(): boolean;
+    haveConnectionListener(): boolean;
     private readonly targets;
@@ -21,0 +21,0 @@ add(target: Target): void;

dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

identity.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

index.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -717,10 +717,5 @@ if(typeof exports === 'object' && typeof module === 'object')
 class Listeners {
-  static from(target) {
+  static of(target) {
     return target[symbols.listeners] ?? target.element[symbols.proxy]?.[symbols.listeners];
   }
-  static hasConnectionListener(target) {
-    const listeners = this.from(target);
-    if (!listeners) return false;
-    return listeners.targets.length > 0 || listeners.connect || listeners.disconnect;
-  }
   constructor(element) {
@@ -730,11 +725,14 @@ this.element = element;
   }
-  get mutate() {
+  get mutation() {
     return 'onmutate' in this.element && null != this.element['onmutate'];
   }
-  get connect() {
+  get connection() {
     return 'onconnect' in this.element && null != this.element['onconnect'];
   }
-  get disconnect() {
+  get disconnection() {
     return 'ondisconnect' in this.element && null != this.element['ondisconnect'];
   }
+  haveConnectionListener() {
+    return this.targets.length > 0 || this.connection || this.disconnection;
+  }
   add(target) {
@@ -749,3 +747,3 @@ const i = this.targets.indexOf(target);
   dispatchMutateEvent() {
-    if (!this.mutate) return;
+    if (!this.mutation) return;
     this.element.dispatchEvent(new Event('mutate', {
@@ -760,5 +758,5 @@ bubbles: false,
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchConnectEvent();
-      if (!listeners?.connect) continue;
+      if (!listeners?.connection) continue;
       target.element.dispatchEvent(new Event('connect', {
@@ -774,5 +772,5 @@ bubbles: false,
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchDisconnectEvent();
-      if (!listeners?.disconnect) continue;
+      if (!listeners?.disconnection) continue;
       target.element.dispatchEvent(new Event('disconnect', {
@@ -833,3 +831,3 @@ bubbles: false,
     }
-    throwErrorIfNotUsable(this);
+    throwErrorIfUnavailable(this);
     this.element[internal_1.symbols.proxy] = this;
@@ -922,3 +920,3 @@ switch (this.type) {
     const addedChildren = [];
-    const listeners = internal_1.Listeners.from(this);
+    const listeners = this[internal_1.symbols.listeners];
     let isMutated = false;
@@ -934,12 +932,11 @@ switch (this.type) {
         {
-          if (this.isInit || !listeners?.mutate) {
+          if (listeners.mutation) {
+            const newText = children;
+            const oldText = this.children;
+            if (newText === oldText) break;
+            container.textContent = newText;
+            isMutated = true;
+          } else {
             container.textContent = children;
-            isMutated = true;
-            break;
           }
-          const newText = children;
-          const oldText = this.children;
-          if (newText === oldText) break;
-          container.textContent = newText;
-          isMutated = true;
           break;
@@ -955,8 +952,10 @@ }
             const oldChild = targetChildren[i];
-            throwErrorIfNotUsable(newChild, container);
+            throwErrorIfUnavailable(newChild, container);
             isMutated ||= newChild.element !== oldChild.element;
             if (newChild.element.parentNode !== container) {
               this.scope(newChild);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
+            } else if (!this.isInit) {
+              continue;
             }
+            internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
           }
@@ -973,5 +972,4 @@ if (container.firstChild) {
             const oldChild = targetChildren[i];
-            if (oldChild.element.parentNode !== container) {
-              internal_1.Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners.del(oldChild);
-            }
+            if (oldChild.element.parentNode === container) continue;
+            internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
           }
@@ -987,6 +985,8 @@ break;
               const newChild = sourceChildren[name];
-              throwErrorIfNotUsable(newChild, container);
-              this.scope(newChild);
-              newChild.element.parentNode !== container && container.appendChild(newChild.element);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
+              throwErrorIfUnavailable(newChild, container);
+              if (newChild.element.parentNode !== container) {
+                this.scope(newChild);
+                container.appendChild(newChild.element);
+              }
+              internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
               isMutated = true;
@@ -998,3 +998,2 @@ }
           const targetChildren = this.$children;
-          if (sourceChildren === targetChildren) break;
           for (const name in sourceChildren) {
@@ -1006,12 +1005,8 @@ if (!(0, alias_1.hasOwnProperty)(sourceChildren, name)) continue;
             if (newChild === oldChild) continue;
-            throwErrorIfNotUsable(newChild, container);
-            if (newChild !== oldChild && newChild.element.parentNode !== oldChild.element.parentNode) {
+            throwErrorIfUnavailable(newChild, container);
+            if (newChild.element.parentNode !== oldChild.element.parentNode) {
               this.scope(newChild);
               container.replaceChild(newChild.element, oldChild.element);
-              internal_1.Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners.add(newChild);
-              internal_1.Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners.del(oldChild);
-            } else {
-              const ref = newChild.element.nextSibling;
-              container.insertBefore(newChild.element, oldChild.element);
-              container.insertBefore(oldChild.element, ref);
+              internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
+              internal_1.Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
             }
@@ -1026,5 +1021,5 @@ isMutated = true;
     }
-    listeners?.dispatchDisconnectEvent(removedChildren);
-    listeners?.dispatchConnectEvent(addedChildren);
-    isMutated && listeners?.dispatchMutateEvent();
+    listeners.dispatchDisconnectEvent(removedChildren);
+    listeners.dispatchConnectEvent(addedChildren);
+    isMutated && listeners.dispatchMutateEvent();
   }
@@ -1034,3 +1029,3 @@ }
 _a = internal_1.symbols.listeners;
-function throwErrorIfNotUsable(child, newParent) {
+function throwErrorIfUnavailable(child, newParent) {
   const oldParent = child.element.parentNode;
@@ -1037,0 +1032,0 @@ if (!oldParent || oldParent === newParent || !(internal_1.symbols.proxy in oldParent)) return;

listener.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.323",
+  "version": "0.0.324",
   "description": "A value-level and type-level DOM builder.",
@@ -5,0 +5,0 @@ "private": false,

query.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.323 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.324 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

src/internal.ts

@@ -18,10 +18,5 @@ import { splice } from 'spica/array';
 export class Listeners {
-  public static from(target: Target): Listeners | undefined {
+  public static of(target: Target): Listeners | undefined {
     return target[symbols.listeners] ?? target.element[symbols.proxy]?.[symbols.listeners];
   }
-  public static hasConnectionListener(target: Target): boolean {
-    const listeners = this.from(target);
-    if (!listeners) return false;
-    return listeners.targets.length > 0 || listeners.connect || listeners.disconnect;
-  }
   constructor(
@@ -31,14 +26,17 @@ private readonly element: Element,
   }
-  public get mutate(): boolean {
+  public get mutation(): boolean {
     return 'onmutate' in this.element
         && null != this.element['onmutate'];
   }
-  public get connect(): boolean {
+  public get connection(): boolean {
     return 'onconnect' in this.element
         && null != this.element['onconnect'];
   }
-  public get disconnect(): boolean {
+  public get disconnection(): boolean {
     return 'ondisconnect' in this.element
         && null != this.element['ondisconnect'];
   }
+  public haveConnectionListener(): boolean {
+    return this.targets.length > 0 || this.connection || this.disconnection;
+  }
   private readonly targets: Target[] = [];
@@ -54,3 +52,3 @@ public add(target: Target): void {
   public dispatchMutateEvent(): void {
-    if (!this.mutate) return;
+    if (!this.mutation) return;
     this.element.dispatchEvent(new Event('mutate', { bubbles: false, cancelable: false }));
@@ -64,5 +62,5 @@ }
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchConnectEvent();
-      if (!listeners?.connect) continue;
+      if (!listeners?.connection) continue;
       target.element.dispatchEvent(new Event('connect', { bubbles: false, cancelable: false }));
@@ -77,5 +75,5 @@ }
     for (const target of targets) {
-      const listeners = Listeners.from(target);
+      const listeners = Listeners.of(target);
       listeners?.dispatchDisconnectEvent();
-      if (!listeners?.disconnect) continue;
+      if (!listeners?.disconnection) continue;
       target.element.dispatchEvent(new Event('disconnect', { bubbles: false, cancelable: false }));
@@ -82,0 +80,0 @@ }

src/proxy.ts

@@ -97,3 +97,3 @@ import { isArray, hasOwnProperty } from 'spica/alias';
     }
-    throwErrorIfNotUsable(this);
+    throwErrorIfUnavailable(this);
     this.element[symbols.proxy] = this;
@@ -201,3 +201,3 @@ assert.deepStrictEqual({ ...this.element }, {});
     const addedChildren: El[] = [];
-    const listeners = Listeners.from(this);
+    const listeners = this[symbols.listeners];
     let isMutated = false;
@@ -212,12 +212,12 @@ switch (this.type) {
       case ElChildType.Text: {
-        if (this.isInit || !listeners?.mutate) {
-          container.textContent = children as El.Children.Text;
+        if (listeners.mutation) {
+          const newText = children;
+          const oldText = this.children;
+          if (newText === oldText) break;
+          container.textContent = newText as El.Children.Text;
           isMutated = true;
-          break;
         }
-        const newText = children;
-        const oldText = this.children;
-        if (newText === oldText) break;
-        container.textContent = newText as El.Children.Text;
-        isMutated = true;
+        else {
+          container.textContent = children as El.Children.Text;
+        }
         break;
@@ -232,9 +232,12 @@ }
           const oldChild = targetChildren[i];
-          throwErrorIfNotUsable(newChild, container);
+          throwErrorIfUnavailable(newChild, container);
           isMutated ||= newChild.element !== oldChild.element;
           if (newChild.element.parentNode !== container) {
             this.scope(newChild);
-            assert(!addedChildren.includes(newChild));
-            Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners!.add(newChild);
           }
+          else if (!this.isInit) {
+            continue;
+          }
+          assert(!addedChildren.includes(newChild));
+          Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
         }
@@ -252,7 +255,6 @@ if (container.firstChild) {
           const oldChild = targetChildren[i];
-          if (oldChild.element.parentNode !== container) {
-            assert(!removedChildren.includes(oldChild));
-            Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners!.del(oldChild);
-            assert(isMutated);
-          }
+          if (oldChild.element.parentNode === container) continue;
+          assert(!removedChildren.includes(oldChild));
+          Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
+          assert(isMutated);
         }
@@ -269,7 +271,9 @@ assert(container.children.length === sourceChildren.length);
             const newChild = sourceChildren[name];
-            throwErrorIfNotUsable(newChild, container);
-            this.scope(newChild);
-            newChild.element.parentNode !== container && container.appendChild(newChild.element);
+            throwErrorIfUnavailable(newChild, container);
+            if (newChild.element.parentNode !== container) {
+              this.scope(newChild);
+              container.appendChild(newChild.element);
+            }
             assert(!addedChildren.includes(newChild));
-            Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners!.add(newChild);
+            Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
             isMutated = true;
@@ -281,3 +285,2 @@ }
         const targetChildren = this.$children as El.Children.Struct;
-        if (sourceChildren === targetChildren) break;
         for (const name in sourceChildren) {
@@ -289,4 +292,4 @@ if (!hasOwnProperty(sourceChildren, name)) continue;
           if (newChild === oldChild) continue;
-          throwErrorIfNotUsable(newChild, container);
-          if (newChild !== oldChild && newChild.element.parentNode !== oldChild.element.parentNode) {
+          throwErrorIfUnavailable(newChild, container);
+          if (newChild.element.parentNode !== oldChild.element.parentNode) {
             this.scope(newChild);
@@ -296,12 +299,6 @@ container.replaceChild(newChild.element, oldChild.element);
             assert(!addedChildren.includes(newChild));
-            Listeners.hasConnectionListener(newChild) && addedChildren.push(newChild) && listeners!.add(newChild);
+            Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
             assert(!removedChildren.includes(oldChild));
-            Listeners.hasConnectionListener(oldChild) && removedChildren.push(oldChild) && listeners!.del(oldChild);
+            Listeners.of(oldChild)?.haveConnectionListener() && removedChildren.push(oldChild) && listeners.del(oldChild);
           }
-          else {
-            assert(newChild.element.parentNode === oldChild.element.parentNode);
-            const ref = newChild.element.nextSibling;
-            container.insertBefore(newChild.element, oldChild.element);
-            container.insertBefore(oldChild.element, ref);
-          }
           isMutated = true;
@@ -316,10 +313,10 @@ this.isObserverUpdate = true;
     }
-    listeners?.dispatchDisconnectEvent(removedChildren);
-    listeners?.dispatchConnectEvent(addedChildren);
+    listeners.dispatchDisconnectEvent(removedChildren);
+    listeners.dispatchConnectEvent(addedChildren);
     assert(isMutated || removedChildren.length + addedChildren.length === 0);
-    isMutated && listeners?.dispatchMutateEvent();
+    isMutated && listeners.dispatchMutateEvent();
   }
 }
 
-function throwErrorIfNotUsable(child: El, newParent?: ParentNode): void {
+function throwErrorIfUnavailable(child: El, newParent?: ParentNode): void {
   const oldParent = child.element.parentNode;
@@ -326,0 +323,0 @@ if (!oldParent || oldParent === newParent || !(symbols.proxy in oldParent)) return;

test/integration/index.test.ts

@@ -120,2 +120,9 @@ import { Shadow, HTML, SVG, El, Attrs, shadow, frag, html, define } from '../../index';
       assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
+      dom.children = [
+        HTML.li('4'),
+        HTML.li('5'),
+      ];
+      assert(dom.element.outerHTML === '<ul><li>4</li><li>5</li></ul>');
+      assert(dom.children.length === 2);
+      assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
 
@@ -122,0 +129,0 @@ // Property test

No alert changes

Worsened metrics

Total package byte prevSize

386982

decreased by-0.17%

Lines of code

7995

decreased by-0.1%

No dependency changes