@toyz/loom 0.4.0 → 0.6.0

package/dist/testing.js

@@ -0,0 +1,99 @@
+/**
+ * Loom — Testing harness
+ *
+ * Utilities for mounting components in tests and waiting for renders.
+ *
+ * ```ts
+ * import { fixture, fixtureHTML, cleanup, nextRender } from "@toyz/loom/testing";
+ *
+ * // Mount by tag name
+ * const el = await fixture<MyCounter>("my-counter");
+ * el.count = 5;
+ * await el.updateComplete;
+ * expect(el.shadow.querySelector("span")?.textContent).toBe("5");
+ *
+ * // Mount from an HTML template string
+ * const el2 = await fixtureHTML<MyCard>(`<my-card title="Hello">content</my-card>`);
+ * expect(el2.shadow.querySelector("h2")?.textContent).toBe("Hello");
+ *
+ * cleanup(); // removes all fixtures
+ * ```
+ */
+const containers = [];
+/**
+ * Mount a component by tag name and wait for its first render.
+ * Returns the element instance with full type access.
+ *
+ * @param tag   Custom element tag name
+ * @param attrs Optional attribute key/value pairs to set before mount
+ */
+export async function fixture(tag, attrs) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const el = document.createElement(tag);
+    if (attrs) {
+        for (const [key, value] of Object.entries(attrs)) {
+            el.setAttribute(key, value);
+        }
+    }
+    container.appendChild(el);
+    wireUpdateComplete(el);
+    await flushMicrotasks();
+    return el;
+}
+/**
+ * Mount a component from an HTML template string and wait for its first render.
+ * Useful for testing slot content, nested components, and attribute combinations.
+ *
+ * Returns the first child element with full type access.
+ *
+ * @param html  HTML string containing the component to mount
+ */
+export async function fixtureHTML(html) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    container.innerHTML = html;
+    const el = container.firstElementChild;
+    if (!el)
+        throw new Error("fixtureHTML: no element found in template");
+    wireUpdateComplete(el);
+    await flushMicrotasks();
+    return el;
+}
+/**
+ * Remove all fixture containers from the document.
+ * Call this in afterEach or test teardown.
+ */
+export function cleanup() {
+    for (const container of containers) {
+        container.remove();
+    }
+    containers.length = 0;
+}
+/**
+ * Wait for a Loom element to complete its next render cycle.
+ * Useful after programmatic state changes.
+ */
+export async function nextRender() {
+    await flushMicrotasks();
+}
+// ── Internal helpers ──
+/** Flush several microtask levels to account for nested queueMicrotask chains. */
+async function flushMicrotasks() {
+    for (let i = 0; i < 5; i++) {
+        await new Promise((r) => queueMicrotask(r));
+    }
+}
+/** Wire an `updateComplete` getter onto an element if it doesn't already have one. */
+function wireUpdateComplete(el) {
+    if (!("updateComplete" in el)) {
+        Object.defineProperty(el, "updateComplete", {
+            get() {
+                return flushMicrotasks();
+            },
+        });
+    }
+}
+//# sourceMappingURL=testing.js.map

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,MAAM,UAAU,GAAqB,EAAE,CAAC;AAKxC;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,OAAO,CAC3B,GAAW,EACX,KAA8B;IAE9B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE3B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAM,CAAC;IAE5C,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACjD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACvB,MAAM,eAAe,EAAE,CAAC;IAExB,OAAO,EAAiB,CAAC;AAC3B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAC/B,IAAY;IAEZ,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAE3B,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;IAE3B,MAAM,EAAE,GAAG,SAAS,CAAC,iBAAsB,CAAC;IAC5C,IAAI,CAAC,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAEtE,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACvB,MAAM,eAAe,EAAE,CAAC;IAExB,OAAO,EAAiB,CAAC;AAC3B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,OAAO;IACrB,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,SAAS,CAAC,MAAM,EAAE,CAAC;IACrB,CAAC;IACD,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;AACxB,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU;IAC9B,MAAM,eAAe,EAAE,CAAC;AAC1B,CAAC;AAED,yBAAyB;AAEzB,kFAAkF;AAClF,KAAK,UAAU,eAAe;IAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC3B,MAAM,IAAI,OAAO,CAAO,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,CAAC;AACH,CAAC;AAED,sFAAsF;AACtF,SAAS,kBAAkB,CAAC,EAAe;IACzC,IAAI,CAAC,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,CAAC;QAC9B,MAAM,CAAC,cAAc,CAAC,EAAE,EAAE,gBAAgB,EAAE;YAC1C,GAAG;gBACD,OAAO,eAAe,EAAE,CAAC;YAC3B,CAAC;SACF,CAAC,CAAC;IACL,CAAC;AACH,CAAC"}

package/dist/transform/transform.d.ts

@@ -1,5 +1,5 @@
 /**
- * Loom — Transform decorator
+ * Loom — Transform decorator (TC39 Stage 3)
  *
  * @transform — Pipe a value through a transform function before it reaches
  * the property. Commonly paired with @prop for route params or attribute parsing.
@@ -7,8 +7,12 @@
  * ```ts
  * @prop({ param: "id" })
  * @transform(Number)       // "42" → 42
- * userId!: number;
+ * accessor userId!: number;
  * ```
  */
-export declare const transform: (fn: (value: any) => any) => (target: any, key: string, desc?: PropertyDescriptor) => void;
+/**
+ * Auto-accessor decorator that registers a transform function.
+ * The transform is applied by @component's attributeChangedCallback.
+ */
+export declare function transform<This extends object, V>(fn: (value: unknown) => V): (_target: ClassAccessorDecoratorTarget<This, V>, context: ClassAccessorDecoratorContext<This, V>) => void;
 //# sourceMappingURL=transform.d.ts.map

package/dist/transform/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/transform/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,eAAO,MAAM,SAAS,eAAgC,GAAG,KAAK,GAAG,oCAKw9C,CAAC,6BADxhD,CAAC"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/transform/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,CAAC,IAEvE,SAAS,4BAA4B,CAAC,IAAI,EAAE,CAAC,CAAC,EAC9C,SAAS,6BAA6B,CAAC,IAAI,EAAE,CAAC,CAAC,KAC9C,IAAI,CAQR"}

package/dist/transform/transform.js

@@ -1,5 +1,5 @@
 /**
- * Loom — Transform decorator
+ * Loom — Transform decorator (TC39 Stage 3)
  *
  * @transform — Pipe a value through a transform function before it reaches
  * the property. Commonly paired with @prop for route params or attribute parsing.
@@ -7,15 +7,23 @@
  * ```ts
  * @prop({ param: "id" })
  * @transform(Number)       // "42" → 42
- * userId!: number;
+ * accessor userId!: number;
  * ```
  */
 import { TRANSFORMS } from "../decorators/symbols";
-import { createDecorator } from "../decorators/create";
-export const transform = createDecorator((proto, key, fn) => {
-    const ctor = proto.constructor;
-    if (!ctor[TRANSFORMS])
-        ctor[TRANSFORMS] = new Map();
-    ctor[TRANSFORMS].set(key, fn);
-});
+/**
+ * Auto-accessor decorator that registers a transform function.
+ * The transform is applied by @component's attributeChangedCallback.
+ */
+export function transform(fn) {
+    return (_target, context) => {
+        const key = String(context.name);
+        context.addInitializer(function () {
+            const ctor = this.constructor;
+            if (!ctor[TRANSFORMS])
+                ctor[TRANSFORMS] = new Map();
+            ctor[TRANSFORMS].set(key, fn);
+        });
+    };
+}
 //# sourceMappingURL=transform.js.map

package/dist/transform/transform.js.map

@@ -1 +1 @@
-{"version":3,"file":"transform.js","sourceRoot":"","sources":["../../src/transform/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAA4B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE;IACrF,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;IAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;QAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;IACtE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"transform.js","sourceRoot":"","sources":["../../src/transform/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAyB,EAAyB;IACzE,OAAO,CACL,OAA8C,EAC9C,OAA+C,EACzC,EAAE;QACR,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACjC,OAAO,CAAC,cAAc,CAAC;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;gBAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;YACtE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/dist/transform/typed.d.ts

@@ -19,7 +19,7 @@
  * ```
  */
 export interface TransformSchema<T> {
-    [key: string]: (v: string) => any;
+    [key: string]: (v: string) => T[keyof T];
 }
 /**
  * Build a typed transform function from a schema object.

package/dist/transform/typed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typed.d.ts","sourceRoot":"","sources":["../../src/transform/typed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,GAAG,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAQvF;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,IAEpD,OAAO,GAAG,EAAE,KAAK,MAAM,UAKhC"}
+{"version":3,"file":"typed.d.ts","sourceRoot":"","sources":["../../src/transform/typed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAQvF;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,IAEpD,OAAO,GAAG,EAAE,KAAK,MAAM,UAKhC"}

package/dist/transform/typed.js.map

@@ -1 +1 @@
-{"version":3,"file":"typed.js","sourceRoot":"","sources":["../../src/transform/typed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMnD;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAI,MAA0B;IACjD,OAAO,CAAC,GAAG,EAAE,EAAE;QACb,MAAM,GAAG,GAAQ,EAAE,CAAC;QACpB,KAAK,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,IAAI,GAAG;gBAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,GAAQ,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAI,MAA0B;IAC5D,MAAM,EAAE,GAAG,KAAK,CAAI,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,KAAU,EAAE,GAAW,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"typed.js","sourceRoot":"","sources":["../../src/transform/typed.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMnD;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAI,MAA0B;IACjD,OAAO,CAAC,GAAG,EAAE,EAAE;QACb,MAAM,GAAG,GAAG,EAA6B,CAAC;QAC1C,KAAK,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7C,IAAI,CAAC,IAAI,GAAG;gBAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,GAAQ,CAAC;IAClB,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAI,MAA0B;IAC5D,MAAM,EAAE,GAAG,KAAK,CAAI,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,KAAU,EAAE,GAAW,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,GAAG,EAAoB,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyz/loom",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Decorator-driven web component framework with reactive state, DOM morphing, DI, and JSX",
   "license": "MIT",
@@ -62,6 +62,10 @@
     "./decorators": {
       "types": "./dist/decorators/index.d.ts",
       "import": "./dist/decorators/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js"
     }
   },
   "scripts": {