fix(config): address bug preventing custom scope usage (#197)

* fix(config): address bug preventing custom scope usage

* get rid of src/pf-docs.config.mjs symlink, add missing await

* update tests

Author: wise-king-sullyman

cli/__tests__/symLinkConfig.test.ts

@@ -1,12 +1,15 @@
-import { symlink } from 'fs/promises'
+import { symlink, rm } from 'fs/promises'
 import { symLinkConfig } from '../symLinkConfig'
+import { fileExists } from '../fileExists'
 
 jest.mock('fs/promises')
+jest.mock('../fileExists')
 
 // suppress console.log so that it doesn't clutter the test output
 jest.spyOn(console, 'log').mockImplementation(() => {})
 
-it('should create a symlink successfully', async () => {
+it('should create a symlink successfully when one does not exist', async () => {
+  ;(fileExists as jest.Mock).mockResolvedValue(false)
   ;(symlink as jest.Mock).mockResolvedValue(undefined)
 
   await symLinkConfig('/astro', '/consumer')
@@ -17,11 +20,36 @@ it('should create a symlink successfully', async () => {
   )
 })
 
+it('should not try to remove a file that does not exist', async () => {
+  ;(fileExists as jest.Mock).mockResolvedValue(false)
+  ;(symlink as jest.Mock).mockResolvedValue(undefined)
+
+  await symLinkConfig('/astro', '/consumer')
+
+  expect(rm).not.toHaveBeenCalled()
+})
+
+it('should remove existing file before creating symlink', async () => {
+  ;(fileExists as jest.Mock).mockResolvedValue(true)
+  ;(rm as jest.Mock).mockResolvedValue(undefined)
+  ;(symlink as jest.Mock).mockResolvedValue(undefined)
+
+  await symLinkConfig('/astro', '/consumer')
+
+  expect(fileExists).toHaveBeenCalledWith('/astro/pf-docs.config.mjs')
+  expect(rm).toHaveBeenCalledWith('/astro/pf-docs.config.mjs')
+  expect(symlink).toHaveBeenCalledWith(
+    '/consumer/pf-docs.config.mjs',
+    '/astro/pf-docs.config.mjs',
+  )
+})
+
 it('should log an error if symlink creation fails', async () => {
   const consoleErrorSpy = jest
     .spyOn(console, 'error')
     .mockImplementation(() => {})
 
+  ;(fileExists as jest.Mock).mockResolvedValue(false)
   const error = new Error('Symlink creation failed')
   ;(symlink as jest.Mock).mockRejectedValue(error)
 
@@ -36,6 +64,9 @@ it('should log an error if symlink creation fails', async () => {
 it('should log a success message after creating the symlink', async () => {
   const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(() => {})
 
+  ;(fileExists as jest.Mock).mockResolvedValue(false)
+  ;(symlink as jest.Mock).mockResolvedValue(undefined)
+
   await symLinkConfig('/astro', '/consumer')
 
   expect(consoleLogSpy).toHaveBeenCalledWith(

cli/symLinkConfig.ts

@@ -1,21 +1,28 @@
 /* eslint-disable no-console */
-import { symlink } from 'fs/promises'
+import { symlink, rm } from 'fs/promises'
+import { join } from 'path'
+import { fileExists } from './fileExists.js'
 
 export async function symLinkConfig(
   astroRootDir: string,
   consumerRootDir: string,
 ) {
   const configFileName = '/pf-docs.config.mjs'
-  const docsConfigFile = consumerRootDir + configFileName
+  const defaultConfigFile = join(astroRootDir, configFileName)
+  const consumerConfigFile = consumerRootDir + configFileName
+
+  if (await fileExists(defaultConfigFile)) {
+    await rm(defaultConfigFile)
+  }
 
   try {
-    await symlink(docsConfigFile, astroRootDir + configFileName)
+    await symlink(consumerConfigFile, defaultConfigFile)
   } catch (e: any) {
     console.error(
-      `Error creating symlink to ${docsConfigFile} in ${astroRootDir}`,
+      `Error creating symlink to ${consumerConfigFile} in ${astroRootDir}`,
       e,
     )
   } finally {
-    console.log(`Symlink to ${docsConfigFile} in ${astroRootDir} created`)
+    console.log(`Symlink to ${consumerConfigFile} in ${astroRootDir} created`)
   }
 }

pf-docs.config.mjs

@@ -11,12 +11,20 @@ export const config = {
     // example content entry for remote content, this would fetch all markdown files matching the glob in 'pattern'
     // from the specified npm package and serve them with a content identifier of 'react-component-docs':
     {
-      packageName: "@patternfly/react-core",
-      pattern: "**/components/**/*.md",
-      name: "react-component-docs",
+      packageName: '@patternfly/react-core',
+      pattern: '**/components/**/*.md',
+      name: 'react-component-docs',
+    },
+    {
+      packageName: '@patternfly/patternfly',
+      pattern: '*/**/*.md',
+      name: 'core-docs',
+    },
+    {
+      packageName: '@patternfly/quickstarts',
+      pattern: '*/patternfly-docs/**/*.md',
+      name: 'quickstarts-docs',
     },
-    { packageName: "@patternfly/patternfly", pattern: "*/**/*.md", name: "core-docs" },
-    { packageName: "@patternfly/quickstarts", pattern: "*/patternfly-docs/**/*.md", name: "quickstarts-docs" },
   ],
   outputDir: './dist',
   propsGlobs: [
@@ -30,11 +38,6 @@ 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,
-  // },
+  navSectionOrder: ['get-started', 'design-foundations'],
+  scope: {},
 }

src/components/LiveExample.astro

@@ -1,8 +1,7 @@
 ---
 import { LiveExample as LiveExampleBase } from './LiveExample'
-import { config } from '../pf-docs.config.mjs'
 
 const { src, html } = Astro.props
 ---
 
-<LiveExampleBase src={src} html={html} customScope={config.scope} client:only="react" />
+<LiveExampleBase src={src} html={html} client:only="react" />

src/components/LiveExample.tsx

@@ -14,12 +14,12 @@ import * as reactDragDropModule from '@patternfly/react-drag-drop'
 import styles from '@patternfly/react-styles/css/components/_index'
 import * as reactTokensModule from '@patternfly/react-tokens'
 import { ExampleToolbar } from './ExampleToolbar'
+import { config } from '../../pf-docs.config.mjs'
 
 interface LiveExampleProps {
   src?: string
   html?: string
   isFullscreenPreview?: boolean
-  customScope?: Record<string, any>
 }
 
 function fallbackRender({ error }: any) {
@@ -31,15 +31,15 @@ function fallbackRender({ error }: any) {
   )
 }
 
-function getLivePreview(editorCode: string, customScope?: Record<string, any>) {
+function getLivePreview(editorCode: string) {
   const scope = {
     ...reactCoreModule,
     ...reactIconsModule,
     ...reactDragDropModule,
     styles,
     ...reactTokensModule,
     ...{ useState, Fragment, useRef, useEffect, createRef, useReducer },
-    ...customScope,
+    ...config.scope,
   }
   const { code: transformedCode } = convertToReactComponent(editorCode)
 
@@ -60,7 +60,6 @@ export const LiveExample = ({
   src,
   html,
   isFullscreenPreview,
-  customScope,
 }: LiveExampleProps) => {
   const inputCode = src || html || ''
   const [code, setCode] = useState(inputCode)
@@ -76,7 +75,7 @@ export const LiveExample = ({
     )
     lang = 'html'
   } else {
-    livePreview = getLivePreview(code, customScope)
+    livePreview = getLivePreview(code)
     lang = 'ts'
   }
 

src/components/Navigation.astro

@@ -6,7 +6,7 @@ import { TextContentEntry } from './NavEntry.tsx'
 
 import { content } from '../content'
 
-import { config } from '../pf-docs.config.mjs'
+import { config } from '../../pf-docs.config.mjs'
 
 const collections = await Promise.all(
   content.map(