@skirbi/sugar 0.1.9 → 0.1.11

package/Changes

@@ -1,5 +1,16 @@
 Revision history for @skirbi/sugar
 
+0.1.11       2026-07-01 04:10:34Z
+
+  *  Debugging session start. There is a weird case of it works via local file
+     and not via npm. So I can't really rely on the local file mounts. Ship the
+     debug.
+
+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

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/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/index.mjs

@@ -2,12 +2,12 @@
 //
 // SPDX-License-Identifier: MIT
 
-const VERSION = "0.1.9";
+const VERSION = "0.1.11";
 
 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

@@ -15,31 +15,99 @@
  *
  * Only import this when using Sugar components inside a Livewire application.
  */
+console.log('[sugar-livewire] eval', performance.now())
+
+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,
+    perf: performance.now(),
+  });
+
+  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'),
+        perf: performance.now(),
+      });
+
+      console.log('[sugar-livewire] processEffects hit', {
+        hasHtml: !!effects.html,
+        sugarHydrated: !!effects._sugarHydrated,
+        perf: performance.now(),
+      });
+
+      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('perf:\n',performance.now());
+        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;
-
-        console.log(effects.html);
-
-        Promise.resolve().then(() => Promise.resolve().then(() => {
-          effects.html = staging.innerHTML;
-          effects._sugarHydrated = true;
-          staging.remove();
-          original(effects);
-        }));
-        console.log(effects.html);
-      };
-    });
+  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/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": {
@@ -55,9 +56,11 @@
     "test": "tap"
   },
   "sideEffects": [
+    "lib/livewire.mjs",
+    "lib/aliases-register.mjs",
     "./livewire",
     "./aliases-register"
   ],
   "type": "module",
-  "version": "0.1.9"
+  "version": "0.1.11"
 }