@miliastry/quasar 1.1.0 → 1.2.0

package/src/Visitors/DOMMorpher.ts

@@ -97,44 +97,7 @@ function morphNodes(parent: Node, newParent: Node): void {
         newNode.nodeType === 1 &&
         (oldNode as Element).tagName === (newNode as Element).tagName
       ) {
-        const oldEl = oldNode as Element
-        const newEl = newNode as Element
-
-        // Preserve interactive runtime states (such as <details open> for spoilerboxes and boxes)
-        if (oldEl.tagName === 'DETAILS' && oldEl.hasAttribute('open')) {
-          newEl.setAttribute('open', '')
-        }
-        if (oldEl.classList.contains('open')) {
-          newEl.classList.add('open')
-        }
-        if (oldEl.classList.contains('is-open')) {
-          newEl.classList.add('is-open')
-        }
-
-        // Sync attributes in-place.
-        //
-        // `attributes` se recorre por índice: `Array.from` asignaba un array
-        // por elemento y por sentido, dos por pareja morfada, y esto corre
-        // sobre la ventana cambiada en cada pulsación.
-        const newAttrs = newEl.attributes
-        for (let i = 0; i < newAttrs.length; i++) {
-          const attr = newAttrs[i]
-          if (oldEl.getAttribute(attr.name) !== attr.value) {
-            oldEl.setAttribute(attr.name, attr.value)
-          }
-        }
-        // Hacia atrás: quitar un atributo compacta la colección viva, y
-        // recorrerla hacia delante mientras se borra se salta el siguiente.
-        const oldAttrs = oldEl.attributes
-        for (let i = oldAttrs.length - 1; i >= 0; i--) {
-          const name = oldAttrs[i].name
-          if (!newEl.hasAttribute(name)) {
-            oldEl.removeAttribute(name)
-          }
-        }
-
-        // Morph child nodes recursively
-        morphNodes(oldEl, newEl)
+        morphElement(oldNode as Element, newNode as Element)
       } else {
         // Different tag or nodeType: replace node
         oldNode.parentNode!.replaceChild(newNode.cloneNode(true), oldNode)
@@ -142,3 +105,46 @@ function morphNodes(parent: Node, newParent: Node): void {
     }
   }
 }
+
+/**
+ * Reconcile two HTML elements of the same tag in-place.
+ * Syncs attributes, preserves interactive states (<details open>, .open classes),
+ * and recursively morphs child nodes.
+ */
+export function morphElement(oldEl: Element, newEl: Element): void {
+  // Preserve interactive runtime states (such as <details open> for spoilerboxes and boxes)
+  if (oldEl.tagName === 'DETAILS' && oldEl.hasAttribute('open')) {
+    newEl.setAttribute('open', '')
+  }
+  if (oldEl.classList.contains('open')) {
+    newEl.classList.add('open')
+  }
+  if (oldEl.classList.contains('is-open')) {
+    newEl.classList.add('is-open')
+  }
+
+  // Sync attributes in-place.
+  //
+  // `attributes` se recorre por índice: `Array.from` asignaba un array
+  // por elemento y por sentido, dos por pareja morfada, y esto corre
+  // sobre la ventana cambiada en cada pulsación.
+  const newAttrs = newEl.attributes
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i]
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value)
+    }
+  }
+  // Hacia atrás: quitar un atributo compacta la colección viva, y
+  // recorrerla hacia delante mientras se borra se salta el siguiente.
+  const oldAttrs = oldEl.attributes
+  for (let i = oldAttrs.length - 1; i >= 0; i--) {
+    const name = oldAttrs[i].name
+    if (!newEl.hasAttribute(name)) {
+      oldEl.removeAttribute(name)
+    }
+  }
+
+  // Morph child nodes recursively
+  morphNodes(oldEl, newEl)
+}