wip: add parent to resolvers

Author: chrisvxd

packages/core/components/DragDropContext/index.tsx

@@ -29,7 +29,6 @@ import { PointerSensor } from "../../lib/dnd/PointerSensor";
 import { collisionStore } from "../../lib/dnd/collision/dynamic/store";
 import { generateId } from "../../lib/generate-id";
 import { createStore } from "zustand";
-import { usePathData } from "../../lib/use-path-data";
 
 const DEBUG = false;
 
@@ -104,7 +103,7 @@ const DragDropContextClient = ({
   children,
   disableAutoScroll,
 }: DragDropContextProps) => {
-  const { state, config, dispatch, resolveData } = useAppContext();
+  const { state, config, dispatch, resolveData, pathData } = useAppContext();
 
   const id = useId();
 
@@ -297,8 +296,6 @@ const DragDropContextClient = ({
 
   const dragMode = useRef<"new" | "existing" | null>(null);
 
-  const { pathData, registerPath, unregisterPath } = usePathData(data);
-
   const initialSelector = useRef<{ zone: string; index: number }>(undefined);
 
   return (
@@ -550,9 +547,6 @@ const DragDropContextClient = ({
                 mode: "edit",
                 areaId: "root",
                 depth: 0,
-                registerPath,
-                unregisterPath,
-                pathData,
                 path: [],
               }}
             >

packages/core/components/DraggableComponent/index.tsx

@@ -126,6 +126,8 @@ export const DraggableComponent = ({
     dispatch,
     iframe,
     state,
+    registerPath,
+    unregisterPath,
   } = useAppContext();
 
   const ctx = useContext(dropZoneContext);
@@ -298,7 +300,7 @@ export const DraggableComponent = ({
   }, [ref.current]);
 
   useEffect(() => {
-    ctx?.registerPath!(
+    registerPath!(
       id,
       {
         index,
@@ -308,7 +310,7 @@ export const DraggableComponent = ({
     );
 
     return () => {
-      ctx?.unregisterPath?.(id);
+      unregisterPath?.(id);
     };
   }, [id, zoneCompound, index, componentType]);
 

packages/core/components/DropZone/context.tsx

@@ -31,9 +31,6 @@ export type DropZoneContext<UserConfig extends Config = Config> = {
   registerZone?: (zoneCompound: string) => void;
   unregisterZone?: (zoneCompound: string) => void;
   activeZones?: Record<string, boolean>;
-  pathData?: PathData;
-  registerPath?: (id: string, selector: ItemSelector, label: string) => void;
-  unregisterPath?: (id: string) => void;
   mode?: "edit" | "render";
   depth: number;
   registerLocalZone?: (zone: string, active: boolean) => void; // A zone as it pertains to the current area

packages/core/components/LayerTree/index.tsx

@@ -12,6 +12,7 @@ import { getZoneId } from "../../lib/get-zone-id";
 import { isChildOfZone } from "../../lib/is-child-of-zone";
 import { getFrame } from "../../lib/get-frame";
 import { onScrollEnd } from "../../lib/on-scroll-end";
+import { useAppContext } from "../Puck/context";
 
 const getClassName = getClassNameFactory("LayerTree", styles);
 const getClassNameLayer = getClassNameFactory("Layer", styles);
@@ -35,6 +36,7 @@ export const LayerTree = ({
 }) => {
   const zones = data.zones || {};
   const ctx = useContext(dropZoneContext);
+  const appContext = useAppContext();
 
   return (
     <>
@@ -67,7 +69,7 @@ export const LayerTree = ({
 
           const isHovering = hoveringComponent === item.props.id;
 
-          const childIsSelected = isChildOfZone(item, selectedItem, ctx);
+          const childIsSelected = isChildOfZone(item, selectedItem, appContext);
 
           const componentConfig: ComponentConfig | undefined =
             config.components[item.type];

packages/core/components/Puck/context.tsx

@@ -17,7 +17,7 @@ import {
   UserGenerics,
 } from "../../types";
 import { PuckAction } from "../../reducer";
-import { getItem } from "../../lib/get-item";
+import { getItem, ItemSelector } from "../../lib/get-item";
 import { PuckHistory } from "../../lib/use-puck-history";
 import { defaultViewports } from "../ViewportControls/default-viewports";
 import { Viewports } from "../../types";
@@ -27,6 +27,8 @@ import {
   useResolvedPermissions,
 } from "../../lib/use-resolved-permissions";
 import { useResolvedData } from "../../lib/use-resolved-data";
+import { usePathData } from "../../lib/use-path-data";
+import { PathData } from "../DropZone/context";
 
 export const defaultAppState: AppState = {
   data: { content: [], root: {} },
@@ -83,6 +85,9 @@ export type AppContext<
   selectedItem?: G["UserData"]["content"][0];
   getPermissions: GetPermissions<UserConfig>;
   refreshPermissions: RefreshPermissions<UserConfig>;
+  pathData?: PathData;
+  registerPath?: (id: string, selector: ItemSelector, label: string) => void;
+  unregisterPath?: (id: string) => void;
 };
 
 export const defaultContext: AppContext = {
@@ -132,6 +137,10 @@ export const AppProvider = ({
 
   const [status, setStatus] = useState<Status>("LOADING");
 
+  const { pathData, registerPath, unregisterPath } = usePathData(
+    value.state.data
+  );
+
   // App is ready when client has loaded, after initial render
   // This triggers DropZones to activate
   useEffect(() => {
@@ -171,7 +180,8 @@ export const AppProvider = ({
     value.state,
     value.globalPermissions || {},
     setComponentLoading,
-    unsetComponentLoading
+    unsetComponentLoading,
+    pathData
   );
 
   const { resolveData } = useResolvedData(
@@ -197,6 +207,9 @@ export const AppProvider = ({
         componentState,
         setComponentState,
         resolveData,
+        pathData,
+        registerPath,
+        unregisterPath,
       }}
     >
       {children}

packages/core/lib/is-child-of-zone.ts

@@ -1,16 +1,17 @@
 import { DropZoneContext } from "../components/DropZone/context";
+import { AppContext } from "../components/Puck/context";
 import { Content } from "../types";
 import { getItem } from "./get-item";
 import { getZoneId } from "./get-zone-id";
 
 export const isChildOfZone = (
   item: Content[0],
   maybeChild: Content[0] | null | undefined,
-  ctx: DropZoneContext
+  ctx: AppContext
 ) => {
-  const { data, pathData = {} } = ctx || {};
+  const { state, pathData = {} } = ctx || {};
 
-  return maybeChild && data
+  return maybeChild && state.data
     ? !!pathData[maybeChild.props.id]?.path.find((zoneCompound) => {
         const [area] = getZoneId(zoneCompound);
 

packages/core/lib/use-breadcrumbs.ts

@@ -81,13 +81,13 @@ export const useBreadcrumbs = (renderCount?: number) => {
   const {
     state: { data },
     selectedItem,
+    pathData,
   } = useAppContext();
-  const dzContext = useContext(dropZoneContext);
 
   return useMemo<Breadcrumb[]>(() => {
     const breadcrumbs = convertPathDataToBreadcrumbs(
       selectedItem,
-      dzContext?.pathData,
+      pathData,
       data
     );
 
@@ -96,5 +96,5 @@ export const useBreadcrumbs = (renderCount?: number) => {
     }
 
     return breadcrumbs;
-  }, [selectedItem, dzContext?.pathData, renderCount]);
+  }, [selectedItem, pathData, renderCount]);
 };

packages/core/lib/use-parent.ts

@@ -1,19 +1,15 @@
-import { useCallback, useContext } from "react";
+import { useCallback } from "react";
 import { useAppContext } from "../components/Puck/context";
 import { getItem, ItemSelector } from "./get-item";
-import { dropZoneContext } from "../components/DropZone";
 import { convertPathDataToBreadcrumbs } from "./use-breadcrumbs";
 import { PathData } from "../components/DropZone/context";
-import { Data } from "../types";
+import { ComponentData, Data } from "../types";
 
-export const getParent = (
-  itemSelector: ItemSelector | null,
+export const getParentByItem = (
+  item: ComponentData | undefined,
   pathData: PathData | undefined,
   data: Data
 ) => {
-  if (!itemSelector) return null;
-
-  const item = getItem(itemSelector, data);
   const breadcrumbs = convertPathDataToBreadcrumbs(item, pathData, data);
 
   const lastItem = breadcrumbs[breadcrumbs.length - 1];
@@ -24,16 +20,40 @@ export const getParent = (
   return parent || null;
 };
 
+export const getParent = (
+  itemSelector: ItemSelector | null,
+  pathData: PathData | undefined,
+  data: Data
+) => {
+  if (!itemSelector) return null;
+
+  const item = getItem(itemSelector, data);
+
+  return getParentByItem(item, pathData, data);
+};
+
 export const useGetParent = () => {
-  const { state } = useAppContext();
-  const { pathData } = useContext(dropZoneContext) || {};
+  const { state, pathData } = useAppContext();
+
+  return useCallback(
+    (itemSelector: ItemSelector | null) =>
+      getParent(itemSelector, pathData, state.data),
+    [pathData, state.data]
+  );
+};
+
+export const useGetParentByItem = () => {
+  const { state, pathData } = useAppContext();
 
   return useCallback(
-    () => getParent(state.ui.itemSelector, pathData, state.data),
-    [state.ui.itemSelector, pathData, state.data]
+    (item: ComponentData | undefined) =>
+      getParentByItem(item, pathData, state.data),
+    [pathData, state.data]
   );
 };
 
 export const useParent = () => {
-  return useGetParent()();
+  const { state } = useAppContext();
+
+  return useGetParent()(state.ui.itemSelector);
 };

packages/core/lib/use-resolved-permissions.ts

@@ -2,6 +2,12 @@ import { useCallback, useEffect, useState } from "react";
 import { flattenData } from "./flatten-data";
 import { ComponentData, Config, Permissions, UserGenerics } from "../types";
 import { getChanged } from "./get-changed";
+import {
+  getParentByItem,
+  useGetParent,
+  useGetParentByItem,
+} from "./use-parent";
+import { PathData } from "../components/DropZone/context";
 
 type PermissionsArgs<
   UserConfig extends Config = Config,
@@ -42,7 +48,8 @@ export const useResolvedPermissions = <
   appState: G["UserAppState"],
   globalPermissions: Partial<Permissions>,
   setComponentLoading?: (id: string) => void,
-  unsetComponentLoading?: (id: string) => void
+  unsetComponentLoading?: (id: string) => void,
+  pathData?: PathData
 ) => {
   const [cache, setCache] = useState<Cache>({});
 
@@ -78,6 +85,7 @@ export const useResolvedPermissions = <
               permissions: initialPermissions,
               appState,
               lastData: cache[item.props.id]?.lastData || null,
+              parent: getParentByItem(item, pathData, appState.data),
             }
           );
 
@@ -98,7 +106,7 @@ export const useResolvedPermissions = <
         }
       }
     },
-    [config, globalPermissions, appState, cache]
+    [config, globalPermissions, appState, cache, pathData]
   );
 
   const resolveDataForRoot = (force = false) => {
@@ -149,7 +157,7 @@ export const useResolvedPermissions = <
     resolvePermissions();
 
     // We only trigger this effect on appState.data to avoid triggering on all UI changes
-  }, [config, appState.data]);
+  }, [config, appState.data, pathData]);
 
   const getPermissions: GetPermissions = useCallback(
     ({ item, type, root } = {}) => {

packages/core/types/Config.tsx

@@ -56,6 +56,7 @@ export type ComponentConfig<
       permissions: Partial<Permissions>;
       appState: AppState;
       lastData: DataShape | null;
+      parent: ComponentData | null;
     }
   ) => Promise<Partial<Permissions>> | Partial<Permissions>;
 };