@symbiotejs/symbiote 3.4.6 → 3.5.0

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.4.3**. Zero dependencies. ~6.3 KB brotli / ~7 KB gzip.
+> Current version: **3.4.7**. Zero dependencies. ~6.4 KB brotli / ~7.1 KB gzip.
 
 ---
 
@@ -775,14 +775,23 @@ Enable verbose warnings during development:
 Symbiote.devMode = true;
 ```
 
+### Dev messages module
+
+All warning/error strings are in an optional module. Without it, warnings print short codes like `[Symbiote W5]`. Import once to get full messages and auto-enable `devMode`:
+```js
+import '@symbiotejs/symbiote/core/devMessages.js';
+```
+
 **Always-on** (regardless of `devMode`):
-- `[Symbiote]` prefixed warnings for PubSub errors, duplicate tags, type mismatches, router issues
-- `this` in template interpolation error (`html` tag detects `${this.x}` usage)
+- `W1` PubSub: cannot read/publish/subscribe — property not found
+- `W3` context already registered, `W4` context not found
+- `W5` custom template not found, `W8` tag already registered, `W9` CSS data parse error
+- `W13`/`W14` AppRouter messages, `W16` itemize data type error
+- `E15` `this` in template interpolation error (`html` tag detects `${this.x}` usage)
 
 **Dev-only** (`devMode = true`):
-- Unresolved binding keys — warns when a template binding auto-initializes to `null` (likely typo)
-- `*prop` without `ctx` attribute or `--ctx` CSS variable — warns that shared context won't be created
-- `*prop` conflict — warns when a later component tries to set a different initial value for the same shared prop
+- `W2` type change on publish, `W6` `*prop` without ctx, `W7` shared prop conflict
+- `W10` CSS data binding in SSR, `W11` unresolved binding key, `W12` text-node binding in SSR/ISO
 
 ---
 

package/CHANGELOG.md

@@ -1,11 +1,28 @@
 # Changelog
 
-## 3.4.6
+## 3.5.0
+
+### Added
+
+- **External dev messages module (`core/devMessages.js`).** All warning and error message strings have been extracted from core files into an optional module. Core files now emit short numeric codes (e.g. `[Symbiote W5]`). Import `@symbiotejs/symbiote/core/devMessages.js` once to get full human-readable messages. This reduces the core bundle size by removing all formatting strings from `PubSub.js`, `Symbiote.js`, `tpl-processors.js`, `AppRouter.js`, `html.js`, and both itemize processors.
+
+- **`core/warn.js` — lightweight message dispatcher.** Exports `warnMsg(code, ...args)`, `errMsg(code, ...args)`, and `registerMessages(map)`. All core files now use this dispatcher instead of inline `console.warn`/`console.error` calls.
+
+- **AppRouter: `title` accepts functions.** Route descriptors and `setDefaultTitle()` now accept `() => String` in addition to plain strings. The function is called at navigation time, enabling dynamic or localized page titles:
+  ```js
+  AppRouter.setDefaultTitle(() => i18n('app.title'));
+  AppRouter.initRoutingCtx('R', {
+    home: { pattern: '/', title: () => i18n('home.title'), default: true },
+  });
+  ```
+
+## 3.4.7
 
 ### 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.
 - **Symbiote: named context access no longer crashes when context is not yet registered.** The `$` proxy, `sub()`, `notify()`, `has()`, and `add()` now handle missing named contexts gracefully (return `undefined`/no-op instead of throwing).
+- **Symbiote: template bindings for named contexts are deferred when context is not yet registered.** Previously, `sub()` silently dropped the subscription; now it queues it via `PubSub.pendingDeps` and resolves automatically when `registerCtx()` is called.
 
 ## 3.4.4
 

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.3_kb-blue)
+![bundle size](https://img.shields.io/badge/brotli-6.4_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. **~6.3kb** brotli / **~7kb** gzip.
+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** 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.
 
@@ -20,7 +20,7 @@ Symbiote.js gives you the convenience of a modern framework while staying close
 - **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.
-- **Dev mode** — `Symbiote.devMode` enables verbose warnings for unresolved bindings.
+- **Dev mode** — `Symbiote.devMode` enables verbose warnings; import `devMessages.js` for full human-readable messages.
 - **DSD hydration** — `ssrMode` supports both light DOM and Declarative Shadow DOM.
 - **Class property fallback** — binding keys not in `init$` fall back to own class properties/methods.
 - And [more](https://github.com/symbiotejs/symbiote.js/blob/main/CHANGELOG.md).
@@ -64,7 +64,6 @@ import Symbiote, { html, css } from '@symbiotejs/symbiote';
 ## Isomorphic Web Components
 
 One component. Server-rendered or client-rendered — automatically. Set `isoMode = true` and the component figures it out: if server-rendered content exists, it hydrates; otherwise it renders from template. No conditional logic, no separate server/client versions:
-
 ```js
 class MyComponent extends Symbiote {
   isoMode = true;
@@ -75,7 +74,7 @@ class MyComponent extends Symbiote {
 }
 
 MyComponent.template = html`
-  <h2>{{count}}</h2>
+  <h2 ${{textContent: 'count'}}></h2>
   <button ${{onclick: 'increment'}}>Click me!</button>
 `;
 MyComponent.reg('my-component');
@@ -157,10 +156,9 @@ The `html` function supports two interpolation modes:
 - **Object** → reactive binding: `${{onclick: 'handler'}}`
 - **String/number** → native concatenation: `${pageTitle}`
 
-### Itemize (lists)
-
-Render lists from data arrays with efficient diffing:
+### Itemize (dynamic reactive lists)
 
+Render lists from data arrays with efficient updates:
 ```js
 class TaskList extends Symbiote {
   tasks = [
@@ -176,11 +174,11 @@ class TaskList extends Symbiote {
 }
 
 TaskList.template = html`
-  <ul itemize="tasks">
+  <div itemize="tasks">
     <template>
-      <li ${{onclick: '^onItemClick'}}>{{name}}</li>
+      <div ${{onclick: '^onItemClick'}}>{{name}}</div>
     </template>
-  </ul>
+  </div>
 `;
 ```
 
@@ -312,18 +310,12 @@ Components can read CSS custom properties as reactive state via `cssInit$`:
 
 ```css
 my-widget {
-  --columns: 3;
   --label: 'Click me';
 }
 ```
 
 ```js
-class MyWidget extends Symbiote {
-  cssInit$ = {
-    '--columns': 1,
-    '--label': '',
-  }
-}
+class MyWidget extends Symbiote {...}
 
 MyWidget.template = html`
   <span>{{--label}}</span>
@@ -344,12 +336,12 @@ CSS values are parsed automatically — quoted strings become strings, numbers b
 
 | Library | Minified | Gzip | Brotli |
 |---------|----------|------|--------|
-| **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** |
+| **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** |
 | **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.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.
+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.
 
 ## Browser support
 

package/core/AppRouter.js

@@ -1,10 +1,11 @@
 import PubSub from './PubSub.js';
+import { warnMsg } from './warn.js';
 
 export class AppRouter {
 
   /**
    * @typedef {{
-   *   title?: String,
+   *   title?: String | (() => String),
    *   default?: Boolean,
    *   error?: Boolean,
    *   pattern?: String,
@@ -49,14 +50,19 @@ export class AppRouter {
   }
 
   static #print(msg) {
-    console.warn(`[Symbiote > AppRouter] ${msg}`);
+    warnMsg(13, msg);
   }
 
-  /** @param {String} title */
+  /** @param {String | (() => String)} title */
   static setDefaultTitle(title) {
     this.defaultTitle = title;
   }
 
+  /** @param {String | (() => String) | undefined} title */
+  static #resolveTitle(title) {
+    return typeof title === 'function' ? title() : title;
+  }
+
   /** @param {Object<string, {}>} map */
   static setRoutingMap(map) {
     Object.assign(this.appMap, map);
@@ -232,8 +238,9 @@ export class AppRouter {
       }
     }
 
-    if (routeScheme.title) {
-      document.title = routeScheme.title;
+    let resolvedTitle = this.#resolveTitle(routeScheme.title);
+    if (resolvedTitle) {
+      document.title = resolvedTitle;
     }
 
     this.#currentState = routeBase;
@@ -290,11 +297,11 @@ export class AppRouter {
       }
     }
 
-    let title = routeScheme.title || this.defaultTitle || '';
+    let title = this.#resolveTitle(routeScheme.title) || this.#resolveTitle(this.defaultTitle) || '';
     try {
       window.history.pushState(null, title, url);
     } catch (err) {
-      console.warn('[Symbiote > AppRouter] History API is not available.');
+      warnMsg(14);
     }
     document.title = title;
   }
@@ -354,7 +361,7 @@ export class AppRouter {
       window.addEventListener(this.routingEventName, (/** @type {CustomEvent} */ e) => {
         routingCtx.multiPub({
           options: e.detail.options,
-          title: e.detail.options?.title || this.defaultTitle || '',
+          title: this.#resolveTitle(e.detail.options?.title) || this.#resolveTitle(this.defaultTitle) || '',
           route: e.detail.route,
         });
       });
@@ -365,7 +372,7 @@ export class AppRouter {
       routingCtx.multiPub({
         route: this.defaultRoute,
         options: {},
-        title: defaultDesc?.title || this.defaultTitle || '',
+        title: this.#resolveTitle(defaultDesc?.title) || this.#resolveTitle(this.defaultTitle) || '',
       });
     }
     return routingCtx;

package/core/PubSub.js

@@ -1,4 +1,5 @@
 import { DICT } from './dictionary.js';
+import { warnMsg } from './warn.js';
 
 // structuredClone() is limited by supported types, so we use custom cloning:
 function cloneObj(obj) {
@@ -73,8 +74,7 @@ export class PubSub {
    * @param {*} prop
    */
   static #warn(actionName, prop, ctx) {
-    let uid = String(ctx?.uid || 'local');
-    console.warn(`[Symbiote] PubSub (${uid}): cannot ${actionName}. Property: "${prop}"`);
+    warnMsg(1, String(ctx?.uid || 'local'), actionName, prop);
   }
 
   /**
@@ -270,11 +270,7 @@ export class PubSub {
       return;
     }
     if (PubSub.devMode && !(this.store[prop] === null || val === null) && typeof this.store[prop] !== typeof val) {
-      let uid = String(this.uid || 'local');
-      console.warn(
-        `[Symbiote] PubSub (${uid}): type change for "${String(prop)}" [${typeof this.store[prop]} → ${typeof val}].\n`
-        + `Previous: ${JSON.stringify(this.store[prop])}\nNew: ${JSON.stringify(val)}`
-      );
+      warnMsg(2, String(this.uid || 'local'), String(prop), typeof this.store[prop], typeof val, JSON.stringify(this.store[prop]), JSON.stringify(val));
     }
     this.store[prop] = val;
     this.notify(prop, val);
@@ -375,7 +371,7 @@ export class PubSub {
     /** @type {PubSub} */
     let data = PubSub.globalStore.get(uid);
     if (data) {
-      console.warn(`[Symbiote] PubSub: context "${uid}" is already registered. Returning existing instance.`);
+      warnMsg(3, uid);
     } else {
       data = new PubSub(schema);
       data.uid = uid;
@@ -404,10 +400,7 @@ export class PubSub {
    * @returns {PubSub}
    */
   static getCtx(uid, notify = true) {
-    return PubSub.globalStore.get(uid) || (notify && console.warn(
-      `[Symbiote] PubSub: context "${String(uid)}" not found.\n`
-      + `Available contexts: [${[...PubSub.globalStore.keys()].map(String).join(', ')}]`
-    ), null);
+    return PubSub.globalStore.get(uid) || (notify && warnMsg(4, String(uid), [...PubSub.globalStore.keys()].map(String).join(', ')), null);
   }
 }
 

package/core/Symbiote.js

@@ -1,4 +1,5 @@
 import PubSub from './PubSub.js';
+import { warnMsg } from './warn.js';
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
@@ -94,7 +95,7 @@ export class Symbiote extends HTMLElement {
           // @ts-expect-error
           template = customTpl.content.cloneNode(true);
         } else {
-          console.warn(`[Symbiote] <${this.localName}>: custom template "${customTplSelector}" not found.`);
+          warnMsg(5, this.localName, customTplSelector);
         }
       }
     }
@@ -279,7 +280,26 @@ export class Symbiote extends HTMLElement {
       handler(val);
     };
     let parsed = Symbiote.#parseProp(/** @type {string} */ (prop), this);
-    if (!parsed) return;
+    if (!parsed) {
+      // Named context not found — defer subscription
+      let slashIdx = /** @type {string} */ (prop).indexOf('/');
+      if (slashIdx !== -1) {
+        let ctxName = /** @type {string} */ (prop).slice(0, slashIdx);
+        let propName = /** @type {string} */ (prop).slice(slashIdx + 1);
+        if (!PubSub.pendingDeps.has(ctxName)) {
+          PubSub.pendingDeps.set(ctxName, []);
+        }
+        PubSub.pendingDeps.get(ctxName).push(() => {
+          let ctx = PubSub.getCtx(ctxName, false);
+          if (!ctx) return;
+          let sub = ctx.sub(propName, subCb, init);
+          if (sub) {
+            this.allSubs.add(sub);
+          }
+        });
+      }
+      return;
+    }
     if (!parsed.ctx.has(parsed.name)) {
       // Avoid *prop binding race:
       window.queueMicrotask(() => {
@@ -408,18 +428,13 @@ export class Symbiote extends HTMLElement {
         let sharedVal = this.init$[prop];
         if (!this.ctxName) {
           if (Symbiote.devMode) {
-            console.warn(
-              `[Symbiote] "${this.localName}" uses *${sharedName} without ctx attribute or --ctx CSS variable. `
-              + 'Set ctx="name" or --ctx to share state.'
-            );
+            warnMsg(6, this.localName, sharedName);
           }
         } else {
           if (Symbiote.devMode && this.sharedCtx.has(sharedName)) {
             let existing = this.sharedCtx.read(sharedName);
             if (existing !== sharedVal && typeof sharedVal !== 'function') {
-              console.warn(
-                `[Symbiote] Shared prop "${sharedName}" already has value. Keeping existing.`
-              );
+              warnMsg(7, sharedName);
             }
           }
           this.sharedCtx.add(sharedName, sharedVal);
@@ -558,10 +573,7 @@ export class Symbiote extends HTMLElement {
     let registeredClass = window.customElements.get(tagName);
     if (registeredClass) {
       if (!isAlias && registeredClass !== this) {
-        console.warn(
-          `[Symbiote] <${tagName}> is already registered (class: ${registeredClass.name}).\n`
-          + `Attempted re-registration with class "${this.name}" — skipped.`
-        );
+        warnMsg(8, tagName, registeredClass.name, this.name);
       }
       return this;
     }
@@ -622,7 +634,7 @@ export class Symbiote extends HTMLElement {
       try {
         this.#cssDataCache[propName] = parseCssPropertyValue(val);
       } catch (e) {
-        !silentCheck && console.warn(`[Symbiote] <${this.localName}>: CSS data parse error for "${propName}". Check that the CSS custom property is defined.`);
+        !silentCheck && warnMsg(9, this.localName, propName);
         this.#cssDataCache[propName] = null;
       }
     }
@@ -653,10 +665,7 @@ export class Symbiote extends HTMLElement {
    */
   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.'
-      );
+      warnMsg(10, this.localName, propName);
     }
     if (!this.#boundCssProps) {
       this.#boundCssProps = new Set();

package/core/devMessages.js

@@ -0,0 +1,59 @@
+import { registerMessages } from './warn.js';
+import Symbiote from './Symbiote.js';
+
+Symbiote.devMode = true;
+
+registerMessages(new Map([
+  // PubSub
+  [1, (uid, action, prop) =>
+    `[Symbiote] PubSub (${uid}): cannot ${action}. Property: "${prop}"`],
+  [2, (uid, prop, prevType, newType, prev, next) =>
+    `[Symbiote] PubSub (${uid}): type change for "${prop}" [${prevType} → ${newType}].\n`
+    + `Previous: ${prev}\nNew: ${next}`],
+  [3, (uid) =>
+    `[Symbiote] PubSub: context "${uid}" is already registered. Returning existing instance.`],
+  [4, (uid, keys) =>
+    `[Symbiote] PubSub: context "${uid}" not found.\n`
+    + `Available contexts: [${keys}]`],
+
+  // Symbiote
+  [5, (localName, selector) =>
+    `[Symbiote] <${localName}>: custom template "${selector}" not found.`],
+  [6, (localName, sharedName) =>
+    `[Symbiote] "${localName}" uses *${sharedName} without ctx attribute or --ctx CSS variable. `
+    + 'Set ctx="name" or --ctx to share state.'],
+  [7, (sharedName) =>
+    `[Symbiote] Shared prop "${sharedName}" already has value. Keeping existing.`],
+  [8, (tagName, existingClass, newClass) =>
+    `[Symbiote] <${tagName}> is already registered (class: ${existingClass}).\n`
+    + `Attempted re-registration with class "${newClass}" — skipped.`],
+  [9, (localName, propName) =>
+    `[Symbiote] <${localName}>: CSS data parse error for "${propName}". Check that the CSS custom property is defined.`],
+  [10, (localName, propName) =>
+    `[Symbiote dev] <${localName}>: CSS data binding "${propName}" will not read computed styles during SSR. `
+    + 'The init value will be used instead.'],
+
+  // tpl-processors
+  [11, (localName, valKey, knownKeys) =>
+    `[Symbiote dev] <${localName}>: binding key "${valKey}" not found in init$ (auto-initialized to null).\n`
+    + `Known keys: [${knownKeys}]`],
+  [12, (localName, prop) =>
+    `[Symbiote dev] <${localName}>: text-node binding "{{${prop}}}" has no hydration attribute. `
+    + 'In ssrMode/isoMode it will be rendered by the server but won\'t update on the client. '
+    + 'Use property binding (${{textContent: \'' + prop + '\'}}) for hydratable text.'],
+
+  // AppRouter
+  [13, (msg) =>
+    `[Symbiote > AppRouter] ${msg}`],
+  [14, () =>
+    '[Symbiote > AppRouter] History API is not available.'],
+
+  // html
+  [15, (val) =>
+    `[Symbiote > html] \`this\` used in template interpolation (value: ${val}).\n`
+    + 'Templates are context-free — use ${{ prop: \'stateKey\' }} binding syntax instead.'],
+
+  // itemizeProcessor
+  [16, (localName, dataType, data) =>
+    `[Symbiote] <${localName}>: itemize data must be Array or Object, got ${dataType}: ${data}`],
+]));

package/core/html.js

@@ -1,4 +1,5 @@
 import { DICT } from './dictionary.js';
+import { errMsg } from './warn.js';
 
 /** @type {String[]} */
 export const RESERVED_ATTRIBUTES = [
@@ -24,10 +25,7 @@ export function html(parts, ...props) {
     if (idx >= props.length) return;
     let val = props[idx];
     if (val === undefined || val === null) {
-      console.error(
-        `[Symbiote > html] \`this\` used in template interpolation (value: ${val}).\n`
-        + 'Templates are context-free — use ${{ prop: \'stateKey\' }} binding syntax instead.'
-      );
+      errMsg(15, val);
       return;
     }
     if (val?.constructor === Object) {

package/core/itemizeProcessor-keyed.js

@@ -1,4 +1,5 @@
 import { animateOut } from './animateOut.js';
+import { warnMsg } from './warn.js';
 import { setupItemize } from './itemizeSetup.js';
 
 /**
@@ -57,7 +58,7 @@ export function itemizeProcessor(fr, fnCtx) {
           items.push(init);
         }
       } else {
-        console.warn(`[Symbiote] <${fnCtx.localName}>: itemize data must be Array or Object, got ${typeof data}:`, data);
+        warnMsg(16, fnCtx.localName, typeof data, data);
         return;
       }
 

package/core/itemizeProcessor.js

@@ -1,4 +1,5 @@
 import { animateOut } from './animateOut.js';
+import { warnMsg } from './warn.js';
 import { setupItemize } from './itemizeSetup.js';
 
 /**
@@ -57,7 +58,7 @@ export function itemizeProcessor(fr, fnCtx) {
         }
         fillItems(items);
       } else {
-        console.warn(`[Symbiote] <${fnCtx.localName}>: itemize data must be Array or Object, got ${typeof data}:`, data);
+        warnMsg(16, fnCtx.localName, typeof data, data);
       }
     }, !clientSSR);
   });

package/core/tpl-processors.js

@@ -1,4 +1,5 @@
 import { DICT } from './dictionary.js';
+import { warnMsg } from './warn.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
 import { ownElements, isOwnNode } from './ownElements.js';
 import { initPropFallback } from './initPropFallback.js';
@@ -64,10 +65,7 @@ function domBindProcessor(fr, fnCtx) {
           // Dev-only: warn about bindings that aren't in init$ (likely typos)
           if (fnCtx.localCtx.read(valKey) === null && fnCtx.Symbiote?.devMode) {
             let known = Object.keys(fnCtx.init$).filter((k) => !k.startsWith('+'));
-            console.warn(
-              `[Symbiote dev] <${fnCtx.localName}>: binding key "${valKey}" not found in init$ (auto-initialized to null).\n`
-              + `Known keys: [${known.join(', ')}]`
-            );
+            warnMsg(11, fnCtx.localName, valKey, known.join(', '));
           }
         }
         let initVal = fnCtx.$[valKey];
@@ -156,11 +154,7 @@ const txtNodesProcessor = function (fr, fnCtx) {
         initPropFallback(fnCtx, prop);
       }
       if (fnCtx.Symbiote?.devMode && (fnCtx.ssrMode || fnCtx.isoMode)) {
-        console.warn(
-          `[Symbiote dev] <${fnCtx.localName}>: text-node binding "{{${prop}}}" has no hydration attribute. `
-          + 'In ssrMode/isoMode it will be rendered by the server but won\'t update on the client. '
-          + 'Use property binding (${{textContent: \'' + prop + '\'}}) for hydratable text.'
-        );
+        warnMsg(12, fnCtx.localName, prop);
       }
       fnCtx.sub(prop, (val) => {
         tNode.textContent = val;

package/core/warn.js

@@ -0,0 +1,27 @@
+/** @type {Map<number, (...args: any[]) => string>} */
+let messages = globalThis.__SYMBIOTE_DEV_MESSAGES || (globalThis.__SYMBIOTE_DEV_MESSAGES = new Map());
+
+/**
+ * @param {number} code
+ * @param  {...any} args
+ */
+export function warnMsg(code, ...args) {
+  let fmt = messages.get(code);
+  console.warn(fmt ? fmt(...args) : `[Symbiote W${code}]`);
+}
+
+/**
+ * @param {number} code
+ * @param  {...any} args
+ */
+export function errMsg(code, ...args) {
+  let fmt = messages.get(code);
+  console.error(fmt ? fmt(...args) : `[Symbiote E${code}]`);
+}
+
+/** @param {Map<number, (...args: any[]) => string>} map */
+export function registerMessages(map) {
+  for (let [code, fmt] of map) {
+    messages.set(code, fmt);
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.4.6",
+  "version": "3.5.0",
   "description": "Symbiote.js - zero-dependency close-to-platform frontend library to build super-powered web components",
   "author": "team@rnd-pro.com",
   "license": "MIT",
@@ -63,6 +63,10 @@
       "types": "./types/core/css.d.ts",
       "default": "./core/css.js"
     },
+    "./core/devMessages.js": {
+      "types": "./types/core/devMessages.d.ts",
+      "default": "./core/devMessages.js"
+    },
     "./core/dictionary.js": {
       "types": "./types/core/dictionary.d.ts",
       "default": "./core/dictionary.js"
@@ -103,6 +107,10 @@
       "types": "./types/core/tpl-processors.d.ts",
       "default": "./core/tpl-processors.js"
     },
+    "./core/warn.js": {
+      "types": "./types/core/warn.d.ts",
+      "default": "./core/warn.js"
+    },
     "./utils/UID.js": {
       "types": "./types/utils/UID.d.ts",
       "default": "./utils/UID.js"

package/types/core/AppRouter.d.ts

@@ -1,7 +1,7 @@
 export class AppRouter {
     static appMap: {
         [x: string]: {
-            title?: string;
+            title?: string | (() => string);
             default?: boolean;
             error?: boolean;
             pattern?: string;
@@ -9,7 +9,7 @@ export class AppRouter {
             __loaded?: boolean;
         };
     };
-    static setDefaultTitle(title: string): void;
+    static setDefaultTitle(title: string | (() => string)): void;
     static setRoutingMap(map: {
         [x: string]: {};
     }): void;
@@ -41,7 +41,7 @@ export class AppRouter {
     static get separator(): string;
     static initRoutingCtx(ctxName: string, routingMap: {
         [x: string]: {
-            title?: string;
+            title?: string | (() => string);
             default?: boolean;
             error?: boolean;
             pattern?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AppRouter.d.ts","sourceRoot":"","sources":["../../core/AppRouter.js"],"names":[],"mappings":"AAEA;IA4BE,iCADW,MAAM,IAAI,CACF;IAEnB,uCAAkB;IAElB,8CAAyB;IAEzB;;;;;;mBA1BY,MAAM,OAAO,CAAC,GAAC,CAAC;;;MA0BQ;IAEpC,6BADW;;;;;aAZA;;;;;QAAa,IAAI,KACf,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,GAWhD,CACH;IAEpB,mCADW;;;;;QAAa,IAAI,CACA;IAE5B,kCADW,OAAO,CACU;IAE5B,uCADW,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAClC;IAE9B,8CAEC;IAED,2CAEC;IAGD,4CAEC;IAGD;;aAgBC;IAMD,6CAuBC;IAGD,0CAGC;IAGD,sCAEC;IAED;;;MAKC;IAED;;;MAiBC;IAED;;;MAwBC;IAMD;;;;;QAFa,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAS5C;IAED,+BAsEC;IAMD;;aAwCC;IAMD;;aAGC;IAQD;;;;;aAnSW;;;;;QAAa,IAAI,KACf,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,GAgS1D,MAAM,IAAI,CAUtB;IAGD,wCAGC;IAGD,+BAEC;IAOD;;;;;;mBA5UY,MAAM,OAAO,CAAC,GAAC,CAAC;;;oBAyW3B;IAED,kDAQC;IAED,sCAIC;CACF;;mBApYkB,aAAa"}
+{"version":3,"file":"AppRouter.d.ts","sourceRoot":"","sources":["../../core/AppRouter.js"],"names":[],"mappings":"AAGA;IA4BE,iCADW,MAAM,IAAI,CACF;IAEnB,uCAAkB;IAElB,8CAAyB;IAEzB;;oBA9Ba,SAAS,CAAC,YAAY,CAAC;;;;mBAIxB,MAAM,OAAO,CAAC,GAAC,CAAC;;;MA0BQ;IAEpC,6BADW;;;;;aAZA;;;;;QAAa,IAAI,KACf,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,GAWhD,CACH;IAEpB,mCADW;;;;;QAAa,IAAI,CACA;IAE5B,kCADW,OAAO,CACU;IAE5B,uCADW,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAClC;IAE9B,8CAEC;IAED,2CAEC;IAGD,8BADY,SAAS,CAAC,YAAY,CAAC,QAGlC;IAGD,yCADY,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,UAG9C;IAGD;;aAgBC;IAMD,6CAuBC;IAGD,0CAGC;IAGD,sCAEC;IAED;;;MAKC;IAED;;;MAiBC;IAED;;;MAwBC;IAMD;;;;;QAFa,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAS5C;IAED,+BAuEC;IAMD;;aAwCC;IAMD;;aAGC;IAQD;;;;;aAzSW;;;;;QAAa,IAAI,KACf,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,GAsS1D,MAAM,IAAI,CAUtB;IAGD,wCAGC;IAGD,+BAEC;IAOD;;oBAtVa,SAAS,CAAC,YAAY,CAAC;;;;mBAIxB,MAAM,OAAO,CAAC,GAAC,CAAC;;;oBA+W3B;IAED,kDAQC;IAED,sCAIC;CACF;;mBA3YkB,aAAa"}

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;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"}
+{"version":3,"file":"PubSub.d.ts","sourceRoot":"","sources":["../../core/PubSub.js"],"names":[],"mappings":"AAiBA,oBADwC,CAAC,SAA1B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAE;IA2DrC,oDAFW,GAAC,kBAIX;IAoSD,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,iCAMzB;IAxVD,oBADY,CAAC,EAWZ;IARG,WAA6B;IAO/B,aADW,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAChB;IAqIxC,WADY,MAAM,CAAC,OAqClB;IAzBK,sBAAuB;IA4B7B,uBAEC;IAOD,uBAHW,OAAO,2BASjB;IAMD,UAHW,MAAM,CAAC,OACP,OAAO,QAiBjB;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;;CA2CF;;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;IA0JhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MA0CX;IAyPD,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;IA5jBD,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,wBAoB/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;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;;mBA5tBkB,aAAa;qBACX,iBAAiB;2BACX,iBAAiB"}
+{"version":3,"file":"Symbiote.d.ts","sourceRoot":"","sources":["../../core/Symbiote.js"],"names":[],"mappings":";;AAoBA,sBADc,CAAC;IAuBb,cADW,mBAAmB,CACjB;IAGb,sCAAwB;IAExB,iCAGC;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;;mBAruBkB,aAAa;qBAEX,iBAAiB;2BACX,iBAAiB"}

package/types/core/devMessages.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=devMessages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"devMessages.d.ts","sourceRoot":"","sources":["../../core/devMessages.js"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../core/html.js"],"names":[],"mappings":"AAmBA,qBALa,CAAC,SACH,oBAAoB,YACpB,CAAC;QAAO,MAAM;CAAS,GAAG,cAAc,YAAY,CAAC,CAAC,EAAE,UAgClE;AA7CD,kCADW,QAAQ,CAOjB;;6BAEY,MAAM,CAAC,MAAM,qCAAgC,SAAS"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../core/html.js"],"names":[],"mappings":"AAoBA,qBALa,CAAC,SACH,oBAAoB,YACpB,CAAC;QAAO,MAAM;CAAS,GAAG,cAAc,YAAY,CAAC,CAAC,EAAE,UA6BlE;AA1CD,kCADW,QAAQ,CAOjB;;6BAEY,MAAM,CAAC,MAAM,qCAAgC,SAAS"}

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

@@ -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,QAkLX"}
+{"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,QAkLX"}

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

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

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

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

package/types/core/warn.d.ts

@@ -0,0 +1,4 @@
+export function warnMsg(code: number, ...args: any[]): void;
+export function errMsg(code: number, ...args: any[]): void;
+export function registerMessages(map: Map<number, (...args: any[]) => string>): void;
+//# sourceMappingURL=warn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"warn.d.ts","sourceRoot":"","sources":["../../core/warn.js"],"names":[],"mappings":"AAOA,8BAHW,MAAM,WACF,GAAG,EAAA,QAKjB;AAMD,6BAHW,MAAM,WACF,GAAG,EAAA,QAKjB;AAGD,sCADY,GAAG,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,QAKlD"}