@faststore/core 3.0.59 → 3.0.60

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
 $ partytown copylib ./public/~partytown
-$ faststore generate-graphql -c
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
+$ faststore generate-graphql -c
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
 Attention: Next.js now collects completely anonymous telemetry regarding usage.

package/.turbo/turbo-test.log

@@ -1,9 +1,10 @@
 $ jest
-PASS test/server/cms/index.test.ts (29.963 s)
-PASS test/server/index.test.ts (31.672 s)
+PASS test/utils/multipleTemplates.test.ts (32.235 s)
+PASS test/server/cms/index.test.ts (32.591 s)
+PASS test/server/index.test.ts (34.429 s)
 
-Test Suites: 2 passed, 2 total
-Tests:       11 passed, 11 total
+Test Suites: 3 passed, 3 total
+Tests:       16 passed, 16 total
 Snapshots:   0 total
-Time:        32.63 s
+Time:        35.349 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.59",
+  "version": "3.0.60",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -125,5 +125,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "6f2082f0a7f34b560d13060a7ab5d907871e7353"
+  "gitHead": "19bd97e7ce1d842d390dbdd1e7e1859c1624b5fb"
 }

package/src/pages/[...slug].tsx

@@ -1,4 +1,5 @@
 import { isNotFoundError } from '@faststore/api'
+import storeConfig from 'faststore.config'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 
 import { gql } from '@generated'
@@ -86,6 +87,7 @@ export const getStaticProps: GetStaticProps<
   Locator
 > = async ({ params, previewData }) => {
   const slug = params?.slug.join('/') ?? ''
+  const rewrites = (await storeConfig.rewrites?.()) ?? []
 
   const [landingPagePromise, globalSectionsPromise] = [
     getLandingPageBySlug(slug, previewData),
@@ -114,7 +116,7 @@ export const getStaticProps: GetStaticProps<
       variables: { slug },
       operation: query,
     }),
-    getPLP(slug, previewData),
+    getPLP(slug, previewData, rewrites),
   ])
 
   const notFound = errors.find(isNotFoundError)

package/src/server/cms/pdp.ts

@@ -1,7 +1,7 @@
 import { ServerProductQueryQuery } from '@generated/graphql'
 import type { ContentData, Locator } from '@vtex/client-cms'
 import MissingContentError from 'src/sdk/error/MissingContentError'
-import { findBestPDPTemplate } from 'src/utils/utilities'
+import { findBestPDPTemplate } from 'src/utils/multipleTemplates'
 import { Options, getCMSPage, getPage } from '.'
 import config from '../../../faststore.config'
 

package/src/server/cms/plp.ts

@@ -1,6 +1,10 @@
 import { ContentData, Locator } from '@vtex/client-cms'
 import MissingContentError from 'src/sdk/error/MissingContentError'
-import { findBestPLPTemplate } from 'src/utils/utilities'
+import {
+  Rewrite,
+  RewritesConfig,
+  findBestPLPTemplate,
+} from 'src/utils/multipleTemplates'
 import config from '../../../faststore.config'
 import { Options, getCMSPage, getPage } from '../cms'
 
@@ -23,27 +27,41 @@ type PLPfromCmsEnvData = {
 
 export type PLPContentType = ContentData & PLPSettings
 
-export const getPLP = async (slug: string, previewData: Locator) => {
+export const getPLP = async (
+  slug: string,
+  previewData: Locator,
+  rewrites: Rewrite[] | RewritesConfig
+) => {
   if (config.cms.data) {
     const cmsData = JSON.parse(config.cms.data)
     const allPLPsFromCmsEnvData: PLPfromCmsEnvData[] = cmsData['plp']
 
-    return await getPLPFromCmsEnvData(`/${slug}/`, allPLPsFromCmsEnvData, {
-      ...(previewData?.contentType === 'plp' ? previewData : null),
-      contentType: 'plp',
-    })
+    return await getPLPFromCmsEnvData(
+      `/${slug}/`,
+      allPLPsFromCmsEnvData,
+      {
+        ...(previewData?.contentType === 'plp' ? previewData : null),
+        contentType: 'plp',
+      },
+      rewrites
+    )
   }
 
-  return (await getPLPFromCms(`/${slug}/`, {
-    ...(previewData?.contentType === 'plp' ? previewData : null),
-    contentType: 'plp',
-  })) as PLPContentType
+  return (await getPLPFromCms(
+    `/${slug}/`,
+    {
+      ...(previewData?.contentType === 'plp' ? previewData : null),
+      contentType: 'plp',
+    },
+    rewrites
+  )) as PLPContentType
 }
 
 const getPLPFromCmsEnvData = async (
   slug: string,
   allPLPsFromCMSData: PLPfromCmsEnvData[],
-  options: Options
+  options: Options,
+  rewrites: Rewrite[] | RewritesConfig
 ): Promise<PLPContentType> => {
   const pages: PLPfromCmsEnvData[] = allPLPsFromCMSData ?? []
 
@@ -51,7 +69,7 @@ const getPLPFromCmsEnvData = async (
     throw new MissingContentError(options)
   }
 
-  const template = findBestPLPTemplate(pages, slug)
+  const template = findBestPLPTemplate(pages, slug, rewrites)
 
   return getPage<PLPContentType>({
     contentType: 'plp',
@@ -62,7 +80,8 @@ const getPLPFromCmsEnvData = async (
 
 export const getPLPFromCms = async (
   slug: string,
-  options: Options
+  options: Options,
+  rewrites: Rewrite[] | RewritesConfig
 ): Promise<Partial<PLPContentType>> => {
   const pages = (await getCMSPage(options)).data
 
@@ -70,5 +89,5 @@ export const getPLPFromCms = async (
     throw new MissingContentError(options)
   }
 
-  return findBestPLPTemplate(pages, slug)
+  return findBestPLPTemplate(pages, slug, rewrites)
 }

package/src/utils/multipleTemplates.ts

@@ -0,0 +1,178 @@
+import { ServerProductQueryQuery } from '@generated/graphql'
+import { PDPContentType } from 'src/server/cms/pdp'
+import { PLPContentType } from 'src/server/cms/plp'
+
+export type Rewrite = {
+  source: string
+  destination: string
+}
+
+export type RewritesConfig = {
+  beforeFiles?: Rewrite[]
+  afterFiles?: Rewrite[]
+  fallback?: Rewrite[]
+}
+
+export function normalizePLPSlug(slug: string) {
+  // Remove extra slashes at the beginning and end
+  let normalizedSlug = slug.replace(/^\/+|\/+$/g, '')
+
+  // Remove duplicate slashes and white spaces throughout the string
+  normalizedSlug = normalizedSlug.replace(/\/+/g, '/').replace(/\s+/g, '')
+
+  return '/' + normalizedSlug.toLowerCase()
+}
+
+function findPLPTemplateBySlug(
+  pages: Partial<PLPContentType>[],
+  slug: string,
+  rewrites: Rewrite[] | RewritesConfig
+) {
+  return pages.find((page) => {
+    // generic PLP template
+    if (!page.settings?.template?.value) return false
+
+    const templateValue = normalizePLPSlug(page.settings?.template?.value)
+    return (
+      templateValue === slug ||
+      hasRewritesConfigForSlug({ rewrites, templateValue, slug })
+    )
+  })
+}
+
+/**
+ *  Normalizes the rewrites object, and returns:
+ *  true if the templateValue from hCMS passed as param match the source value from the rewrites object AND the slug match the destination.
+ *  see https://nextjs.org/docs/app/api-reference/next-config-js/rewrites
+ * @param rewrites
+ * @param templateValue
+ * @param slug
+ * @returns boolean indicating if the slug exist as a rewrite destination
+ */
+export function hasRewritesConfigForSlug({
+  rewrites,
+  templateValue,
+  slug,
+}: {
+  rewrites: Rewrite[] | RewritesConfig
+  templateValue: string
+  slug: string
+}): boolean {
+  if (!rewrites) {
+    return false
+  }
+
+  let allRewrites: Rewrite[] = []
+
+  if (Array.isArray(rewrites)) {
+    allRewrites = rewrites
+  } else {
+    allRewrites = [
+      ...(rewrites?.beforeFiles || []),
+      ...(rewrites?.afterFiles || []),
+      ...(rewrites?.fallback || []),
+    ]
+  }
+
+  const foundRewrite = allRewrites.find(
+    (rewriteConfig) =>
+      rewriteConfig.source === templateValue &&
+      rewriteConfig.destination === slug
+  )
+  return Boolean(foundRewrite)
+}
+
+/**
+ * Find the best PLP template from the CMS based on the slug passed as param.
+ *
+ * This function iterates the slug until there is no slashes (/), prioritizing the following order:
+ * 1. A PLP template that matches the subcategory (e.g. slug = /department/category/subcategory).
+ * 2. A PLP template that matches the category (e.g. slug = /department/category).
+ * 3. A PLP template that matches the department (e.g. slug = /department).
+ * 4. If no matches are found, use the generic PLP template.
+ *
+ * @param pages
+ * @param originalSlug
+ * @returns The best PLP template page for the slug
+ */
+export function findBestPLPTemplate(
+  pages: Partial<PLPContentType>[],
+  originalSlug: string,
+  rewrites: Rewrite[] | RewritesConfig
+) {
+  let slug = normalizePLPSlug(originalSlug)
+  let foundPageTemplate = findPLPTemplateBySlug(pages, slug, rewrites)
+
+  while (!foundPageTemplate && slug.lastIndexOf('/') !== -1) {
+    slug = slug.substring(0, slug.lastIndexOf('/'))
+    foundPageTemplate = findPLPTemplateBySlug(pages, slug, rewrites)
+  }
+
+  return (
+    foundPageTemplate ||
+    pages.find((page) => !page.settings?.template?.value) ||
+    pages[0]
+  )
+}
+
+export function normalizePDPTemplate(templateValue: string) {
+  // Remove extra slashes, white spaces at the beginning and end
+  let formattedValue = templateValue.trim().replace(/^\/+|\/+$/g, '')
+
+  // Add a slash at the beginning if not present
+  if (!formattedValue.startsWith('/')) {
+    formattedValue = '/' + formattedValue
+  }
+
+  // Add a slash at the end if not ending with '/p'
+  if (!formattedValue.endsWith('/p')) {
+    formattedValue += '/'
+  }
+
+  // Remove duplicate slashes and white spaces throughout the string
+  formattedValue = formattedValue.replace(/\/+/g, '/').replace(/\s+/g, '')
+
+  return formattedValue.toLowerCase()
+}
+
+/**
+ * Find the best PDP template from the CMS based on the slug or in the product category tree.
+ * Prioritizing the following order:
+ *
+ * 1. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
+ * 2. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
+ * 3. A PDP template that matches the product category (e.g. /department/category).
+ * 4. A PDP template that matches the product department (e.g. /department).
+ * 5. If no matches are found, use the generic PDP template.
+ *
+ * @param pages
+ * @param originalSlug
+ * @param product
+ * @returns The best PDP template page for the slug
+ */
+export function findBestPDPTemplate(
+  pages: Partial<PDPContentType>[],
+  slug: string,
+  product: ServerProductQueryQuery['product']
+) {
+  // productSlugAndCategoryTree with the prioritized order. [slug, subcategory tree, category tree, department]
+  const productSlugAndCategoryTree = product?.breadcrumbList?.itemListElement
+    ? [...product?.breadcrumbList?.itemListElement]
+        .reverse()
+        .map(({ item }) => item)
+    : []
+  productSlugAndCategoryTree.unshift(slug)
+
+  for (const item of productSlugAndCategoryTree) {
+    for (const page of pages) {
+      if (!page.settings?.template?.value) continue
+
+      const templateValue = normalizePDPTemplate(page.settings.template.value)
+      if (templateValue === item) {
+        return page
+      }
+    }
+  }
+
+  return pages.find((page) => !page.settings?.template?.value) || pages[0]
+}

package/src/utils/utilities.ts

@@ -1,7 +1,3 @@
-import { ServerProductQueryQuery } from '@generated/graphql'
-import { PDPContentType } from 'src/server/cms/pdp'
-import { PLPContentType } from 'src/server/cms/plp'
-
 //Input "Example Text!". Output: example-text
 export function textToKebabCase(text: string): string {
   // Replace spaces and special characters with hyphens
@@ -15,117 +11,3 @@ export function textToKebabCase(text: string): string {
 
   return kebabCase ?? ''
 }
-
-export function normalizePLPSlug(slug: string) {
-  // Remove extra slashes at the beginning and end
-  let normalizedSlug = slug.replace(/^\/+|\/+$/g, '')
-
-  // Remove duplicate slashes and white spaces throughout the string
-  normalizedSlug = normalizedSlug.replace(/\/+/g, '/').replace(/\s+/g, '')
-
-  return '/' + normalizedSlug.toLowerCase()
-}
-
-function findPLPTemplateBySlug(pages: Partial<PLPContentType>[], slug: string) {
-  return pages.find((page) => {
-    // generic PLP template
-    if (!page.settings?.template?.value) return false
-
-    const templateValue = normalizePLPSlug(page.settings?.template?.value)
-    return templateValue === slug
-  })
-}
-
-/**
- * Find the best PLP template from the CMS based on the slug passed as param.
- *
- * This function iterates the slug until there is no slashes (/), prioritizing the following order:
- * 1. A PLP template that matches the subcategory (e.g. slug = /department/category/subcategory).
- * 2. A PLP template that matches the category (e.g. slug = /department/category).
- * 3. A PLP template that matches the department (e.g. slug = /department).
- * 4. If no matches are found, use the generic PLP template.
- *
- * @param pages
- * @param originalSlug
- * @returns The best PLP template page for the slug
- */
-export function findBestPLPTemplate(
-  pages: Partial<PLPContentType>[],
-  originalSlug: string
-) {
-  let slug = normalizePLPSlug(originalSlug)
-  let foundPageTemplate = findPLPTemplateBySlug(pages, slug)
-
-  while (!foundPageTemplate && slug.lastIndexOf('/') !== -1) {
-    slug = slug.substring(0, slug.lastIndexOf('/'))
-    foundPageTemplate = findPLPTemplateBySlug(pages, slug)
-  }
-
-  return (
-    foundPageTemplate ||
-    pages.find((page) => !page.settings?.template?.value) ||
-    pages[0]
-  )
-}
-
-export function normalizePDPTemplate(templateValue: string) {
-  // Remove extra slashes, white spaces at the beginning and end
-  let formattedValue = templateValue.trim().replace(/^\/+|\/+$/g, '')
-
-  // Add a slash at the beginning if not present
-  if (!formattedValue.startsWith('/')) {
-    formattedValue = '/' + formattedValue
-  }
-
-  // Add a slash at the end if not ending with '/p'
-  if (!formattedValue.endsWith('/p')) {
-    formattedValue += '/'
-  }
-
-  // Remove duplicate slashes and white spaces throughout the string
-  formattedValue = formattedValue.replace(/\/+/g, '/').replace(/\s+/g, '')
-
-  return formattedValue.toLowerCase()
-}
-
-/**
- * Find the best PDP template from the CMS based on the slug or in the product category tree.
- * Prioritizing the following order:
- *
- * 1. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
- * 2. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
- * 3. A PDP template that matches the product category (e.g. /department/category).
- * 4. A PDP template that matches the product department (e.g. /department).
- * 5. If no matches are found, use the generic PDP template.
- *
- * @param pages
- * @param originalSlug
- * @param product
- * @returns The best PDP template page for the slug
- */
-export function findBestPDPTemplate(
-  pages: Partial<PDPContentType>[],
-  slug: string,
-  product: ServerProductQueryQuery['product']
-) {
-  // productSlugAndCategoryTree with the prioritized order. [slug, subcategory tree, category tree, department]
-  const productSlugAndCategoryTree = product?.breadcrumbList?.itemListElement
-    ? [...product?.breadcrumbList?.itemListElement]
-        .reverse()
-        .map(({ item }) => item)
-    : []
-  productSlugAndCategoryTree.unshift(slug)
-
-  for (const item of productSlugAndCategoryTree) {
-    for (const page of pages) {
-      if (!page.settings?.template?.value) continue
-
-      const templateValue = normalizePDPTemplate(page.settings.template.value)
-      if (templateValue === item) {
-        return page
-      }
-    }
-  }
-
-  return pages.find((page) => !page.settings?.template?.value) || pages[0]
-}

package/test/utils/multipleTemplates.test.ts

@@ -0,0 +1,66 @@
+import type { Rewrite, RewritesConfig } from '../../src/utils/multipleTemplates'
+import { hasRewritesConfigForSlug } from '../../src/utils/multipleTemplates'
+
+describe('Multiple page templates', () => {
+  describe('hasRewritesConfigForSlug', () => {
+    it('should return true when rewrites is an array of objects containing the desired destination and source', () => {
+      const rewritesArr: Rewrite[] = [
+        { source: '/test/my-office', destination: '/office' },
+      ]
+      const result = hasRewritesConfigForSlug({
+        rewrites: rewritesArr,
+        templateValue: '/test/my-office',
+        slug: '/office',
+      })
+      expect(result).toBe(true)
+    })
+
+    it('should return true when rewrites is an object with three arrays containing the desired destination and source', () => {
+      const rewritesObj: RewritesConfig = {
+        beforeFiles: [{ source: '/test/my-office', destination: '/office' }],
+        afterFiles: [],
+        fallback: [],
+      }
+      const result = hasRewritesConfigForSlug({
+        rewrites: rewritesObj,
+        templateValue: '/test/my-office',
+        slug: '/office',
+      })
+      expect(result).toBe(true)
+    })
+
+    it('should return false when the desired source is found but the destination is different', () => {
+      const rewritesArr: Rewrite[] = [
+        { source: '/test/my-office', destination: '/home' },
+      ]
+      const result = hasRewritesConfigForSlug({
+        rewrites: rewritesArr,
+        templateValue: '/test/my-office',
+        slug: '/office',
+      })
+      expect(result).toBe(false)
+    })
+
+    it('should return false when the rewrites is empty array', () => {
+      const rewritesArr = []
+      const result = hasRewritesConfigForSlug({
+        rewrites: rewritesArr,
+        templateValue: '/test/my-office',
+        slug: '/office',
+      })
+      expect(result).toBe(false)
+    })
+
+    it('should return false when the desired destination is found but the source is different', () => {
+      const rewritesArr: Rewrite[] = [
+        { source: '/test/my-home', destination: '/office' },
+      ]
+      const result = hasRewritesConfigForSlug({
+        rewrites: rewritesArr,
+        templateValue: '/test/my-office',
+        slug: '/office',
+      })
+      expect(result).toBe(false)
+    })
+  })
+})