From cfae887b22661e4f644d514ba3e7d6c5481da1e8 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 29 Oct 2025 09:08:07 +0100
Subject: [PATCH] Add scope to config to add to LiveExample

fixes: #72
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 cli/getConfig.ts                 | 1 +
 cli/templates/pf-docs.config.mjs | 7 +++++++
 pf-docs.config.mjs               | 7 +++++++
 src/components/LiveExample.astro | 3 ++-
 src/components/LiveExample.tsx   | 7 +++++--
 src/pf-docs.config.mjs           | 9 ++++++++-
 6 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/cli/getConfig.ts b/cli/getConfig.ts
index 7028245..3a00e3a 100644
--- a/cli/getConfig.ts
+++ b/cli/getConfig.ts
@@ -17,6 +17,7 @@ export interface DocsConfig {
   outputDir: string;
   propsGlobs: PropsGlobs[];
   repoRoot?: string;
+  scope?: Record<string, any>;
 }
 
 export async function getConfig(fileLocation: string): Promise<DocsConfig | undefined> {
diff --git a/cli/templates/pf-docs.config.mjs b/cli/templates/pf-docs.config.mjs
index a2d288c..d59ab2f 100644
--- a/cli/templates/pf-docs.config.mjs
+++ b/cli/templates/pf-docs.config.mjs
@@ -29,4 +29,11 @@ export const config = {
     //   ],
     // },
   ],
+  // Add custom scope items for LiveExample component
+  // These will be available in your example code blocks
+  // Example:
+  // scope: {
+  //   MyCustomComponent: () => <div>Custom</div>,
+  //   myUtilFunction: (x) => x * 2,
+  // },
 }
diff --git a/pf-docs.config.mjs b/pf-docs.config.mjs
index 9027c40..549d4d0 100644
--- a/pf-docs.config.mjs
+++ b/pf-docs.config.mjs
@@ -30,4 +30,11 @@ export const config = {
       ],
     },
   ],
+  // Add custom scope items for LiveExample component
+  // These will be available in your example code blocks
+  // Example:
+  // scope: {
+  //   MyCustomComponent: () => <div>Custom</div>,
+  //   myUtilFunction: (x) => x * 2,
+  // },
 }
diff --git a/src/components/LiveExample.astro b/src/components/LiveExample.astro
index bb28e52..6792c36 100644
--- a/src/components/LiveExample.astro
+++ b/src/components/LiveExample.astro
@@ -1,7 +1,8 @@
 ---
 import { LiveExample as LiveExampleBase } from './LiveExample'
+import { config } from '../pf-docs.config.mjs'
 
 const { src, html } = Astro.props
 ---
 
-<LiveExampleBase src={src} html={html} client:only="react" />
+<LiveExampleBase src={src} html={html} customScope={config.scope} client:only="react" />
diff --git a/src/components/LiveExample.tsx b/src/components/LiveExample.tsx
index ea6dd3d..ccbace0 100644
--- a/src/components/LiveExample.tsx
+++ b/src/components/LiveExample.tsx
@@ -19,6 +19,7 @@ interface LiveExampleProps {
   src?: string
   html?: string
   isFullscreenPreview?: boolean
+  customScope?: Record<string, any>
 }
 
 function fallbackRender({ error }: any) {
@@ -30,7 +31,7 @@ function fallbackRender({ error }: any) {
   )
 }
 
-function getLivePreview(editorCode: string) {
+function getLivePreview(editorCode: string, customScope?: Record<string, any>) {
   const scope = {
     ...reactCoreModule,
     ...reactIconsModule,
@@ -38,6 +39,7 @@ function getLivePreview(editorCode: string) {
     styles,
     ...reactTokensModule,
     ...{ useState, Fragment, useRef, useEffect, createRef, useReducer },
+    ...customScope,
   }
   const { code: transformedCode } = convertToReactComponent(editorCode)
 
@@ -58,6 +60,7 @@ export const LiveExample = ({
   src,
   html,
   isFullscreenPreview,
+  customScope,
 }: LiveExampleProps) => {
   const inputCode = src || html || ''
   const [code, setCode] = useState(inputCode)
@@ -73,7 +76,7 @@ export const LiveExample = ({
     )
     lang = 'html'
   } else {
-    livePreview = getLivePreview(code)
+    livePreview = getLivePreview(code, customScope)
     lang = 'ts'
   }
 
diff --git a/src/pf-docs.config.mjs b/src/pf-docs.config.mjs
index 0fcb697..e3e002a 100644
--- a/src/pf-docs.config.mjs
+++ b/src/pf-docs.config.mjs
@@ -17,5 +17,12 @@ export const config = {
     // },
   ],
   outputDir: "./dist",
-  navSectionOrder: ["get-started", "design-foundations"]
+  navSectionOrder: ["get-started", "design-foundations"],
+  // Add custom scope items for LiveExample component
+  // These will be available in your example code blocks
+  // Example:
+  // scope: {
+  //   MyCustomComponent: () => <div>Custom</div>,
+  //   myUtilFunction: (x) => x * 2,
+  // },
 };