@skirbi/sugar 0.0.9 → 0.0.11

package/Changes

@@ -1,5 +1,63 @@
 Revision history for @skirbi/sugar
 
+0.0.11       2026-02-24 16:53:49Z
+
+  * Fix comparing HTML nodes. Whitespace text nodes are a PITA, we deal with
+    them and now you can just compare two nodes regardless how you wrote it.
+    Whitespace kinda matters in HTML I guess, until it doesn't.  
+
+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.
+
+    The `_compile` function is part of the contract as it authors child
+    elements into the final DOM structure. But you are free give it any name
+    you'd like. An example implementation may look like this:
+
+      _compile() {
+        const steps = Array.from(this.children)
+          .filter(n => n.tagName?.toLowerCase() === 'x-step')
+          .map(n => n.textContent ?? '');
+
+        const frag = this.renderFromTemplate();
+        const ol = frag.querySelector('ol[data-steps]');
+
+        for (const label of steps) {
+          const li = document.createElement('li');
+          li.textContent = label;
+          ol.appendChild(li);
+        }
+
+        this.replaceChildren(frag);
+      }
+    }
+
 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.11";
 
 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>}
@@ -131,8 +129,29 @@ export async function assertComponentContract(Class, example) {
  */
 function htmlToFragment(html) {
   const tpl = document.createElement('template');
-  tpl.innerHTML = html.trim();
-  return tpl.content;
+  tpl.innerHTML = html.trim().normalize();
+  return stripWhitespaceTextNodes(tpl.content);
+}
+
+/**
+ * Strip whitespace textnodes from an HTML fragment
+ *
+ * Use primairly to sanitize HTML to compare it
+ *
+ * @param {node} node - an HTML node
+ * @returns {node}
+ */
+function stripWhitespaceTextNodes(node) {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === 3) { // TEXT_NODE
+      if (!child.nodeValue.trim()) {
+        child.remove();
+      }
+    } else {
+      stripWhitespaceTextNodes(child);
+    }
+  }
+  return node;
 }
 
 /**

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.11"
 }