From fc232a7a7189ae99ccc1f63d66d81722e0c7dd5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Wed, 18 Sep 2024 09:22:01 -0400
Subject: [PATCH] Proxy rework

---
 .../src/core/entities/droppable/droppable.ts  | 13 ++++++++++-
 .../dom/src/core/plugins/feedback/Feedback.ts | 23 ++-----------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/packages/dom/src/core/entities/droppable/droppable.ts b/packages/dom/src/core/entities/droppable/droppable.ts
index 711dad14..29dd9b32 100644
--- a/packages/dom/src/core/entities/droppable/droppable.ts
+++ b/packages/dom/src/core/entities/droppable/droppable.ts
@@ -96,7 +96,18 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
   }
 
   @reactive
-  public accessor element: Element | undefined;
+  accessor #element: Element | undefined;
+
+  @reactive
+  public accessor proxy: Element | undefined;
+
+  set element(element: Element | undefined) {
+    this.#element = element;
+  }
+
+  get element() {
+    return this.proxy ?? this.#element;
+  }
 
   public refreshShape: () => Shape | undefined;
 }
diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
index cd697a03..3bc8b1c7 100644
--- a/packages/dom/src/core/plugins/feedback/Feedback.ts
+++ b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -511,33 +511,14 @@ function createPlaceholder(source: Draggable) {
 
       let current = droppable.element;
 
-      droppable.element = clonedElement;
+      droppable.proxy = clonedElement;
       clonedElement.removeAttribute(IDENTIFIER_ATTRIBUTE);
 
       ProxiedElements.set(current, clonedElement);
 
-      const proxy = Proxy.revocable(droppable, {
-        set(target, key, newValue) {
-          if (key === 'element') {
-            ProxiedElements.delete(current);
-
-            if (newValue instanceof Element) {
-              ProxiedElements.set(newValue, clonedElement);
-            }
-
-            current = newValue;
-
-            return false;
-          }
-
-          return Reflect.set(target, key, newValue);
-        },
-      });
-
       cleanup.push(() => {
-        proxy.revoke();
         ProxiedElements.delete(current);
-        droppable.element = current;
+        droppable.proxy = undefined;
       });
     }