@skirbi/sugar 0.1.7 → 0.1.9

package/Changes

@@ -1,5 +1,40 @@
 Revision history for @skirbi/sugar
 
+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
+    data-sync. Value is a special case for inputs.
+
 0.1.7       2026-06-08 10:59:27Z
 
   * Add moveSlot to sugar, multiple components start to create the same logic.

package/README.md

@@ -46,6 +46,18 @@ And to register them:
 MyNewElement.register();
 ```
 
+## Installation
+
+Just like any other npm package:
+
+```sh
+npm install @skirbi/sugar
+```
+
+It is however advised to use an override on your project for `@skirbi/sugar` if
+you either use `@skirbi/semtic`, `@skibri/dibuho` or `@skirbi/bolbe`. This will
+allow correct hoisting.
+
 ## Observable patterns
 
 You can define attributes to be observable:

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-input.mjs

@@ -71,6 +71,37 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
     return parseBoolean(raw);
   }
 
+  /**
+   * Find the wrapped form control.
+   *
+   * @returns {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement|null}
+   */
+  get control() {
+    return this.querySelector(this.constructor.controlSelector);
+  }
+
+  set value(value) {
+    this._value = value ?? '';
+    this._syncValueToControl();
+  }
+
+  get value() {
+    const control = this.control;
+    if (control && 'value' in control) return control.value;
+
+    return this._value ?? this.getAttribute('value') ?? '';
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+
+
+    if (name === 'value') {
+      this._value = newValue ?? '';
+      this._syncValueToControl();
+    }
+  }
+
   /**
    * Resolve the effective label position for form-control components.
    *
@@ -217,6 +248,18 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
     this._attrObserver.observe(this, { attributes: true });
   }
 
+  /**
+   * Sync the host value attribute/property to the wrapped control property.
+   *
+   * @returns {void}
+   */
+  _syncValueToControl() {
+    const control = this.control;
+    if (!control || !('value' in control)) return;
+
+    control.value = this.getAttribute('value') ?? this._value ?? '';
+  }
+
   /**
    * One-liner for subclasses:
    * - find control in fragment
@@ -229,6 +272,10 @@ export class HTMLElementSugarInput extends HTMLElementSugar {
   enhanceControl(frag) {
     const control = this.findControl(frag);
 
+    if (this._value !== undefined) {
+      control.value = this._value;
+    }
+
     const deny = this.getForwardDenySet();
     const skip = this.getForwardSkipSet();
 

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,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-const VERSION = "0.1.7";
+const VERSION = "0.1.9";
 
 export { HTMLElementSugar } from './htmlelement.mjs';
 export { HTMLElementSugarInput } from './htmlelement-input.mjs';

package/lib/livewire.mjs

@@ -30,12 +30,15 @@ if (typeof document !== 'undefined') {
         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);
       };
     });
   });

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

@@ -54,7 +54,10 @@
     "release": "rzil release",
     "test": "tap"
   },
-  "sideEffects": true,
+  "sideEffects": [
+    "./livewire",
+    "./aliases-register"
+  ],
   "type": "module",
-  "version": "0.1.7"
+  "version": "0.1.9"
 }