@skirbi/sugar 0.0.9 → 0.0.10

package/Changes

@@ -1,5 +1,35 @@
 Revision history for @skirbi/sugar
 
+0.0.10       2026-02-24 03:09:34Z
+
+  * Improve Livewire/morphdom support in withConnectedSugar
+
+    In certain morph scenarios the host element instance remains the same
+    while its child nodes are replaced. In that case `connectedCallback`
+    is not triggered again.
+
+    The mixin now provides `_observeChildListOnce(when, fn)` which allows
+    components to react to child mutations and re-apply their compile logic
+    when necessary.
+
+    This keeps DOM-compiling components (e.g. semtic-steps in @skirbi/semtic)
+    stable even when morphing frameworks replace their internal markup without
+    recreating the custom element instance.
+
+    The pattern for a `connectedCallbackSugar` now becomes:
+
+      connectedCallbackSugar() {
+        this._compile();
+
+        this._observeChildListOnce(
+          () => this.querySelector(':scope > your-tag-here'),
+          () => this._compile()
+        );
+      }
+
+    Where `your-tag-here` represents the authored child element that
+    indicates the component has been reverted to its pre-compiled state.
+
 0.0.9       2026-02-23 10:56:27Z
 
   * Fix a bug for connectedCallbacks with Livewire

package/lib/index.mjs

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

package/lib/testing.mjs

@@ -56,23 +56,21 @@ export async function setupDomForTesting(
  *
  * This helper verifies:
  *
- * 1. `Class.exampleHTML` matches the provided `example` snippet.
- * 2. After mounting and lifecycle execution, the rendered output
- *    matches `Class.exampleRenderedHTML`.
+ * 1. `Class.exampleHTML` matches the provided `options.example` snippet.
+ * 2. After mounting and lifecycle execution, the rendered output matches
+ *    `Class.exampleRenderedHTML`.
  *
- * The component must define:
+ * The component class must define:
  *
- * - `static exampleHTML`
- * - `static exampleRenderedHTML`
+ * - `static exampleHTML` (string)
+ * - `static exampleRenderedHTML` (string)
  *
- * @template {typeof HTMLElement} T
+ * It may also define:
  *
- * @param {T & {
- *   register?: () => void,
- *   init?: () => void,
- *   exampleHTML: string,
- *   exampleRenderedHTML: string
- * }} Class
+ * - `static register()` (optional)
+ * - `static init()` (optional)
+ *
+ * @param {Function} Class
  *   The component class under test.
  *
  * @param {Object} options
@@ -82,7 +80,7 @@ export async function setupDomForTesting(
  * @param {string} options.example
  *   Expected authoring HTML to compare against `Class.exampleHTML`.
  *
- * @param {import('tap').Test} options.tap
+ * @param {Object} options.tap
  *   Tap test instance used for assertions.
  *
  * @returns {Promise<void>}

package/lib/with-connected-sugar.mjs

@@ -11,20 +11,41 @@ export const withConnectedSugar = (Base) =>
 
     _shouldRenderOnConnect() {
       const guard = this.constructor.renderGuardSelector;
-
-      if (guard) {
-        return !this.querySelector(guard);
-      }
+      if (guard) return !this.querySelector(guard);
 
       if (this._rendered) return false;
-
       this._rendered = true;
       return true;
     }
 
+    /**
+     * Install a single MutationObserver that calls `fn()` when direct children
+     * change and `when()` returns true.
+     *
+     * Intended for morphdom/livewire scenarios where the host stays the same
+     * instance.
+     *
+     * @param {Function} when - predicate
+     * @param {Function} fn - callback
+     */
+    _observeChildListOnce(when, fn) {
+      if (this._sugarMo) return;
+
+      this._sugarMo = new MutationObserver(() => {
+        if (when()) fn();
+      });
+
+      this._sugarMo.observe(this, { childList: true });
+    }
+
+    disconnectedCallback() {
+      // polite cleanup
+      this._sugarMo?.disconnect();
+      this._sugarMo = null;
+    }
+
     connectedCallback() {
       this._syncObservedAttributesToConfig();
-
       if (!this._shouldRenderOnConnect()) return;
 
       if (typeof this.connectedCallbackSugar === 'function') {

package/package.json

@@ -4,7 +4,7 @@
     "name": "Wesley Schwengle"
   },
   "bugs": {
-    "url": "https://gitlab.com/skirbi/sugar/-/issues"
+    "url": "https://gitlab.com/skirbi/skirbi/-/issues"
   },
   "dependencies": {
     "@opndev/util": "latest"
@@ -29,7 +29,7 @@
     "./testing": "./lib/testing.mjs",
     "./with-connected-sugar": "./lib/with-connected-sugar.mjs"
   },
-  "homepage": "https://gitlab.com/skirbi/sugar",
+  "homepage": "https://gitlab.com/skirbi/skirbi",
   "keywords": [
     "custom elements",
     "web components",
@@ -42,7 +42,7 @@
   "name": "@skirbi/sugar",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/skirbi/sugar.git"
+    "url": "git+https://gitlab.com/skirbi/skirbi.git"
   },
   "scripts": {
     "build": "rzil build",
@@ -53,5 +53,5 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.0.9"
+  "version": "0.0.10"
 }