@symbiotejs/symbiote 3.1.2 → 3.2.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.1.0**. Zero dependencies. ~6 KB gzip.
+> Current version: **3.2.0**. Zero dependencies. ~6 KB gzip.
 
 ---
 
@@ -22,8 +22,11 @@ import { html } from '@symbiotejs/symbiote/core/html.js';
 import { css } from '@symbiotejs/symbiote/core/css.js';
 ```
 
-### Full export list (index.js)
-`Symbiote` (default), `html`, `css`, `PubSub`, `AppRouter`, `DICT`, `UID`, `setNestedProp`, `applyStyles`, `applyAttributes`, `create`, `kebabToCamel`, `reassignDictionary`
+### Core exports (index.js)
+`Symbiote` (default), `html`, `css`, `PubSub`, `DICT`, `animateOut`
+
+### Utils exports (`@symbiotejs/symbiote/utils`)
+`UID`, `setNestedProp`, `applyStyles`, `applyAttributes`, `create`, `kebabToCamel`, `reassignDictionary`
 
 ---
 
@@ -734,13 +737,13 @@ const tag = MyComponent.is; // 'my-component'
 ## Utilities
 
 ```js
-import { UID } from '@symbiotejs/symbiote';
+import { UID } from '@symbiotejs/symbiote/utils';
 UID.generate('XXXXX-XXX'); // e.g. 'aB3kD-z9Q'
 
-import { create, applyStyles, applyAttributes } from '@symbiotejs/symbiote';
+import { create, applyStyles, applyAttributes } from '@symbiotejs/symbiote/utils';
 let el = create({ tag: 'div', attributes: { id: 'x' }, styles: { color: 'red' }, children: [...] });
 
-import { reassignDictionary } from '@symbiotejs/symbiote';
+import { reassignDictionary } from '@symbiotejs/symbiote/utils';
 reassignDictionary({ BIND_ATTR: 'data-bind' }); // customize internal attribute names
 ```
 

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 3.2.0
+
+### Added
+
+- **Itemize class property fallback.**
+  The `itemize` data source property now supports class property fallback, consistent with `domBindProcessor` and `txtNodesProcessor`.
+
+### Changed
+
+- **Utils moved to separate entry point.**
+  `UID`, `setNestedProp`, `applyStyles`, `applyAttributes`, `create`, `kebabToCamel`, `reassignDictionary` are no longer exported from the main `@symbiotejs/symbiote` entry point. Import from `@symbiotejs/symbiote/utils` instead:
+  ```js
+  import { UID, create } from '@symbiotejs/symbiote/utils';
+  ```
+  Individual deep imports (`@symbiotejs/symbiote/utils/UID.js`, etc.) continue to work.
+
+- **`initPropFallback` extracted to shared module.**
+  Duplicated fallback initialization logic across template processors consolidated into `core/initPropFallback.js`.
+
 ## 3.1.0
 
 ### Changed

package/core/Symbiote.js

@@ -1,7 +1,6 @@
 import PubSub from './PubSub.js';
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
-import { UID } from '../utils/UID.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
 import { prepareStyleSheet } from '../utils/prepareStyleSheet.js';
 
@@ -10,7 +9,7 @@ import { parseCssPropertyValue } from '../utils/parseCssPropertyValue.js';
 
 export { html } from './html.js';
 export { css } from './css.js';
-export { UID, PubSub, DICT }
+export { PubSub, DICT }
 
 let autoTagsCount = 0;
 

package/core/index.js

@@ -1,6 +1,5 @@
 import Symbiote from './Symbiote.js';
 
-// Core modules:
 export { Symbiote };
 export { html } from './html.js';
 export { css } from './css.js';
@@ -8,13 +7,4 @@ export { PubSub } from './PubSub.js';
 export { DICT } from './dictionary.js';
 export { animateOut } from './animateOut.js';
 
-// Utils:
-export { UID } from '../utils/UID.js';
-export { setNestedProp } from '../utils/setNestedProp.js';
-export { applyStyles } from '../utils/dom-helpers.js';
-export { applyAttributes } from '../utils/dom-helpers.js';
-export { create } from '../utils/dom-helpers.js';
-export { kebabToCamel } from '../utils/kebabToCamel.js';
-export { reassignDictionary } from '../utils/reassignDictionary.js';
-
 export default Symbiote;

package/core/initPropFallback.js

@@ -0,0 +1,21 @@
+import { DICT } from './dictionary.js';
+
+/**
+ * Initialize a state property from a class property fallback when it's not
+ * already registered in the component's PubSub context.
+ * Shared across domBindProcessor, txtNodesProcessor, and itemizeProcessor.
+ * @param {import('./Symbiote.js').Symbiote} fnCtx
+ * @param {string} key
+ */
+export function initPropFallback(fnCtx, key) {
+  if (key.startsWith(DICT.ATTR_BIND_PX)) {
+    fnCtx.add(key, fnCtx.getAttribute(key.replace(DICT.ATTR_BIND_PX, '')));
+  } else if (Object.hasOwn(fnCtx, key) && fnCtx[key] !== undefined) {
+    let ownVal = fnCtx[key];
+    fnCtx.add(key, typeof ownVal === 'function' ? ownVal.bind(fnCtx) : ownVal);
+  } else if (typeof fnCtx[key] === 'function') {
+    fnCtx.add(key, fnCtx[key].bind(fnCtx));
+  } else {
+    fnCtx.add(key, null);
+  }
+}

package/core/itemizeProcessor.js

@@ -1,6 +1,7 @@
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
 import { ownElements } from './ownElements.js';
+import { initPropFallback } from './initPropFallback.js';
 
 /**
  * @template {import('./Symbiote.js').Symbiote} T
@@ -33,9 +34,7 @@ export function itemizeProcessor(fr, fnCtx) {
       }
       let repeatDataKey = el.getAttribute(DICT.LIST_ATTR);
       if (!fnCtx.has(repeatDataKey) && fnCtx.allowTemplateInits) {
-        if (Object.hasOwn(fnCtx, repeatDataKey) && fnCtx[repeatDataKey] !== undefined) {
-          fnCtx.add(repeatDataKey, fnCtx[repeatDataKey]);
-        }
+        initPropFallback(fnCtx, repeatDataKey);
       }
       fnCtx.sub(repeatDataKey, (data) => {
         if (!data) {

package/core/tpl-processors.js

@@ -1,10 +1,12 @@
 import { DICT } from './dictionary.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
 import { ownElements, isOwnNode } from './ownElements.js';
+import { initPropFallback } from './initPropFallback.js';
 
 // Should go first among other processors:
 import { itemizeProcessor } from './itemizeProcessor.js';
 
+export { initPropFallback };
 
 
 /**
@@ -58,23 +60,14 @@ function domBindProcessor(fr, fnCtx) {
           valKey = valKey.replace('!', '');
         }
         if (!fnCtx.has(valKey) && fnCtx.allowTemplateInits) {
-          if (valKey.startsWith(DICT.ATTR_BIND_PX)) {
-            fnCtx.add(valKey, fnCtx.getAttribute(valKey.replace(DICT.ATTR_BIND_PX, '')));
-          } else if (Object.hasOwn(fnCtx, valKey) && fnCtx[valKey] !== undefined) {
-            let ownVal = fnCtx[valKey];
-            fnCtx.add(valKey, typeof ownVal === 'function' ? ownVal.bind(fnCtx) : ownVal);
-          } else if (typeof fnCtx[valKey] === 'function') {
-            fnCtx.add(valKey, fnCtx[valKey].bind(fnCtx));
-          } else {
-            fnCtx.add(valKey, null);
-            // Dev-only: warn about bindings that aren't in init$ (likely typos)
-            if (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(', ')}]`
-              );
-            }
+          initPropFallback(fnCtx, valKey);
+          // 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(', ')}]`
+            );
           }
         }
         fnCtx.sub(valKey, (val) => {
@@ -157,17 +150,7 @@ const txtNodesProcessor = function (fr, fnCtx) {
       let prop = tNode.textContent.replace(DICT.TEXT_NODE_OPEN_TOKEN, '').replace(DICT.TEXT_NODE_CLOSE_TOKEN, '');
       tNode.textContent = '';
       if (!fnCtx.has(prop) && fnCtx.allowTemplateInits) {
-        if (prop.startsWith(DICT.ATTR_BIND_PX)) {
-          fnCtx.add(prop, fnCtx.getAttribute(prop.replace(DICT.ATTR_BIND_PX, '')));
-          fnCtx.initAttributeObserver();
-        } else if (Object.hasOwn(fnCtx, prop) && fnCtx[prop] !== undefined) {
-          let ownVal = fnCtx[prop];
-          fnCtx.add(prop, typeof ownVal === 'function' ? ownVal.bind(fnCtx) : ownVal);
-        } else if (typeof fnCtx[prop] === 'function') {
-          fnCtx.add(prop, fnCtx[prop].bind(fnCtx));
-        } else {
-          fnCtx.add(prop, null);
-        }
+        initPropFallback(fnCtx, prop);
       }
       fnCtx.sub(prop, (val) => {
         tNode.textContent = val;
@@ -177,3 +160,4 @@ const txtNodesProcessor = function (fr, fnCtx) {
 };
 
 export default [itemizeProcessor, refProcessor, domBindProcessor, txtNodesProcessor];
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Symbiote.js - zero-dependency close-to-platform frontend library to build super-powered web components",
   "author": "team@rnd-pro.com",
   "license": "MIT",
@@ -33,6 +33,9 @@
       "types": "./types/core/index.d.ts",
       "default": "./core/index.js"
     },
+    "./utils": {
+      "default": "./utils/index.js"
+    },
     "./core/AppRouter.js": {
       "types": "./types/core/AppRouter.d.ts",
       "default": "./core/AppRouter.js"
@@ -61,6 +64,10 @@
       "types": "./types/core/html.d.ts",
       "default": "./core/html.js"
     },
+    "./core/initPropFallback.js": {
+      "types": "./types/core/initPropFallback.d.ts",
+      "default": "./core/initPropFallback.js"
+    },
     "./core/itemizeProcessor-keyed.js": {
       "types": "./types/core/itemizeProcessor-keyed.d.ts",
       "default": "./core/itemizeProcessor-keyed.js"

package/scripts/update-exports.js

@@ -26,12 +26,15 @@ async function run() {
       types: './types/core/index.d.ts',
       default: './core/index.js',
     },
+    './utils': {
+      default: './utils/index.js',
+    },
   };
 
   for (let dir of DIRS) {
     let modules = await getModules(dir);
     for (let mod of modules) {
-      if (mod === './core/index.js') continue;
+      if (mod === './core/index.js' || mod === './utils/index.js') continue;
       let dtsPath = `./types/${dir}/${basename(mod, '.js')}.d.ts`;
       if (!existsSync(join(ROOT, dtsPath))) continue;
       exports[mod] = {

package/types/core/Symbiote.d.ts

@@ -65,9 +65,8 @@ export class Symbiote<S> extends HTMLElement {
     #private;
 }
 export default Symbiote;
-import { UID } from '../utils/UID.js';
 import PubSub from './PubSub.js';
 import { DICT } from './dictionary.js';
 import { animateOut } from './animateOut.js';
-export { UID, PubSub, DICT };
+export { PubSub, DICT };
 //# sourceMappingURL=Symbiote.d.ts.map

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

@@ -1 +1 @@
-{"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;IA8IhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MAuCX;IA+OD,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;IApiBD,cA2BC;IAzHD,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BAyEnC;IAKC,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;IAE7B,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;IAoB1C,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;;oBAxrBmB,iBAAiB;mBAHlB,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;IA8IhB,+BAJwB,CAAC,SAAZ,aAAU,uBAEZ,CAAC;;;MAuCX;IA+OD,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;IApiBD,cA2BC;IAzHD,gCAEC;IAED,qBAAiB;IACjB,uBAAmB;IAiBnB,kBAHW,SAAS,gBAAgB,0BAyEnC;IAKC,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;IAE7B,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;IAoB1C,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;;mBA1rBkB,aAAa;qBACX,iBAAiB;2BACX,iBAAiB"}

package/types/core/index.d.ts

@@ -4,11 +4,6 @@ export { css } from "./css.js";
 export { PubSub } from "./PubSub.js";
 export { DICT } from "./dictionary.js";
 export { animateOut } from "./animateOut.js";
-export { UID } from "../utils/UID.js";
-export { setNestedProp } from "../utils/setNestedProp.js";
-export { kebabToCamel } from "../utils/kebabToCamel.js";
-export { reassignDictionary } from "../utils/reassignDictionary.js";
 export default Symbiote;
 import Symbiote from './Symbiote.js';
-export { applyStyles, applyAttributes, create } from "../utils/dom-helpers.js";
 //# sourceMappingURL=index.d.ts.map

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

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

package/types/core/initPropFallback.d.ts

@@ -0,0 +1,2 @@
+export function initPropFallback(fnCtx: import("./Symbiote.js").Symbiote<any>, key: string): void;
+//# sourceMappingURL=initPropFallback.d.ts.map

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

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

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

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

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

@@ -1,3 +1,5 @@
+export { initPropFallback };
 declare const _default: (<T extends import("./Symbiote.js").Symbiote<any>>(fr: DocumentFragment, fnCtx: T) => void)[];
 export default _default;
+import { initPropFallback } from './initPropFallback.js';
 //# sourceMappingURL=tpl-processors.d.ts.map

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":"0BAiIgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC"}
+{"version":3,"file":"tpl-processors.d.ts","sourceRoot":"","sources":["../../core/tpl-processors.js"],"names":[],"mappings":";0BA0HgD,CAAC,SAApC,qCAAkC,MACpC,gBAAgB,SAChB,CAAC;;iCAzHqB,uBAAuB"}

package/types/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { UID } from "./UID.js";
+export { setNestedProp } from "./setNestedProp.js";
+export { kebabToCamel } from "./kebabToCamel.js";
+export { reassignDictionary } from "./reassignDictionary.js";
+export { applyStyles, applyAttributes, create } from "./dom-helpers.js";
+//# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts.map

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

package/utils/index.js

@@ -0,0 +1,5 @@
+export { UID } from './UID.js';
+export { setNestedProp } from './setNestedProp.js';
+export { applyStyles, applyAttributes, create } from './dom-helpers.js';
+export { kebabToCamel } from './kebabToCamel.js';
+export { reassignDictionary } from './reassignDictionary.js';