@faststore/core 3.0.58 → 3.0.60

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
-$ faststore generate-graphql -c
 $ partytown copylib ./public/~partytown
 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.
@@ -38,7 +38,7 @@ Route (app)                                Size     First Load JS
   ├ chunks/472-369461a1f39981d5.js         28.4 kB
   ├ chunks/fd9d1056-43c43818840d7811.js    51.1 kB
   ├ chunks/main-app-e13fa67c2c3ceca5.js    230 B
-  └ chunks/webpack-d7ccbda472189c19.js     2.43 kB
+  └ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      1.04 kB         148 kB
@@ -61,8 +61,8 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              96.9 kB
   ├ chunks/framework-21e9365486ba23a6.js   45.4 kB
   ├ chunks/main-9c9c62c368c0a47e.js        34.8 kB
-  ├ chunks/pages/_app-00cee674a20813ff.js  11.2 kB
-  ├ chunks/webpack-d7ccbda472189c19.js     2.43 kB
+  ├ chunks/pages/_app-1930798899758fda.js  11.2 kB
+  ├ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,9 +1,10 @@
 $ jest
-PASS test/server/cms/index.test.ts (28.539 s)
-PASS test/server/index.test.ts (30.283 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:       12 passed, 12 total
+Test Suites: 3 passed, 3 total
+Tests:       16 passed, 16 total
 Snapshots:   0 total
-Time:        31.156 s
+Time:        35.349 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.58",
+  "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": "e1f415c74cfb74de617dc85669792439a1e6be29"
+  "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/index.ts

@@ -5,14 +5,6 @@ import MissingContentError from 'src/sdk/error/MissingContentError'
 import MultipleContentError from 'src/sdk/error/MultipleContentError'
 import config from '../../../faststore.config'
 
-type Cache<T> = {
-  [key: string]: { data: Array<T> }
-}
-type ExtraOptions = {
-  cmsClient?: ClientCMS
-  cache?: Cache<ContentData>
-}
-
 export type Options =
   | Locator
   | {
@@ -53,68 +45,49 @@ export const clientCMS = new ClientCMS({
   tenant: config.api.storeId,
 })
 
-/*
- * This in memory cache exists because for each page (think category or department)
- * we are fetching all the pages of the same content type from the headless CMS to
- * find the one that matches the slug.
- *
- * So instead of making multiple request for the Headless CMS API for each page we make
- * one for each content-type and reuse the results for the next page.
- *
- * Since we rebuild on a CMS publication the server will go away and will "invalidate"
- * the cache
- */
-const getCMSPageCache = {}
-
 export const getCMSPage = async (
   options: Options,
-  extraOptions?: ExtraOptions
+  cmsClient: ClientCMS = clientCMS
 ) => {
-  const cmsClient = extraOptions?.cmsClient ?? clientCMS
-  const cache = extraOptions?.cache ?? getCMSPageCache
-
   if (isLocator(options)) {
     return await cmsClient
       .getCMSPage(options)
       .then((page) => ({ data: [page] }))
   }
 
-  if (!cache[options.contentType]) {
-    const pages = []
-    let page = 1
-    const perPage = 10
-    const response = await cmsClient.getCMSPagesByContentType(
-      options.contentType,
-      { ...options.filters, page: page, perPage }
-    )
-
-    pages.push(...response.data)
-
-    const totalPagesToFetch = Math.ceil(response.totalItems / perPage) // How many pages have content
-    const pagesToFetch = Array.from(
-      { length: totalPagesToFetch - 1 }, // We want all those pages minus the first one that we fetched
-      (_, i) => i + 2 // + 1 because indices are 0 based, and + 1 because we already fetched the first
-    )
-
-    if (response.totalItems > pages.length) {
-      const restOfPages = await Promise.all(
-        pagesToFetch.map((i) =>
-          cmsClient.getCMSPagesByContentType(options.contentType, {
-            ...options.filters,
-            page: i,
-            perPage,
-          })
-        )
+  const pages = []
+  let page = 1
+  const perPage = 10
+  const response = await cmsClient.getCMSPagesByContentType(
+    options.contentType,
+    { ...options.filters, page: page, perPage }
+  )
+
+  pages.push(...response.data)
+
+  const totalPagesToFetch = Math.ceil(response.totalItems / perPage) // How many pages have content
+  const pagesToFetch = Array.from(
+    { length: totalPagesToFetch - 1 }, // We want all those pages minus the first one that we fetched
+    (_, i) => i + 2 // + 1 because indices are 0 based, and + 1 because we already fetched the first
+  )
+
+  if (response.totalItems > pages.length) {
+    const restOfPages = await Promise.all(
+      pagesToFetch.map((i) =>
+        cmsClient.getCMSPagesByContentType(options.contentType, {
+          ...options.filters,
+          page: i,
+          perPage,
+        })
       )
+    )
 
-      restOfPages.forEach((response) => {
-        pages.push(...response.data)
-      })
-    }
-    cache[options.contentType] = { data: pages }
+    restOfPages.forEach((response) => {
+      pages.push(...response.data)
+    })
   }
 
-  return cache[options.contentType]
+  return { data: pages }
 }
 
 export const getPage = async <T extends ContentData>(options: Options) => {

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/server/cms/index.test.ts

@@ -29,10 +29,7 @@ describe('CMS Integration', () => {
       })
       clientCMS.getCMSPagesByContentType = mockFunction
 
-      const result = await getCMSPage(
-        { contentType: 'plp' },
-        { cmsClient: clientCMS }
-      )
+      const result = await getCMSPage({ contentType: 'plp' }, clientCMS)
 
       expect(mockFunction.mock.calls.length).toBe(1)
       expect(result.data.length).toBe(3)
@@ -59,37 +56,10 @@ describe('CMS Integration', () => {
 
       clientCMS.getCMSPagesByContentType = mockFunction
 
-      const result = await getCMSPage(
-        { contentType: 'plp' },
-        { cmsClient: clientCMS, cache: {} }
-      )
+      const result = await getCMSPage({ contentType: 'plp' }, clientCMS)
 
       expect(mockFunction.mock.calls.length).toBe(2)
       expect(result.data.length).toBe(15)
     })
-
-    it('it makes no request if the cache is filled', async () => {
-      const mockFunction: jest.Mock<typeof clientCMS.getCMSPagesByContentType> =
-        jest.fn()
-
-      mockFunction.mockImplementationOnce(() => {
-        return Promise.resolve({
-          data: mockData(10),
-          hasNextPage: true,
-          totalItems: 15,
-        })
-      })
-
-      clientCMS.getCMSPagesByContentType = mockFunction
-
-      const cache = { plp: { data: [] } }
-      const result = await getCMSPage(
-        { contentType: 'plp' },
-        { cmsClient: clientCMS, cache: cache }
-      )
-
-      expect(mockFunction.mock.calls.length).toBe(0)
-      expect(result.data.length).toBe(0)
-    })
   })
 })