refactor: don't trigger resolveFields multiple times

measuredco · Feb 21, 2025 · 506fdf3 · 506fdf3
1 parent f2523a5
commit 506fdf3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 46 deletions.
diff --git a/packages/core/lib/use-resolved-fields.ts b/packages/core/lib/use-resolved-fields.ts
@@ -85,8 +85,11 @@ export const useResolvedFields = () => {
   useEffect(() => {
     resolveFields(true);
 
-    return useNodeStore.subscribe(() => {
-      resolveFields();
-    });
+    return useNodeStore.subscribe(
+      (s) => s.nodes[id || "root"],
+      () => {
+        resolveFields();
+      }
+    );
   }, [id]);
 };
diff --git a/packages/core/stores/node-store.ts b/packages/core/stores/node-store.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { ComponentData } from "../types";
 import deepEqual from "fast-deep-equal";
+import { subscribeWithSelector } from "zustand/middleware";
 
 const partialDeepEqual = (
   newItem: Record<string, any>,
@@ -35,61 +36,63 @@ type NodeStore = {
   unregisterNode: (id: string, node?: Partial<PuckNode>) => void;
 };
 
-export const useNodeStore = create<NodeStore>((set) => ({
-  nodes: {},
-  registerNode: (id: string, node: Partial<PuckNode>) => {
-    set((s) => {
-      // Only update node if it changes
-      if (s.nodes[id] && partialDeepEqual(node, s.nodes[id])) {
-        return s;
-      }
-
-      const emptyNode: PuckNode = {
-        id,
-        methods: { sync: () => null },
-        data: { props: { id }, type: "unknown" },
-        parentId: "",
-        zone: "",
-        path: [],
-        element: null,
-        index: -1,
-      };
+export const useNodeStore = create<NodeStore>()(
+  subscribeWithSelector((set) => ({
+    nodes: {},
+    registerNode: (id: string, node: Partial<PuckNode>) => {
+      set((s) => {
+        // Only update node if it changes
+        if (s.nodes[id] && partialDeepEqual(node, s.nodes[id])) {
+          return s;
+        }
 
-      const existingNode: PuckNode | undefined = s.nodes[id];
+        const emptyNode: PuckNode = {
+          id,
+          methods: { sync: () => null },
+          data: { props: { id }, type: "unknown" },
+          parentId: "",
+          zone: "",
+          path: [],
+          element: null,
+          index: -1,
+        };
 
-      return {
-        ...s,
-        nodes: {
-          ...s.nodes,
-          [id]: {
-            ...emptyNode,
-            ...existingNode,
-            ...node,
-            id,
-          },
-        },
-      };
-    });
-  },
-  unregisterNode: (id: string, node?: Partial<PuckNode>) => {
-    set((s) => {
-      const existingNode: PuckNode | undefined = s.nodes[id];
+        const existingNode: PuckNode | undefined = s.nodes[id];
 
-      if (existingNode) {
         return {
           ...s,
           nodes: {
             ...s.nodes,
             [id]: {
+              ...emptyNode,
               ...existingNode,
               ...node,
               id,
             },
           },
         };
-      }
+      });
+    },
+    unregisterNode: (id: string, node?: Partial<PuckNode>) => {
+      set((s) => {
+        const existingNode: PuckNode | undefined = s.nodes[id];
 
-      return s;
-    });
-  },
-}));
+        if (existingNode) {
+          return {
+            ...s,
+            nodes: {
+              ...s.nodes,
+              [id]: {
+                ...existingNode,
+                ...node,
+                id,
+              },
+            },
+          };
+        }
+
+        return s;
+      });
+    },
+  }))
+);