@praxisjs/decorators 0.4.3 → 0.6.0

package/src/properties/prop.ts

@@ -1,35 +1,25 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createFieldDecorator } from "../create-field-decorator";
 
 export function Prop() {
-  return function (
-    _value: undefined,
-    context: ClassFieldDecoratorContext<StatefulComponent>,
-  ): void {
-    context.addInitializer(function (this: unknown) {
-      const instance = this as StatefulComponent;
-      const name = context.name as string;
-      const raw = instance as unknown as Record<string, unknown>;
-      const defaultValue = raw[name];
-      Reflect.deleteProperty(raw, name);
-
-      instance._defaults[name] = defaultValue;
-
-      Object.defineProperty(instance, name, {
-        get(this: StatefulComponent) {
-          const fromParent = this._rawProps[name];
-          if (fromParent !== undefined) {
-            return typeof fromParent === "function"
-              ? (fromParent as () => unknown)()
-              : fromParent;
-          }
-          return this._defaults[name];
-        },
-        set(this: StatefulComponent, value: unknown) {
-          this._defaults[name] = value;
+  return createFieldDecorator({
+    bind(instance, name, initialValue) {
+      instance._defaults[name] = initialValue;
+      return {
+        descriptor: {
+          get() {
+            const fromParent = (instance._rawProps)[name];
+            if (fromParent !== undefined) {
+              return typeof fromParent === "function"
+                ? (fromParent as () => unknown)()
+                : fromParent;
+            }
+            return instance._defaults[name];
+          },
+          set(value: unknown) {
+            instance._defaults[name] = value;
+          },
         },
-        enumerable: true,
-        configurable: true,
-      });
-    });
-  };
+      };
+    },
+  });
 }

package/src/properties/resource.ts

@@ -0,0 +1,34 @@
+import {
+  resource,
+  type Resource as ResourceInstance,
+  type ResourceOptions,
+} from "@praxisjs/core/internal";
+
+import { createFieldDecorator, type FieldBinding } from "../create-field-decorator";
+
+export type { ResourceInstance, ResourceOptions };
+
+/**
+ * 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<T>(fetcher: () => Promise<T>, options: ResourceOptions<T> = {}) {
+  return createFieldDecorator({
+    bind(_instance, _name, _initialValue): FieldBinding {
+      const r = resource(fetcher, options);
+      return {
+        descriptor: {
+          get(): ResourceInstance<T> { return r; },
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          set(): void {},
+        },
+      };
+    },
+  });
+}

package/src/properties/slot.ts

@@ -1,4 +1,4 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createFieldDecorator } from "../create-field-decorator";
 
 const slotsMap = new WeakMap<object, Map<string, unknown[]>>();
 
@@ -14,7 +14,6 @@ function resolveSlots(children: unknown): Map<string, unknown[]> {
     : [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) {
@@ -39,33 +38,21 @@ export function getSlot(instance: object, name: string): unknown[] {
 }
 
 export function Slot(name?: string) {
-  return function (
-    _value: undefined,
-    context: ClassFieldDecoratorContext<StatefulComponent>,
-  ): void {
-    context.addInitializer(function (this: unknown) {
-      const instance = this as StatefulComponent;
-      const propKey = context.name as string;
-      const slotName = name ?? (propKey === "default" ? "default" : propKey);
-
-      Reflect.deleteProperty(instance, propKey);
-
-      Object.defineProperty(instance, propKey, {
-        get(this: StatefulComponent): unknown[] {
-          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: unknown) => {
+            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: unknown): void {
-          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,
-      });
-    });
-  };
+      };
+    },
+  });
 }

package/src/properties/state.ts

@@ -1,30 +1,20 @@
-import type { StatefulComponent } from "@praxisjs/core";
 import { signal } from "@praxisjs/core/internal";
 
-export function State() {
-  return function (
-    _value: undefined,
-    context: ClassFieldDecoratorContext<StatefulComponent>,
-  ): void {
-    context.addInitializer(function (this: unknown) {
-      const instance = this as StatefulComponent & Record<string, unknown>;
-      const name = context.name as string;
-      const initialValue = instance[name];
-      Reflect.deleteProperty(instance, name);
+import { createFieldDecorator } from "../create-field-decorator";
 
+export function State() {
+  return createFieldDecorator({
+    bind(instance, _name, initialValue) {
       const sig = signal(initialValue);
-
-      Object.defineProperty(instance, name, {
-        get() {
-          return sig();
-        },
-        set(value: unknown) {
-          instance._stateDirty = true;
-          sig.set(value);
+      return {
+        descriptor: {
+          get: () => sig(),
+          set: (value: unknown) => {
+            instance._stateDirty = true;
+            sig.set(value);
+          },
         },
-        enumerable: true,
-        configurable: true,
-      });
-    });
-  };
+      };
+    },
+  });
 }