@skirbi/sugar 0.1.9 → 0.1.10

package/Changes

@@ -1,5 +1,10 @@
 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

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.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,30 +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;
-
-        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.10"
 }