@symbiotejs/symbiote 3.5.3 → 3.5.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.5.4
+
+### Fixed
+
+- **SSR: `bindAttributes()` crash in linkedom.** `observedAttributes` is a getter-only property in linkedom — direct assignment threw. Now uses `Object.defineProperty` with a configurable getter.
+
+- **SSR: `renderCallback()` crash from browser-only APIs.** Components using `IntersectionObserver`, `window.location`, etc. in `renderCallback` crashed the entire SSR process. Now wrapped in try-catch during SSR (`__SYMBIOTE_SSR`); browser-side errors still re-throw normally.
+
 ## 3.5.2
 
 ### Fixed

package/README.md

@@ -1,7 +1,7 @@
 [![Tests](https://github.com/symbiotejs/symbiote.js/actions/workflows/tests.yml/badge.svg)](https://github.com/symbiotejs/symbiote.js/actions/workflows/tests.yml)
 [![npm version](https://img.shields.io/npm/v/@symbiotejs/symbiote)](https://www.npmjs.com/package/@symbiotejs/symbiote)
 [![npm downloads](https://img.shields.io/npm/dm/@symbiotejs/symbiote)](https://www.npmjs.com/package/@symbiotejs/symbiote)
-![bundle size](https://img.shields.io/badge/brotli-6.4_kb-blue)
+![bundle size](https://img.shields.io/badge/brotli-5.9_kb-blue)
 ![types](https://img.shields.io/badge/types-JSDoc+d.ts-blue)
 ![license](https://img.shields.io/badge/license-MIT-green)
 
@@ -13,7 +13,7 @@ A lightweight, standards-first UI library built on Web Components. No virtual DO
 
 Symbiote.js gives you the convenience of a modern framework while staying close to the native platform — HTML, CSS, and DOM APIs. Components are real custom elements that work everywhere: in any framework, in plain HTML, or in a micro-frontend architecture. And with **isomorphic mode**, the same component code works on the server and the client — server-rendered pages hydrate automatically, no diffing, no mismatch errors.
 
-## What's new in 3.x
+## What's new in v3
 
 - **Server-Side Rendering** — render components to HTML with `SSR.processHtml()` or stream chunks with `SSR.renderToStream()`. Client-side hydration via `ssrMode` attaches bindings to existing DOM without re-rendering.
 - **Isomorphic components** — `isoMode` flag makes components work in both SSR and client-only scenarios automatically. If server-rendered content exists, it hydrates; otherwise it renders the template from scratch. One component, zero conditional logic.
@@ -336,12 +336,12 @@ CSS values are parsed automatically — quoted strings become strings, numbers b
 
 | Library | Minified | Gzip | Brotli |
 |---------|----------|------|--------|
-| **Symbiote.js** (core) | 20.2 kb | 7.1 kb | **6.4 kb** |
-| **Symbiote.js** (full, with AppRouter) | 24.4 kb | 8.5 kb | **7.6 kb** |
+| **Symbiote.js** (core) | 18.9 kb | 6.6 kb | **5.9 kb** |
+| **Symbiote.js** (full, with AppRouter) | 23.2 kb | 7.9 kb | **7.2 kb** |
 | **Lit** 3.3 | 15.5 kb | 6.0 kb | **~5.1 kb** |
 | **React 19 + ReactDOM** | ~186 kb | ~59 kb | **~50 kb** |
 
-Symbiote and Lit have similar base sizes, but Symbiote's **6.4 kb** core includes more built-in features: global state management, lists (itemize API), exit animations, computed properties etc. Lit needs additional packages for comparable features. React is **~8× larger** before adding a router, state manager, or SSR framework.
+Symbiote and Lit have similar base sizes, but Symbiote's **5.9 kb** core includes more built-in features: global state management, lists (itemize API), exit animations, computed properties etc. Lit needs additional packages for comparable features. React is **~8× larger** before adding a router, state manager, or SSR framework.
 
 ## Browser support
 

package/core/Symbiote.js

@@ -142,7 +142,11 @@ export class Symbiote extends HTMLElement {
         fr && ((shadow && this.shadowRoot.appendChild(fr)) || this.appendChild(fr));
       }
       this.#initCallback();
-      this.renderCallback?.();
+      try {
+        this.renderCallback?.();
+      } catch (e) {
+        if (!globalThis.__SYMBIOTE_SSR) throw e;
+      }
     };
 
     if (this.#super.shadowStyleSheets) {
@@ -527,6 +531,7 @@ export class Symbiote extends HTMLElement {
 
   destructionDelay = 100;
   disconnectedCallback() {
+    if (globalThis.__SYMBIOTE_SSR) return;
     // if element wasn't connected, there is no need to disconnect it
     if (!this.connectedOnce) {
       return;
@@ -587,9 +592,14 @@ export class Symbiote extends HTMLElement {
   /** @param {Object<string, string>} desc */
   static bindAttributes(desc) {
     /** @type {String[]} */
-    this.observedAttributes = [ 
+    let attrs = [
+      // @ts-ignore - observedAttributes is a native HTMLElement static getter
       ...new Set((this.observedAttributes || []).concat(Object.keys(desc)))
     ];
+    Object.defineProperty(this, 'observedAttributes', {
+      configurable: true,
+      get() { return attrs; },
+    });
     /** @private */
     this.__attrDesc = desc;
   }

package/node/SSR.js

@@ -342,9 +342,6 @@ export class SSR {
    * Called automatically by processHtml(). Call manually only after renderToString/renderToStream.
    */
   static destroy() {
-    if (SSR.#doc) {
-      SSR.#doc.body.innerHTML = '';
-    }
     delete globalThis.__SYMBIOTE_SSR;
     delete globalThis.document;
     delete globalThis.window;
@@ -375,6 +372,13 @@ export class SSR {
    * ```
    */
   static async processHtml(html, options = {}) {
+    let doctype = '';
+    let doctypeMatch = html.match(/^(\s*<!doctype[^>]*>\s*)/i);
+    if (doctypeMatch) {
+      doctype = doctypeMatch[1];
+      html = html.slice(doctypeMatch[0].length);
+    }
+
     let autoInited = !SSR.#doc;
     if (autoInited) {
       await SSR.init();
@@ -385,11 +389,10 @@ export class SSR {
     for (let child of SSR.#doc.body.childNodes) {
       result += serializeNode(child, emittedStyles, options.nonce);
     }
-    SSR.#doc.body.innerHTML = '';
     if (autoInited) {
       SSR.destroy();
     }
-    return result;
+    return doctype + result;
   }
 
   /**
@@ -422,7 +425,6 @@ export class SSR {
       html = serializeElement(el, new Set(), options.nonce);
       el.remove();
     }
-    SSR.#doc.body.innerHTML = '';
     return html;
   }
 
@@ -454,7 +456,6 @@ export class SSR {
       yield* streamElement(el, new Set(), options.nonce);
       el.remove();
     }
-    SSR.#doc.body.innerHTML = '';
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.5.3",
+  "version": "3.5.5",
   "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/Symbiote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Symbiote.d.ts","sourceRoot":"","sources":["../../core/Symbiote.js"],"names":[],"mappings":";;AAoBA,sBADc,CAAC;IAuBb,cADW,mBAAmB,CACjB;IAEb,iCAEC;IAED,8BAEC;IAkBD,wBAAgB;IA0JhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MA0CX;IAuQD,qCAA+B;IAoC/B,iDAFa,OAAO,QAAQ,CAkB3B;IAED,wBAKC;IAGD;;aAOC;IAmHD,6BADY,SAAS,aAAa,QAOjC;IAGD,+BADY,SAAS,aAAa,QAOjC;IAGD,8BADY,SAAS,aAAa,EAIjC;IAGD,gCADY,SAAS,aAAa,EAIjC;IApkBD,cA6BC;IArID,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BAmFnC;IApDG,aAAiD;IAyDnD,OADW,CAAC,CACoB;IAEhC;;MAAmC;IAEnC,oBADW,GAAG,CAAC,CAAC,EAAE,EAAE,gBAAgB,gBAAW,EAAE,KAAK,eAAU,KAAK,IAAI,CAAC,CACvC;IAEnC;;MAA8B;IAC9B,kBAAwB;IAExB,qBAAwB;IAExB,sBAAyB;IAEzB,wBAA0B;IAE1B,0BAA6B;IAI7B,iBAAoB;IAEpB,6BAAgC;IAEhC,mBAAsB;IAEtB,4BAA8B;IAIhC,yBAEC;IAGD,sBASC;IAGD,4BAKC;IAGD,6BAEC;IAuDD,IALuB,CAAC,SAAX,MAAO,CAAE,QACX,CAAC,WACD,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wBAuC/B;IAGD,2BAIC;IAGD,uBAIC;IAQD,IALuB,CAAC,SAAX,MAAO,CAAE,qBAEX,CAAC,CAAC,CAAC,CAAC,2BAOd;IAMD,UAHW,OAAO,CAAC,CAAC,CAAC,2BAOpB;IAGD,SADc,CAAC,CA6Bd;IAMD,YAHW,OAAO,CAAC,CAAC,CAAC,mCAcpB;IAED,8BAgBC;IAdG,4CASE;IAmFF,0BAAwC;IAwB1C,uBAAyB;IAG3B,0BAEC;IAED,wBAAoB;IAUpB,yBAAuB;IACvB,6BA0BC;IA0CD,oEAeC;IAMD,yDAoBC;IAYD,0BAME;IAMF,0CAFW,GAAG,QAgBb;IAED,yBAGC;IAOD,8EAmBC;;CA+BF;;mBAjuBkB,aAAa;qBAEX,iBAAiB;2BACX,iBAAiB"}
+{"version":3,"file":"Symbiote.d.ts","sourceRoot":"","sources":["../../core/Symbiote.js"],"names":[],"mappings":";;AAoBA,sBADc,CAAC;IAuBb,cADW,mBAAmB,CACjB;IAEb,iCAEC;IAED,8BAEC;IAkBD,wBAAgB;IA8JhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MA0CX;IAuQD,qCAA+B;IAqC/B,iDAFa,OAAO,QAAQ,CAkB3B;IAED,wBAKC;IAGD;;aAYC;IAmHD,6BADY,SAAS,aAAa,QAOjC;IAGD,+BADY,SAAS,aAAa,QAOjC;IAGD,8BADY,SAAS,aAAa,EAIjC;IAGD,gCADY,SAAS,aAAa,EAIjC;IA1kBD,cA6BC;IAzID,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BAuFnC;IAxDG,aAAiD;IA6DnD,OADW,CAAC,CACoB;IAEhC;;MAAmC;IAEnC,oBADW,GAAG,CAAC,CAAC,EAAE,EAAE,gBAAgB,gBAAW,EAAE,KAAK,eAAU,KAAK,IAAI,CAAC,CACvC;IAEnC;;MAA8B;IAC9B,kBAAwB;IAExB,qBAAwB;IAExB,sBAAyB;IAEzB,wBAA0B;IAE1B,0BAA6B;IAI7B,iBAAoB;IAEpB,6BAAgC;IAEhC,mBAAsB;IAEtB,4BAA8B;IAIhC,yBAEC;IAGD,sBASC;IAGD,4BAKC;IAGD,6BAEC;IAuDD,IALuB,CAAC,SAAX,MAAO,CAAE,QACX,CAAC,WACD,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wBAuC/B;IAGD,2BAIC;IAGD,uBAIC;IAQD,IALuB,CAAC,SAAX,MAAO,CAAE,qBAEX,CAAC,CAAC,CAAC,CAAC,2BAOd;IAMD,UAHW,OAAO,CAAC,CAAC,CAAC,2BAOpB;IAGD,SADc,CAAC,CA6Bd;IAMD,YAHW,OAAO,CAAC,CAAC,CAAC,mCAcpB;IAED,8BAgBC;IAdG,4CASE;IAmFF,0BAAwC;IAwB1C,uBAAyB;IAG3B,0BAEC;IAED,wBAAoB;IAUpB,yBAAuB;IACvB,6BA2BC;IA+CD,oEAeC;IAMD,yDAoBC;IAYD,0BAME;IAMF,0CAFW,GAAG,QAgBb;IAED,yBAGC;IAOD,8EAmBC;;CA+BF;;mBA3uBkB,aAAa;qBAEX,iBAAiB;2BACX,iBAAiB"}

package/types/node/SSR.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SSR.d.ts","sourceRoot":"","sources":["../../node/SSR.js"],"names":[],"mappings":"AAsQA;IAEE,8BAAmB;IACnB,8BAAmB;IAMnB;;;OAkEC;IAMD,uBAeC;IAkBD,yBAZW,MAAM,YACN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,OAAO,CAAC,MAAM,CAAC,CA0B3B;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,MAAM,CAyBlB;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,cAAc,CAAC,MAAM,CAAC,CAsBlC;CACF"}
+{"version":3,"file":"SSR.d.ts","sourceRoot":"","sources":["../../node/SSR.js"],"names":[],"mappings":"AAsQA;IAEE,8BAAmB;IACnB,8BAAmB;IAMnB;;;OAkEC;IAMD,uBAYC;IAkBD,yBAZW,MAAM,YACN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,OAAO,CAAC,MAAM,CAAC,CAgC3B;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,MAAM,CAwBlB;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,cAAc,CAAC,MAAM,CAAC,CAqBlC;CACF"}