@faststore/core 3.0.153 → 3.0.154

package/.turbo/turbo-build.log

@@ -38,40 +38,40 @@ https://nextjs.org/telemetry
    Collecting page data ...
    Generating static pages (0/7) ...
 
   Generating static pages (1/7) 
-Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (3/7) 
+Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (5/7) 
 
 ✓ Generating static pages (7/7) 
    Finalizing page optimization ...
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      1.23 kB         139 kB
-├   └ css/197e314c5a03eabd.css             740 B
-├   /_app                                  0 B              91 kB
-├ ● /[...slug]                             2.79 kB         153 kB
-├   └ css/e47f1a002bdcf76f.css             2.38 kB
-├ ● /[slug]/p                              12.3 kB         150 kB
-├   └ css/9b6bba2472d272ec.css             10.5 kB
-├ ○ /404                                   1.45 kB         122 kB
-├ ● /500                                   1.45 kB         122 kB
-├ ● /account                               678 B           121 kB
-├ λ /api/graphql                           0 B              91 kB
-├ λ /api/health/live                       0 B              91 kB
-├ λ /api/health/ready                      0 B              91 kB
-├ λ /api/preview                           0 B              91 kB
-├ ● /checkout                              660 B           121 kB
-├ ● /login                                 1.56 kB         122 kB
-└ ● /s                                     2.23 kB         152 kB
-+ First Load JS shared by all              94.1 kB
-  ├ chunks/framework-8e279965036b6169.js   45.4 kB
-  ├ chunks/main-029f1328cfee9686.js        33.1 kB
-  ├ chunks/pages/_app-cb1c3a94f987c5c8.js  9.87 kB
-  ├ chunks/webpack-ab89187244c136e9.js     2.74 kB
+┌ ● /                                      3.2 kB          121 kB
+├   └ css/b1806cbafd0c1f81.css             3.06 kB
+├   /_app                                  0 B            91.7 kB
+├ ● /[...slug]                             2 kB            137 kB
+├ ● /[slug]/p                              30.2 kB         148 kB
+├   ├ css/bd9313ce4313a00a.css             11.1 kB
+├   └ css/9718991cd57978e9.css             14.8 kB
+├ ○ /404                                   1.46 kB         120 kB
+├ ● /500                                   1.46 kB         120 kB
+├ ● /account                               712 B           119 kB
+├ λ /api/graphql                           0 B            91.7 kB
+├ λ /api/health/live                       0 B            91.7 kB
+├ λ /api/health/ready                      0 B            91.7 kB
+├ λ /api/preview                           0 B            91.7 kB
+├ ● /checkout                              694 B           119 kB
+├ ● /login                                 1.57 kB         120 kB
+└ ● /s                                     2.44 kB         137 kB
++ First Load JS shared by all              94.7 kB
+  ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
+  ├ chunks/main-209ac4974b020af1.js        33.1 kB
+  ├ chunks/pages/_app-e419b2062065ccf0.js  9.87 kB
+  ├ chunks/webpack-909c48392196dcdf.js     3.36 kB
   └ css/ee0556daedda6306.css               3.07 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)
 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
 
-Done in 70.84s.
+Done in 72.68s.

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 yarn run v1.22.22
 $ next lint
 ✔ No ESLint warnings or errors
-Done in 6.02s.
+Done in 5.97s.

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/utils/multipleTemplates.test.ts (33.959 s)
-PASS test/server/cms/index.test.ts (34.228 s)
-PASS test/server/index.test.ts (38.562 s)
+PASS test/server/cms/index.test.ts (34.73 s)
+PASS test/utils/multipleTemplates.test.ts (35.126 s)
+PASS test/server/index.test.ts (38.729 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        39.653 s
+Time:        39.901 s
 Ran all test suites.
-Done in 41.17s.
+Done in 41.34s.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.153",
+  "version": "3.0.154",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "6f2e5b5970de162e5c425f70ce20552fe195a3de"
+  "gitHead": "1a368785a4a5b20300f346bfad13435a2395b6f8"
 }

package/src/components/cms/GlobalSections.tsx

@@ -1,50 +1,13 @@
 import { Locator, Section } from '@vtex/client-cms'
 import storeConfig from 'discovery.config'
-import type { ComponentType } from 'react'
-import { PropsWithChildren } from 'react'
-import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
-import RenderSections from './RenderSections'
-
-import { OverriddenDefaultAlert as Alert } from 'src/components/sections/Alert/OverriddenDefaultAlert'
-import Footer from 'src/components/sections/Footer'
-import { OverriddenDefaultNavbar as Navbar } from 'src/components/sections/Navbar/OverriddenDefaultNavbar'
-import { OverriddenDefaultRegionBar as RegionBar } from 'src/components/sections/RegionBar/OverriddenDefaultRegionBar'
-
-import CartSidebar from 'src/components/cart/CartSidebar'
-import RegionModal from 'src/components/region/RegionModal'
-
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 
 export type GlobalSectionsData = {
   sections: Section[]
 }
 
-/* A list of components that can be used in the CMS. */
-const COMPONENTS: Record<string, ComponentType<any>> = {
-  Alert,
-  Navbar,
-  RegionBar,
-  RegionModal,
-  CartSidebar,
-  Footer,
-  ...CUSTOM_COMPONENTS,
-}
-
-function GlobalSections({
-  children,
-  ...otherProps
-}: PropsWithChildren<GlobalSectionsData>) {
-  return (
-    <RenderSections components={COMPONENTS} {...otherProps}>
-      <main>{children}</main>
-    </RenderSections>
-  )
-}
-
-export default GlobalSections
-
 export const getGlobalSectionsData = async (
   previewData: Locator
 ): Promise<GlobalSectionsData> => {

package/src/components/cms/RenderSections.tsx

@@ -10,12 +10,14 @@ import { Section } from '@vtex/client-cms'
 import dynamic from 'next/dynamic'
 import SectionBoundary from './SectionBoundary'
 import ViewportObserver from './ViewportObserver'
+import COMPONENTS from './global/Components'
 
 import { useUI } from '@faststore/ui'
 
 interface Props {
-  components: Record<string, ComponentType<any>>
-  sections: Array<{ name: string; data: any }>
+  components?: Record<string, ComponentType<any>>
+  globalSections?: Array<{ name: string; data: any }>
+  sections?: Array<{ name: string; data: any }>
 }
 
 const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal']
@@ -45,7 +47,6 @@ const useDividedSections = (sections: Section[]) => {
  * 2. Checking the UI context for Sections that are not in the viewport, such as the CartSidebar and RegionModal.
  *
  * @param sectionName
- * @returns
  */
 export const LazyLoadingSection = ({
   sectionName,
@@ -60,11 +61,8 @@ export const LazyLoadingSection = ({
     const shouldLoad =
       (sectionName === 'CartSidebar' && displayCart) ||
       (sectionName === 'RegionModal' && displayModal)
-    if (!shouldLoad) {
-      return null
-    }
 
-    return children
+    return shouldLoad ? <>{children}</> : null
   }
   return (
     <ViewportObserver sectionName={sectionName}>{children}</ViewportObserver>
@@ -74,7 +72,7 @@ export const LazyLoadingSection = ({
 const RenderSectionsBase = ({ sections = [], components }: Props) => {
   return (
     <>
-      {sections.map(({ name, data }, index) => {
+      {sections.map(({ name, data = {} }, index) => {
         const Component = components[name]
 
         if (!Component) {
@@ -88,7 +86,9 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
 
         return (
           <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
-            <Component {...data} />
+            <LazyLoadingSection sectionName={name}>
+              <Component {...data} />
+            </LazyLoadingSection>
           </SectionBoundary>
         )
       })}
@@ -98,21 +98,29 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
 
 function RenderSections({
   children,
+  globalSections,
   sections,
-  ...otherProps
+  components = COMPONENTS,
 }: PropsWithChildren<Props>) {
-  const { hasChildren, firstSections, lastSections } =
-    useDividedSections(sections)
+  const { firstSections, lastSections } = useDividedSections(
+    globalSections ?? sections
+  )
 
   return (
     <>
-      <RenderSectionsBase sections={firstSections} {...otherProps} />
-
-      <Toast />
+      {firstSections && (
+        <RenderSectionsBase sections={firstSections} components={components} />
+      )}
+      {sections && sections.length > 0 && (
+        <RenderSectionsBase sections={sections} components={components} />
+      )}
       {children}
+      <LazyLoadingSection sectionName="Toast">
+        <Toast />
+      </LazyLoadingSection>
 
-      {hasChildren && (
-        <RenderSectionsBase sections={lastSections} {...otherProps} />
+      {lastSections && (
+        <RenderSectionsBase sections={lastSections} components={components} />
       )}
     </>
   )

package/src/components/cms/home/Components.ts

@@ -11,21 +11,21 @@ const BannerText = dynamic(
   () =>
     import(
       /* webpackChunkName: "BannerText" */ 'src/components/sections/BannerText/OverriddenDefaultBannerText'
-    ).then((mod) => ({ default: mod.OverriddenDefaultBannerText })),
+    ).then((mod) => mod.OverriddenDefaultBannerText),
   { ssr: false }
 )
 const Newsletter = dynamic(
   () =>
     import(
       /* webpackChunkName: "Newsletter" */ 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
-    ).then((mod) => ({ default: mod.OverriddenDefaultNewsletter })),
+    ).then((mod) => mod.OverriddenDefaultNewsletter),
   { ssr: false }
 )
 const ProductShelf = dynamic(
   () =>
     import(
       /* webpackChunkName: "ProductShelf" */ 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
-    ).then((mod) => ({ default: mod.OverriddenDefaultProductShelf })),
+    ).then((mod) => mod.OverriddenDefaultProductShelf),
   { ssr: false }
 )
 const ProductTiles = dynamic(
@@ -36,6 +36,10 @@ const ProductTiles = dynamic(
   { ssr: false }
 )
 
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   Hero,

package/src/components/cms/plp/Components.ts

@@ -0,0 +1,59 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+
+import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
+import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
+import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { default as GLOBAL_COMPONENTS } from '../global/Components'
+
+const BannerText = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "BannerText" */
+      'src/components/sections/BannerText/OverriddenDefaultBannerText'
+    ).then((mod) => mod.OverriddenDefaultBannerText),
+  { ssr: false }
+)
+const Newsletter = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "Newsletter" */
+      'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
+    ).then((mod) => mod.OverriddenDefaultNewsletter),
+  { ssr: false }
+)
+const ProductShelf = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductShelf" */
+      'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
+    ).then((mod) => mod.OverriddenDefaultProductShelf),
+  { ssr: false }
+)
+const ProductTiles = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductTiles" */
+      'src/components/sections/ProductTiles'
+    ),
+  { ssr: false }
+)
+
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  Breadcrumb,
+  Hero,
+  ProductGallery,
+  BannerText,
+  Newsletter,
+  ProductShelf,
+  ProductTiles,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default COMPONENTS

package/src/components/cms/search/Components.ts

@@ -0,0 +1,68 @@
+import dynamic from 'next/dynamic'
+import { ComponentType } from 'react'
+
+import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
+import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
+import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { default as GLOBAL_COMPONENTS } from '../global/Components'
+
+const BannerText = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "BannerText" */
+      'src/components/sections/BannerText/OverriddenDefaultBannerText'
+    ).then((mod) => mod.OverriddenDefaultBannerText),
+  { ssr: false }
+)
+const BannerNewsletter = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "BannerNewsletter" */
+      'src/components/sections/BannerNewsletter/BannerNewsletter'
+    ),
+  { ssr: false }
+)
+const Newsletter = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "Newsletter" */
+      'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
+    ).then((mod) => mod.OverriddenDefaultNewsletter),
+  { ssr: false }
+)
+const ProductShelf = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductShelf" */
+      'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
+    ).then((mod) => mod.OverriddenDefaultProductShelf),
+  { ssr: false }
+)
+const ProductTiles = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductTiles" */
+      'src/components/sections/ProductTiles'
+    ),
+  { ssr: false }
+)
+
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  Breadcrumb,
+  Hero,
+  ProductGallery,
+  BannerText,
+  BannerNewsletter,
+  Newsletter,
+  ProductShelf,
+  ProductTiles,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default COMPONENTS

package/src/components/sections/ProductShelf/DefaultComponents.ts

@@ -1,6 +1,20 @@
-import { ProductShelf as UIProductShelf } from '@faststore/ui'
-import ProductCard from 'src/components/product/ProductCard'
-import Carousel from 'src/components/ui/Carousel'
+import dynamic from 'next/dynamic'
+const UIProductShelf = dynamic(() =>
+  /* webpackChunkName: "UIProductShelf" */
+  import('@faststore/ui').then((mod) => mod.ProductShelf)
+)
+
+const Carousel = dynamic(
+  () =>
+    /* webpackChunkName: "Carousel" */
+    import('src/components/ui/Carousel')
+)
+
+const ProductCard = dynamic(
+  () =>
+    /* webpackChunkName: "ProductCard" */
+    import('src/components/product/ProductCard')
+)
 
 export const ProductShelfDefaultComponents = {
   ProductShelf: UIProductShelf,

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -12,6 +12,7 @@ import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sectio
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
@@ -21,6 +22,7 @@ import storeConfig from 'discovery.config'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
   Hero,
   BannerText,
   BannerNewsletter,
@@ -36,12 +38,14 @@ export type LandingPageProps = {
   page: PageContentType
   slug?: string
   serverData?: unknown
+  globalSections?: Array<{ name: string; data: any }>
 }
 
 export default function LandingPage({
   page: { sections, settings },
   slug,
   serverData,
+  globalSections,
 }: LandingPageProps) {
   const context = {
     data: serverData,
@@ -87,7 +91,11 @@ export default function LandingPage({
         (not the HTML tag) before rendering it here.
       */}
       <PageProvider context={context}>
-        <RenderSections sections={sections} components={COMPONENTS} />
+        <RenderSections
+          sections={sections}
+          globalSections={globalSections}
+          components={COMPONENTS}
+        />
       </PageProvider>
     </>
   )

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -1,20 +1,14 @@
 import { useSearch } from '@faststore/sdk'
 import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import deepmerge from 'deepmerge'
-import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
-import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
-import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
-import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
-import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
-import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
-import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
-import ProductTiles from 'src/components/sections/ProductTiles'
-import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
 
-import type { ComponentType } from 'react'
-import RenderSections from 'src/components/cms/RenderSections'
-import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import dynamic from 'next/dynamic'
+import COMPONENTS from 'src/components/cms/plp/Components'
+
+import RenderSections, {
+  LazyLoadingSection,
+} from 'src/components/cms/RenderSections'
 import { PLPContentType } from 'src/server/cms/plp'
 
 import PageProvider, { PLPContext } from 'src/sdk/overrides/PageProvider'
@@ -24,25 +18,18 @@ import {
 } from 'src/sdk/product/usePageProductsQuery'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 
+const ScrollToTopButton = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ScrollToTopButton" */
+      'src/components/sections/ScrollToTopButton'
+    )
+)
+
 export type ProductListingPageProps = {
   data: ServerCollectionPageQueryQuery
   page: PLPContentType
-}
-
-/**
- * Sections: Components imported from each store's custom components and '../components/sections' only.
- * Do not import or render components from any other folder in here.
- */
-const COMPONENTS: Record<string, ComponentType<any>> = {
-  Breadcrumb,
-  BannerText,
-  BannerNewsletter,
-  Hero,
-  Newsletter,
-  ProductGallery,
-  ProductShelf,
-  ProductTiles,
-  ...CUSTOM_COMPONENTS,
+  globalSections?: Array<{ name: string; data: any }>
 }
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
@@ -52,6 +39,7 @@ const overwriteMerge = (_: any[], sourceArray: any[]) => sourceArray
 export default function ProductListing({
   page: { sections, settings },
   data: server,
+  globalSections,
 }: ProductListingPageProps) {
   const {
     state: { sort, term, selectedFacets },
@@ -93,11 +81,17 @@ export default function ProductListing({
       */}
       <PageProvider context={context}>
         <UseGalleryPageContext.Provider value={useGalleryPage}>
-          <RenderSections sections={sections} components={COMPONENTS} />
+          <RenderSections
+            sections={sections}
+            globalSections={globalSections}
+            components={COMPONENTS}
+          >
+            <LazyLoadingSection sectionName="ScrollToTopButton">
+              <ScrollToTopButton />
+            </LazyLoadingSection>
+          </RenderSections>
         </UseGalleryPageContext.Provider>
       </PageProvider>
-
-      <ScrollToTopButton />
     </>
   )
 }

package/src/components/templates/ProductListingPage/ProductListingPage.tsx

@@ -20,6 +20,7 @@ import ProductListing from './ProductListing'
 export type ProductListingPageProps = {
   data: ServerCollectionPageQueryQuery
   page: PLPContentType
+  globalSections?: Array<{ name: string; data: any }>
 }
 
 type UseSearchParams = {
@@ -56,6 +57,7 @@ const useSearchParams = ({
 export default function ProductListingPage({
   page: plpContentType,
   data: server,
+  globalSections,
 }: ProductListingPageProps) {
   const { settings } = plpContentType
   const collection = server.collection
@@ -94,7 +96,11 @@ export default function ProductListingPage({
         itemListElements={collection?.breadcrumbList.itemListElement ?? []}
       />
 
-      <ProductListing page={plpContentType} data={server} />
+      <ProductListing
+        globalSections={globalSections}
+        page={plpContentType}
+        data={server}
+      />
     </SearchProvider>
   )
 }