@skirbi/sugar 0.1.8 → 0.1.10

package/Changes

@@ -1,5 +1,40 @@
 Revision history for @skirbi/sugar
 
+0.1.10       2026-07-01 01:54:46Z
+
+  * Add tests to semtic-select
+  * Debugging artifacts in livewire.mjs
+
+0.1.9       2026-06-10 21:49:27Z
+
+  * Add wc:rendered custom event to sugar
+
+    When components load the order in which they load seems kind of totally
+    random. This causes multiple connects and disconnects. Now, the Custom
+    Element spec defines a `moveBefore()` method, but unfortunatly, that
+    isn't supported by all browsers, most notably Safari. Which is also a
+    massive consumer of webcomponents in the whole Apple ecosystem.
+
+    The workaround to this problem is by giving sugar a way to detect if it
+    is inside the DOM-tree of another webcomponent. If sugar is inside a
+    webcomponent it will wait until its parent is rendered to actually
+    render itself. Within a page where all components are sugared, we can
+    safely say that parents are always rendered first, minimizing the amount
+    of (dis)connect calls.
+
+    It does this by looking at `el._internals` and checks for the rendered
+    state.
+
+    When we are part of a webcomponent chain where the parent isn't a
+    sugared component, we still wait for the parent to finish and hope our
+    parent does similar logic.
+
+    This approach is simply a workaround until Safari (and others) supports
+    `moveBefore`.
+
+  * Made sideEffects actually target files. The true was breaking things in
+    ways I didn't expect.
+
 0.1.8       2026-06-08 22:43:46Z
 
   * Forward value for htmlelement-input.mjs in all cases not just with

package/lib/boolean.mjs

@@ -1,22 +1 @@
-// SPDX-FileCopyrightText: 2025 Wesley Schwengle <wesleys@opperschaap.net>
-//
-// SPDX-License-Identifier: MIT
-
-/**
- * Normalize an HTML attribute value to a boolean.
- *
- * This function interprets a variety of string-like inputs as either `true` or `false`:
- * - Empty string ("") becomes true (e.g. <input disabled>)
- * - "false" and "0" become false
- * - All other defined values become true
- *
- * @param {string | null | undefined} value - The attribute value to parse
- * @returns {boolean} The normalized boolean result
- */
-export function parseBoolean(value) {
-  if (value === null || value === undefined) return false;
-
-  const val = String(value).toLowerCase().trim();
-
-  return val !== 'false' && val !== '0';
-}
+export { parseBoolean } from '@opndev/html';

package/lib/fakedom.mjs

@@ -40,6 +40,7 @@ export async function setupDomForTesting(
   global.document = dom.window.document;
   global.window = dom.window;
   global.MutationObserver = dom.window.MutationObserver;
+  global.CustomEvent = dom.window.CustomEvent;
 
   const projectRoot = process.cwd();
 

package/lib/htmlelement-select.mjs

@@ -156,11 +156,12 @@ export class HTMLElementSugarSelect extends HTMLElementSugarInput {
     else if (hasEndpoint) {
       this._setupRemote(select, searchEl, cfg);
     }
-    else {
-      if (cfg.placeholder) this._addPlaceholder(select, cfg.placeholder);
-
-      for (const option of authoredOptions) {
-        select.appendChild(option);
+    else  {
+      if (hasAuthored) {
+        this._setAuthoredOptions(select, authoredOptions, cfg);
+      }
+      else {
+        this._setOptions(select, opts, cfg);
       }
 
       if (searchEl) this._setupLocalSearch(select, searchEl);
@@ -173,6 +174,16 @@ export class HTMLElementSugarSelect extends HTMLElementSugarInput {
     return select;
   }
 
+  _setAuthoredOptions(select, authoredOptions, cfg) {
+    this._clearOptions(select);
+
+    if (cfg.placeholder) this._addPlaceholder(select, cfg.placeholder);
+
+    for (const node of authoredOptions) {
+      select.appendChild(node);
+    }
+  }
+
   // TODO: getByPath(x, json) might want to return a console.warn when it
   // returns undefined. This would help developers spot mistakes? Yes/no/maybe?
 

package/lib/htmlelement.mjs

@@ -324,6 +324,7 @@ export class HTMLElementSugar extends HTMLElement {
     this.config = {
       ...(this.constructor.defaultConfig ?? {})
     };
+    this._internals = this.attachInternals();
   }
 
   /**

package/lib/index.mjs

@@ -2,12 +2,12 @@
 //
 // SPDX-License-Identifier: MIT
 
-const VERSION = "0.1.8";
+const VERSION = "0.1.10";
 
 export { HTMLElementSugar } from './htmlelement.mjs';
 export { HTMLElementSugarInput } from './htmlelement-input.mjs';
 export { HTMLElementSugarSelect } from './htmlelement-select.mjs';
-export { parseBoolean } from './boolean.mjs';
+export { parseBoolean } from '@opndev/html';
 export { registerDevAlias, applyDevAliases } from './aliases.mjs';
 export { registerAliases } from './aliases-register.mjs';
 export { withConnectedSugar } from './with-connected-sugar.mjs';

package/lib/livewire.mjs

@@ -16,27 +16,105 @@
  * Only import this when using Sugar components inside a Livewire application.
  */
 
+/*
+console.log('[sugar-livewire] module loaded', {
+  hasLivewire: !!window.Livewire,
+  hasHook: !!window.Livewire?.hook,
+});
+*/
+
+let registered = false;
+
+
+/**
+ * Registers the Sugar Livewire hydration hook.
+ *
+ * @returns {void}
+ */
+function registerSugarLivewire() {
+/*
+  console.log('[sugar-livewire] register called', {
+    registered,
+    hasLivewire: !!window.Livewire,
+    hasHook: !!window.Livewire?.hook,
+  });
+*/
+
+  if (registered) return;
+  if (!window.Livewire?.hook) return;
+
+  registered = true;
+
+  window.Livewire.hook('component.init', ({ component }) => {
+
+ //   console.log('[sugar-livewire] component.init hit', component.id);
+
+    const original = component.processEffects.bind(component);
+
+component.processEffects = function processSugarEffects(effects) {
+/*
+  console.log('[sugar-livewire] definitions', {
+    dibuho: !!customElements.get('dibuho-container-panel'),
+    panel: !!customElements.get('semtic-panel'),
+    header: !!customElements.get('semtic-header'),
+  });
+
+  console.log('[sugar-livewire] processEffects hit', {
+    hasHtml: !!effects.html,
+    sugarHydrated: !!effects._sugarHydrated,
+  });
+*/
+
+  if (!effects.html) return original(effects);
+  if (effects._sugarHydrated) return original(effects);
+
+  const before = effects.html;
+
+  const staging = document.createElement('div');
+  staging.style.display = 'none';
+  document.body.appendChild(staging);
+
+  try {
+    staging.innerHTML = before;
+
+    const after = staging.innerHTML;
+
+    effects.html = after;
+    effects._sugarHydrated = true;
+
+/*
+    console.group('[sugar-livewire] html');
+    console.log('before:\n', before);
+    console.log('after:\n', after);
+    console.log('changed:', before !== after);
+    console.log('handoff:\n', effects.html);
+    console.log('handoff is after:', effects.html === after);
+    console.groupEnd();
+*/
+
+    return original(effects);
+  } finally {
+    staging.remove();
+  }
+};
+
+  });
+}
+
 if (typeof document !== 'undefined') {
-  document.addEventListener('livewire:init', () => {
-    window.Livewire.hook('component.init', ({ component }) => {
-      const original = component.processEffects.bind(component);
-
-      component.processEffects = function(effects) {
-        if (!effects.html) return original(effects);
-        if (effects._sugarHydrated) return original(effects);
-
-        const staging = document.createElement('div');
-        staging.style.display = 'none';
-        document.body.appendChild(staging);
-        staging.innerHTML = effects.html;
-
-        Promise.resolve().then(() => Promise.resolve().then(() => {
-          effects.html = staging.innerHTML;
-          effects._sugarHydrated = true;
-          staging.remove();
-          original(effects);
-        }));
-      };
-    });
+  document.addEventListener('livewire:init', registerSugarLivewire);
+
+  queueMicrotask(() => {
+    registerSugarLivewire();
   });
 }
+
+document.addEventListener('livewire:init', () => {
+  ///console.log('[sugar-livewire] livewire:init heard');
+  registerSugarLivewire();
+});
+
+queueMicrotask(() => {
+  //console.log('[sugar-livewire] microtask fallback');
+  registerSugarLivewire();
+});

package/lib/testing.mjs

@@ -12,7 +12,7 @@ import t from 'tap';
  * This helper verifies:
  *
  * 1. `Class.exampleHTML` matches the provided `options.example` snippet.
- * 2. After mounting and lifecycle execution, the rendered output matches
+ * 1. After mounting and lifecycle execution, the rendered output matches
  *    `Class.exampleRenderedHTML`.
  *
  * The component class must define:

package/lib/with-connected-sugar.mjs

@@ -2,20 +2,83 @@
 //
 // SPDX-License-Identifier: MIT
 
+const sugarState = new WeakMap();
+
 export const withConnectedSugar = (Base) =>
   class extends Base {
     static morphTriggerSelector = '';
 
     connectedCallback() {
+      if (!sugarState.has(this)) {
+        sugarState.set(this, {
+          rendered: false,
+          firstUpdatedCalled: false,
+        });
+      }
+      const state = sugarState.get(this);
+
       this._syncObservedAttributesToConfig();
       this._armMorphObserver();
+
       if (this.connectedCallbackSugarOnce) {
         this.connectedCallbackSugarOnce();
       }
 
       if (this._shouldRenderOnConnect()) {
-        this.connectedCallbackSugar();
+        const wcParent = this._findWcParent();
+
+        const render = () => {
+
+          this.connectedCallbackSugar();
+          state.rendered = true;
+
+          const event = new CustomEvent('wc:rendered', { bubbles: false });
+          this.dispatchEvent(event);
+
+          if (!state.firstUpdatedCalled) {
+            Promise.resolve().then(() => {
+              state.firstUpdatedCalled = true;
+              this.firstUpdatedSugar?.();
+            });
+          }
+        };
+
+        this.renderIfParent(wcParent, render);
+      }
+    }
+
+    renderIfParent(parent = null, cb) {
+
+      if (!parent || !sugarState.has(parent)) {
+        cb();
+        return;
+      }
+      const parentState = sugarState.get(parent);
+      if (parentState.rendered) {
+        cb();
+        return;
+      }
+
+      const timeout = setTimeout(cb, 1000);
+      parent.addEventListener('wc:rendered', () => {
+        clearTimeout(timeout);
+        cb();
+      }, { once: true });
+    }
+
+
+    _findWcParent() {
+      let el = this.parentElement;
+      while (el) {
+        if (el.tagName?.includes('-')) {
+          if (el._internals || el._sugarRendered !== undefined) {
+            return el;
+          }
+          return null;
+        }
+        el = el.parentElement;
       }
+      return null;
     }
 
     _syncObservedAttributesToConfig() {

package/package.json

@@ -7,7 +7,8 @@
     "url": "https://gitlab.com/skirbi/skirbi/-/issues"
   },
   "dependencies": {
-    "@opndev/util": "latest"
+    "@opndev/html": ">=0.0.3",
+    "@opndev/util": "*"
   },
   "description": "Lightweight base layer for writing custom elements with declarative attributes and template sugar.",
   "devDependencies": {
@@ -54,7 +55,12 @@
     "release": "rzil release",
     "test": "tap"
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "lib/livewire.mjs",
+    "lib/aliases-register.mjs",
+    "./livewire",
+    "./aliases-register"
+  ],
   "type": "module",
-  "version": "0.1.8"
+  "version": "0.1.10"
 }