@symbiotejs/symbiote 3.3.6 → 3.3.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.3.7
+
+### Fixed
+
+- **SSR hydration: Itemize list duplication.**
+  Fixed itemize SSR hydration creating duplicate items. The processor now adopts the existing SSR item tag name and element class, skips the initial subscription fire, and sets `isoMode` on the item class so upgraded elements hydrate their existing content instead of re-rendering.
+
 ## 3.3.6
 
 ### Improved

package/core/itemizeProcessor.js

@@ -9,6 +9,8 @@ import { initPropFallback } from './initPropFallback.js';
  * @param {T} fnCtx
  */
 export function itemizeProcessor(fr, fnCtx) {
+  let clientSSR = fnCtx.ssrMode && !globalThis.__SYMBIOTE_SSR;
+
   ownElements(fr, `[${DICT.LIST_ATTR}]`).filter((el) => {
       return !el.matches(`[${DICT.LIST_ATTR}] [${DICT.LIST_ATTR}]`);
     }).forEach((el) => {
@@ -18,20 +20,37 @@ export function itemizeProcessor(fr, fnCtx) {
         itemClass = window.customElements.get(itemTag);
       }
       if (!itemClass) {
-        itemClass = class extends fnCtx.Symbiote {
-          constructor() {
-            super();
-            this.ssrMode = fnCtx.ssrMode;
-            this.isoMode = fnCtx.isoMode;
-            if (!itemTag) {
-              this.style.display = 'contents';
-            }
+        // During hydration, adopt existing SSR item tag and derive template
+        if (clientSSR && el.children.length > 0) {
+          let ssrTag = el.children[0].localName;
+          itemClass = window.customElements.get(ssrTag);
+          if (!itemClass) {
+            itemClass = class extends fnCtx.Symbiote {
+              constructor() {
+                super();
+                this.isoMode = true;
+                if (!itemTag) {
+                  this.style.display = 'contents';
+                }
+              }
+            };
+            itemClass.template = el.children[0].innerHTML;
+            itemClass.reg(ssrTag);
           }
-        };
-        itemClass.template = el.querySelector('template')?.innerHTML || el.innerHTML;
-        itemClass.reg(itemTag);
+        } else {
+          itemClass = class extends fnCtx.Symbiote {
+            constructor() {
+              super();
+              if (!itemTag) {
+                this.style.display = 'contents';
+              }
+            }
+          };
+          itemClass.template = el.querySelector('template')?.innerHTML || el.innerHTML;
+          itemClass.reg(itemTag);
+        }
       }
-      if (!(fnCtx.ssrMode && !globalThis.__SYMBIOTE_SSR)) {
+      if (!clientSSR) {
         while (el.firstChild) {
           el.firstChild.remove();
         }
@@ -91,7 +110,7 @@ export function itemizeProcessor(fr, fnCtx) {
         } else {
           console.warn(`[Symbiote] <${fnCtx.localName}>: itemize data must be Array or Object, got ${typeof data}:`, data);
         }
-      });
+      }, !clientSSR);
       if (!globalThis.__SYMBIOTE_SSR) {
         el.removeAttribute(DICT.LIST_ATTR);
         el.removeAttribute(DICT.LIST_ITEM_TAG_ATTR);

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "Symbiote.js - zero-dependency close-to-platform frontend library to build super-powered web components",
   "author": "team@rnd-pro.com",
   "license": "MIT",

package/types/core/itemizeProcessor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"itemizeProcessor.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor.js"],"names":[],"mappings":"AAUA,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QA2FX"}
+{"version":3,"file":"itemizeProcessor.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor.js"],"names":[],"mappings":"AAUA,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QA8GX"}