@skirbi/sugar 0.1.8 → 0.1.9

package/Changes

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

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.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.8";
+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.8"
+  "version": "0.1.9"
 }