Update effect initialization/cleanup strategy

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

@@ -6,23 +6,26 @@ import {Modifier} from '../../modifiers/index.ts';
 import type {Modifiers} from '../../modifiers/index.ts';
 import type {DragDropManager} from '../../manager/index.ts';
 import {descriptor} from '../../plugins/index.ts';
+import type {Sensors} from '../../sensors/sensor.ts';
 
 export interface Input<
   T extends Data = Data,
   U extends Draggable<T> = Draggable<T>,
 > extends EntityInput<T, U> {
   type?: Type;
   modifiers?: Modifiers;
+  sensors?: Sensors;
 }
 
 export class Draggable<T extends Data = Data> extends Entity<T> {
   constructor(
-    {modifiers, type, ...input}: Input<T>,
+    {modifiers, type, sensors, ...input}: Input<T>,
     public manager: DragDropManager
   ) {
     super(input, manager);
 
     this.type = type;
+    this.sensors = sensors;
 
     if (modifiers?.length) {
       this.modifiers = modifiers.map((modifier) => {
@@ -33,6 +36,8 @@ export class Draggable<T extends Data = Data> extends Entity<T> {
     }
   }
 
+  public sensors: Sensors | undefined;
+
   public modifiers: Modifier[] | undefined;
 
   @reactive

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

@@ -53,33 +53,28 @@ export class Entity<T extends Data = Data> {
     this.id = id;
     this.data = data;
     this.disabled = disabled;
+    this.effects = [
+      () => {
+        // Re-run this effect whenever the `id` changes
+        const {id: _} = this;
 
-    queueMicrotask(() => {
-      if (options?.register !== false) {
-        manager.registry.register(this);
-      }
-
-      const cleanupEffects = effects(
-        () => {
-          // Re-run this effect whenever the `id` changes
-          const {id: _} = this;
-
-          if (id === previousId) {
-            return;
-          }
+        if (id === previousId) {
+          return;
+        }
 
-          manager.registry.register(this);
+        manager.registry.register(this);
 
-          return () => manager.registry.unregister(this);
-        },
-        ...getEffects()
-      );
+        return () => manager.registry.unregister(this);
+      },
+      ...getEffects(),
+    ];
+    this.destroy = this.destroy.bind(this);
 
-      this.destroy = () => {
-        manager.registry.unregister(this);
-        cleanupEffects();
-      };
-    });
+    if (options?.register !== false) {
+      queueMicrotask(() => {
+        manager.registry.register(this);
+      });
+    }
   }
 
   /**
@@ -100,9 +95,16 @@ export class Entity<T extends Data = Data> {
   @reactive
   public disabled: boolean;
 
+  /**
+   * An array of effects that are applied to the entity.
+   */
+  public effects: Effect[];
+
   /**
    * A method that cleans up the entity when it is no longer needed.
    * @returns void
    */
-  public destroy(): void {}
+  public destroy(): void {
+    this.manager.registry.unregister(this);
+  }
 }

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

@@ -1,4 +1,4 @@
-import {signal} from '@dnd-kit/state';
+import {effects, signal} from '@dnd-kit/state';
 
 import type {Entity} from './entity.ts';
 import type {UniqueIdentifier} from './types.ts';
@@ -10,6 +10,7 @@ import type {UniqueIdentifier} from './types.ts';
  */
 export class EntityRegistry<T extends Entity> {
   private map = signal<Map<UniqueIdentifier, T>>(new Map());
+  private cleanupFunctions = new WeakMap<T, () => void>();
 
   /**
    * Iterator for the EntityRegistry class.
@@ -59,6 +60,9 @@ export class EntityRegistry<T extends Entity> {
 
     this.map.value = updatedMap;
 
+    const cleanup = effects(...value.effects);
+    this.cleanupFunctions.set(value, cleanup);
+
     return () => this.unregister(key, value);
   };
 
@@ -74,6 +78,10 @@ export class EntityRegistry<T extends Entity> {
       return;
     }
 
+    const cleanup = this.cleanupFunctions.get(value);
+    cleanup?.();
+    this.cleanupFunctions.delete(value);
+
     const updatedMap = new Map(current);
     updatedMap.delete(key);
 
@@ -85,6 +93,8 @@ export class EntityRegistry<T extends Entity> {
    */
   public destroy() {
     for (const entry of this) {
+      const cleanup = this.cleanupFunctions.get(entry);
+      cleanup?.();
       entry.destroy();
     }
 

packages/abstract/src/core/manager/registry.ts

@@ -37,9 +37,9 @@ export class DragDropRegistry<
   public sensors: PluginRegistry<V, SensorConstructor<V>>;
   public modifiers: PluginRegistry<V, ModifierConstructor<V>>;
 
-  public register(input: Entity): Entity;
-  public register(input: Draggable): Draggable;
-  public register(input: Droppable): Droppable;
+  public register(input: Entity): () => void;
+  public register(input: Draggable): () => void;
+  public register(input: Droppable): () => void;
   public register(input: SensorConstructor, options?: SensorOptions): Sensor;
   public register(input: ModifierConstructor): Modifier;
   public register(input: PluginConstructor, options?: PluginOptions): Plugin;

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

@@ -8,7 +8,7 @@ import type {
   DraggableInput,
   DragDropManager as AbstractDragDropManager,
 } from '@dnd-kit/abstract';
-import {effect, reactive} from '@dnd-kit/state';
+import {reactive} from '@dnd-kit/state';
 
 import type {Sensors} from '../../sensors/index.ts';
 
@@ -32,16 +32,12 @@ export class Draggable<T extends Data = Data> extends AbstractDraggable<T> {
   @reactive
   public feedback: FeedbackType;
 
-  @reactive
-  public sensors: Sensors | undefined;
-
   constructor(
     {
       element,
       effects = () => [],
       handle,
       feedback = 'default',
-      sensors,
       ...input
     }: Input<T>,
     public manager: AbstractDragDropManager<any, any>
@@ -79,6 +75,5 @@ export class Draggable<T extends Data = Data> extends AbstractDraggable<T> {
     this.element = element;
     this.handle = handle;
     this.feedback = feedback;
-    this.sensors = sensors;
   }
 }

packages/react/src/core/hooks/useInstance.ts

@@ -11,11 +11,8 @@ export function useInstance<T extends Entity>(
   const [instance] = useState<T>(() => initializer(manager));
 
   useEffect(() => {
-    manager.registry.register(instance);
-
-    return () => {
-      manager.registry.unregister(instance);
-    };
+    // Register returns an unregister callback
+    return manager.registry.register(instance);
   }, []);
 
   return instance;