@symbiotejs/symbiote 3.4.3 → 3.4.5

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.
 
 ---
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 3.4.5
+
+### Fixed
+
+- **PubSub: computed properties with cross-context deps no longer depend on import order.** When a computed property declared `deps: ['CTX/prop']` and the target context wasn't registered yet, the subscription was silently skipped. Now deferred deps are stored in `PubSub.pendingDeps` and automatically resolved when `registerCtx()` is called.
+
+## 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

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.
 
@@ -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/PubSub.js

@@ -120,10 +120,24 @@ export class PubSub {
       let extCtx = PubSub.getCtx(ctxName, false);
 
       if (!extCtx) {
-        console.warn(
-          `[Symbiote] PubSub: external dep context "${ctxName}" not found for computed "${compProp}".\n`
-          + `Available contexts: [${[...PubSub.globalStore.keys()].map(String).join(', ')}]`
-        );
+        // Defer: will resolve when the context is registered
+        if (!PubSub.pendingDeps.has(ctxName)) {
+          PubSub.pendingDeps.set(ctxName, []);
+        }
+        PubSub.pendingDeps.get(ctxName).push(() => {
+          let resolvedCtx = PubSub.getCtx(ctxName, false);
+          if (!resolvedCtx) return;
+          let sub = resolvedCtx.sub(propName, () => {
+            this.#recalcComputed(compProp);
+          }, false);
+          if (sub) {
+            if (!this.#externalSubs[compProp]) {
+              this.#externalSubs[compProp] = [];
+            }
+            this.#externalSubs[compProp].push(sub);
+          }
+          this.#recalcComputed(compProp);
+        });
         continue;
       }
 
@@ -366,6 +380,15 @@ export class PubSub {
       data = new PubSub(schema);
       data.uid = uid;
       PubSub.globalStore.set(uid, data);
+
+      // Resolve deferred external deps waiting for this context:
+      let pending = PubSub.pendingDeps.get(uid);
+      if (pending) {
+        PubSub.pendingDeps.delete(uid);
+        for (let resolve of pending) {
+          resolve();
+        }
+      }
     }
     return data;
   }
@@ -391,6 +414,9 @@ export class PubSub {
 /** @type {Map<String | Symbol, PubSub>} */
 PubSub.globalStore = globalThis.__SYMBIOTE_PUBSUB_STORE || (globalThis.__SYMBIOTE_PUBSUB_STORE = new Map());
 
+/** @type {Map<String | Symbol, Array<Function>>} */
+PubSub.pendingDeps = new Map();
+
 /** @type {Boolean} */
 PubSub.devMode = false;
 

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);

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.3",
+  "version": "3.4.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/PubSub.d.ts

@@ -23,6 +23,7 @@ export class PubSub<T extends Record<string, unknown>> {
 }
 export namespace PubSub {
     let globalStore: Map<string | Symbol, PubSub<any>>;
+    let pendingDeps: Map<string | Symbol, Array<Function>>;
     let devMode: boolean;
 }
 export default PubSub;

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

@@ -1 +1 @@
-{"version":3,"file":"PubSub.d.ts","sourceRoot":"","sources":["../../core/PubSub.js"],"names":[],"mappings":"AAgBA,oBADwC,CAAC,SAA1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAE;IA2DrC,oDAFW,GAAC,kBAKX;IA0RD,mBALuC,CAAC,SAA1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAE,UAC3B,CAAC,QACD,SAAS,MAAM,GACb,MAAM,CAAC,CAAC,CAAC,CAarB;IAGD,sBADY,SAAS,MAAM,QAG1B;IAOD,mBAJW,SAAS,MAAM,iCASzB;IAzUD,oBADY,CAAC,EAWZ;IARG,WAA6B;IAO/B,aADW,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAChB;IAwHxC,WADY,MAAM,CAAC,OAqClB;IAzBK,sBAAuB;IA4B7B,uBAEC;IAOD,uBAHW,OAAO,2BASjB;IAMD,UAHW,MAAM,CAAC,OACP,OAAO,QAqBjB;IAGD,aADc,CAAC,CAed;IAGD,iBADY,CAAC,QAKZ;IAGD,aADY,MAAM,CAAC,kBAoBlB;IAOD,UAJW,MAAM,CAAC,YACP,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI;;wBAAhB,OAAO,KAAK,IAAI;MAwBhC;IAKD,aAFW,SAAS,MAAM,EAIzB;IAED,WANW,SAAS,MAAM,CAQzB;;CAqCF;;qBAEU,GAAG,CAAC,SAAS,MAAM,cAAS"}
+{"version":3,"file":"PubSub.d.ts","sourceRoot":"","sources":["../../core/PubSub.js"],"names":[],"mappings":"AAgBA,oBADwC,CAAC,SAA1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAE;IA2DrC,oDAFW,GAAC,kBAKX;IAwSD,mBALuC,CAAC,SAA1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAE,UAC3B,CAAC,QACD,SAAS,MAAM,GACb,MAAM,CAAC,CAAC,CAAC,CAsBrB;IAGD,sBADY,SAAS,MAAM,QAG1B;IAOD,mBAJW,SAAS,MAAM,iCASzB;IAhWD,oBADY,CAAC,EAWZ;IARG,WAA6B;IAO/B,aADW,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAChB;IAsIxC,WADY,MAAM,CAAC,OAqClB;IAzBK,sBAAuB;IA4B7B,uBAEC;IAOD,uBAHW,OAAO,2BASjB;IAMD,UAHW,MAAM,CAAC,OACP,OAAO,QAqBjB;IAGD,aADc,CAAC,CAed;IAGD,iBADY,CAAC,QAKZ;IAGD,aADY,MAAM,CAAC,kBAoBlB;IAOD,UAJW,MAAM,CAAC,YACP,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI;;wBAAhB,OAAO,KAAK,IAAI;MAwBhC;IAKD,aAFW,SAAS,MAAM,EAIzB;IAED,WANW,SAAS,MAAM,CAQzB;;CA8CF;;qBAEU,GAAG,CAAC,SAAS,MAAM,cAAS;qBAG5B,GAAG,CAAC,SAAS,MAAM,EAAE,KAAK,UAAU,CAAC"}

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;IAsHD,6BADY,SAAS,aAAa,QAOjC;IAGD,+BADY,SAAS,aAAa,QAOjC;IAGD,8BADY,SAAS,aAAa,EAIjC;IAGD,gCADY,SAAS,aAAa,EAIjC;IAnjBD,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,yDAoBC;IAYD,0BAME;IAMF,0CAFW,GAAG,QAmBb;IAED,yBAGC;IAOD,8EAmBC;;CA+BF;;mBAltBkB,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"}