@stacksjs/stx 0.2.96 → 0.2.98

package/dist/web-components.js

@@ -99,8 +99,9 @@ function generateWebComponentCode(options) {
 class ${name.replace(/\W/g, "")} extends ${baseElement} {
   constructor() {
     super()
+    this._initialized = false
+    ${shadowDOM ? "" : "this._slotContent = []"}
     ${shadowDOM ? 'this.attachShadow({ mode: "open" })' : ""}
-    ${template ? "this._createTemplate()" : "this._render()"}
   }
 
   ${template ? `
@@ -130,32 +131,28 @@ class ${name.replace(/\W/g, "")} extends ${baseElement} {
       })
     })` : `// Manual slot processing for non-shadow DOM mode
     const slots = this.querySelectorAll('[data-slot]')
-    const lightDOMChildren = Array.from(this.childNodes).filter(
-      node => node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute('data-slot')
-    )
 
     // Process named slots
     slots.forEach(slotEl => {
       const slotName = slotEl.getAttribute('data-slot')
-      const slottedContent = this.querySelector(\`[slot="\${slotName}"]\`)
-      if (slottedContent) {
-        // Replace slot placeholder with actual content
+      const slottedContent = this._slotContent.filter(
+        node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName
+      )
+      if (slottedContent.length > 0) {
         slotEl.innerHTML = ''
-        slotEl.appendChild(slottedContent.cloneNode(true))
+        slottedContent.forEach(content => slotEl.appendChild(content))
       }
     })
 
     // Process default slot
     const defaultSlot = this.querySelector('[data-slot=""]') || this.querySelector('[data-default-slot]')
     if (defaultSlot) {
-      const unslottedContent = Array.from(this.children).filter(
-        child => !child.hasAttribute('slot') && child !== defaultSlot
+      const unslottedContent = this._slotContent.filter(
+        node => node.nodeType !== Node.ELEMENT_NODE || !node.hasAttribute('slot')
       )
       if (unslottedContent.length > 0) {
         defaultSlot.innerHTML = ''
-        unslottedContent.forEach(content => {
-          defaultSlot.appendChild(content.cloneNode(true))
-        })
+        unslottedContent.forEach(content => defaultSlot.appendChild(content))
       }
     }`}
   }
@@ -168,13 +165,16 @@ class ${name.replace(/\W/g, "")} extends ${baseElement} {
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
       this[name] = newValue
-      ${template ? "" : "this._render()"}
+      ${template ? "" : "if (this._initialized) this._render()"}
     }
   }
   ` : ""}
 
   connectedCallback() {
-    // Component connected to the DOM
+    if (this._initialized) return
+    ${shadowDOM ? "" : "this._slotContent = Array.from(this.childNodes)"}
+    this._initialized = true
+    ${template ? "this._createTemplate()" : "this._render()"}
   }
 
   disconnectedCallback() {
@@ -254,7 +254,7 @@ ${attributes.map((attr) => {
     if (oldValue !== newValue) {
       const camelCase = name.replace(/-([a-z])/g, (_: string, letter: string) => letter.toUpperCase());
       (this as unknown as Record<string, unknown>)[\`_\${camelCase}\`] = this._parseAttributeValue(name, newValue);
-      ${template ? "" : "this._render();"}
+      ${template ? "" : "if (this._initialized) this._render();"}
     }
   }
 
@@ -306,11 +306,12 @@ ${propsInterface}
  */
 export class ${className} extends ${baseElement} {
 ${propertyDeclarations}
+  private _initialized = false;
+  ${shadowDOM ? "" : "private _slotContent: Node[] = [];"}
 
   constructor() {
     super();
     ${shadowDOM ? 'this.attachShadow({ mode: "open" });' : ""}
-    ${template ? "this._createTemplate();" : "this._render();"}
   }
 ${templateMethod}
 ${shadowDOM ? `
@@ -330,19 +331,34 @@ ${shadowDOM ? `
     slots.forEach((slotEl) => {
       const slotName = slotEl.getAttribute('data-slot');
       if (slotName) {
-        const slottedContent = this.querySelector(\`[slot="\${slotName}"]\`);
-        if (slottedContent) {
+        const slottedContent = this._slotContent.filter(
+          node => node.nodeType === Node.ELEMENT_NODE && (node as Element).getAttribute('slot') === slotName
+        );
+        if (slottedContent.length > 0) {
           slotEl.innerHTML = '';
-          slotEl.appendChild(slottedContent.cloneNode(true));
+          slottedContent.forEach(content => slotEl.appendChild(content));
         }
       }
     });
+    const defaultSlot = this.querySelector('[data-slot=""]') || this.querySelector('[data-default-slot]');
+    if (defaultSlot) {
+      const unslottedContent = this._slotContent.filter(
+        node => node.nodeType !== Node.ELEMENT_NODE || !(node as Element).hasAttribute('slot')
+      );
+      if (unslottedContent.length > 0) {
+        defaultSlot.innerHTML = '';
+        unslottedContent.forEach(content => defaultSlot.appendChild(content));
+      }
+    }
   }`}
 ${observedAttributesCode}
 ${gettersSetters}
 
   connectedCallback(): void {
-    // Component connected to the DOM
+    if (this._initialized) return;
+    ${shadowDOM ? "" : "this._slotContent = Array.from(this.childNodes);"}
+    this._initialized = true;
+    ${template ? "this._createTemplate();" : "this._render();"}
   }
 
   disconnectedCallback(): void {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.96",
+  "version": "0.2.98",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,16 +117,16 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.6",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/sanitizer": "0.2.96",
+    "@stacksjs/sanitizer": "0.2.98",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.96",
-    "bunfig": "^0.15.14",
-    "stx-router": "0.2.96",
+    "bun-plugin-stx": "0.2.98",
+    "bunfig": "^0.15.15",
+    "stx-router": "0.2.98",
     "ts-broadcasting": "^0.0.8",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "optionalDependencies": {
-    "@stacksjs/desktop": "0.2.96"
+    "@stacksjs/desktop": "0.2.98"
   }
 }