@twobirds/microcomponents 0.2.1 → 0.2.2

package/dist/utils/helpers.d.ts

@@ -253,16 +253,16 @@ export declare function processAssets(instance: McController, assets: Record<str
  * });
  * ```
  */
-export declare function loadAssets(name: string, assets: string[]): Promise<string[]>;
+export declare function loadAssets(name: string, assets: string[]): Promise<Array<any>>;
 /**
  * Binds declarative event attributes in a template fragment to microcomponent triggers.
  *
  * Scans all elements under `root` for attributes whose names correspond to native DOM
  * events (e.g. `click`, `submit`, `change`). The attribute value encodes the target and
- * handler method in the form `target#methodName`:
+ * handler method in the form `target|methodName`:
  *
- * - `this#myHandler` — triggers locally on the component attached to this element.
- * - `#other-comp#submit` — resolves elements via `querySelectorAll('#other-comp')` and
+ * - `this|myHandler` — triggers locally on the component attached to this element.
+ * - `other-comp|submit` — resolves elements via `querySelectorAll('other-comp')` and
  *   triggers the event on each matched host's `_mc`.
  *
  * An optional sibling `payload` attribute supplies the data argument for `trigger()`.
@@ -272,9 +272,9 @@ export declare function loadAssets(name: string, assets: string[]): Promise<stri
  *
  * @example
  * ```html
- * <button click="this#onSubmit" payload='{"action":"go"}'>Submit</button>
- * <input change="#cart-form#refresh">
+ * <button click='this|onSubmit|{"action":"go"}'>Submit</button>
+ * <input change="|cart-form|refresh">
  * ```
  */
-export declare function bindTemplateEvents(root: HTMLElement | ShadowRoot, instance: McController): void;
+export declare function bindTemplateEvents(rootElement: HTMLElement | ShadowRoot, instance: McController): void;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,qBAAqB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAe1E;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAgCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAOnF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA4B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAwB5E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,UAAU,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,CA0C/F"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,qBAAqB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAe1E;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAgCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAOnF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA4B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAiC9E;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,CA2CtG"}

package/dist/utils/helpers.js

@@ -444,6 +444,16 @@ export function loadAssets(name, assets) {
             if (!resp.ok) {
                 return `file not found: ${filename}`;
             }
+            if (filename.endsWith('json')) {
+                const text = await resp.text();
+                try {
+                    return JSON.parse(text);
+                }
+                catch {
+                    console.error(`could not JSON.parse() asset '${asset}' from ${filename}:\n`, text);
+                    return null;
+                }
+            }
             return resp.text();
         }
         catch {
@@ -456,10 +466,10 @@ export function loadAssets(name, assets) {
  *
  * Scans all elements under `root` for attributes whose names correspond to native DOM
  * events (e.g. `click`, `submit`, `change`). The attribute value encodes the target and
- * handler method in the form `target#methodName`:
+ * handler method in the form `target|methodName`:
  *
- * - `this#myHandler` — triggers locally on the component attached to this element.
- * - `#other-comp#submit` — resolves elements via `querySelectorAll('#other-comp')` and
+ * - `this|myHandler` — triggers locally on the component attached to this element.
+ * - `other-comp|submit` — resolves elements via `querySelectorAll('other-comp')` and
  *   triggers the event on each matched host's `_mc`.
  *
  * An optional sibling `payload` attribute supplies the data argument for `trigger()`.
@@ -469,25 +479,28 @@ export function loadAssets(name, assets) {
  *
  * @example
  * ```html
- * <button click="this#onSubmit" payload='{"action":"go"}'>Submit</button>
- * <input change="#cart-form#refresh">
+ * <button click='this|onSubmit|{"action":"go"}'>Submit</button>
+ * <input change="|cart-form|refresh">
  * ```
  */
-export function bindTemplateEvents(root, instance) {
+export function bindTemplateEvents(rootElement, instance) {
     // Collect all elements that carry at least one attribute matching a native event name.
-    const allElements = root.querySelectorAll('*');
+    const allElements = [...rootElement.querySelectorAll('*')];
     for (const el of allElements) {
         if (!(el instanceof HTMLElement))
             continue;
-        const attrs = Array.from(el.attributes);
+        const attrs = [...el.attributes];
         for (const attr of attrs) {
             const lowerName = attr.name.toLowerCase();
             // Check if this attribute name maps to a native event handler property.
             if (!('on' + lowerName in el))
                 continue;
-            const [selector, event, payload] = attr.value.trim().split('#');
-            if (!event)
+            const parts = attr.value.trim().split('|');
+            if (parts.length < 2)
                 continue; // need at least selector and eventname
+            const [selector, event, payload] = parts;
+            // Clean up binding attributes from the DOM.
+            el.removeAttribute(attr.name);
             // Resolve payload from sibling attribute if present.
             let payloadData; // intentional
             if (payload) {
@@ -507,8 +520,6 @@ export function bindTemplateEvents(root, instance) {
                 // Selector-based trigger — query and fire on every match.
                 on(el, lowerName, () => trigger(selector, event, payloadData));
             }
-            // Clean up binding attributes from the DOM.
-            el.removeAttribute(attr.name);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Micro Components Organization Class",
 	"keywords": [
 		"API",
@@ -72,20 +72,20 @@
 		"format": "oxfmt .",
 		"lint": "oxlint \"src\"",
 		"fix": "oxfmt . && oxlint \"src\" --fix",
-		"check": "tsc --noEmit -p tsconfig.lib.json && tsc -p tsconfig.test.json && tsc -p tsconfig.demo.json && tsc -p tsconfig.node.json",
+		"check": "tsc --noEmit -p tsconfig.lib.json && tsc -p tsconfig.test.json && tsc -p demo/web-test/tsconfig.demo.json && tsc -p tsconfig.node.json",
 		"check:pack": "publint && attw --pack . --profile esm-only",
 		"test": "vitest",
 		"test:run": "vitest run --reporter=verbose",
 		"test:coverage": "vitest run --coverage",
 		"demo:shop": "vite --config demo/shop/vite.config.ts",
-		"demo:shop:bundled": "tsx vite.shop.bundle.ts",
-		"demo:shop:build": "tsx vite.shop.ts && pnpm run demo:shop:bundled",
+		"demo:shop:bundled": "tsx demo/shop/vite.shop.bundle.ts",
+		"demo:shop:build": "tsx demo/shop/vite.shop.ts && pnpm run demo:shop:bundled",
 		"demo:shop:serve": "vite preview --outDir public/shop --port 5174 --host",
 		"typedoc": "typedoc",
 		"bundle": "tsx vite.build.ts",
 		"clean": "rm -rf dist public build",
 		"build": "pnpm run clean && tsc -p tsconfig.lib.json && pnpm run test:coverage && pnpm run bundle && pnpm run check:pack && pnpm run typedoc && pnpm run demo:build && pnpm run demo:shop:build && find src -name '*.js' -delete",
-		"demo:build": "tsx vite.demo.ts",
+		"demo:build": "tsx demo/web-test/vite.demo.ts",
 		"dev": "vite preview --outDir public/test --port 10000 --host",
 		"doc": "vite preview --outDir public/typedoc --port 11000 --host",
 		"watch": "tsx watch.ts",