Prioritize reconciliation from addition to deletion in containers (#695)

* Extract Element Management to `DFlexDOMManager` (#696)

* Prevent Shifting After Reconciliation and Prior to Indicator Reset (#697)

* Resolve Latency Issue in Element Reconciliation and Bounding Rect Retrieval (#698)

* Fix the Failing Test by Adding the Missing Test Case (#700)

package.json

@@ -44,9 +44,9 @@
     "@babel/preset-typescript": "^7.22.15",
     "@changesets/cli": "^2.26.2",
     "@playwright/test": "^1.37.1",
-    "@size-limit/preset-big-lib": "^8.2.6",
+    "@size-limit/preset-big-lib": "^9.0.0",
     "@types/jest": "^29.5.4",
-    "@types/node": "^20.5.9",
+    "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
@@ -55,14 +55,14 @@
     "cypress": "^13.1.0",
     "eslint-config-dflex": "workspace:*",
     "istanbul-lib-instrument": "^6.0.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "rimraf": "^5.0.1",
-    "size-limit": "^8.2.6",
+    "size-limit": "^9.0.0",
     "start-server-and-test": "^2.0.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",

packages/dflex-core-instance/src/Element/DFlexCoreElement.ts

@@ -217,8 +217,19 @@ function removeCSS(DOM: HTMLElement, css: CSS): void {
 const TRANSITION_EVENT = "transitionend";
 
 class DFlexCoreElement extends DFlexBaseElement {
+  /**
+   * The initial position of the element before any transformations. This value
+   * is not updated during regular operations, only when the element undergoes
+   * reconciliation.
+   */
   private _initialPosition: PointNum;
 
+  /**
+   * The bounding box rectangle representing the element's position and
+   * dimensions.
+   * This value is updated with each transformation, ensuring it reflects the
+   * current state, even if the element is not yet reconciled.
+   */
   rect: BoxRect;
 
   private _computedDimensions: PointNum | null;
@@ -743,11 +754,7 @@ class DFlexCoreElement extends DFlexBaseElement {
     return this.VDOMOrder.self !== this.DOMOrder.self;
   }
 
-  refreshIndicators(
-    DOM: HTMLElement,
-    scrollTop: number,
-    scrollLeft: number,
-  ): void {
+  refreshIndicators(DOM: HTMLElement): void {
     this._translateHistory = undefined;
 
     this.translate.setAxes(0, 0);
@@ -760,9 +767,14 @@ class DFlexCoreElement extends DFlexBaseElement {
 
     rmEmptyAttr(DOM, "style");
 
-    this.initElmRect(DOM, scrollTop, scrollLeft);
-
     this.DOMGrid.setAxes(0, 0);
+
+    if (__DEV__) {
+      if (featureFlags.enableReconcileDebugger) {
+        // eslint-disable-next-line no-console
+        console.log(`${this.id} indicators has been refreshed`);
+      }
+    }
   }
 
   getSerializedInstance(): DFlexSerializedElement {

packages/dflex-dnd-playground/package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "cypress": "^13.1.0",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
     "eslint-config-dflex-react": "workspace:*",
     "eslint-plugin-cypress": "^2.14.0"
   }

packages/dflex-dnd-playground/tests/features/resizeWindow.spec.ts

@@ -107,9 +107,9 @@ test.describe
     test("Resize the viewport window triggers reconciliation", async () => {
       originalViewport = page.viewportSize()!;
 
-      page.setViewportSize({ width: 640, height: 800 });
+      page.setViewportSize({ width: 700, height: 800 });
 
-      await assertConsoleMsg(["c3-1"]);
+      await assertConsoleMsg(["c2-1", "c2-2", "c3-2", "c2-3", "c2-4", "c2-5"]);
     });
 
     test("Siblings have the correct order in destination container(C2) including the new merged element (#c3-2)", async () => {
@@ -155,7 +155,15 @@ test.describe
     test("Restore the viewport window triggers reconciliation", async () => {
       page.setViewportSize(originalViewport);
 
-      await assertConsoleMsg([]);
+      await assertConsoleMsg([
+        "c3-1",
+        "c2-1",
+        "c2-2",
+        "c3-2",
+        "c2-3",
+        "c2-4",
+        "c2-5",
+      ]);
     });
 
     test("Siblings have the correct order in destination container(C2) including the new merged element (#c3-1)", async () => {

packages/dflex-dnd-playground/tests/multiple-containers/emptyContainer.horizontal.spec.ts

@@ -95,7 +95,14 @@ test.describe
     });
 
     test("Trigger key `c` to commit the transformed elements and read the emitted message for mutation caused by (#c1-1)", async () => {
-      await invokeKeyboardAndAssertEmittedMsg([]);
+      await invokeKeyboardAndAssertEmittedMsg([
+        "c1-1",
+        "c2-1",
+        "c2-2",
+        "c2-3",
+        "c2-4",
+        "c2-5",
+      ]);
     });
 
     test("Siblings have the correct order in destination container(C2) including the new merged element (#c1-1)", async () => {
@@ -125,6 +132,10 @@ test.describe
       });
     });
 
+    test("Trigger key `c` to commit the transformed elements and read the emitted message for mutation caused by (#c1-1)", async () => {
+      await invokeKeyboardAndAssertEmittedMsg(["c1-1"]);
+    });
+
     test("Siblings in both containers are reconciled", async () => {
       await Promise.all([
         expect(elmC1E1).toHaveCSS("transform", "none"),

packages/dflex-dnd-playground/tests/multiple-containers/strict.horizontal.spec.ts

@@ -99,7 +99,14 @@ test.describe
     });
 
     test("Trigger key `c` to commit the transformed elements and read the emitted message for mutation caused by (#c3-2)", async () => {
-      await invokeKeyboardAndAssertEmittedMsg(["c3-1"]);
+      await invokeKeyboardAndAssertEmittedMsg([
+        "c2-1",
+        "c2-2",
+        "c3-2",
+        "c2-3",
+        "c2-4",
+        "c2-5",
+      ]);
     });
 
     test("Siblings have the correct order in destination container(C2) including the new merged element (#c3-2)", async () => {
@@ -144,7 +151,15 @@ test.describe
 
     test("Trigger key `c` to commit the transformed elements and read the emitted message for mutation caused by (#c3-1)", async () => {
       // All elements have been merged into different container.
-      await invokeKeyboardAndAssertEmittedMsg([]);
+      await invokeKeyboardAndAssertEmittedMsg([
+        "c3-1",
+        "c2-1",
+        "c2-2",
+        "c3-2",
+        "c2-3",
+        "c2-4",
+        "c2-5",
+      ]);
     });
 
     test("Siblings have the correct order in destination container(C2) including the new merged element (#c3-1)", async () => {

packages/dflex-dnd/src/Draggable/DraggableAxes.ts

@@ -154,6 +154,7 @@ class DraggableAxes extends DFlexBaseDraggable<DFlexElement> {
         VDOMOrder.self,
         this.draggedElm.id,
         SK,
+        false,
         cycleID,
         // TODO: refactor this to use if the dragged belongs to scroll container or not.
         false,