@symbiotejs/symbiote 3.4.1 → 3.4.3

package/AI_REFERENCE.md

@@ -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,21 @@
 # Changelog
 
+## 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
+
+- **isoMode: Shadow DOM components with Light DOM slot children.** `isoMode` checked `this.childNodes` to detect SSR content, but for Shadow DOM components Light DOM children are slot content — not server-rendered shadow tree. This caused template rendering to be skipped. Now checks `this.shadowRoot.childNodes` for Shadow DOM components and `this.childNodes` for Light DOM ones.
+
 ## 3.4.1
 
 ### Fixed

package/README.md

@@ -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$()`):
 

package/core/Symbiote.js

@@ -99,8 +99,11 @@ export class Symbiote extends HTMLElement {
       }
     }
     // Resolve isoMode: hydrate if children exist, render template otherwise
+    // For Shadow DOM components, SSR content is in shadowRoot (declarative shadow DOM),
+    // not in light DOM childNodes (those are slot content)
     if (this.isoMode && !globalThis.__SYMBIOTE_SSR) {
-      this.ssrMode = this.childNodes.length > 0;
+      let ssrContainer = this.shadowRoot || this;
+      this.ssrMode = ssrContainer.childNodes.length > 0;
     }
     let clientSSR = this.ssrMode && !globalThis.__SYMBIOTE_SSR;
     if (this.processInnerHtml || clientSSR) {
@@ -469,7 +472,7 @@ export class Symbiote extends HTMLElement {
       } else {
         if (this.#super.rootStyleSheets) {
           // Skip adopted sheets when hydrating SSR (inline <style> tags already present):
-          let hydrating = this.ssrMode || (this.isoMode && this.childNodes.length > 0);
+          let hydrating = this.ssrMode || (this.isoMode && (this.shadowRoot || this).childNodes.length > 0);
           if (!hydrating) {
             /** @type {Document | ShadowRoot} */
             // @ts-expect-error
@@ -595,6 +598,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);
     }
@@ -636,6 +642,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/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "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

@@ -20,7 +20,7 @@ export class Symbiote<S> extends HTMLElement {
     initCallback(): void;
     renderCallback(): void;
     render(template?: string | DocumentFragment, shadow?: boolean): void;
-    ssrMode: boolean;
+    ssrMode: any;
     init$: S;
     cssInit$: {
         [x: string]: any;

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;IAsJhB,+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;IAjID,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BA+EnC;IAnDG,iBAAyC;IAwD3C,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;;mBAtsBkB,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;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"}