feat: test customization

Author: pedromtec

packages/cli/src/utils/createNextjsPage.ts

@@ -0,0 +1,39 @@
+import path from 'path'
+import fs from 'fs'
+
+import { withBasePath } from './directory'
+import { myAccountPageTemplate } from './templates/myAccountPage'
+
+const processExternalPages = (
+  externalPagesPath: string,
+  corePagesPath: string
+) => {
+  fs.readdirSync(externalPagesPath).forEach((file) => {
+    const filePath = path.join(externalPagesPath, file)
+    const destinationPath = path.join(corePagesPath, file)
+
+    if (fs.statSync(filePath).isDirectory()) {
+      // nested pages are not allowed
+      throw new Error('Nested pages are not allowed')
+    }
+
+    const externalPagePath = `customizations/src/${filePath.replace(externalPagesPath, '')}`
+    console.log({ externalPagePath })
+    const content = myAccountPageTemplate(externalPagePath)
+    fs.writeFileSync(destinationPath, content)
+  })
+}
+
+export function createNextJsPages(basePath: string) {
+  const { tmpDir } = withBasePath(basePath)
+
+  const corePagesDir = path.join(tmpDir, 'src/pages')
+  const customizationPagesDir = path.join(
+    tmpDir,
+    'src/customizations/src/pages'
+  )
+
+  console.log({ corePagesDir, customizationPagesDir })
+
+  processExternalPages(customizationPagesDir, corePagesDir)
+}

packages/cli/src/utils/generate.ts

@@ -18,6 +18,7 @@ import { withBasePath } from './directory'
 import { installDependencies } from './dependencies'
 import { logger } from './logger'
 import { installPlugins } from './plugins'
+import { createNextJsPages } from './createNextjsPage'
 
 interface GenerateOptions {
   setup?: boolean
@@ -373,7 +374,7 @@ function checkDependencies(basePath: string, packagesToCheck: string[]) {
       logger.warn(
         `${chalk.yellow(
           'warning'
-        )} - Version mismatch detected for ${packageName}. 
+        )} - Version mismatch detected for ${packageName}.
           Core: ${coreVersion}, Customization: ${rootVersion}. Please align both versions to prevent issues`
       )
     }
@@ -531,6 +532,7 @@ export async function generate(options: GenerateOptions) {
 
   await Promise.all([
     setupPromise,
+    createNextJsPages(basePath),
     checkDependencies(basePath, ['typescript']),
     enableSearchSSR(basePath),
     updateBuildTime(basePath),

packages/cli/src/utils/templates/myAccountPage.ts

@@ -0,0 +1,42 @@
+export const myAccountPageTemplate = (pagePath: string) => `
+  import type { Locator } from '@vtex/client-cms'
+  import type { GetServerSideProps } from 'next'
+  import type { ComponentType } from 'react'
+  import {
+    type GlobalSectionsData,
+    getGlobalSectionsData,
+  } from 'src/components/cms/GlobalSections'
+  import RenderSections from 'src/components/cms/RenderSections'
+  import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+  import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+  import dynamicPage from '${pagePath}';
+  type Props = {
+    globalSections: GlobalSectionsData
+  }
+  /* A list of components that can be used in the CMS. */
+  const COMPONENTS: Record<string, ComponentType<any>> = {
+    ...GLOBAL_COMPONENTS,
+    ...CUSTOM_COMPONENTS,
+  }
+  function Page({ globalSections }: Props) {
+    return (
+      <RenderSections
+        globalSections={globalSections.sections}
+        components={COMPONENTS}
+      >
+      {dynamicPage()}
+      </RenderSections>
+    )
+  }
+  export const getServerSideProps: GetServerSideProps<
+    Props,
+    Record<string, string>,
+    Locator
+  > = async ({ previewData }) => {
+    const globalSections = await getGlobalSectionsData(previewData)
+    return {
+      props: { globalSections },
+    }
+  }
+  export default Page
+`