@symbiotejs/symbiote 3.3.5 → 3.3.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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
+
+- **SSR hydration: generic property preservation.**
+  During SSR/ISO hydration, all primitive-valued bindings (`textContent`, `innerHTML`, `style.*`, `value`, etc.) now skip the initial write, preserving server-rendered DOM. Function bindings (event handlers) and non-null object bindings (component state) still fire immediately. Previously only `textContent` and attribute bindings were preserved.
+
+- **SSR hydration: Itemize API support.**
+  Auto-generated itemize item components now inherit `ssrMode`/`isoMode` from the parent. Server-rendered list items are preserved during hydration instead of being cleared and re-created.
+
 ## 3.3.5
 
 ### Fixed

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,19 +20,40 @@ export function itemizeProcessor(fr, fnCtx) {
         itemClass = window.customElements.get(itemTag);
       }
       if (!itemClass) {
-        itemClass = class extends fnCtx.Symbiote {
-          constructor() {
-            super();
-            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);
+        }
       }
-      while (el.firstChild) {
-        el.firstChild.remove();
+      if (!clientSSR) {
+        while (el.firstChild) {
+          el.firstChild.remove();
+        }
       }
       let repeatDataKey = el.getAttribute(DICT.LIST_ATTR);
       if (!fnCtx.has(repeatDataKey) && fnCtx.allowTemplateInits) {
@@ -87,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/core/tpl-processors.js

@@ -70,6 +70,9 @@ function domBindProcessor(fr, fnCtx) {
             );
           }
         }
+        let initVal = fnCtx.$[valKey];
+        let skipInit = fnCtx.ssrMode && !globalThis.__SYMBIOTE_SSR
+          && (isAttr || (typeof initVal !== 'function' && (initVal === null || typeof initVal !== 'object')));
         fnCtx.sub(valKey, (val) => {
           if (castType === 'double') {
             val = !!val;
@@ -91,7 +94,7 @@ function domBindProcessor(fr, fnCtx) {
               el[DICT.SET_LATER_KEY][prop] = val;
             }
           }
-        }, !(fnCtx.ssrMode && !globalThis.__SYMBIOTE_SSR && (prop === 'textContent' || isAttr)));
+        }, !skipInit);
       }
     });
     if (!globalThis.__SYMBIOTE_SSR) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.3.5",
+  "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,QAuFX"}
+{"version":3,"file":"itemizeProcessor.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor.js"],"names":[],"mappings":"AAUA,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QA8GX"}

package/types/core/tpl-processors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":";0BA0HgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC;;iCAzHqB,uBAAuB"}
+{"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":";0BA6HgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC;;iCA5HqB,uBAAuB"}