From 1beaf6bf497b9b6fc77789d4ea0459e0996d5311 Mon Sep 17 00:00:00 2001
From: Xavier Mirabelli-Montan <xavier@whiteskyweb.com>
Date: Thu, 15 Aug 2024 17:21:02 +0100
Subject: [PATCH] refactor: move override logic to hooks and components

---
 .../core/components/DefaultOverride/index.tsx |  5 ++++
 packages/core/components/Puck/index.tsx       | 26 +++++++------------
 packages/core/lib/use-loaded-overrides.ts     | 16 ++++++++++++
 3 files changed, 30 insertions(+), 17 deletions(-)
 create mode 100644 packages/core/components/DefaultOverride/index.tsx
 create mode 100644 packages/core/lib/use-loaded-overrides.ts

diff --git a/packages/core/components/DefaultOverride/index.tsx b/packages/core/components/DefaultOverride/index.tsx
new file mode 100644
index 000000000..29e0c32c1
--- /dev/null
+++ b/packages/core/components/DefaultOverride/index.tsx
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export const DefaultOverride = ({ children }: { children?: ReactNode }) => (
+  <>{children}</>
+);
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index a8a1b678d..9c9ef3688 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -40,7 +40,6 @@ import { Components } from "./components/Components";
 import { Preview } from "./components/Preview";
 import { Outline } from "./components/Outline";
 import { Overrides } from "../../types/Overrides";
-import { loadOverrides } from "../../lib/load-overrides";
 import { usePuckHistory } from "../../lib/use-puck-history";
 import { useHistoryStore, type History } from "../../lib/use-history-store";
 import { Canvas } from "./components/Canvas";
@@ -49,6 +48,8 @@ import { Viewports } from "../../types/Viewports";
 import { DragDropContext } from "../DragDropContext";
 import { IframeConfig } from "../../types/IframeConfig";
 import { insertComponent } from "../../lib/insert-component";
+import { useLoadedOverrides } from "../../lib/use-loaded-overrides";
+import { DefaultOverride } from "../DefaultOverride";
 
 const getClassName = getClassNameFactory("Puck", styles);
 const getLayoutClassName = getClassNameFactory("PuckLayout", styles);
@@ -301,16 +302,6 @@ export function Puck<UserConfig extends Config = Config>({
     };
   }, []);
 
-  const defaultRender = useMemo<
-    React.FunctionComponent<{ children?: ReactNode }>
-  >(() => {
-    const PuckDefault = ({ children }: { children?: ReactNode }) => (
-      <>{children}</>
-    );
-
-    return PuckDefault;
-  }, []);
-
   // DEPRECATED
   const defaultHeaderRender = useMemo(() => {
     if (renderHeader) {
@@ -331,7 +322,7 @@ export function Puck<UserConfig extends Config = Config>({
       return RenderHeader;
     }
 
-    return defaultRender;
+    return DefaultOverride;
   }, [renderHeader]);
 
   // DEPRECATED
@@ -350,16 +341,17 @@ export function Puck<UserConfig extends Config = Config>({
       return RenderHeader;
     }
 
-    return defaultRender;
+    return DefaultOverride;
   }, [renderHeader]);
 
   // Load all plugins into the overrides
-  const loadedOverrides = useMemo(() => {
-    return loadOverrides({ overrides, plugins });
-  }, [plugins]);
+  const loadedOverrides = useLoadedOverrides({
+    overrides: overrides,
+    plugins: plugins,
+  });
 
   const CustomPuck = useMemo(
-    () => loadedOverrides.puck || defaultRender,
+    () => loadedOverrides.puck || DefaultOverride,
     [loadedOverrides]
   );
 
diff --git a/packages/core/lib/use-loaded-overrides.ts b/packages/core/lib/use-loaded-overrides.ts
new file mode 100644
index 000000000..e9d72d6d9
--- /dev/null
+++ b/packages/core/lib/use-loaded-overrides.ts
@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { loadOverrides } from "./load-overrides";
+import { Plugin } from "../types/Plugin";
+import { Overrides } from "../types/Overrides";
+
+export const useLoadedOverrides = ({
+  overrides,
+  plugins,
+}: {
+  overrides: Partial<Overrides>;
+  plugins: Plugin[];
+}) => {
+  return useMemo(() => {
+    return loadOverrides({ overrides, plugins });
+  }, [plugins, overrides]);
+};