refactor: rewrite reducer for slots and introduce walkTree lib

Author: chrisvxd

packages/core/components/DropZone/context.tsx

@@ -84,35 +84,35 @@ export const DropZoneProvider = ({
 
   const registerZone = useCallback(
     (zoneCompound: string) => {
-      if (!dispatch) {
-        return;
-      }
+      // if (!dispatch) {
+      //   return;
+      // }
 
-      // dispatch({
-      //   type: "registerZone",
-      //   zone: zoneCompound,
-      // });
+      dispatch({
+        type: "registerZone",
+        zone: zoneCompound,
+      });
 
-      setActiveZones((latest) => ({ ...latest, [zoneCompound]: true }));
+      // setActiveZones((latest) => ({ ...latest, [zoneCompound]: true }));
     },
     [setActiveZones, dispatch]
   );
 
   const unregisterZone = useCallback(
     (zoneCompound: string) => {
-      if (!dispatch) {
-        return;
-      }
-
-      // dispatch({
-      //   type: "unregisterZone",
-      //   zone: zoneCompound,
-      // });
-
-      setActiveZones((latest) => ({
-        ...latest,
-        [zoneCompound]: false,
-      }));
+      // if (!dispatch) {
+      //   return;
+      // }
+
+      dispatch({
+        type: "unregisterZone",
+        zone: zoneCompound,
+      });
+
+      // setActiveZones((latest) => ({
+      //   ...latest,
+      //   [zoneCompound]: false,
+      // }));
     },
     [setActiveZones, dispatch]
   );

packages/core/components/DropZone/index.tsx

@@ -124,7 +124,7 @@ const DropZoneChild = ({
 
   const contentItem = useAppStore(
     useShallow((s) => {
-      return s.state.indexes.nodes[componentId]?.data;
+      return s.state.indexes.nodes[componentId]?.flatData;
     })
   );
 
@@ -275,31 +275,36 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       return {
         isDeepestZone: s.zoneDepthIndex[zoneCompound] ?? false,
         inNextDeepestArea: s.nextAreaDepthIndex[areaId || ""],
-        draggedItemId: s.draggedItem?.id,
         draggedComponentType: s.draggedItem?.data.componentType,
         userIsDragging: !!s.draggedItem,
       };
     });
 
-    // Register and unregister zone on mount
-    // TODO cause re-render
-    // useEffect(() => {
-    //   if (ctx?.registerZone) {
-    //     ctx?.registerZone(zoneCompound);
-    //   }
-
-    //   return () => {
-    //     if (ctx?.unregisterZone) {
-    //       ctx?.unregisterZone(zoneCompound);
-    //     }
-    //   };
-    // }, []);
-
     const zoneContentIds = useAppStore(
       useShallow((s) => {
         return s.state.indexes.zones[zoneCompound]?.contentIds;
       })
     );
+    const zoneType = useAppStore(
+      useShallow((s) => {
+        return s.state.indexes.zones[zoneCompound]?.type;
+      })
+    );
+
+    // Register and unregister zone on mount
+    useEffect(() => {
+      if (!zoneType || zoneType === "dropzone") {
+        if (ctx?.registerZone) {
+          ctx?.registerZone(zoneCompound);
+        }
+
+        return () => {
+          if (ctx?.unregisterZone) {
+            ctx?.unregisterZone(zoneCompound);
+          }
+        };
+      }
+    }, [zoneType]);
 
     const contentIds = useMemo(() => {
       return zoneContentIds || [];

packages/core/components/Puck/index.tsx

@@ -68,7 +68,7 @@ import {
   UsePuckStoreContext,
   useRegisterUsePuckStore,
 } from "../../lib/use-puck";
-import { generateNodeIndex, generateZonesIndex } from "../../reducer/indexes";
+import { walkTree } from "../../lib/walk-tree";
 
 const getClassName = getClassNameFactory("Puck", styles);
 const getLayoutClassName = getClassNameFactory("PuckLayout", styles);
@@ -286,15 +286,7 @@ function PuckProvider<
       },
     } as G["UserAppState"];
 
-    const indexes = {
-      nodes: generateNodeIndex(newAppState, config),
-      zones: generateZonesIndex(newAppState),
-    };
-
-    return {
-      ...newAppState,
-      indexes,
-    };
+    return walkTree(newAppState);
   });
 
   const { appendData = true } = _initialHistory || {};

packages/core/lib/apply-dynamic-props.ts

@@ -1,5 +1,4 @@
 import { ComponentData, Data, RootData } from "../types";
-import { dataMap } from "./data-map";
 
 /**
  * Apply the provided data to the Puck data payload.

packages/core/lib/data-map.ts

@@ -0,0 +1,48 @@
+import { ComponentData } from "../types";
+import { NodeIndex, PrivateAppState, ZoneIndex } from "../types/Internal";
+import { forEachSlot } from "./for-each-slot";
+import { forRelatedZones } from "./for-related-zones";
+
+export const deindex = (
+  state: PrivateAppState,
+  componentData: ComponentData
+) => {
+  let zones: ZoneIndex = { ...state.indexes.zones };
+  let nodes: NodeIndex = { ...state.indexes.nodes };
+
+  const dindexRelatedZones = (item: ComponentData) => {
+    forRelatedZones(item, state.data, (_path, zoneCompound, content) => {
+      content.forEach((subItem) => {
+        dindexChildren(subItem);
+        delete nodes[subItem.props.id];
+      });
+
+      delete zones[zoneCompound];
+    });
+  };
+
+  const dindexChildren = (item: ComponentData) => {
+    forEachSlot(
+      item,
+      (parentId, slotId, content) => {
+        const zoneCompound = `${parentId}:${slotId}`;
+
+        delete zones[zoneCompound];
+
+        content.forEach((item) => {
+          dindexRelatedZones(item);
+
+          delete nodes[item.props.id];
+        });
+      },
+      true
+    );
+  };
+
+  dindexRelatedZones(componentData);
+  dindexChildren(componentData);
+
+  delete nodes[componentData.props.id];
+
+  return { nodes, zones };
+};

packages/core/lib/deindex.ts

@@ -1,20 +1,24 @@
-import { Config, UserGenerics } from "../types";
-import { flattenAllSlots } from "./flatten-slots";
+import { ComponentData, Config, UserGenerics } from "../types";
+import { PrivateAppState } from "../types/Internal";
+import { walkTree } from "./walk-tree";
 
 export const flattenData = <
   UserConfig extends Config = Config,
   G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>
 >(
-  data: G["UserData"]
+  state: PrivateAppState<G["UserData"]>
 ) => {
-  const slots = flattenAllSlots(data);
-  const slotsAndZones = {
-    ...(data.zones || {}),
-    ...slots,
-  } as Record<string, G["UserData"]["content"]>;
+  const data: ComponentData[] = [];
 
-  return Object.keys(slotsAndZones).reduce<G["UserComponentData"][]>(
-    (acc, zone) => [...acc, ...slotsAndZones[zone]],
-    data.content
+  walkTree(
+    state,
+    (content) => content,
+    (item) => {
+      data.push(item);
+
+      return null;
+    }
   );
+
+  return data;
 };