@skirbi/sugar 0.1.0 → 0.1.1

package/Changes

@@ -1,5 +1,40 @@
 Revision history for @skirbi/sugar
 
+0.1.1       2026-06-04 15:34:20Z
+
+  * Added morph-* attributes to withConnectedSugar, the API of this is
+    unstable and should probably only be used when debugging Livewire morphing
+    or similar tools.
+
+    Some debugging artifacts have become morph-* attributes:
+
+    * morph-ignore    — disarm the observer entirely (no-op against full node
+                        replacement by Livewire, but prevents cascade
+                        re-renders during normal morphing)
+    * morph-child     — observe childList only (explicit opt-in)
+    * morph-attribute — observe attribute changes only
+    * morph-subtree   — observe the full descendant subtree
+    * morph-debug     — Enable debuging used by `_armMorphObserver`.
+
+    When none are present, the existing default (childList: true) applies.
+
+  * Add `withMorphObserverPaused(fn)` to withConnectedSugar.
+    Components that mutate their own children in morphedCallbackSugar or
+    connectedCallbackSugar risk triggering their own MutationObserver,
+    causing infinite loops.
+
+    `withMorphObserverPaused(fn)` disconnects the observer, runs `fn`, then
+    reconnects with the original options. It is a public API intended for
+    use by component authors.
+
+    Observer options are now stored as `_morphObserveOptions` when the
+    observer is armed, so they can be reused by withMorphObserverPaused
+    and any future callers without re-deriving them.
+
+    This again is a WIP feature that may change based on Livewire morphing
+    insights.
+
+
 0.1.0       2026-06-04 01:20:59Z
 
   * BREAKING: Sugar components may no longer manually define

package/lib/index.mjs

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-const VERSION = "0.1.0";
+const VERSION = "0.1.1";
 
 export { HTMLElementSugar } from './htmlelement.mjs';
 export { HTMLElementSugarInput } from './htmlelement-input.mjs';

package/lib/with-connected-sugar.mjs

@@ -27,19 +27,51 @@ export const withConnectedSugar = (Base) =>
 
     _armMorphObserver() {
       if (this._sugarMo) return;
+      if (this.hasAttribute('morph-ignore')) return;
 
-      this._sugarMo = new MutationObserver(() => {
-        if (this._shouldRenderOnMorph()) {
-          this.connectedCallbackSugar();
-          return;
-        }
-        if (this.hasRenderedShape() && this.morphedCallbackSugar) {
-          this.morphedCallbackSugar();
-          return;
+      const hasExplicit = this.hasAttribute('morph-child') ||
+                          this.hasAttribute('morph-attribute') ||
+                          this.hasAttribute('morph-subtree');
+
+      this._morphObserveOptions = hasExplicit ? {
+        childList: this.hasAttribute('morph-child'),
+        attributes: this.hasAttribute('morph-attribute'),
+        subtree: this.hasAttribute('morph-subtree'),
+      } : {
+        childList: true,
+      };
+
+      this._sugarMo = new MutationObserver((mutations) => {
+
+        if (this.hasAttribute('morph-debug')) {
+          console.group(`[sugar-morph] ${this.tagName}${this.id ? '#' + this.id : ''}${this.getAttribute('label') ? `[label="${this.getAttribute('label')}"]` : ''}${this.getAttribute('title') ? `[title="${this.getAttribute('title')}"]` : ''}`);
+          console.log('parent:', this.parentElement?.tagName);
+          console.log('mutations:', mutations.map(m => ({
+            type: m.type,
+            added: Array.from(m.addedNodes).map(n => n.nodeName),
+            removed: Array.from(m.removedNodes).map(n => n.nodeName)
+          })));
+          console.log('hasRenderedShape:', this.hasRenderedShape());
+          console.log('shouldRenderOnMorph:', this._shouldRenderOnMorph());
+          setTimeout(() => console.log('innerHTML after:', this.innerHTML), 0);
+          console.groupEnd();
         }
+
+
+        queueMicrotask(() => {
+          if (this._shouldRenderOnMorph()) {
+            this.connectedCallbackSugar();
+            return;
+          }
+          if (this.hasRenderedShape() && this.morphedCallbackSugar) {
+            this.morphedCallbackSugar();
+            return;
+          }
+        });
+
       });
 
-      this._sugarMo.observe(this, { childList: true });
+      this._sugarMo.observe(this, this._morphObserveOptions);
     }
 
     _shouldRenderOnMorph() {
@@ -58,6 +90,17 @@ export const withConnectedSugar = (Base) =>
       return true;
     }
 
+    withMorphObserverPaused(fn) {
+      this._sugarMo?.disconnect();
+      try {
+        fn();
+      } finally {
+        if (this._morphObserveOptions) {
+          this._sugarMo?.observe(this, this._morphObserveOptions);
+        }
+      }
+    }
+
     disconnectedCallback() {
       this._sugarMo?.disconnect();
       this._sugarMo = null;

package/package.json

@@ -52,5 +52,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.1.0"
+  "version": "0.1.1"
 }