@praxisjs/decorators 0.2.0 → 0.4.0

package/src/functions/watch.ts

@@ -1,7 +1,9 @@
-import { type BaseComponent, effect } from "@praxisjs/core";
-import { type Computed, isComputed } from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+import type { Computed } from "@praxisjs/shared";
+import { isComputed } from "@praxisjs/shared/internal";
 
-type BaseComponentKeys = keyof BaseComponent;
+type BaseComponentKeys = keyof StatefulComponent;
 
 type WatchableKeys<T> = {
   [K in Exclude<keyof T, BaseComponentKeys>]: T[K] extends (
@@ -29,15 +31,17 @@ type NoDuplicates<
   : Keys;
 
 type ValidateKeys<
-  T extends BaseComponent,
+  T extends StatefulComponent,
   Keys extends ReadonlyArray<WatchableKeys<T>>,
 > = NoDuplicates<[...Keys]> extends Keys ? Keys : NoDuplicates<[...Keys]>;
 
 type Unwrap<T> =
   T extends Computed<infer U> ? U : T extends () => infer U ? U : T;
 
-export type WatchVal<T extends BaseComponent, K extends keyof T> = Unwrap<T[K]>;
-export type WatchVals<T extends BaseComponent, K extends keyof T> = {
+export type WatchVal<T extends StatefulComponent, K extends keyof T> = Unwrap<
+  T[K]
+>;
+export type WatchVals<T extends StatefulComponent, K extends keyof T> = {
   [P in K]: Unwrap<T[P]>;
 };
 
@@ -46,54 +50,46 @@ function readValue(instance: Record<string, unknown>, key: string): unknown {
   return isComputed(raw) ? (raw as Computed<unknown>)() : raw;
 }
 
-function injectOnMount(
-  target: object,
-  fn: (this: Record<string, unknown>) => void,
-): void {
-  const t = target as { onMount?: () => void };
-  const originalMethod = t.onMount;
-  t.onMount = function (this: Record<string, unknown>) {
-    originalMethod?.call(this);
-    fn.call(this);
-  };
-}
-
 export function Watch<
-  T extends BaseComponent,
+  T extends StatefulComponent,
   const Keys extends ReadonlyArray<WatchableKeys<T>>,
 >(...propNames: ValidateKeys<T, Keys>) {
   return function (
-    target: T,
-    _key: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
+    value: (this: T, ...args: unknown[]) => void,
+    context: ClassMethodDecoratorContext<T>,
+  ): void {
     const props = propNames as unknown as string[];
-    const method = descriptor.value as (this: Record<string, unknown>, ...args: unknown[]) => void;
 
-    injectOnMount(target, function (this) {
-      if (props.length === 1) {
-        let oldVal = readValue(this, props[0]);
-        effect(() => {
-          const newVal = readValue(this, props[0]);
-          if (!Object.is(newVal, oldVal)) {
-            method.call(this, newVal, oldVal);
-            oldVal = newVal;
-          }
-        });
-      } else {
-        const read = () =>
-          Object.fromEntries(props.map((p) => [p, readValue(this, p)]));
-        let oldVals = read();
-        effect(() => {
-          const newVals = read();
-          if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
-            method.call(this, newVals, oldVals);
-            oldVals = newVals;
-          }
-        });
-      }
-    });
+    context.addInitializer(function (this: unknown) {
+      const instance = this as T & Record<string, unknown>;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnMount = instance.onMount;
+
+      instance.onMount = function (this: T & Record<string, unknown>) {
+        originalOnMount?.call(this);
 
-    return descriptor;
+        if (props.length === 1) {
+          let oldVal = readValue(this, props[0]);
+          effect(() => {
+            const newVal = readValue(this, props[0]);
+            if (!Object.is(newVal, oldVal)) {
+              value.call(this as T, newVal, oldVal);
+              oldVal = newVal;
+            }
+          });
+        } else {
+          const read = () =>
+            Object.fromEntries(props.map((p) => [p, readValue(this, p)]));
+          let oldVals = read();
+          effect(() => {
+            const newVals = read();
+            if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
+              value.call(this as T, newVals, oldVals);
+              oldVals = newVals;
+            }
+          });
+        }
+      };
+    });
   };
 }

package/src/functions/when.ts

@@ -1,44 +1,42 @@
-import { type BaseComponent, when } from "@praxisjs/core";
-import { isComputed } from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
+import { when } from "@praxisjs/core/internal";
+import type { Computed, Signal } from "@praxisjs/shared";
+import { isComputed } from "@praxisjs/shared/internal";
 
 export function When(propName: string) {
   return function (
-    target: object,
-    _methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalOnMount = (target as { onMount?(): void }).onMount;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalOnUnmount = (target as { onUnmount?(): void }).onUnmount;
-
-    const method = descriptor.value as (value: unknown) => void;
+    value: (this: StatefulComponent, val: unknown) => void,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
     const cancels = new WeakMap<object, () => void>();
 
-    (target as { onMount?(): void }).onMount = function (this: BaseComponent) {
-      originalOnMount?.call(this);
+    context.addInitializer(function (this: unknown) {
+      const instance = this as StatefulComponent;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnMount = instance.onMount;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnUnmount = instance.onUnmount;
 
-      const instance = this as unknown as Record<string, unknown>;
-      const source = () => {
-        const raw = instance[propName];
-        return isComputed(raw) ? (raw as unknown as () => unknown)() : raw;
-      };
+      instance.onMount = function (this: StatefulComponent) {
+        originalOnMount?.call(this);
 
-      const cancel = when(source, (value) => {
-        method.call(this, value);
-      });
+        const raw = (this as unknown as Record<string, unknown>)[propName];
+        const source = isComputed(raw)
+          ? (raw as Computed<unknown>)
+          : (raw as Signal<unknown>);
 
-      cancels.set(this, cancel);
-    };
+        const cancel = when(source, (val) => {
+          value.call(this, val);
+        });
 
-    (target as { onUnmount?(): void }).onUnmount = function (
-      this: BaseComponent,
-    ) {
-      originalOnUnmount?.call(this);
-      cancels.get(this)?.();
-      cancels.delete(this);
-    };
+        cancels.set(this, cancel);
+      };
 
-    return descriptor;
+      instance.onUnmount = function (this: StatefulComponent) {
+        originalOnUnmount?.call(this);
+        cancels.get(this)?.();
+        cancels.delete(this);
+      };
+    });
   };
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export { Component, Memoize, Lazy, Virtual } from "./component";
+export { Component, Lazy, Virtual } from "./component";
 export {
   Memo,
   Bind,
@@ -12,5 +12,14 @@ export {
   type WatchVal,
   type WatchVals,
 } from "./functions";
-export { Prop, State, Persisted, Slot, initSlots, History, type WithHistory } from "./properties";
+export {
+  Prop,
+  State,
+  Computed,
+  Persisted,
+  Slot,
+  initSlots,
+  History,
+  type WithHistory,
+} from "./properties";
 export { type Command, createCommand, Emit, OnCommand } from "./events";

package/src/properties/computed.ts

@@ -0,0 +1,20 @@
+import type { StatefulComponent } from "@praxisjs/core";
+import { computed } from "@praxisjs/core/internal";
+
+export function Computed() {
+  return function <This extends StatefulComponent, T>(
+    target: (this: This) => T,
+    _context: ClassGetterDecoratorContext<This, T>,
+  ): (this: This) => T {
+    const computedMap = new WeakMap<object, () => T>();
+
+    return function (this: This): T {
+      let c = computedMap.get(this);
+      if (!c) {
+        c = computed(() => target.call(this));
+        computedMap.set(this, c);
+      }
+      return c();
+    };
+  };
+}

package/src/properties/history.ts

@@ -1,40 +1,57 @@
-import { type HistoryElement, history } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
+import { type HistoryElement, history } from "@praxisjs/core/internal";
+import type { Signal } from "@praxisjs/shared";
 
-export type WithHistory<T, K extends keyof T> = Record<`${string & K}History`, HistoryElement<T[K]>>;
+export type WithHistory<T, K extends keyof T> = Record<
+  `${string & K}History`,
+  HistoryElement<T[K]>
+>;
 
 export function History(limit = 50) {
-  return function (target: object, propertyKey: string): void {
-    const historyKey = `${propertyKey}History`;
+  return function (
+    _value: undefined,
+    context: ClassFieldDecoratorContext<StatefulComponent>,
+  ): void {
     const histories = new WeakMap<object, HistoryElement<unknown>>();
 
-    Object.defineProperty(target, historyKey, {
-      get(this: Record<string, unknown>): HistoryElement<unknown> {
-        if (!histories.has(this)) {
-          const source = () => this[propertyKey];
-
-          const h = history(source as () => unknown, limit);
-
-          const originalUndo = () => { h.undo(); };
-          const originalRedo = () => { h.redo(); };
-
-          h.undo = () => {
-            const prev = h.values()[h.values().length - 2];
-            if (prev === undefined) return;
-            originalUndo();
-            this[propertyKey] = prev;
-          };
-
-          h.redo = () => {
-            originalRedo();
-            this[propertyKey] = h.current();
-          };
-
-          histories.set(this, h);
-        }
-        return histories.get(this) as HistoryElement<unknown>;
-      },
-      enumerable: false,
-      configurable: true,
+    context.addInitializer(function (this: unknown) {
+      const instance = this as Record<string, unknown>;
+      const propertyKey = context.name as string;
+      const historyKey = `${propertyKey}History`;
+
+      Object.defineProperty(instance, historyKey, {
+        get(this: Record<string, unknown>): HistoryElement<unknown> {
+          if (!histories.has(this)) {
+            const source = () => this[propertyKey];
+
+            const h = history(source as Signal<unknown>, limit);
+
+            const originalUndo = () => {
+              h.undo();
+            };
+            const originalRedo = () => {
+              h.redo();
+            };
+
+            h.undo = () => {
+              const prev = h.values()[h.values().length - 2];
+              if (prev === undefined) return;
+              originalUndo();
+              this[propertyKey] = prev;
+            };
+
+            h.redo = () => {
+              originalRedo();
+              this[propertyKey] = h.current();
+            };
+
+            histories.set(this, h);
+          }
+          return histories.get(this) as HistoryElement<unknown>;
+        },
+        enumerable: false,
+        configurable: true,
+      });
     });
   };
 }

package/src/properties/index.ts

@@ -1,5 +1,6 @@
 export { Prop } from "./prop";
 export { State } from "./state";
+export { Computed } from "./computed";
 export { Persisted } from "./persisted";
 export { Slot, initSlots } from "./slot";
 export { History, type WithHistory } from "./history";

package/src/properties/persisted.ts

@@ -1,13 +1,13 @@
-import { persistedSignal, type PersistedSignalOptions } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
+import {
+  persistedSignal,
+  type PersistedSignalOptions,
+} from "@praxisjs/core/internal";
 import type { Signal } from "@praxisjs/shared";
 
 const signalMap = new WeakMap<object, Map<string, Signal<unknown>>>();
 const initMap = new WeakMap<object, Set<string>>();
 
-function isInitialized(instance: object, propKey: string): boolean {
-  return initMap.get(instance)?.has(propKey) ?? false;
-}
-
 function markInitialized(instance: object, propKey: string): void {
   if (!initMap.has(instance)) {
     initMap.set(instance, new Set());
@@ -40,36 +40,45 @@ export function Persisted<T>(
   key?: string,
   options: PersistedSignalOptions<T> = {},
 ) {
-  return function (target: object, propertyKey: string): void {
-    const storageKey = key ?? propertyKey;
+  return function (
+    _value: undefined,
+    context: ClassFieldDecoratorContext<StatefulComponent>,
+  ): void {
+    context.addInitializer(function (this: unknown) {
+      const instance = this as object;
+      const propertyKey = context.name as string;
+      const storageKey = key ?? propertyKey;
+      const initialValue = (instance as Record<string, unknown>)[
+        propertyKey
+      ] as T;
+
+      Reflect.deleteProperty(instance, propertyKey);
 
-    Object.defineProperty(target, propertyKey, {
-      get(this: object): T {
-        if (!isInitialized(this, propertyKey)) {
-          return undefined as T;
-        }
+      markInitialized(instance, propertyKey);
+      getOrCreateSignal(instance, storageKey, initialValue, options);
 
-        return getOrCreateSignal<T>(
-          this,
-          storageKey,
-          undefined as T,
-          options,
-        )();
-      },
+      Object.defineProperty(instance, propertyKey, {
+        get(): T {
+          return getOrCreateSignal<T>(
+            instance,
+            storageKey,
+            undefined as T,
+            options,
+          )();
+        },
 
-      set(this: object, value: T): void {
-        if (!isInitialized(this, propertyKey)) {
-          markInitialized(this, propertyKey);
-          getOrCreateSignal(this, storageKey, value, options);
-          return;
-        }
-        getOrCreateSignal<T>(this, storageKey, undefined as T, options).set(
-          value,
-        );
-      },
+        set(value: T): void {
+          getOrCreateSignal<T>(
+            instance,
+            storageKey,
+            undefined as T,
+            options,
+          ).set(value);
+        },
 
-      enumerable: true,
-      configurable: true,
+        enumerable: true,
+        configurable: true,
+      });
     });
   };
 }

package/src/properties/prop.ts

@@ -1,18 +1,35 @@
-import type { BaseComponent } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
 
 export function Prop() {
-  return function (target: object, propertyKey: string) {
-    Object.defineProperty(target, propertyKey, {
-      get(this: BaseComponent) {
-        const fromParent = this._rawProps[propertyKey];
-        if (fromParent !== undefined) return fromParent;
-        return this._defaults[propertyKey];
-      },
-      set(this: BaseComponent, value: unknown) {
-        this._defaults[propertyKey] = value;
-      },
-      enumerable: true,
-      configurable: true,
+  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;
+        },
+        enumerable: true,
+        configurable: true,
+      });
     });
   };
 }

package/src/properties/slot.ts

@@ -1,75 +1,71 @@
-import type { BaseComponent } from "@praxisjs/core";
-import {
-  type Children,
-  type ChildrenInternal,
-  flattenChildren,
-  type VNode,
-} from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
 
-const slotsMap = new WeakMap<object, Map<string, ChildrenInternal[]>>();
+const slotsMap = new WeakMap<object, Map<string, unknown[]>>();
 
-export interface SlottedVNode extends VNode {
-  slot?: string;
-}
-
-export function resolveSlots(
-  children: ChildrenInternal | ChildrenInternal[] | undefined,
-): Map<string, ChildrenInternal[]> {
-  const slots = new Map<string, ChildrenInternal[]>();
-  const defaultSlot: ChildrenInternal[] = [];
+function resolveSlots(children: unknown): Map<string, unknown[]> {
+  const slots = new Map<string, unknown[]>();
+  const defaultSlot: unknown[] = [];
   slots.set("default", defaultSlot);
 
-  if (!children) return slots;
+  if (children == null) return slots;
 
-  const arr: ChildrenInternal[] = flattenChildren(children);
+  const arr = Array.isArray(children)
+    ? (children as unknown[]).flat(Infinity)
+    : [children];
 
-  for (const child of arr as SlottedVNode[]) {
-    const slotName = (child.props.slot as string | undefined) ?? child.slot;
-
-    if (slotName) {
-      if (!slots.has(slotName)) slots.set(slotName, []);
-      (slots.get(slotName) as ChildrenInternal[]).push(
-        child as ChildrenInternal,
-      );
-    } else {
-      defaultSlot.push(child as ChildrenInternal);
+  for (const child of arr) {
+    // Named slots via `slot` attribute on DOM elements
+    if (child instanceof Element) {
+      const slotName = child.getAttribute("slot");
+      if (slotName) {
+        child.removeAttribute("slot");
+        if (!slots.has(slotName)) slots.set(slotName, []);
+        (slots.get(slotName) as unknown[]).push(child);
+        continue;
+      }
     }
+    if (child != null) defaultSlot.push(child);
   }
 
   return slots;
 }
 
-export function initSlots(
-  instance: object,
-  children: Children | undefined,
-): void {
+export function initSlots(instance: object, children: unknown): void {
   slotsMap.set(instance, resolveSlots(children));
 }
 
-export function getSlot(instance: object, name: string): ChildrenInternal[] {
+export function getSlot(instance: object, name: string): unknown[] {
   return slotsMap.get(instance)?.get(name) ?? [];
 }
 
 export function Slot(name?: string) {
-  return function (target: object, propertyKey: string): void {
-    const slotName =
-      name ?? (propertyKey === "default" ? "default" : propertyKey);
+  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(target, propertyKey, {
-      get(this: BaseComponent): ChildrenInternal[] {
-        return getSlot(this, slotName);
-      },
+      Object.defineProperty(instance, propKey, {
+        get(this: StatefulComponent): unknown[] {
+          return getSlot(this, slotName);
+        },
 
-      set(_value: unknown): void {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(
-            `[Slot] "${propertyKey}" 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,
+        enumerable: true,
+        configurable: true,
+      });
     });
   };
 }

package/src/properties/state.ts

@@ -1,24 +1,30 @@
-import { signal } from "@praxisjs/core";
-import type { ComponentInstance, Signal } from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
+import { signal } from "@praxisjs/core/internal";
 
 export function State() {
-  return function (target: object, propertyKey: string) {
-    const signalMap = new WeakMap<object, Signal<unknown>>();
+  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);
 
-    Object.defineProperty(target, propertyKey, {
-      get(this: object) {
-        if (!signalMap.has(this)) signalMap.set(this, signal(undefined));
-        return (signalMap.get(this) as Signal<unknown>)();
-      },
-      set(this: object, value: unknown) {
-        if (!signalMap.has(this)) signalMap.set(this, signal(value));
-        else {
-          (this as ComponentInstance)._stateDirty = true;
-          (signalMap.get(this) as Signal<unknown>).set(value);
-        }
-      },
-      enumerable: true,
-      configurable: true,
+      const sig = signal(initialValue);
+
+      Object.defineProperty(instance, name, {
+        get() {
+          return sig();
+        },
+        set(value: unknown) {
+          instance._stateDirty = true;
+          sig.set(value);
+        },
+        enumerable: true,
+        configurable: true,
+      });
     });
   };
 }

package/dist/component/lifecycle.d.ts

@@ -1,3 +0,0 @@
-import { type BaseComponent } from "@praxisjs/core";
-export declare function LifeCycle<T extends new (...args: any[]) => BaseComponent>(constructor: T): T;
-//# sourceMappingURL=lifecycle.d.ts.map

package/dist/component/lifecycle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lifecycle.d.ts","sourceRoot":"","sources":["../../src/component/lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,gBAAgB,CAAC;AAuBrF,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,aAAa,EACvE,WAAW,EAAE,CAAC,GACb,CAAC,CAqBH"}