@praxisjs/decorators 0.4.2 → 0.5.0

package/dist/properties/resource.js

@@ -0,0 +1,27 @@
+import { resource, } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "../create-field-decorator";
+/**
+ * Binds an async resource to the field. The field holds a Resource<T> object
+ * with reactive data, pending, error, and status signals, plus refetch/cancel/mutate methods.
+ *
+ * class MyComponent extends StatefulComponent {
+ *   @Resource(() => api.getUsers())
+ *   users!: ResourceInstance<User[]>;
+ *   // access: this.users.data(), this.users.pending(), this.users.refetch()
+ * }
+ */
+export function Resource(fetcher, options = {}) {
+    return createFieldDecorator({
+        bind(_instance, _name, _initialValue) {
+            const r = resource(fetcher, options);
+            return {
+                descriptor: {
+                    get() { return r; },
+                    // eslint-disable-next-line @typescript-eslint/no-empty-function
+                    set() { },
+                },
+            };
+        },
+    });
+}
+//# sourceMappingURL=resource.js.map

package/dist/properties/resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource.js","sourceRoot":"","sources":["../../src/properties/resource.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAqB,MAAM,2BAA2B,CAAC;AAIpF;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ,CAAI,OAAyB,EAAE,UAA8B,EAAE;IACrF,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa;YAClC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YACrC,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,KAA0B,OAAO,CAAC,CAAC,CAAC,CAAC;oBACxC,gEAAgE;oBAChE,GAAG,KAAU,CAAC;iBACf;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/properties/slot.d.ts

@@ -1,5 +1,4 @@
-import type { StatefulComponent } from "@praxisjs/core";
 export declare function initSlots(instance: object, children: unknown): void;
 export declare function getSlot(instance: object, name: string): unknown[];
-export declare function Slot(name?: string): (_value: undefined, context: ClassFieldDecoratorContext<StatefulComponent>) => void;
+export declare function Slot(name?: string): (_value: undefined, context: ClassFieldDecoratorContext<import("@praxisjs/core").StatefulComponent>) => void;
 //# sourceMappingURL=slot.d.ts.map

package/dist/properties/slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/properties/slot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgCxD,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAEnE;AAED,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAEjE;AAED,wBAAgB,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,IAE9B,QAAQ,SAAS,EACjB,SAAS,0BAA0B,CAAC,iBAAiB,CAAC,KACrD,IAAI,CA0BR"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/properties/slot.ts"],"names":[],"mappings":"AA+BA,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAEnE;AAED,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAEjE;AAED,wBAAgB,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,gHAkBjC"}

package/dist/properties/slot.js

@@ -1,3 +1,4 @@
+import { createFieldDecorator } from "../create-field-decorator";
 const slotsMap = new WeakMap();
 function resolveSlots(children) {
     const slots = new Map();
@@ -9,7 +10,6 @@ function resolveSlots(children) {
         ? children.flat(Infinity)
         : [children];
     for (const child of arr) {
-        // Named slots via `slot` attribute on DOM elements
         if (child instanceof Element) {
             const slotName = child.getAttribute("slot");
             if (slotName) {
@@ -32,25 +32,20 @@ export function getSlot(instance, name) {
     return slotsMap.get(instance)?.get(name) ?? [];
 }
 export function Slot(name) {
-    return function (_value, context) {
-        context.addInitializer(function () {
-            const instance = this;
-            const propKey = context.name;
-            const slotName = name ?? (propKey === "default" ? "default" : propKey);
-            Reflect.deleteProperty(instance, propKey);
-            Object.defineProperty(instance, propKey, {
-                get() {
-                    return getSlot(this, slotName);
+    return createFieldDecorator({
+        bind(instance, propName, _initialValue) {
+            const slotName = name ?? (propName === "default" ? "default" : propName);
+            return {
+                descriptor: {
+                    get: () => getSlot(instance, slotName),
+                    set: (_value) => {
+                        if (process.env.NODE_ENV !== "production") {
+                            console.warn(`[Slot] "${propName}" is a slot and cannot be assigned directly. Slots are filled by the parent component.`);
+                        }
+                    },
                 },
-                set(_value) {
-                    if (process.env.NODE_ENV !== "production") {
-                        console.warn(`[Slot] "${propKey}" is a slot and cannot be assigned directly. Slots are filled by the parent component.`);
-                    }
-                },
-                enumerable: true,
-                configurable: true,
-            });
-        });
-    };
+            };
+        },
+    });
 }
 //# sourceMappingURL=slot.js.map

package/dist/properties/slot.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../src/properties/slot.ts"],"names":[],"mappings":"AAEA,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAkC,CAAC;AAE/D,SAAS,YAAY,CAAC,QAAiB;IACrC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAC;IAC3C,MAAM,WAAW,GAAc,EAAE,CAAC;IAClC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAElC,IAAI,QAAQ,IAAI,IAAI;QAAE,OAAO,KAAK,CAAC;IAEnC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAE,QAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEf,KAAK,MAAM,KAAK,IAAI,GAAG,EAAE,CAAC;QACxB,mDAAmD;QACnD,IAAI,KAAK,YAAY,OAAO,EAAE,CAAC;YAC7B,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC5C,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;oBAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBACjD,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,SAAS;YACX,CAAC;QACH,CAAC;QACD,IAAI,KAAK,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgB,EAAE,QAAiB;IAC3D,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,QAAgB,EAAE,IAAY;IACpD,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,IAAa;IAChC,OAAO,UACL,MAAiB,EACjB,OAAsD;QAEtD,OAAO,CAAC,cAAc,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAyB,CAAC;YAC3C,MAAM,OAAO,GAAG,OAAO,CAAC,IAAc,CAAC;YACvC,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAEvE,OAAO,CAAC,cAAc,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAE1C,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,OAAO,EAAE;gBACvC,GAAG;oBACD,OAAO,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;gBACjC,CAAC;gBAED,GAAG,CAAC,MAAe;oBACjB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;wBAC1C,OAAO,CAAC,IAAI,CACV,WAAW,OAAO,wFAAwF,CAC3G,CAAC;oBACJ,CAAC;gBACH,CAAC;gBAED,UAAU,EAAE,IAAI;gBAChB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"slot.js","sourceRoot":"","sources":["../../src/properties/slot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAkC,CAAC;AAE/D,SAAS,YAAY,CAAC,QAAiB;IACrC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAC;IAC3C,MAAM,WAAW,GAAc,EAAE,CAAC;IAClC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAElC,IAAI,QAAQ,IAAI,IAAI;QAAE,OAAO,KAAK,CAAC;IAEnC,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAE,QAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEf,KAAK,MAAM,KAAK,IAAI,GAAG,EAAE,CAAC;QACxB,IAAI,KAAK,YAAY,OAAO,EAAE,CAAC;YAC7B,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC5C,IAAI,QAAQ,EAAE,CAAC;gBACb,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;gBAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;oBAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBACjD,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,SAAS;YACX,CAAC;QACH,CAAC;QACD,IAAI,KAAK,IAAI,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgB,EAAE,QAAiB;IAC3D,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,QAAgB,EAAE,IAAY;IACpD,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,IAAa;IAChC,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa;YACpC,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACzE,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC;oBACtC,GAAG,EAAE,CAAC,MAAe,EAAE,EAAE;wBACvB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;4BAC1C,OAAO,CAAC,IAAI,CACV,WAAW,QAAQ,wFAAwF,CAC5G,CAAC;wBACJ,CAAC;oBACH,CAAC;iBACF;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/properties/state.d.ts

@@ -1,3 +1,2 @@
-import type { StatefulComponent } from "@praxisjs/core";
-export declare function State(): (_value: undefined, context: ClassFieldDecoratorContext<StatefulComponent>) => void;
+export declare function State(): (_value: undefined, context: ClassFieldDecoratorContext<import("@praxisjs/core").StatefulComponent>) => void;
 //# sourceMappingURL=state.d.ts.map

package/dist/properties/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/properties/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,wBAAgB,KAAK,KAEjB,QAAQ,SAAS,EACjB,SAAS,0BAA0B,CAAC,iBAAiB,CAAC,KACrD,IAAI,CAsBR"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/properties/state.ts"],"names":[],"mappings":"AAIA,wBAAgB,KAAK,iHAepB"}

package/dist/properties/state.js

@@ -1,24 +1,19 @@
 import { signal } from "@praxisjs/core/internal";
+import { createFieldDecorator } from "../create-field-decorator";
 export function State() {
-    return function (_value, context) {
-        context.addInitializer(function () {
-            const instance = this;
-            const name = context.name;
-            const initialValue = instance[name];
-            Reflect.deleteProperty(instance, name);
+    return createFieldDecorator({
+        bind(instance, _name, initialValue) {
             const sig = signal(initialValue);
-            Object.defineProperty(instance, name, {
-                get() {
-                    return sig();
+            return {
+                descriptor: {
+                    get: () => sig(),
+                    set: (value) => {
+                        instance._stateDirty = true;
+                        sig.set(value);
+                    },
                 },
-                set(value) {
-                    instance._stateDirty = true;
-                    sig.set(value);
-                },
-                enumerable: true,
-                configurable: true,
-            });
-        });
-    };
+            };
+        },
+    });
 }
 //# sourceMappingURL=state.js.map

package/dist/properties/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/properties/state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,UAAU,KAAK;IACnB,OAAO,UACL,MAAiB,EACjB,OAAsD;QAEtD,OAAO,CAAC,cAAc,CAAC;YACrB,MAAM,QAAQ,GAAG,IAAmD,CAAC;YACrE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAc,CAAC;YACpC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;YACpC,OAAO,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAEvC,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;YAEjC,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,EAAE;gBACpC,GAAG;oBACD,OAAO,GAAG,EAAE,CAAC;gBACf,CAAC;gBACD,GAAG,CAAC,KAAc;oBAChB,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;oBAC5B,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;gBACD,UAAU,EAAE,IAAI;gBAChB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/properties/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,UAAU,KAAK;IACnB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY;YAChC,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;YACjC,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE;oBAChB,GAAG,EAAE,CAAC,KAAc,EAAE,EAAE;wBACtB,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;wBAC5B,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC;iBACF;aACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/decorators",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@praxisjs/core": "0.4.1",
+    "@praxisjs/core": "1.0.0",
     "@praxisjs/shared": "0.2.0"
   },
   "scripts": {

package/src/__tests__/component.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from "vitest";
+
+import { StatefulComponent, StatelessComponent } from "@praxisjs/core";
+
+import { Component } from "../component/component";
+
+// ── Component decorator ───────────────────────────────────────────────────────
+
+describe("Component decorator", () => {
+  it("sets __isComponent = true on the enhanced class", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyComp, {} as ClassDecoratorContext);
+    expect(Enhanced.__isComponent).toBe(true);
+  });
+
+  it("preserves the original class name", () => {
+    class MyButton extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyButton, {} as ClassDecoratorContext);
+    expect(Enhanced.name).toBe("MyButton");
+  });
+
+  it("marks __isStateless = false for StatefulComponent subclasses", () => {
+    class MyStateful extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyStateful, {} as ClassDecoratorContext);
+    expect(Enhanced.__isStateless).toBe(false);
+  });
+
+  it("marks __isStateless = true for StatelessComponent subclasses", () => {
+    class MyStateless extends StatelessComponent {
+      render() { return null; }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Enhanced = Component()(MyStateless as any, {} as ClassDecoratorContext);
+    expect(Enhanced.__isStateless).toBe(true);
+  });
+
+  it("enhanced class can still be instantiated", () => {
+    class Counter extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(Counter, {} as ClassDecoratorContext);
+    const instance = new Enhanced();
+    expect(instance).toBeInstanceOf(Counter);
+  });
+
+  it("returns a subclass of the original constructor", () => {
+    class Base extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(Base, {} as ClassDecoratorContext);
+    expect(Enhanced.prototype).toBeInstanceOf(Base);
+  });
+
+  // ── Happy paths ──────────────────────────────────────────────────────────────
+
+  it("forwards constructor args — props reach the base constructor", () => {
+    class WithProps extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(WithProps, {} as ClassDecoratorContext);
+    const instance = new Enhanced({ greeting: "hello" });
+    expect(instance.props.greeting).toBe("hello");
+  });
+
+  it("instance methods from the original class remain accessible", () => {
+    class Greeter extends StatefulComponent {
+      greet() { return "hello"; }
+      render() { return null; }
+    }
+    const Enhanced = Component()(Greeter, {} as ClassDecoratorContext);
+    const instance = new Enhanced();
+    expect((instance as Greeter).greet()).toBe("hello");
+  });
+
+  it("static properties of the original class are preserved on Enhanced", () => {
+    class WithStatic extends StatefulComponent {
+      static readonly version = "1.0";
+      render() { return null; }
+    }
+    const Enhanced = Component()(WithStatic, {} as ClassDecoratorContext);
+    expect((Enhanced as typeof WithStatic).version).toBe("1.0");
+  });
+
+  // ── Edge cases ───────────────────────────────────────────────────────────────
+
+  it("applying Component() twice preserves name and flags", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const E1 = Component()(MyComp, {} as ClassDecoratorContext);
+    const E2 = Component()(E1, {} as ClassDecoratorContext);
+    expect(E2.__isComponent).toBe(true);
+    expect(E2.__isStateless).toBe(false);
+    expect(E2.name).toBe("MyComp"); // name survives double-wrap
+  });
+
+  it("deep StatelessComponent inheritance — __isStateless is still true", () => {
+    class BaseStateless extends StatelessComponent {
+      render() { return null; }
+    }
+    class DeepChild extends BaseStateless {
+      render() { return null; }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Enhanced = Component()(DeepChild as any, {} as ClassDecoratorContext);
+    expect(Enhanced.__isStateless).toBe(true);
+  });
+
+  it("anonymous class gets an empty name", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Enhanced = Component()(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      class extends StatefulComponent { render() { return null; } } as any,
+      {} as ClassDecoratorContext,
+    );
+    expect(Enhanced.name).toBe("");
+  });
+
+  it("__isComponent and __isStateless are static — not own properties of instances", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyComp, {} as ClassDecoratorContext);
+    const instance = new Enhanced();
+    // Static fields live on the class, not on instances
+    expect(Object.prototype.hasOwnProperty.call(instance, "__isComponent")).toBe(false);
+    expect(Object.prototype.hasOwnProperty.call(instance, "__isStateless")).toBe(false);
+  });
+
+  it("subclassing Enhanced inherits __isComponent and __isStateless", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyComp, {} as ClassDecoratorContext);
+    // `class Sub extends Enhanced` sets Object.getPrototypeOf(Sub) === Enhanced,
+    // making static fields visible through the chain. Simulate that here to
+    // avoid TS2510 (conflicting constructor return types in the intersection type).
+    const Sub = Object.create(Enhanced) as typeof Enhanced;
+    expect(Sub.__isComponent).toBe(true);
+    expect(Sub.__isStateless).toBe(false);
+  });
+
+  it("Enhanced is a different reference from the original constructor", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyComp, {} as ClassDecoratorContext);
+    expect(Enhanced).not.toBe(MyComp);
+  });
+
+  it("render() falls through to originalRender when enhancement has no render override", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+    const Enhanced = Component()(MyComp, {} as ClassDecoratorContext);
+    const instance = new Enhanced();
+    // ComponentBehavior.create() returns {} (no render), so line 48 is hit
+    expect((instance as StatefulComponent).render()).toBeNull();
+  });
+});

package/src/__tests__/compose.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { signal } from "@praxisjs/core/internal";
+import type { Composable } from "@praxisjs/core";
+
+import { Compose } from "../properties/compose";
+
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) {
+        initializers.push(fn);
+      },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+// Simple composable returning plain values
+class CounterComposable implements Composable {
+  count = 0;
+  setup() {
+    return { count: this.count, label: "counter" };
+  }
+}
+
+// Composable returning a signal (reactive property)
+class ReactiveComposable implements Composable {
+  _count = signal(0);
+  setup() {
+    return { count: this._count };
+  }
+}
+
+// Composable with lifecycle hooks
+class LifecycleComposable implements Composable {
+  onMount = vi.fn();
+  onUnmount = vi.fn();
+  setup() {
+    return { active: true };
+  }
+}
+
+// Composable that uses constructor args
+class ArgsComposable implements Composable {
+  constructor(private multiplier: number) {}
+  setup() {
+    return { multiplier: this.multiplier };
+  }
+}
+
+// Composable returning a plain function (non-reactive) in its view
+class PlainFnComposable {
+  setup() {
+    return { handler: () => 42 };
+  }
+}
+
+describe("@Compose decorator", () => {
+  it("creates a view getter on the field", () => {
+    const { ctx, run } = fieldCtx("counter");
+    Compose(CounterComposable)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).counter as Record<string, unknown>;
+    expect(view).toBeDefined();
+    expect(view.count).toBe(0);
+    expect(view.label).toBe("counter");
+  });
+
+  it("reactive signal values are resolved via getter", () => {
+    const { ctx, run } = fieldCtx("reactive");
+    Compose(ReactiveComposable)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).reactive as Record<string, unknown>;
+    expect(view.count).toBe(0);
+  });
+
+  it("calls onMount when component mounts", () => {
+    const { ctx, run } = fieldCtx("lc");
+    Compose(LifecycleComposable)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).lc as Record<string, unknown>;
+    expect(view).toBeDefined();
+
+    // Trigger onMount
+    instance.onMount!();
+    const lc = new LifecycleComposable();
+    // The composable's onMount would have been called
+    // We verify the instance has an onMount wiring
+    expect(typeof instance.onMount).toBe("function");
+  });
+
+  it("calls onUnmount when component unmounts", () => {
+    const { ctx, run } = fieldCtx("lc2");
+    Compose(LifecycleComposable)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+    expect(typeof instance.onUnmount).toBe("function");
+  });
+
+  it("invoking instance.onUnmount() executes the composable's onUnmount", () => {
+    const unmountSpy = vi.fn();
+
+    class SpyComposable {
+      onUnmount = unmountSpy;
+      setup() { return {}; }
+    }
+
+    const { ctx, run } = fieldCtx("spyComp");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Compose(SpyComposable as any)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    instance.onUnmount!();
+    expect(unmountSpy).toHaveBeenCalled();
+  });
+
+  it("passes constructor args to the composable", () => {
+    const { ctx, run } = fieldCtx("args");
+    Compose(ArgsComposable, 5)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).args as Record<string, unknown>;
+    expect(view.multiplier).toBe(5);
+  });
+
+  it("resolves string constructor args from instance properties", () => {
+    const { ctx, run } = fieldCtx("resolved");
+    Compose(ArgsComposable, "myMultiplier")(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).myMultiplier = 10;
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).resolved as Record<string, unknown>;
+    expect(view.multiplier).toBe(10);
+  });
+
+  it("each instance gets its own composable view", () => {
+    const { ctx, run } = fieldCtx("c");
+    Compose(CounterComposable)(undefined, ctx);
+
+    const a = new TestComponent();
+    const b = new TestComponent();
+    run(a);
+    run(b);
+
+    const viewA = (a as unknown as Record<string, unknown>).c;
+    const viewB = (b as unknown as Record<string, unknown>).c;
+    expect(viewA).not.toBe(viewB);
+  });
+
+  it("plain function value in view is stored as-is (not treated as reactive)", () => {
+    const { ctx, run } = fieldCtx("pfn");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Compose(PlainFnComposable as any)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const view = (instance as unknown as Record<string, unknown>).pfn as Record<string, unknown>;
+    // handler is a plain function — isReactive returns false, stored directly
+    expect(typeof view.handler).toBe("function");
+    expect((view.handler as () => number)()).toBe(42);
+  });
+
+  it("view getter always returns same view object", () => {
+    const { ctx, run } = fieldCtx("stable");
+    Compose(CounterComposable)(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const v1 = (instance as unknown as Record<string, unknown>).stable;
+    const v2 = (instance as unknown as Record<string, unknown>).stable;
+    expect(v1).toBe(v2);
+  });
+});