npm - @symbiotejs/symbiote - Versions diffs - 3.0.0-next.3 → 3.0.2 - Mend

@symbiotejs/symbiote 3.0.0-next.3 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/AI_REFERENCE.md +46 -19
package/CHANGELOG.md +81 -79
package/LICENSE +1 -1
package/README.md +13 -10
package/core/itemizeProcessor-keyed.js +2 -1
package/core/itemizeProcessor.js +2 -1
package/core/ownElements.js +38 -0
package/core/tpl-processors.js +7 -2
package/package.json +12 -8
package/types/core/itemizeProcessor-keyed.d.ts.map +1 -1
package/types/core/itemizeProcessor.d.ts.map +1 -1
package/types/core/ownElements.d.ts +3 -0
package/types/core/ownElements.d.ts.map +1 -0
package/types/core/tpl-processors.d.ts.map +1 -1
package/types/node/SSR.d.ts +16 -0
package/types/node/SSR.d.ts.map +1 -0
package/core/README.md +0 -31
package/core/ssr.js +0 -313
package/types/core/ssr.d.ts +0 -12
package/types/core/ssr.d.ts.map +0 -1

package/AI_REFERENCE.md CHANGED Viewed

@@ -509,43 +509,67 @@ Usage:
 ## Server-Side Rendering (SSR)
-Import `core/ssr.js` to render components to HTML strings on the server. Requires `linkedom` (optional peer dependency).
+Import `node/SSR.js` to render components to HTML strings on the server. Requires `linkedom` (optional peer dependency).
+### Basic usage — `processHtml`
 ```js
-import { initSSR, renderToString, destroySSR } from '@symbiotejs/symbiote/core/ssr.js';
+import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
+await SSR.init();                // patches globals with linkedom env
+await import('./my-component.js'); // component reg() works normally
+let html = await SSR.processHtml('<div><my-component></my-component></div>');
+// => '<div><my-component><style>...</style><template shadowrootmode="open">...</template>content</my-component></div>'
+SSR.destroy();                   // cleanup globals
+```
-await initSSR(); // patches globals with linkedom env
+`processHtml` takes any HTML string, renders all Symbiote components found within, and returns the processed HTML. If `SSR.init()` was already called, it reuses the existing environment; otherwise it auto-initializes (and auto-destroys after).
-import './my-component.js'; // component reg() works normally
+### Advanced — `renderToString` / `renderToStream`
-let html = renderToString('my-component', { title: 'Hello' });
+```js
+import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
+await SSR.init();
+await import('./my-component.js');
+let html = SSR.renderToString('my-component', { title: 'Hello' });
 // => '<my-component title="Hello"><h1>Hello</h1></my-component>'
-destroySSR(); // cleanup globals
+SSR.destroy();
 ```
 ### API
-| Function | Description |
-|----------|-------------|
-| `initSSR()` | `async` — creates linkedom document, polyfills CSSStyleSheet/NodeFilter/MutationObserver, patches globals |
-| `renderToString(tagName, attrs?)` | Creates element, triggers `connectedCallback`, serializes to HTML string. Shadow DOM → DSD with inlined `<style>` |
-| `renderToStream(tagName, attrs?)` | Async generator — yields HTML chunks as it walks the DOM tree. Same output as `renderToString`, but streamed for lower TTFB and memory |
-| `destroySSR()` | Removes global patches, cleans up document |
+| Method | Description |
+|--------|-------------|
+| `SSR.init()` | `async` — creates linkedom document, polyfills CSSStyleSheet/NodeFilter/MutationObserver/adoptedStyleSheets, patches globals |
+| `SSR.processHtml(html)` | `async` — parses HTML string, renders all custom elements, returns processed HTML. Auto-inits if needed |
+| `SSR.renderToString(tagName, attrs?)` | Creates element, triggers `connectedCallback`, serializes to HTML string |
+| `SSR.renderToStream(tagName, attrs?)` | Async generator — yields HTML chunks. Same output as `renderToString`, but streamed for lower TTFB |
+| `SSR.destroy()` | Removes global patches, cleans up document |
+### Styles in SSR output
+- **rootStyles** → `<style>` tag as first child of the component (light DOM, deduplicated per constructor)
+- **shadowStyles** → `<style>` inside the Declarative Shadow DOM `<template>`
+- Both are supported simultaneously on the same component
 ### Streaming usage
 ```js
 import http from 'node:http';
-import { initSSR, renderToStream } from '@symbiotejs/symbiote/core/ssr.js';
+import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
-await initSSR();
+await SSR.init();
 import './my-app.js';
 http.createServer(async (req, res) => {
   res.writeHead(200, { 'Content-Type': 'text/html' });
   res.write('<!DOCTYPE html><html><body>');
-  for await (let chunk of renderToStream('my-app')) {
+  for await (let chunk of SSR.renderToStream('my-app')) {
     res.write(chunk);
   }
   res.end('</body></html>');
@@ -554,19 +578,22 @@ http.createServer(async (req, res) => {
 ### Shadow DOM output
-Shadow components produce Declarative Shadow DOM markup with styles inlined:
+Shadow components produce Declarative Shadow DOM markup with styles inlined. Light DOM content is preserved alongside the DSD template:
 ```html
 <my-shadow>
+  <style>my-shadow { display: block; }</style>
   <template shadowrootmode="open">
-    <style>:host { display: block; }</style>
+    <style>:host { color: red; }</style>
     <h1>Content</h1>
+    <slot></slot>
   </template>
+  Light DOM content here
 </my-shadow>
 ```
 ### SSR context detection
-`initSSR()` sets `globalThis.__SYMBIOTE_SSR = true`. This is separate from the instance `ssrMode` flag:
+`SSR.init()` sets `globalThis.__SYMBIOTE_SSR = true`. This is separate from the instance `ssrMode` flag:
 | Flag | Scope | Purpose |
 |------|-------|-------|
@@ -575,7 +602,7 @@ Shadow components produce Declarative Shadow DOM markup with styles inlined:
 ### Hydration flow
-1. **Server**: `renderToString()` produces HTML with `bind=` / `itemize=` attributes preserved
+1. **Server**: `SSR.processHtml()` / `SSR.renderToString()` produces HTML with `bind=` / `itemize=` attributes preserved
 2. **Client**: component with `ssrMode = true` skips template injection, attaches bindings to pre-rendered DOM
 3. State mutations on client update DOM reactively

package/CHANGELOG.md CHANGED Viewed

@@ -1,43 +1,36 @@
 # Changelog
-## 3.0.0-rc.1
+## 3.0.0
 ### ⚠️ Breaking Changes
-- **`tplProcessors` renamed to `templateProcessors`.**
-  The instance property and its API now use the full name. The `addTemplateProcessor()` method has been removed — use native `Set` methods directly:
+- **`tplProcessors` → `templateProcessors`.**
+  The `addTemplateProcessor()` method is removed — use native `Set` methods:
   ```js
-  // Before (2.x):
+  // 2.x:
   this.addTemplateProcessor(myProcessor);
-  // After (3.x):
+  // 3.x:
   this.templateProcessors.add(myProcessor);
   ```
-- **`AppRouter.applyRoute()` renamed to `AppRouter.navigate()`.**
+- **`AppRouter.applyRoute()` → `AppRouter.navigate()`.**
 - **`AppRouter` removed from main entry point.**
-  Now imported directly from its module:
   ```js
-  // Before (2.x):
+  // 2.x:
   import { AppRouter } from '@symbiotejs/symbiote';
-  // After (3.x):
+  // 3.x:
   import { AppRouter } from '@symbiotejs/symbiote/core/AppRouter.js';
   ```
-- **`#disconnectTimeout` renamed to `#destroyTimeout`.**
-  Internal field renamed for clarity. No public API impact.
 - **Computed properties: cross-context requires explicit deps.**
-  Computed properties that depend on external named contexts no longer auto-detect dependencies via global scan. Use the new object syntax:
+  Local computeds (same-context) keep working unchanged. Cross-context now uses object syntax:
   ```js
-  // Before (2.x) — implicit, worked via global scan:
+  // 2.x — implicit via global scan:
   init$ = {
     '+total': () => this.$['APP/score'] + this.$.local,
   };
-  // After (3.x) — explicit deps required:
+  // 3.x — explicit deps:
   init$ = {
     '+total': {
       deps: ['APP/score'],
@@ -45,57 +38,73 @@
     },
   };
   ```
-  Local computed properties (depending only on same-context props) continue to work with function syntax unchanged.
+- **Shared context (`*prop`) simplified.**
+  Removed `ctxOwner` / `ctx-owner`. First-registered value always wins. Dev-mode warnings when `*prop` used without `ctx` attribute.
 ### Performance
 - **Computed properties: per-instance dependency tracking.**
-  Replaced global `#processComputed` scan with per-instance local dependency auto-tracking. `read()` now records which local props a computed function accesses, and only affected computeds are recalculated. Benchmarked up to **676x faster** for local computeds, **14x** for sparse scenarios.
+  Replaced global scan with per-instance auto-tracking. Up to **676× faster** for local computeds, **14×** for sparse scenarios.
-- **Microtask batching for computed recalculation.**
-  Replaced `setTimeout`-based debounce with `queueMicrotask`, providing predictable async batching and eliminating per-computed timer overhead.
+- **Microtask batching.**
+  All computed recalculation and internal scheduling uses `queueMicrotask` instead of `setTimeout`.
-### Added
+- **`#parseProp` fast path.**
+  `charCodeAt` checks skip full string parsing for common local properties — the most frequent case.
-- **`Symbiote.devMode` flag.**
-  Enables verbose development warnings (unresolved template bindings, etc.). Default: `false`.
+- **`$` proxy inlined fast path.**
+  Both `get` and `set` traps bypass `#parseProp` entirely for local props.
-- **Enhanced warning messages.**
-  All warnings now use `[Symbiote]` prefix with component tag names, context UIDs, available contexts, and fix suggestions.
+- **`PubSub.pub()` direct value pass.**
+  Eliminates redundant `read()` on every state update.
-- **`this` in template detection.**
-  `html` tagged template now fires `console.error` when `${this.…}` is used in template interpolation (templates are context-free).
+- **Dev warnings gated by `PubSub.devMode`.**
+  Type-mismatch checks have zero overhead in production.
-- **`reg()` returns the class itself.**
-  Enables patterns like `export default MyComponent.reg('my-component')`.
+- **`txtNodesProcessor` early exit.**
+  Skips text-node scanning when template contains no `{{` tokens.
-- **Declarative Shadow DOM hydration (`ssrMode`).**
-  `ssrMode = true` (client-only) hydrates both light DOM and existing Declarative Shadow DOM (`<template shadowrootmode="open">`). Template injection is skipped; bindings attach to pre-rendered content. Shadow styles applied via `adoptedStyleSheets`. Bypassed on the server (`__SYMBIOTE_SSR`).
+- **`localCtx` direct construction.**
+  Uses `new PubSub({})` instead of `PubSub.registerCtx({})`, bypassing global store for component-scoped state.
-- **Server-side rendering (`core/ssr.js`).**
-  New SSR module: `initSSR()` creates a linkedom-backed DOM environment with polyfills (CSSStyleSheet, NodeFilter, MutationObserver) and sets `globalThis.__SYMBIOTE_SSR`. `renderToString(tagName, attrs?)` renders components to HTML with Declarative Shadow DOM and inlined `<style>`. `renderToStream(tagName, attrs?)` async generator yields HTML chunks for lower TTFB and memory usage. Binding attributes (`bind`, `ref`, `itemize`) are preserved in output for client-side hydration. `linkedom` is an optional peer dependency.
+- **`hasOwnProperty` → `in` operator** across `PubSub` internals.
-- **Exit animation hook (`animateOut`).**
-  New `animateOut(el)` utility and `Symbiote.animateOut` static method. Sets `[leaving]` attribute, waits for CSS `transitionend`, then removes element. Integrated into both itemize processors — items with CSS transitions animate out automatically. Enter animations use native CSS `@starting-style`.
-### Changed
+- **`itemizeProcessor-keyed.js` — optional optimized itemize processor.**
+  Drop-in replacement with reference-equality fast paths and key-based reconciliation. Up to **3× faster** for appends, **2×** for in-place updates, **32×** for no-ops:
+  ```js
+  import { itemizeProcessor } from '@symbiotejs/symbiote/core/itemizeProcessor-keyed.js';
+  import { itemizeProcessor as defaultProcessor } from '@symbiotejs/symbiote/core/itemizeProcessor.js';
-- **Shared context (`*prop`) simplified.**
-  Removed `ctxOwner` property and `ctx-owner` attribute. First-registered value always wins (via `add()` without rewrite). Dev-mode warnings: (1) when `*prop` is used without `ctx` attribute or `--ctx` CSS variable, (2) when a later component tries to set a different initial value for the same shared prop.
+  class BigList extends Symbiote {
+    constructor() {
+      super();
+      this.templateProcessors.delete(defaultProcessor);
+      this.templateProcessors = new Set([itemizeProcessor, ...this.templateProcessors]);
+    }
+  }
+  ```
-- **Trusted Types support.**
-  Template `innerHTML` writes now use a `'symbiote'` Trusted Types policy when the API is available. Compatible with `require-trusted-types-for 'script'` CSP headers. Zero overhead when Trusted Types not enabled.
+### Added
-### Fixed
+- **Server-side rendering (`node/SSR.js`).**
+  `SSR` class with static methods for server-side rendering. `SSR.processHtml(html)` renders any HTML string with embedded components. `SSR.renderToString(tagName, attrs?)` renders a single component. `SSR.renderToStream(tagName, attrs?)` async generator yields HTML chunks. Declarative Shadow DOM with inlined styles. rootStyles emitted as `<style>` tags in light DOM. Light DOM content preserved. Binding attributes preserved for client hydration. `linkedom` is an optional peer dependency.
+  ```js
+  import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
+  await SSR.init();
+  await import('./my-app.js');
+  let html = await SSR.processHtml('<my-app>content</my-app>');
+  SSR.destroy();
+  ```
-- **`css()` tagged template trailing `undefined`.**
-  `props[idx]` appended `"undefined"` when no interpolations exist. Fixed with `?? ''`.
+- **Declarative Shadow DOM hydration (`ssrMode`).**
+  `ssrMode = true` hydrates pre-rendered content (light DOM + `<template shadowrootmode>`). Template injection skipped; bindings attach to existing DOM. Shadow styles applied via `adoptedStyleSheets`.
-- **`new DocumentFragment()` SSR compatibility.**
-  Replaced with `document.createDocumentFragment()` in both `itemizeProcessor.js` and `itemizeProcessor-keyed.js` for linkedom compatibility.
+- **Exit animation hook (`animateOut`).**
+  Sets `[leaving]` attribute, waits for CSS `transitionend`, removes element. Integrated into itemize processors — items with transitions animate out automatically. Enter animations use `@starting-style`.
 - **`AppRouter`: path-based routing.**
-  Routes with a `pattern` key auto-switch to path-based URLs. Supports `:param` extraction:
+  Routes with `pattern` key use path-based URLs with `:param` extraction:
   ```js
   AppRouter.initRoutingCtx('R', {
     home: { pattern: '/', title: 'Home', default: true },
@@ -103,54 +112,47 @@
   });
   // /users/42 → { route: 'user', options: { id: '42' } }
   ```
-  Routes without `pattern` keep working as query-string (full backward compatibility).
+  Query-string routes remain fully backward compatible.
-- **`AppRouter.beforeRoute(fn)` — route guards.**
-  Register middleware that runs before navigation. Return `false` to cancel, a route string to redirect:
+- **Route guards — `AppRouter.beforeRoute(fn)`.**
+  Return `false` to cancel, a route string to redirect:
   ```js
   let unsub = AppRouter.beforeRoute((to, from) => {
     if (!isAuth && to.route === 'settings') return 'login';
   });
   ```
-- **Lazy loaded route components.**
-  Add `load` to route descriptors for dynamic imports. Loaded once, cached automatically:
+- **Lazy loaded routes.**
+  `load` in route descriptors for dynamic imports, cached automatically:
   ```js
   { pattern: '/settings', load: () => import('./pages/settings.js') }
   ```
-- **AI_REFERENCE.md** — comprehensive AI context file for code assistants, covering full API surface, template syntax, state management, lifecycle, styling, routing, itemize, and common mistakes.
 - **Event handler method fallback.**
-  `on*` bindings now fall back to class methods when no matching `init$` property is found:
+  `on*` bindings fall back to class methods when no `init$` property found:
   ```js
-  // Works without init$ entry — class method is used as fallback:
   onSubmit() { console.log('submitted'); }
   ```
+- **`Symbiote.devMode` flag.**
+  Enables verbose warnings (unresolved bindings, tag names, available contexts). Also wires `PubSub.devMode`.
+- **`reg()` returns the class itself.**
+  Enables `export default MyComponent.reg('my-component')`.
 - **`destructionDelay` instance property.**
-  Configurable delay (default `100`ms) before component destruction in `disconnectedCallback`. Override per-component to control cleanup timing:
-  ```js
-  class MyComponent extends Symbiote {
-    destructionDelay = 0; // instant cleanup
-  }
-  ```
+  Configurable delay (default `100`ms) before cleanup in `disconnectedCallback`.
-- **`itemizeProcessor-keyed.js` — optional optimized itemize processor.**
-  Drop-in replacement with reference-equality fast paths and key-based reconciliation. Up to **3x faster** for appends, **2x** for in-place updates, **32x** for no-ops. Opt-in per component:
-  ```js
-  import { itemizeProcessor } from '@symbiotejs/symbiote/core/itemizeProcessor-keyed.js';
-  import { itemizeProcessor as defaultProcessor } from '@symbiotejs/symbiote/core/itemizeProcessor.js';
+- **Trusted Types support.**
+  Template writes use `'symbiote'` Trusted Types policy when available. Zero overhead otherwise.
-  class BigList extends Symbiote {
-    constructor() {
-      super();
-      this.templateProcessors.delete(defaultProcessor);
-      this.templateProcessors = new Set([itemizeProcessor, ...this.templateProcessors]);
-    }
-  }
-  ```
+- **`this` in template detection.**
+  `html` fires `console.error` when `${this.…}` used in template (templates are context-free).
+- **AI_REFERENCE.md** — comprehensive context file for code assistants.
-### Internal
+### Fixed
-- Replaced `setTimeout` with `queueMicrotask` in prop binding race avoidance and async accessor handlers.
+- `css()` trailing `undefined` when no interpolations exist.
+- `new DocumentFragment()` → `document.createDocumentFragment()` for linkedom compatibility.
+- `txtNodesProcessor` null check for `fr.textContent` in SSR environments.

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) 2021-present symbiotejs.org. All rights reserved.
+Copyright (c) 2021-present rnd-pro.com. All rights reserved.
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md CHANGED Viewed

@@ -11,7 +11,7 @@ Symbiote.js gives you the convenience of a modern framework while staying close
 ## What's new in 3.x
-- **Server-Side Rendering** — render components to HTML on the server with `renderToString()` or stream chunks with `renderToStream()`. Client-side hydration via `ssrMode` attaches bindings to existing DOM without re-rendering.
+- **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.
 - **Computed properties** — reactive derived state with microtask batching.
 - **Path-based router** — optional `AppRouter` module with `:param` extraction, route guards, and lazy loading.
 - **Exit animations** — `animateOut(el)` for CSS-driven exit transitions, integrated into itemize API.
@@ -60,16 +60,16 @@ import Symbiote, { html, css } from '@symbiotejs/symbiote';
 ## SSR — simpler than you'd expect
-Symbiote's SSR doesn't need a virtual DOM, a reconciler, or framework-specific server packages. It's three functions:
+Symbiote's SSR doesn't need a virtual DOM, a reconciler, or framework-specific server packages. It's one class:
 ```js
-import { initSSR, renderToString, destroySSR } from '@symbiotejs/symbiote/core/ssr.js';
+import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
-await initSSR();              // patches globals with linkedom
-await import('./my-app.js');  // your components register normally
+await SSR.init();              // patches globals with linkedom
+await import('./my-app.js');   // your components register normally
-let html = renderToString('my-app');  // full HTML string
-destroySSR();                 // cleanup
+let html = await SSR.processHtml('<my-app>slot content</my-app>');
+SSR.destroy();                 // cleanup
 ```
 On the client, components with `ssrMode = true` skip template injection and attach bindings to the existing DOM. State mutations work immediately — no hydration step, no reconciliation, no diffing.
@@ -79,12 +79,15 @@ On the client, components with `ssrMode = true` skip template injection and atta
 For large pages, stream HTML chunks instead of building a string:
 ```js
-import { renderToStream } from '@symbiotejs/symbiote/core/ssr.js';
+import { SSR } from '@symbiotejs/symbiote/node/SSR.js';
+await SSR.init();
+await import('./my-app.js');
 http.createServer(async (req, res) => {
   res.writeHead(200, { 'Content-Type': 'text/html' });
   res.write('<!DOCTYPE html><html><body>');
-  for await (let chunk of renderToStream('my-app')) {
+  for await (let chunk of SSR.renderToStream('my-app')) {
     res.write(chunk);
   }
   res.end('</body></html>');
@@ -97,7 +100,7 @@ http.createServer(async (req, res) => {
 |--|----------------|---------------------|--------------------------|
 | **Architecture** | Binding-based. Client attaches to existing DOM | Virtual DOM. Client re-renders and diffs against server HTML | Template-based with comment markers |
 | **Hydration** | `ssrMode = true` — one flag, no diffing | `hydrateRoot()` — must produce identical output or errors | Requires `ssr-client` + hydrate support module loaded before Lit |
-| **Packages** | 1 module (`core/ssr.js`) + `linkedom` peer dep | Next.js framework (full buy-in) | 3 packages: `ssr`, `ssr-client`, `ssr-dom-shim` |
+| **Packages** | 1 module (`node/SSR.js`) + `linkedom` peer dep | Next.js framework (full buy-in) | 3 packages: `ssr`, `ssr-client`, `ssr-dom-shim` |
 | **Streaming** | `renderToStream()` async generator | `renderToPipeableStream()` | Iterable `RenderResult` |
 | **Mismatch handling** | Not needed — bindings attach to whatever DOM exists | Hard errors or visual glitches if server/client output differs | N/A |
 | **Component code** | Same code, no changes | Server Components vs Client Components split | Same code, but load-order constraints |

package/core/itemizeProcessor-keyed.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
+import { ownElements } from './ownElements.js';
 /**
  * Optimized itemize template processor.
@@ -29,7 +30,7 @@ import { animateOut } from './animateOut.js';
  * @param {T} fnCtx
  */
 export function itemizeProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.LIST_ATTR}]`)].filter((el) => {
+  ownElements(fr, `[${DICT.LIST_ATTR}]`).filter((el) => {
     return !el.matches(`[${DICT.LIST_ATTR}] [${DICT.LIST_ATTR}]`);
   }).forEach((el) => {
     let itemTag = el.getAttribute(DICT.LIST_ITEM_TAG_ATTR);

package/core/itemizeProcessor.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
+import { ownElements } from './ownElements.js';
 /**
  * @template {import('./Symbiote.js').Symbiote} T
@@ -7,7 +8,7 @@ import { animateOut } from './animateOut.js';
  * @param {T} fnCtx
  */
 export function itemizeProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.LIST_ATTR}]`)].filter((el) => {
+  ownElements(fr, `[${DICT.LIST_ATTR}]`).filter((el) => {
       return !el.matches(`[${DICT.LIST_ATTR}] [${DICT.LIST_ATTR}]`);
     }).forEach((el) => {
       let itemTag = el.getAttribute(DICT.LIST_ITEM_TAG_ATTR);

package/core/ownElements.js ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * querySelectorAll scoped to own elements only.
+ * During ssrMode hydration, `fr` is the component itself (an HTMLElement).
+ * querySelectorAll matches ALL descendants, including those inside child components.
+ * This helper excludes elements whose closest custom-element ancestor is not `fr`.
+ * @param {Element | DocumentFragment} fr
+ * @param {string} selector
+ * @returns {Element[]}
+ */
+export function ownElements(fr, selector) {
+  let all = [...fr.querySelectorAll(selector)];
+  if (!(fr instanceof HTMLElement) || !fr.localName?.includes('-')) {
+    return all;
+  }
+  return all.filter((el) => {
+    let parent = el.parentElement;
+    while (parent && parent !== fr) {
+      if (parent.localName?.includes('-')) return false;
+      parent = parent.parentElement;
+    }
+    return true;
+  });
+}
+/**
+ * Check if a node belongs to `root` and not to a nested custom element.
+ * @param {Node} node
+ * @param {Element} root
+ * @returns {boolean}
+ */
+export function isOwnNode(node, root) {
+  let parent = node.parentElement;
+  while (parent && parent !== root) {
+    if (parent.localName?.includes('-')) return false;
+    parent = parent.parentElement;
+  }
+  return true;
+}

package/core/tpl-processors.js CHANGED Viewed

@@ -1,16 +1,19 @@
 import { DICT } from './dictionary.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
+import { ownElements, isOwnNode } from './ownElements.js';
 // Should go first among other processors:
 import { itemizeProcessor } from './itemizeProcessor.js';
 /**
  * @template {import('./Symbiote.js').Symbiote} T
  * @param {DocumentFragment} fr
  * @param {T} fnCtx
  */
 function refProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.EL_REF_ATTR}]`)].forEach((/** @type {HTMLElement} */ el) => {
+  ownElements(fr, `[${DICT.EL_REF_ATTR}]`).forEach((/** @type {HTMLElement} */ el) => {
     let refName = el.getAttribute(DICT.EL_REF_ATTR);
     fnCtx.ref[refName] = el;
     if (!globalThis.__SYMBIOTE_SSR) {
@@ -25,7 +28,7 @@ function refProcessor(fr, fnCtx) {
  * @param {T} fnCtx
  */
 function domBindProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((el) => {
+  ownElements(fr, `[${DICT.BIND_ATTR}]`).forEach((el) => {
     let subStr = el.getAttribute(DICT.BIND_ATTR);
     let keyValArr = subStr.split(';');
     keyValArr.forEach((keyValStr) => {
@@ -104,10 +107,12 @@ function domBindProcessor(fr, fnCtx) {
 }
 function getTextNodesWithTokens(el) {
+  let isCustomEl = el instanceof HTMLElement && el.localName?.includes('-');
   let node;
   let result = [];
   let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
     acceptNode: (txt) => {
+      if (isCustomEl && !isOwnNode(txt, el)) return NodeFilter.FILTER_REJECT;
       return !txt.parentElement?.hasAttribute(DICT.TEXT_NODE_SKIP_ATTR)
         && txt.textContent.includes(DICT.TEXT_NODE_OPEN_TOKEN)
         && txt.textContent.includes(DICT.TEXT_NODE_CLOSE_TOKEN)

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.0.0-next.3",
+  "version": "3.0.2",
   "description": "Symbiote.js - zero-dependency close-to-platform frontend library to build super-powered web components",
   "author": "team@rnd-pro.com",
   "license": "MIT",
@@ -9,10 +9,10 @@
     "prepare": "git config core.hooksPath .git-hooks",
     "types": "rm -rf types && tsc -p dts.cfg.json && node scripts/clean-dts.js",
     "prepublishOnly": "npm test",
-    "publish": "npm run types && node scripts/update-exports.js && npm publish --tag next",
+    "pub": "npm run types && node scripts/update-exports.js && npm publish --tag beta",
     "postinstall": "node scripts/postinstall.js",
-    "test": "node --test test/*.test.js && npx playwright test",
-    "test:unit": "node --test test/*.test.js",
+    "test": "node --test test/node/*.test.js && npx playwright test",
+    "test:unit": "node --test test/node/*.test.js",
     "test:browser": "npx playwright test"
   },
   "files": [
@@ -68,14 +68,14 @@
       "types": "./types/core/itemizeProcessor.d.ts",
       "default": "./core/itemizeProcessor.js"
     },
+    "./core/ownElements.js": {
+      "types": "./types/core/ownElements.d.ts",
+      "default": "./core/ownElements.js"
+    },
     "./core/slotProcessor.js": {
       "types": "./types/core/slotProcessor.d.ts",
       "default": "./core/slotProcessor.js"
     },
-    "./core/ssr.js": {
-      "types": "./types/core/ssr.d.ts",
-      "default": "./core/ssr.js"
-    },
     "./core/tpl-processors.js": {
       "types": "./types/core/tpl-processors.d.ts",
       "default": "./core/tpl-processors.js"
@@ -122,7 +122,11 @@
   },
   "keywords": [
     "web components",
+    "SSR",
+    "server side rendering for web components",
     "ui library",
+    "data flow",
+    "design system",
     "symbiote.js",
     "symbiote",
     "widget",

package/types/core/itemizeProcessor-keyed.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"itemizeProcessor-keyed.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor-keyed.js"],"names":[],"mappings":"~~AA8BA~~,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QA6MX"}
1	+ {"version":3,"file":"itemizeProcessor-keyed.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor-keyed.js"],"names":[],"mappings":"AA+BA,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QA6MX"}

package/types/core/itemizeProcessor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"itemizeProcessor.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor.js"],"names":[],"mappings":"~~AAQA~~,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QAoFX"}
1	+ {"version":3,"file":"itemizeProcessor.d.ts","sourceRoot":"","sources":["../../core/itemizeProcessor.js"],"names":[],"mappings":"AASA,iCAJgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC,QAoFX"}

package/types/core/ownElements.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export function ownElements(fr: Element | DocumentFragment, selector: string): Element[];
+export function isOwnNode(node: Node, root: Element): boolean;
+//# sourceMappingURL=ownElements.d.ts.map

package/types/core/ownElements.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ownElements.d.ts","sourceRoot":"","sources":["../../core/ownElements.js"],"names":[],"mappings":"AASA,gCAJW,OAAO,GAAG,gBAAgB,YAC1B,MAAM,GACJ,OAAO,EAAE,CAerB;AAQD,gCAJW,IAAI,QACJ,OAAO,GACL,OAAO,CASnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":"~~0BA2HgD~~,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC"}
1	+ {"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":"0BAgIgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC"}

package/types/node/SSR.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+export class SSR {
+    static init(): Promise<{
+        document: any;
+        window: any;
+    }>;
+    static destroy(): void;
+    static processHtml(html: string): Promise<string>;
+    static renderToString(tagName: string, attrs?: {
+        [x: string]: string;
+    }): string;
+    static renderToStream(tagName: string, attrs?: {
+        [x: string]: string;
+    }): AsyncGenerator<string>;
+}
+export default SSR;
+//# sourceMappingURL=SSR.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"SSR.d.ts","sourceRoot":"","sources":["../../node/SSR.js"],"names":[],"mappings":"AAuPA;IAEE,8BAAmB;IACnB,8BAAmB;IAMnB;;;OAkEC;IAMD,uBAeC;IAeD,yBATW,MAAM,GACJ,OAAO,CAAC,MAAM,CAAC,CAwB3B;IAUD,+BAJW,MAAM;;QAEJ,MAAM,CAclB;IAUD,+BAJW,MAAM;;QAEJ,cAAc,CAAC,MAAM,CAAC,CAalC;CACF"}

package/core/README.md DELETED Viewed

@@ -1,31 +0,0 @@
-## Folder contents
-### index.js
-All-in-one exports.
-### Symbiote.js
-Base component class. Major utility for the web-component creation, template data binding and data management.
-### html.js
-Template literal tag-function, that transforms interpolated binding descriptions into resulting html.
-### css.js
-Template literal tag-function, that creates the CSSStyleSheet instance.
-### PubSub.js
-Implements data layer for the local component context and the top level context both. The state management approach is based on simple well known pub/sub pattern.
-### AppRouter.js
-SPA routing utility. Based on browser-native History API.
-### tpl-rpcessors.js
-Template processing functions. Implements basic template processing flow.
-### itemizeProcessor.js
-Dynamic list items rendering implementation.
-### dictionary.js
-Dictionary for the set of the basic keys.
-### slotProcessor.js
-Light DOM support for the template `slot`s. This processor is optional since 2.x. and excluded from default template processing pipeline.

package/core/ssr.js DELETED Viewed

@@ -1,313 +0,0 @@
-/**
- * @module ssr
- * Server-side rendering for Symbiote.js components.
- * Requires `linkedom` as a peer dependency.
- *
- * Usage:
- * ```js
- * import { initSSR, renderToString } from '@symbiotejs/symbiote/core/ssr.js';
- * initSSR();
- * import './my-component.js';
- * let html = renderToString('my-component', { title: 'Hello' });
- * ```
- */
-let ssrDocument = null;
-let ssrWindow = null;
-/**
- * Initialize the SSR environment using linkedom.
- * Must be called before importing any Symbiote components.
- */
-export async function initSSR() {
-  // @ts-ignore
-  let { parseHTML } = /** @type {any} */ (await import('linkedom'));
-  let { document, window, HTMLElement, customElements, DocumentFragment, NodeFilter, MutationObserver } = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
-  ssrDocument = document;
-  ssrWindow = window;
-  // Polyfill CSSStyleSheet for linkedom:
-  if (!window.CSSStyleSheet || !('replaceSync' in (window.CSSStyleSheet?.prototype || {}))) {
-    class SSRStyleSheet {
-      #cssText = '';
-      replaceSync(text) {
-        this.#cssText = text;
-      }
-      replace(text) {
-        this.#cssText = text;
-        return Promise.resolve(this);
-      }
-      get cssText() {
-        return this.#cssText;
-      }
-      get cssRules() {
-        return [];
-      }
-    }
-    // @ts-ignore — SSR polyfill doesn't need full CSSStyleSheet interface
-    window.CSSStyleSheet = SSRStyleSheet;
-    // @ts-ignore
-    globalThis.CSSStyleSheet = SSRStyleSheet;
-  }
-  // Polyfill NodeFilter (linkedom may not expose it):
-  let nodeFilter = NodeFilter || {
-    SHOW_ALL: 0xFFFFFFFF,
-    SHOW_ELEMENT: 0x1,
-    SHOW_TEXT: 0x4,
-    SHOW_COMMENT: 0x80,
-    FILTER_ACCEPT: 1,
-    FILTER_REJECT: 2,
-    FILTER_SKIP: 3,
-  };
-  // Polyfill MutationObserver (not needed for SSR one-shot render):
-  let mutationObserver = MutationObserver || class {
-    observe() {}
-    disconnect() {}
-    takeRecords() { return []; }
-  };
-  // Patch globals:
-  globalThis.__SYMBIOTE_SSR = true;
-  globalThis.document = document;
-  globalThis.window = window;
-  globalThis.HTMLElement = HTMLElement;
-  globalThis.customElements = customElements;
-  globalThis.DocumentFragment = DocumentFragment;
-  globalThis.NodeFilter = nodeFilter;
-  globalThis.MutationObserver = mutationObserver;
-  return { document, window };
-}
-/**
- * Extract CSS text from a stylesheet (works with both CSSStyleSheet and SSR polyfill).
- * @param {CSSStyleSheet | {cssText: string}} sheet
- * @returns {string}
- */
-function extractCSS(sheet) {
-  if ('cssText' in sheet && typeof sheet.cssText === 'string') {
-    return sheet.cssText;
-  }
-  // Standard CSSStyleSheet — extract from cssRules:
-  let text = '';
-  try {
-    // @ts-ignore — cssRules may not exist on SSR polyfill
-    for (let rule of sheet.cssRules) {
-      text += rule.cssText + '\n';
-    }
-  } catch {
-    // Security restrictions on some stylesheets
-  }
-  return text;
-}
-/**
- * Render a Symbiote component to an HTML string.
- * @param {string} tagName - Custom element tag name
- * @param {Object<string, string>} [attrs] - Attributes to set on the element
- * @returns {string} HTML string with Declarative Shadow DOM if applicable
- */
-export function renderToString(tagName, attrs = {}) {
-  if (!ssrDocument) {
-    throw new Error('[Symbiote SSR] Call initSSR() before renderToString()');
-  }
-  let el = ssrDocument.createElement(tagName);
-  for (let [key, val] of Object.entries(attrs)) {
-    el.setAttribute(key, String(val));
-  }
-  // Trigger component lifecycle:
-  ssrDocument.body.appendChild(el);
-  // Build output HTML:
-  let html = serializeElement(el);
-  // Cleanup:
-  el.remove();
-  return html;
-}
-/**
- * Serialize a custom element to HTML with DSD support.
- * @param {HTMLElement} el
- * @returns {string}
- */
-function serializeElement(el) {
-  let tagName = el.localName;
-  let attrsStr = '';
-  if (el.attributes) {
-    for (let attr of el.attributes) {
-      attrsStr += ` ${attr.name}="${attr.value}"`;
-    }
-  }
-  let innerContent = '';
-  // Declarative Shadow DOM:
-  if (el.shadowRoot) {
-    let shadowHTML = '';
-    // Inline shadow styles:
-    let ctor = /** @type {any} */ (el).constructor;
-    if (ctor.shadowStyleSheets) {
-      for (let sheet of ctor.shadowStyleSheets) {
-        let cssText = extractCSS(sheet);
-        if (cssText) {
-          shadowHTML += `<style>${cssText}</style>`;
-        }
-      }
-    }
-    shadowHTML += el.shadowRoot.innerHTML;
-    innerContent += `<template shadowrootmode="open">${shadowHTML}</template>`;
-  }
-  // Light DOM content:
-  if (!el.shadowRoot) {
-    innerContent += el.innerHTML;
-  }
-  return `<${tagName}${attrsStr}>${innerContent}</${tagName}>`;
-}
-/**
- * Render a Symbiote component to a stream of HTML chunks.
- * @param {string} tagName - Custom element tag name
- * @param {Object<string, string>} [attrs] - Attributes to set on the element
- * @returns {AsyncGenerator<string>}
- */
-export async function* renderToStream(tagName, attrs = {}) {
-  if (!ssrDocument) {
-    throw new Error('[Symbiote SSR] Call initSSR() before renderToStream()');
-  }
-  let el = ssrDocument.createElement(tagName);
-  for (let [key, val] of Object.entries(attrs)) {
-    el.setAttribute(key, String(val));
-  }
-  // Trigger component lifecycle:
-  ssrDocument.body.appendChild(el);
-  // Stream the element:
-  yield* streamElement(el);
-  // Cleanup:
-  el.remove();
-}
-/**
- * Stream-serialize an element, yielding chunks.
- * Custom element children are recursed into for granular streaming.
- * @param {HTMLElement} el
- * @returns {AsyncGenerator<string>}
- */
-async function* streamElement(el) {
-  let tagName = el.localName;
-  let attrsStr = '';
-  if (el.attributes) {
-    for (let attr of el.attributes) {
-      attrsStr += ` ${attr.name}="${attr.value}"`;
-    }
-  }
-  yield `<${tagName}${attrsStr}>`;
-  // Declarative Shadow DOM:
-  if (el.shadowRoot) {
-    yield '<template shadowrootmode="open">';
-    let ctor = /** @type {any} */ (el).constructor;
-    if (ctor.shadowStyleSheets) {
-      for (let sheet of ctor.shadowStyleSheets) {
-        let cssText = extractCSS(sheet);
-        if (cssText) {
-          yield `<style>${cssText}</style>`;
-        }
-      }
-    }
-    // Stream shadow DOM children:
-    for (let child of el.shadowRoot.childNodes) {
-      yield* streamNode(child);
-    }
-    yield '</template>';
-  } else {
-    // Stream light DOM children:
-    for (let child of el.childNodes) {
-      yield* streamNode(child);
-    }
-  }
-  yield `</${tagName}>`;
-}
-/**
- * Stream-serialize a DOM node.
- * @param {Node} node
- * @returns {AsyncGenerator<string>}
- */
-async function* streamNode(node) {
-  // Custom element — recurse for granular streaming:
-  if (node.nodeType === 1 && /** @type {Element} */ (node).localName?.includes('-')) {
-    yield* streamElement(/** @type {HTMLElement} */ (node));
-    return;
-  }
-  // Regular element with children:
-  if (node.nodeType === 1) {
-    let el = /** @type {HTMLElement} */ (node);
-    let attrsStr = '';
-    if (el.attributes) {
-      for (let attr of el.attributes) {
-        attrsStr += ` ${attr.name}="${attr.value}"`;
-      }
-    }
-    if (el.childNodes.length) {
-      yield `<${el.localName}${attrsStr}>`;
-      for (let child of el.childNodes) {
-        yield* streamNode(child);
-      }
-      yield `</${el.localName}>`;
-    } else {
-      yield `<${el.localName}${attrsStr}>${el.innerHTML}</${el.localName}>`;
-    }
-    return;
-  }
-  // Text node:
-  if (node.nodeType === 3) {
-    yield node.textContent || '';
-    return;
-  }
-  // Comment node:
-  if (node.nodeType === 8) {
-    yield `<!--${node.textContent}-->`;
-  }
-}
-/**
- * Clean up the SSR environment.
- */
-export function destroySSR() {
-  if (ssrDocument) {
-    ssrDocument.body.innerHTML = '';
-  }
-  delete globalThis.__SYMBIOTE_SSR;
-  delete globalThis.document;
-  delete globalThis.window;
-  delete globalThis.HTMLElement;
-  delete globalThis.customElements;
-  delete globalThis.DocumentFragment;
-  delete globalThis.NodeFilter;
-  delete globalThis.MutationObserver;
-  delete globalThis.CSSStyleSheet;
-  ssrDocument = null;
-  ssrWindow = null;
-}

package/types/core/ssr.d.ts DELETED Viewed

@@ -1,12 +0,0 @@
-export function initSSR(): Promise<{
-    document: any;
-    window: any;
-}>;
-export function renderToString(tagName: string, attrs?: {
-    [x: string]: string;
-}): string;
-export function renderToStream(tagName: string, attrs?: {
-    [x: string]: string;
-}): AsyncGenerator<string>;
-export function destroySSR(): void;
-//# sourceMappingURL=ssr.d.ts.map

package/types/core/ssr.d.ts.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../../core/ssr.js"],"names":[],"mappings":"AAqBA;;;GA6DC;AA8BD,wCAJW,MAAM;;IAEJ,MAAM,CAuBlB;AAmDD,wCAJW,MAAM;;IAEJ,cAAc,CAAC,MAAM,CAAC,CAqBlC;AA8FD,mCAeC"}