Feat: new RenderSections for all pages

packages/core/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> => {

packages/core/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} />
       )}
     </>
   )

packages/core/src/components/cms/plp/Components.ts

@@ -0,0 +1,55 @@
+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) => ({ default: mod.OverriddenDefaultBannerText })),
+  { ssr: false }
+)
+const Newsletter = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "Newsletter" */
+      'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
+    ).then((mod) => ({ default: mod.OverriddenDefaultNewsletter })),
+  { ssr: false }
+)
+const ProductShelf = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductShelf" */
+      'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
+    ).then((mod) => ({ default: mod.OverriddenDefaultProductShelf })),
+  { ssr: false }
+)
+const ProductTiles = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductTiles" */
+      'src/components/sections/ProductTiles'
+    ),
+  { ssr: false }
+)
+
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  Breadcrumb,
+  Hero,
+  ProductGallery,
+  BannerText,
+  Newsletter,
+  ProductShelf,
+  ProductTiles,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default COMPONENTS

packages/core/src/components/cms/search/Components.ts

@@ -0,0 +1,64 @@
+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) => ({ default: 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) => ({ default: mod.OverriddenDefaultNewsletter })),
+  { ssr: false }
+)
+const ProductShelf = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductShelf" */
+      'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
+    ).then((mod) => ({ default: mod.OverriddenDefaultProductShelf })),
+  { ssr: false }
+)
+const ProductTiles = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ProductTiles" */
+      'src/components/sections/ProductTiles'
+    ),
+  { ssr: false }
+)
+
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  Breadcrumb,
+  Hero,
+  ProductGallery,
+  BannerText,
+  BannerNewsletter,
+  Newsletter,
+  ProductShelf,
+  ProductTiles,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default COMPONENTS

packages/core/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>
     </>
   )