add scope to config to update live example

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> {

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,
+  // },
 }

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,
+  // },
 }

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" />

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,14 +31,15 @@ function fallbackRender({ error }: any) {
   )
 }
 
-function getLivePreview(editorCode: string) {
+function getLivePreview(editorCode: string, customScope?: Record<string, any>) {
   const scope = {
     ...reactCoreModule,
     ...reactIconsModule,
     ...reactDragDropModule,
     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'
   }
 

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,
+  // },
 };