Refactor decorators

.changeset/refactor-decorators.md

@@ -0,0 +1,5 @@
+---
+'@dnd-kit/state': patch
+---
+
+Refactor decorators to use the [latest decorators API](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators) rather than the experimental API.

config/typescript/base.json

@@ -6,7 +6,6 @@
     "declaration": true,
     "declarationMap": true,
     "esModuleInterop": true,
-    "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,
     "isolatedModules": true,

packages/abstract/src/core/entities/draggable/draggable.ts

@@ -45,7 +45,7 @@ export class Draggable<T extends Data = Data> extends Entity<T> {
   }
 
   @reactive
-  public type: Type | undefined;
+  public accessor type: Type | undefined;
 
   /**
    * A boolean indicating whether the draggable item is the source of a drag operation.

packages/abstract/src/core/entities/droppable/droppable.ts

@@ -40,7 +40,7 @@ export class Droppable<T extends Data = Data> extends Entity<T> {
    * An array of types that are compatible with the droppable.
    */
   @reactive
-  public accept:
+  public accessor accept:
     | Type
     | Type[]
     | ((draggable: Draggable) => boolean)
@@ -50,7 +50,7 @@ export class Droppable<T extends Data = Data> extends Entity<T> {
    * The type of the droppable.
    */
   @reactive
-  public type: Type | undefined;
+  public accessor type: Type | undefined;
 
   /**
    * Checks whether or not the droppable accepts a given draggable.
@@ -81,13 +81,13 @@ export class Droppable<T extends Data = Data> extends Entity<T> {
   }
 
   @reactive
-  public collisionDetector: CollisionDetector;
+  public accessor collisionDetector: CollisionDetector;
 
   @reactive
-  public collisionPriority: number;
+  public accessor collisionPriority: number;
 
   @reactive
-  public shape: Shape | undefined;
+  public accessor shape: Shape | undefined;
 
   @derived
   public get isDropTarget() {

packages/abstract/src/core/entities/entity/entity.ts

@@ -75,26 +75,29 @@ export class Entity<T extends Data = Data> {
     }
   }
 
+  /**
+   * The manager that controls the drag and drop operations.
+   */
   @reactive
-  public manager: DragDropManager;
+  public accessor manager: DragDropManager | undefined;
 
   /**
    * The unique identifier of the entity.
    */
   @reactive
-  public id: UniqueIdentifier;
+  public accessor id: UniqueIdentifier;
 
   /**
    * The data associated with the entity.
    */
   @reactive
-  public data: Data | null;
+  public accessor data: Data | null;
 
   /**
    * A boolean indicating whether the entity is disabled.
    */
   @reactive
-  public disabled: boolean;
+  public accessor disabled: boolean;
 
   /**
    * An array of effects that are applied to the entity.

packages/abstract/src/core/plugins/plugin.ts

@@ -22,7 +22,7 @@ export abstract class Plugin<
    * Triggers effects when accessed.
    */
   @reactive
-  public disabled: boolean = false;
+  public accessor disabled: boolean = false;
 
   /**
    * Enable a disabled plugin instance.

packages/dom/src/core/entities/draggable/draggable.ts

@@ -26,13 +26,13 @@ export interface Input<T extends Data = Data> extends DraggableInput<T> {
 
 export class Draggable<T extends Data = Data> extends AbstractDraggable<T> {
   @reactive
-  public handle: Element | undefined;
+  public accessor handle: Element | undefined;
 
   @reactive
-  public element: Element | undefined;
+  public accessor element: Element | undefined;
 
   @reactive
-  public feedback: FeedbackType;
+  public accessor feedback: FeedbackType;
 
   constructor(
     {

packages/dom/src/core/entities/droppable/droppable.ts

@@ -133,10 +133,10 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<T> {
   }
 
   @reactive
-  visible: Boolean | undefined;
+  public accessor visible: Boolean | undefined;
 
   @reactive
-  public placeholder: Element | undefined;
+  public accessor placeholder: Element | undefined;
 
   public set element(value: Element | undefined) {
     this.internal.element.value = value;

packages/dom/src/core/plugins/scrolling/ScrollLock.ts

@@ -5,8 +5,8 @@ const LOCKED = true;
 const UNLOCKED = false;
 
 export class ScrollLock {
-  @reactive private [Direction.Forward] = LOCKED;
-  @reactive private [Direction.Reverse] = LOCKED;
+  @reactive private accessor [Direction.Forward] = LOCKED;
+  @reactive private accessor [Direction.Reverse] = LOCKED;
 
   public isLocked(direction?: Direction): boolean {
     if (direction === Direction.Idle) {

packages/dom/src/core/plugins/scrolling/Scroller.ts

@@ -20,7 +20,7 @@ export class Scroller extends CorePlugin<DragDropManager> {
   private scrollIntentTracker: ScrollIntentTracker;
 
   @reactive
-  public autoScrolling = false;
+  public accessor autoScrolling = false;
 
   constructor(manager: DragDropManager) {
     super(manager);

packages/dom/src/sortable/sortable.ts

@@ -90,14 +90,14 @@ export class Sortable<T extends Data = Data> {
   public droppable: Droppable<T>;
 
   @reactive
-  index: number;
+  public accessor index: number;
 
   previousIndex: number;
 
   initialIndex: number;
 
   @reactive
-  group: UniqueIdentifier | undefined;
+  public accessor group: UniqueIdentifier | undefined;
 
   transition: SortableTransition | null;
 

packages/geometry/src/position/position.ts

@@ -15,13 +15,13 @@ export class Position {
   }
 
   @reactive
-  public initial: Point;
+  public accessor initial: Point;
 
   @reactive
-  public previous: Point;
+  public accessor previous: Point;
 
   @reactive
-  public current: Point;
+  public accessor current: Point;
 
   @derived
   public get delta() {

packages/state/src/decorators.ts

@@ -2,57 +2,45 @@ import {signal, type Signal} from '@preact/signals-core';
 
 import {computed} from './computed';
 
-export function reactive(target: Object, propertyKey: string) {
-  const store = new WeakMap<any, Signal<any>>();
-
-  Object.defineProperty(target, propertyKey, {
+export function reactive(
+  {get}: ClassAccessorDecoratorTarget<any, any>,
+  _: ClassAccessorDecoratorContext<any, any>
+): ClassAccessorDecoratorResult<any, any> {
+  return {
+    init() {
+      return signal(undefined) as any;
+    },
     get() {
-      if (!store.get(this)) {
-        store.set(this, signal(undefined));
-      }
-
-      const stored = store.get(this);
-      const value = stored?.value;
-
-      return value;
+      const current: Signal = get.call(this);
+      return current.value;
     },
-    set(value: any) {
-      const stored = store.get(this);
+    set(newValue: any) {
+      const current = get.call(this);
 
-      if (stored) {
-        if (stored.peek() !== value) {
-          stored.value = value;
-        }
+      if (current.peek() === newValue) {
         return;
       }
 
-      store.set(this, signal(value));
+      current.value = newValue;
     },
-  });
+  };
 }
 
-export function derived(
-  target: Object,
-  propertyKey: string,
-  descriptor: PropertyDescriptor
+export function derived<This, Return>(
+  target: (this: This) => Return,
+  _: ClassGetterDecoratorContext<This, Return>
 ) {
-  const store = new WeakMap<any, Signal<any>>();
-  const compute = descriptor.get;
+  const map: WeakMap<any, Signal<Return>> = new WeakMap();
 
-  Object.defineProperty(target, propertyKey, {
-    get() {
-      if (!compute) {
-        return undefined;
-      }
+  return function (this: This): Return {
+    let result = map.get(this);
 
-      if (!store.get(this)) {
-        store.set(this, computed(compute.bind(this)));
-      }
+    if (!result) {
+      result = computed(target.bind(this));
 
-      const stored = store.get(this);
-      const value = stored?.value;
+      map.set(this, result);
+    }
 
-      return value;
-    },
-  });
+    return result.value;
+  };
 }