refactor: tidy up implementation after performance changes

apps/docs/components/Preview/index.tsx

@@ -86,7 +86,7 @@ const ConfigPreviewInner = ({
       {componentConfig.render && (
         <div className={getClassNameConfigPreview("preview")}>
           {componentConfig.render({
-            ...appState.data["content"][0].props,
+            ...appState.data["content"][0]?.props,
             puck: { renderDropZone: () => <div />, isEditing: false },
           })}
         </div>

packages/core/components/AutoField/fields/ArrayField/index.tsx

@@ -7,10 +7,9 @@ import { reorder, replace } from "../../../../lib";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types";
-import { getAppStore, useAppStore } from "../../../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../../../store";
 import { Sortable, SortableProvider } from "../../../Sortable";
 import { NestedFieldProvider, useNestedFieldContext } from "../../context";
-import { usePermissionsStore } from "../../../../stores/permissions-store";
 
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
@@ -47,17 +46,19 @@ export const ArrayField = ({
     setLocalState({ arrayState, value });
   }, [value, thisArrayState]);
 
+  const appStore = useAppStoreApi();
+
   const mapArrayStateToUi = useCallback(
     (partialArrayState: Partial<ArrayState>) => {
-      const state = getAppStore().state;
+      const state = appStore.getState().state;
       return {
         arrayState: {
           ...state.ui.arrayState,
           [id]: { ...arrayState, ...partialArrayState },
         },
       };
     },
-    [arrayState]
+    [arrayState, appStore]
   );
 
   const getHighestIndex = useCallback(() => {
@@ -105,8 +106,8 @@ export const ArrayField = ({
 
   const [isDragging, setIsDragging] = useState(false);
 
-  const canEdit = usePermissionsStore(
-    (s) => s.getPermissions({ item: getAppStore().selectedItem }).edit
+  const canEdit = useAppStore(
+    (s) => s.permissions.getPermissions({ item: s.selectedItem }).edit
   );
 
   const forceReadOnly = !canEdit;
@@ -138,7 +139,7 @@ export const ArrayField = ({
             move.target
           );
 
-          const state = getAppStore().state;
+          const state = appStore.getState().state;
 
           const newUi = {
             arrayState: {

packages/core/components/AutoField/index.tsx

@@ -22,7 +22,7 @@ import {
 } from "./fields";
 import { Lock } from "lucide-react";
 import { ObjectField } from "./fields/ObjectField";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { useSafeId } from "../../lib/use-safe-id";
 import { NestedFieldContext } from "./context";
 

packages/core/components/ComponentList/index.tsx

@@ -1,10 +1,9 @@
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { ReactNode } from "react";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Drawer } from "../Drawer";
-import { usePermissionsStore } from "../../stores/permissions-store";
 
 const getClassName = getClassNameFactory("ComponentList", styles);
 
@@ -17,9 +16,9 @@ const ComponentListItem = ({
   index?: number; // TODO deprecate
 }) => {
   const overrides = useAppStore((s) => s.overrides);
-  const canInsert = usePermissionsStore(
+  const canInsert = useAppStore(
     (s) =>
-      s.getPermissions({
+      s.permissions.getPermissions({
         type: name,
       }).insert
   );

packages/core/components/DragDropContext/index.tsx

@@ -1,5 +1,5 @@
 import { DragDropProvider } from "@dnd-kit/react";
-import { getAppStore, useAppStore } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import {
   createContext,
   Dispatch,
@@ -29,7 +29,6 @@ import { generateId } from "../../lib/generate-id";
 import { createStore } from "zustand";
 import { getDeepDir } from "../../lib/get-deep-dir";
 import { useSensors } from "../../lib/dnd/use-sensors";
-import { useNodeStore } from "../../stores/node-store";
 
 const DEBUG = false;
 
@@ -108,6 +107,7 @@ const DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const resolveData = useAppStore((s) => s.resolveData);
   const metadata = useAppStore((s) => s.metadata);
+  const appStore = useAppStoreApi();
 
   const id = useId();
 
@@ -331,7 +331,7 @@ const DragDropContextClient = ({
               if (thisPreview) {
                 zoneStore.setState({ previewIndex: {} });
 
-                const state = getAppStore().state;
+                const state = appStore.getState().state;
 
                 if (thisPreview.type === "insert") {
                   insertComponent(
@@ -427,7 +427,7 @@ const DragDropContextClient = ({
               targetIndex = 0;
             }
 
-            const path = useNodeStore.getState().nodes[target.id]?.path || [];
+            const path = appStore.getState().nodes.nodes[target.id]?.path || [];
 
             // Abort if dragging over self or descendant
             if (
@@ -464,7 +464,8 @@ const DragDropContextClient = ({
 
               const item = getItem(
                 initialSelector.current,
-                getAppStore().state.data
+                appStore.getState().state.data,
+                {}
               );
 
               if (item) {
@@ -496,7 +497,7 @@ const DragDropContextClient = ({
 
             if (source && source.type !== "void") {
               const sourceData = source.data as ComponentDndData;
-              const { data } = getAppStore().state;
+              const { data } = appStore.getState().state;
 
               const item = getItem(
                 {

packages/core/components/DraggableComponent/index.tsx

@@ -14,7 +14,7 @@ import styles from "./styles.module.css";
 import "./styles.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Copy, CornerLeftUp, Trash } from "lucide-react";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore, useAppStoreApi } from "../../store";
 import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
 
@@ -28,8 +28,6 @@ import { useSortableSafe } from "../../lib/dnd/dnd-kit/safe";
 import { getDeepScrollPosition } from "../../lib/get-deep-scroll-position";
 import { ZoneStoreContext } from "../DropZone/context";
 import { useContextStore } from "../../lib/use-context-store";
-import { useNodeStore } from "../../stores/node-store";
-import { usePermissionsStore } from "../../stores/permissions-store";
 import { useShallow } from "zustand/react/shallow";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
@@ -150,12 +148,12 @@ export const DraggableComponent = ({
   const containsActiveZone =
     Object.values(localZones).filter(Boolean).length > 0;
 
-  const path = useNodeStore((s) => s.nodes[id]?.path);
+  const path = useAppStore((s) => s.nodes.nodes[id]?.path);
 
-  const item = useNodeStore((s) => s.nodes[id]?.data);
+  const item = useAppStore((s) => s.nodes.nodes[id]?.data);
 
-  const permissions = usePermissionsStore(
-    useShallow((s) => s.getPermissions({ item }))
+  const permissions = useAppStore(
+    useShallow((s) => s.permissions.getPermissions({ item }))
   );
 
   const userIsDragging = useContextStore(
@@ -273,7 +271,7 @@ export const DraggableComponent = ({
     }
   }, [ref.current, userIsDragging]);
 
-  const registerNode = useNodeStore((s) => s.registerNode);
+  const registerNode = useAppStore((s) => s.nodes.registerNode);
 
   useEffect(() => {
     registerNode(id, { methods: { sync }, element: ref.current ?? null });
@@ -302,8 +300,10 @@ export const DraggableComponent = ({
     [index, zoneCompound, id]
   );
 
+  const appStore = useAppStoreApi();
+
   const onSelectParent = useCallback(() => {
-    const { nodes } = useNodeStore.getState();
+    const { nodes } = appStore.getState().nodes;
     const node = nodes[id];
     const parentNode = node?.parentId ? nodes[node?.parentId] : null;
 

packages/core/components/DropZone/context.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import type { Draggable } from "@dnd-kit/dom";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { createStore, StoreApi } from "zustand";
 
 export type PathData = Record<string, { path: string[]; label: string }>;

packages/core/components/DropZone/index.tsx

@@ -18,7 +18,7 @@ import {
   ZoneStoreContext,
   dropZoneContext,
 } from "./context";
-import { useAppStore } from "../../stores/app-store";
+import { useAppStore } from "../../store";
 import { DropZoneProps } from "./types";
 import { Content, DragAxis, PuckContext } from "../../types";
 
@@ -33,7 +33,6 @@ import { useContentIdsWithPreview } from "./lib/use-content-with-preview";
 import { useDragAxis } from "./lib/use-drag-axis";
 import { useContextStore } from "../../lib/use-context-store";
 import { useShallow } from "zustand/react/shallow";
-import { useNodeStore } from "../../stores/node-store";
 import { renderContext } from "../Render";
 
 const getClassName = getClassNameFactory("DropZone", styles);
@@ -217,7 +216,9 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       activeZones,
     } = ctx!;
 
-    const path = useNodeStore((s) => (areaId ? s.nodes[areaId]?.path : null));
+    const path = useAppStore((s) =>
+      areaId ? s.nodes.nodes[areaId]?.path : null
+    );
 
     let zoneCompound = rootDroppableId;
 

packages/core/components/DropZone/lib/use-content-with-preview.ts

@@ -4,7 +4,7 @@ import { useRenderedCallback } from "../../../lib/dnd/use-rendered-callback";
 import { insert } from "../../../lib/insert";
 import { ZoneStoreContext } from "../context";
 import { useContextStore } from "../../../lib/use-context-store";
-import { useAppStore } from "../../../stores/app-store";
+import { useAppStore } from "../../../store";
 
 export const useContentIdsWithPreview = (
   contentIds: string[],

packages/core/components/DropZone/lib/use-drag-axis.ts

@@ -1,6 +1,6 @@
 import { RefObject, useCallback, useEffect, useState } from "react";
 import { DragAxis } from "../../../types";
-import { useAppStore } from "../../../stores/app-store";
+import { useAppStore } from "../../../store";
 
 const GRID_DRAG_AXIS: DragAxis = "dynamic";
 const FLEX_ROW_DRAG_AXIS: DragAxis = "x";

packages/core/components/DropZone/lib/use-min-empty-height.ts

@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from "react";
 import { ZoneStoreContext } from "./../context";
 import { useContextStore } from "../../../lib/use-context-store";
-import { useNodeStore } from "../../../stores/node-store";
+import { useAppStoreApi } from "../../../store";
 
 export const useMinEmptyHeight = ({
   zoneCompound,
@@ -12,6 +12,7 @@ export const useMinEmptyHeight = ({
   userMinEmptyHeight: number;
   ref: RefObject<HTMLDivElement | null>;
 }) => {
+  const appStore = useAppStoreApi();
   const [prevHeight, setPrevHeight] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
@@ -36,7 +37,7 @@ export const useMinEmptyHeight = ({
 
     setPrevHeight(0);
     setTimeout(() => {
-      const { nodes } = useNodeStore.getState();
+      const { nodes } = appStore.getState().nodes;
 
       Object.entries(nodes).forEach(([_, node]) => {
         node?.methods.sync();

packages/core/components/LayerTree/index.tsx

@@ -11,7 +11,7 @@ import { findZonesForArea } from "../../lib/find-zones-for-area";
 import { getZoneId } from "../../lib/get-zone-id";
 import { getFrame } from "../../lib/get-frame";
 import { onScrollEnd } from "../../lib/on-scroll-end";
-import { useNodeStore } from "../../stores/node-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("LayerTree", styles);
 const getClassNameLayer = getClassNameFactory("Layer", styles);
@@ -37,7 +37,7 @@ export const LayerTree = ({
   const ctx = useContext(dropZoneContext);
 
   // TODO change this for performance
-  const nodes = useNodeStore((s) => s.nodes);
+  const nodes = useAppStore((s) => s.nodes.nodes);
 
   return (
     <>

packages/core/components/MenuBar/index.tsx

@@ -7,7 +7,7 @@ import { PuckAction } from "../../reducer";
 import type { Data } from "../../types";
 
 import styles from "./styles.module.css";
-import { useHistoryStore } from "../../stores/history-store";
+import { useAppStore } from "../../store";
 
 const getClassName = getClassNameFactory("MenuBar", styles);
 
@@ -22,10 +22,10 @@ export function MenuBar<UserData extends Data>({
   renderHeaderActions?: () => ReactElement;
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
 }) {
-  const back = useHistoryStore((s) => s.back);
-  const forward = useHistoryStore((s) => s.forward);
-  const hasFuture = useHistoryStore((s) => s.hasFuture());
-  const hasPast = useHistoryStore((s) => s.hasPast());
+  const back = useAppStore((s) => s.history.back);
+  const forward = useAppStore((s) => s.history.forward);
+  const hasFuture = useAppStore((s) => s.history.hasFuture());
+  const hasPast = useAppStore((s) => s.history.hasPast());
 
   return (
     <div

packages/core/components/Puck/components/Canvas/index.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useAppStore } from "../../../../stores/app-store";
+import { useAppStore } from "../../../../store";
 import { ViewportControls } from "../../../ViewportControls";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";

packages/core/components/Puck/components/Components/index.tsx

@@ -1,5 +1,5 @@
 import { useComponentList } from "../../../../lib/use-component-list";
-import { useAppStore } from "../../../../stores/app-store";
+import { useAppStore } from "../../../../store";
 import { ComponentList } from "../../../ComponentList";
 import { useMemo } from "react";