@symbiotejs/symbiote 3.4.2 → 3.4.4

package/AI_REFERENCE.md

@@ -1,7 +1,7 @@
 # Symbiote.js — AI Context Reference (v3.x)
 
 > **Purpose**: Authoritative reference for AI code assistants. All information is derived from source code analysis of [symbiote.js](https://github.com/symbiotejs/symbiote.js).
-> Current version: **3.2.0**. Zero dependencies. ~6 KB gzip.
+> Current version: **3.4.3**. Zero dependencies. ~6.3 KB brotli / ~7 KB gzip.
 
 ---
 
@@ -153,7 +153,7 @@ Prefixes control which data context a binding resolves to:
 | Prefix | Meaning | Example | Description |
 |--------|---------|---------|-------------|
 | _(none)_ | Local state | `{{count}}` | Current component's local context |
-| `^` | Parent inherited | `{{^parentProp}}` | Walk up DOM ancestry to find nearest component that has this prop in its data context (`init$` / `add$()`) |
+| `^` | Pop-up | `{{^parentProp}}` | Walk up DOM ancestry to find nearest component that has this prop in its data context (`init$` / `add$()`) |
 | `*` | Shared context | `{{*sharedProp}}` | Shared context scoped by `ctx` attribute or CSS `--ctx` |
 | `/` | Named context | `{{APP/myProp}}` | Global named context identified by key before `/` |
 | `--` | CSS Data | `{{--my-css-var}}` | Read value from CSS custom property |

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.4.4
+
+### Fixed
+
+- **SSR: `isVirtual` components.** `renderToString` and `renderToStream` now detect `isVirtual` elements and serialize the replacement template nodes instead of the detached custom element wrapper. Previously, virtual components produced an empty `<tag-name></tag-name>` in SSR output.
+
+- **SSR: `allowCustomTemplate` with `use-template` attribute.** `DocumentFragment` detection in `render()` used `constructor === DocumentFragment`, which fails in linkedom where `template.content.cloneNode()` returns a fragment with a different internal constructor. Changed to `nodeType === 11` — spec-correct and works in both browser and linkedom. Previously, custom templates were silently ignored during SSR.
+
+## 3.4.3
+
+### Fixed
+
+- **SSR: shared context props (`*prop`) with `ctx` attribute.** `getCssData()` attempted `window.getComputedStyle()` during server-side rendering, which is unavailable in linkedom. Now returns `null` immediately when `globalThis.__SYMBIOTE_SSR` is set, skipping all computed CSS reads on the server.
+
+### Added
+
+- **DevMode warning for CSS data bindings in SSR/ISO mode.** When `devMode = true` and the component has `ssrMode` or `isoMode`, a `console.warn` fires for each `bindCssData` call — computed styles are unavailable during SSR, so the init value is used instead.
+
 ## 3.4.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/minzip-6.5_kb-blue)
+![bundle size](https://img.shields.io/badge/brotli-6.3_kb-blue)
 ![types](https://img.shields.io/badge/types-JSDoc+d.ts-blue)
 ![license](https://img.shields.io/badge/license-MIT-green)
 
@@ -9,7 +9,7 @@
 
 <img src="https://rnd-pro.com/svg/symbiote/index.svg" width="200" alt="Symbiote.js">
 
-A lightweight, standards-first UI library built on Web Components. No virtual DOM, no compiler, no build step required — works directly in the browser. A bundler is recommended for production performance, but entirely optional. **~6kb** gzipped.
+A lightweight, standards-first UI library built on Web Components. No virtual DOM, no compiler, no build step required — works directly in the browser. A bundler is recommended for production performance, but entirely optional. **~6.3kb** brotli / **~7kb** gzip.
 
 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.
 
@@ -168,7 +168,7 @@ class TaskList extends Symbiote {
     { name: 'Write docs' },
   ];
   init$ = {
-    // Needs to be defined in init$ for bubbling binding to work
+    // Needs to be defined in init$ for pop-up binding to work
     onItemClick: () => {
       console.log('clicked!');
     },
@@ -186,7 +186,7 @@ TaskList.template = html`
 
 Items have their own state scope. Use the **`^` prefix** to reach higher-level component properties and handlers — `'^onItemClick'` binds to the parent's `onItemClick`, not the item's. Properties referenced via `^` must be defined in the parent's `init$`.
 
-### Bubbling binding (`^`)
+### Pop-up binding (`^`)
 
 The `^` prefix works in any nested component template — it walks up the DOM tree to find the nearest ancestor that has the property registered in its data context (`init$` or `add$()`):
 
@@ -344,11 +344,12 @@ CSS values are parsed automatically — quoted strings become strings, numbers b
 
 | Library | Minified | Gzip | Brotli |
 |---------|----------|------|--------|
-| **Symbiote.js** (full) | 18.4 kb | 6.6 kb | **5.9 kb** |
-| **Lit** (LitElement + html + css) | 15.1 kb | 5.8 kb | **5.3 kb** |
-| **React + ReactDOM** | 188.8 kb | 58.8 kb | **50.6 kb** |
+| **Symbiote.js** (core) | 19.8 kb | 6.9 kb | **6.3 kb** |
+| **Symbiote.js** (full, with AppRouter) | 24.0 kb | 8.3 kb | **7.5 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 **5.9 kb** includes more powerful features: global state management, lists (itemize API), exit animations, computed properties etc. Lit needs additional packages for comparable features. React is **~10× larger** before adding a router, state manager, or SSR framework.
+Symbiote and Lit have similar base sizes, but Symbiote's **6.3 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

@@ -120,8 +120,9 @@ export class Symbiote extends HTMLElement {
         this.#super.__tpl = document.createElement('template');
         this.#super.__tpl.innerHTML = trustedHTML.createHTML(this.#super.template);
       }
-      if (template?.constructor === DocumentFragment) {
-        fr = template;
+      // @ts-expect-error - nodeType works for both DOM nodes and linkedom fragments
+      if (template?.nodeType === 11) {
+        fr = /** @type {DocumentFragment} */ (template);
       } else if (template?.constructor === String) {
         let tpl = document.createElement('template');
         tpl.innerHTML = trustedHTML.createHTML(template);
@@ -598,6 +599,9 @@ export class Symbiote extends HTMLElement {
    * @param {Boolean} [silentCheck]
    */
   getCssData(propName, silentCheck = false) {
+    if (globalThis.__SYMBIOTE_SSR) {
+      return null;
+    }
     if (!this.#cssDataCache) {
       this.#cssDataCache = Object.create(null);
     }
@@ -639,6 +643,12 @@ export class Symbiote extends HTMLElement {
    * @param {any} [initValue] Uses empty string by default to make value useful in template
    */
   bindCssData(propName, initValue = '') {
+    if (Symbiote.#devMode && (this.ssrMode || this.isoMode)) {
+      console.warn(
+        `[Symbiote dev] <${this.localName}>: CSS data binding "${propName}" will not read computed styles during SSR. `
+        + 'The init value will be used instead.'
+      );
+    }
     if (!this.#boundCssProps) {
       this.#boundCssProps = new Set();
     }

package/core/dictionary.js

@@ -5,7 +5,7 @@ export const DICT = {
   ATTR_BIND_PX: '@',
   // Shared prop prefix:
   SHARED_CTX_PX: '*',
-  // Inherited parent prop prefix:
+  // Pop-up parent prop prefix:
   PARENT_CTX_PX: '^',
   // Named data context property splitter:
   NAMED_CTX_SPLTR: '/',

package/node/SSR.js

@@ -410,8 +410,19 @@ export class SSR {
       el.setAttribute(key, String(val));
     }
     SSR.#doc.body.appendChild(el);
-    let html = serializeElement(el, new Set(), options.nonce);
-    el.remove();
+    let html;
+    // isVirtual replaces the element with its template fragment:
+    if (/** @type {any} */ (el).isVirtual) {
+      let emittedStyles = new Set();
+      html = '';
+      for (let child of SSR.#doc.body.childNodes) {
+        html += serializeNode(child, emittedStyles, options.nonce);
+      }
+    } else {
+      html = serializeElement(el, new Set(), options.nonce);
+      el.remove();
+    }
+    SSR.#doc.body.innerHTML = '';
     return html;
   }
 
@@ -433,8 +444,17 @@ export class SSR {
       el.setAttribute(key, String(val));
     }
     SSR.#doc.body.appendChild(el);
-    yield* streamElement(el, new Set(), options.nonce);
-    el.remove();
+    // isVirtual replaces the element with its template fragment:
+    if (/** @type {any} */ (el).isVirtual) {
+      let emittedStyles = new Set();
+      for (let child of SSR.#doc.body.childNodes) {
+        yield* streamNode(child, emittedStyles, options.nonce);
+      }
+    } else {
+      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.4.2",
+  "version": "3.4.4",
   "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":";;AAmBA,sBADc,CAAC;IAuBb,cADW,mBAAmB,CACjB;IAGb,sCAAwB;IAExB,iCAGC;IAED,8BAEC;IAkBD,wBAAgB;IAyJhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MAuCX;IAmPD,qCAA+B;IAoC/B,iDAFa,OAAO,QAAQ,CAqB3B;IAED,wBAKC;IAGD;;aAOC;IA6GD,6BADY,SAAS,aAAa,QAOjC;IAGD,+BADY,SAAS,aAAa,QAOjC;IAGD,8BADY,SAAS,aAAa,EAIjC;IAGD,gCADY,SAAS,aAAa,EAIjC;IA1iBD,cA6BC;IApID,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BAkFnC;IAnDG,aAAiD;IAwDnD,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;IAoDD,IALuB,CAAC,SAAX,MAAO,CAAE,QACX,CAAC,WACD,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wBAmB/B;IAGD,2BAGC;IAGD,uBAGC;IAQD,IALuB,CAAC,SAAX,MAAO,CAAE,qBAEX,CAAC,CAAC,CAAC,CAAC,2BAMd;IAMD,UAHW,OAAO,CAAC,CAAC,CAAC,2BAOpB;IAGD,SADc,CAAC,CA2Bd;IAMD,YAHW,OAAO,CAAC,CAAC,CAAC,mCAcpB;IAED,8BAgBC;IAdG,4CASE;IAwFF,0BAAwC;IAwB1C,uBAAyB;IAG3B,0BAEC;IAED,wBAAoB;IAUpB,yBAAuB;IACvB,6BA0BC;IA6CD,oEAeC;IAMD,yDAiBC;IAYD,0BAME;IAMF,0CAFW,GAAG,QAab;IAED,yBAGC;IAOD,8EAmBC;;CA+BF;;mBAzsBkB,aAAa;qBACX,iBAAiB;2BACX,iBAAiB"}
+{"version":3,"file":"Symbiote.d.ts","sourceRoot":"","sources":["../../core/Symbiote.js"],"names":[],"mappings":";;AAmBA,sBADc,CAAC;IAuBb,cADW,mBAAmB,CACjB;IAGb,sCAAwB;IAExB,iCAGC;IAED,8BAEC;IAkBD,wBAAgB;IA0JhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MAuCX;IAmPD,qCAA+B;IAoC/B,iDAFa,OAAO,QAAQ,CAqB3B;IAED,wBAKC;IAGD;;aAOC;IAsHD,6BADY,SAAS,aAAa,QAOjC;IAGD,+BADY,SAAS,aAAa,QAOjC;IAGD,8BADY,SAAS,aAAa,EAIjC;IAGD,gCADY,SAAS,aAAa,EAIjC;IAnjBD,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;IAoDD,IALuB,CAAC,SAAX,MAAO,CAAE,QACX,CAAC,WACD,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wBAmB/B;IAGD,2BAGC;IAGD,uBAGC;IAQD,IALuB,CAAC,SAAX,MAAO,CAAE,qBAEX,CAAC,CAAC,CAAC,CAAC,2BAMd;IAMD,UAHW,OAAO,CAAC,CAAC,CAAC,2BAOpB;IAGD,SADc,CAAC,CA2Bd;IAMD,YAHW,OAAO,CAAC,CAAC,CAAC,mCAcpB;IAED,8BAgBC;IAdG,4CASE;IAwFF,0BAAwC;IAwB1C,uBAAyB;IAG3B,0BAEC;IAED,wBAAoB;IAUpB,yBAAuB;IACvB,6BA0BC;IA6CD,oEAeC;IAMD,yDAoBC;IAYD,0BAME;IAMF,0CAFW,GAAG,QAmBb;IAED,yBAGC;IAOD,8EAmBC;;CA+BF;;mBAntBkB,aAAa;qBACX,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,CAclB;IAWD,+BALW,MAAM;;iBAEN;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAChB,cAAc,CAAC,MAAM,CAAC,CAalC;CACF"}
+{"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"}