@faststore/core 3.7.0 → 3.9.0

package/.turbo/turbo-build.log

@@ -38,41 +38,41 @@ https://nextjs.org/telemetry
    Collecting page data ...
    Generating static pages (0/7) ...
 
   Generating static pages (1/7) 
-
   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 (3/7) 
 
   Generating static pages (5/7) 
 
 ✓ Generating static pages (7/7) 
    Finalizing page optimization ...
    Collecting build traces ...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.21 kB         122 kB
+┌ ● /                                      3.23 kB         122 kB
 ├   └ css/b1806cbafd0c1f81.css             3.06 kB
 ├   /_app                                  0 B            91.9 kB
-├ ● /[...slug]                             2 kB            130 kB
-├ ● /[slug]/p                              34 kB           153 kB
+├ ● /[...slug]                             2.01 kB         131 kB
+├ ● /[slug]/p                              34.1 kB         153 kB
 ├   ├ css/bf1560439df2c1a1.css             5.66 kB
 ├   ├ css/e3ff5d95518a5c79.css             6.01 kB
 ├   └ css/d92839440872e246.css             15.6 kB
-├ ○ /404                                   1.46 kB         120 kB
-├ ● /500                                   1.46 kB         120 kB
-├ ● /account                               712 B           119 kB
+├ ○ /404                                   1.48 kB         120 kB
+├ ● /500                                   1.48 kB         120 kB
+├ ● /account                               714 B           120 kB
 ├ λ /api/graphql                           0 B            91.9 kB
 ├ λ /api/health/live                       0 B            91.9 kB
 ├ λ /api/health/ready                      0 B            91.9 kB
 ├ λ /api/preview                           0 B            91.9 kB
-├ ● /checkout                              694 B           119 kB
-├ ● /login                                 1.57 kB         120 kB
-└ ● /s                                     2.74 kB         131 kB
+├ ● /checkout                              695 B           120 kB
+├ ● /login                                 1.59 kB         121 kB
+└ ● /s                                     2.75 kB         131 kB
 + First Load JS shared by all              95 kB
   ├ chunks/framework-12a146e94cfcf7c4.js   45.4 kB
   ├ chunks/main-209ac4974b020af1.js        33.1 kB
-  ├ chunks/pages/_app-9d791333b87e7c18.js  9.9 kB
-  ├ chunks/webpack-0d0b6c5bc10dfaad.js     3.57 kB
+  ├ chunks/pages/_app-9d35d5919aef5334.js  9.91 kB
+  ├ chunks/webpack-bf502499da135235.js     3.57 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 71.95s.
+Done in 70.70s.

package/.turbo/turbo-lint.log

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

package/.turbo/turbo-test.log

@@ -1,12 +1,12 @@
 yarn run v1.22.22
 $ jest
-PASS test/server/cms/index.test.ts (37.742 s)
-PASS test/utils/multipleTemplates.test.ts (37.935 s)
-PASS test/server/index.test.ts (41.573 s)
+PASS test/utils/multipleTemplates.test.ts (36.538 s)
+PASS test/server/cms/index.test.ts (37.31 s)
+PASS test/server/index.test.ts (41.077 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        42.763 s
+Time:        42.06 s
 Ran all test suites.
-Done in 44.18s.
+Done in 43.45s.

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.9.0 (2025-01-22)
+
+### Features
+
+- Adds Plugins feature ([#2563](https://github.com/vtex/faststore/issues/2563)) ([83c1bf9](https://github.com/vtex/faststore/commit/83c1bf904f744842060e0dfdb7449406800df157))
+
+# [3.8.0](https://github.com/vtex/faststore/compare/v3.7.0...v3.8.0) (2025-01-15)
+
+### Features
+
+- load out of viewport sections after TTI ([#2604](https://github.com/vtex/faststore/issues/2604)) ([98f8109](https://github.com/vtex/faststore/commit/98f8109d406150edf8172a4b8f8e3d4f39f28362))
+
 # [3.7.0](https://github.com/vtex/faststore/compare/v3.6.0...v3.7.0) (2025-01-15)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -43,12 +43,12 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.7.0",
-    "@faststore/components": "^3.7.0",
-    "@faststore/graphql-utils": "^3.5.0",
-    "@faststore/lighthouse": "^3.5.0",
-    "@faststore/sdk": "^3.5.0",
-    "@faststore/ui": "^3.7.0",
+    "@faststore/api": "^3.9.0",
+    "@faststore/components": "^3.9.0",
+    "@faststore/graphql-utils": "^3.9.0",
+    "@faststore/lighthouse": "^3.9.0",
+    "@faststore/sdk": "^3.9.0",
+    "@faststore/ui": "^3.9.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -87,7 +87,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/eslint-config": "^3.5.0",
+    "@faststore/eslint-config": "^3.9.0",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "b692b179d39c24f590083cc0a1fdaaa779aa6dd9"
+  "gitHead": "50345eff012999c1e2100a5fcfeccd0732da131e"
 }

package/src/components/cms/RenderSections.tsx

@@ -6,8 +6,10 @@ import {
   useMemo,
 } from 'react'
 
+import { useUI } from '@faststore/ui'
 import { Section } from '@vtex/client-cms'
 import dynamic from 'next/dynamic'
+import useTTI from 'src/sdk/performance/useTTI'
 import SectionBoundary from './SectionBoundary'
 import ViewportObserver from './ViewportObserver'
 import COMPONENTS from './global/Components'
@@ -16,6 +18,7 @@ interface Props {
   components?: Record<string, ComponentType<any>>
   globalSections?: Array<{ name: string; data: any }>
   sections?: Array<{ name: string; data: any }>
+  isInteractive?: boolean
 }
 
 const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal']
@@ -49,20 +52,47 @@ const useDividedSections = (sections: Section[]) => {
 export const LazyLoadingSection = ({
   sectionName,
   children,
+  debug = false,
+  isInteractive = false,
 }: {
   sectionName: string
   children: ReactNode
+  debug?: boolean
+  isInteractive?: boolean
 }) => {
+  const { cart: displayCart, modal: displayModal } = useUI()
   if (SECTIONS_OUT_OF_VIEWPORT.includes(sectionName)) {
-    return <>{children}</>
+    const shouldLoad =
+      isInteractive ||
+      (sectionName === 'CartSidebar' && displayCart) ||
+      (sectionName === 'RegionModal' && displayModal)
+
+    if (debug) {
+      console.log(
+        `section SECTIONS_OUT_OF_VIEWPORT '${sectionName}' shouldLoad:`,
+        shouldLoad
+      )
+    }
+
+    return shouldLoad ? <>{children}</> : null
   }
 
   return (
-    <ViewportObserver sectionName={sectionName}>{children}</ViewportObserver>
+    <ViewportObserver
+      sectionName={sectionName}
+      debug={debug}
+      isInteractive={isInteractive}
+    >
+      {children}
+    </ViewportObserver>
   )
 }
 
-const RenderSectionsBase = ({ sections = [], components }: Props) => {
+const RenderSectionsBase = ({
+  sections = [],
+  components,
+  isInteractive,
+}: Props) => {
   return (
     <>
       {sections.map(({ name, data = {} }, index) => {
@@ -79,7 +109,10 @@ const RenderSectionsBase = ({ sections = [], components }: Props) => {
 
         return (
           <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
-            <LazyLoadingSection sectionName={name}>
+            <LazyLoadingSection
+              sectionName={name}
+              isInteractive={isInteractive}
+            >
               <Component {...data} />
             </LazyLoadingSection>
           </SectionBoundary>
@@ -99,21 +132,35 @@ function RenderSections({
     globalSections ?? sections
   )
 
+  const { isInteractive } = useTTI()
+
   return (
     <>
       {firstSections && (
-        <RenderSectionsBase sections={firstSections} components={components} />
+        <RenderSectionsBase
+          sections={firstSections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
       {sections && sections.length > 0 && (
-        <RenderSectionsBase sections={sections} components={components} />
+        <RenderSectionsBase
+          sections={sections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
       {children}
-      <LazyLoadingSection sectionName="Toast">
+      <LazyLoadingSection sectionName="Toast" isInteractive={isInteractive}>
         <Toast />
       </LazyLoadingSection>
 
       {lastSections && (
-        <RenderSectionsBase sections={lastSections} components={components} />
+        <RenderSectionsBase
+          sections={lastSections}
+          components={components}
+          isInteractive={isInteractive}
+        />
       )}
     </>
   )

package/src/components/cms/ViewportObserver.tsx

@@ -14,6 +14,7 @@ type ViewportObserverProps = {
    * Debug/test purposes: enables visual debugging to identify the visibility of the section.
    */
   debug?: boolean
+  isInteractive?: boolean
 } & IntersectionObserverInit
 
 function ViewportObserver({
@@ -23,6 +24,7 @@ function ViewportObserver({
   rootMargin,
   children,
   debug = false,
+  isInteractive = false,
 }: PropsWithChildren<ViewportObserverProps>) {
   const [isVisible, setVisible] = useState(false)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -80,7 +82,7 @@ function ViewportObserver({
         ></div>
       )}
 
-      {isVisible && children}
+      {(isVisible || isInteractive) && children}
     </>
   )
 }

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

@@ -6,6 +6,7 @@ import { OverriddenDefaultNavbar as Navbar } from 'src/components/sections/Navba
 import { OverriddenDefaultRegionBar as RegionBar } from 'src/components/sections/RegionBar/OverriddenDefaultRegionBar'
 
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import PLUGINS_COMPONENTS from 'src/plugins'
 
 const CartSidebar = dynamic(
   () =>
@@ -34,6 +35,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   CartSidebar, // out of viewport
   RegionModal, // out of viewport
   Footer, // out of viewport
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

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

@@ -6,6 +6,7 @@ import Incentives from 'src/components/sections/Incentives'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
 
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import PLUGINS_COMPONENTS from 'src/plugins'
 
 const BannerText = dynamic(
   () =>
@@ -48,6 +49,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   Newsletter,
   ProductShelf,
   ProductTiles,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

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

@@ -5,6 +5,7 @@ import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sectio
 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 PLUGINS_COMPONENTS from 'src/plugins'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
 
 const BannerText = dynamic(
@@ -53,6 +54,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   Newsletter,
   ProductShelf,
   ProductTiles,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

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

@@ -5,6 +5,7 @@ import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sectio
 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 PLUGINS_COMPONENTS from 'src/plugins'
 import { default as GLOBAL_COMPONENTS } from '../global/Components'
 
 const BannerText = dynamic(
@@ -62,6 +63,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   Newsletter,
   ProductShelf,
   ProductTiles,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

package/src/components/sections/Alert/OverriddenDefaultAlert.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/Alert'
+import { override as overridePlugin } from 'src/plugins/overrides/Alert'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import Alert from '.'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default Alert section present in the Headless CMS
  */
 export const OverriddenDefaultAlert = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'Alert'>),
   ...(override as SectionOverrideDefinitionV1<'Alert'>),
   Section: Alert,
 })

package/src/components/sections/BannerText/OverriddenDefaultBannerText.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/BannerText'
+import { override as overridePlugin } from 'src/plugins/overrides/BannerText'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import BannerText from '.'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default BannerText section present in the Headless CMS
  */
 export const OverriddenDefaultBannerText = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'BannerText'>),
   ...(override as SectionOverrideDefinitionV1<'BannerText'>),
   Section: BannerText,
 })

package/src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/Breadcrumb'
+import { override as overridePlugin } from 'src/plugins/overrides/Breadcrumb'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import Breadcrumb from '.'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default Breadcrumb section present in the Headless CMS
  */
 export const OverriddenDefaultBreadcrumb = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'Breadcrumb'>),
   ...(override as SectionOverrideDefinitionV1<'Breadcrumb'>),
   Section: Breadcrumb,
 })

package/src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/CrossSellingShelf'
+import { override as overridePlugin } from 'src/plugins/overrides/CrossSellingShelf'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 import CrossSellingShelf from '.'
@@ -9,6 +10,7 @@ import CrossSellingShelf from '.'
  * This allows users to override the default CrossSellingShelf section present in the Headless CMS
  */
 export const OverriddenDefaultCrossSellingShelf = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'CrossSellingShelf'>),
   ...(override as SectionOverrideDefinitionV1<'CrossSellingShelf'>),
   Section: CrossSellingShelf,
 })

package/src/components/sections/EmptyState/OverriddenDefaultEmptyState.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/EmptyState'
+import { override as overridePlugin } from 'src/plugins/overrides/EmptyState'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
@@ -10,6 +11,7 @@ import EmptyState from './EmptyState'
  * This allows users to override the default EmptyState section present in the Headless CMS
  */
 export const OverriddenDefaultEmptyState = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'EmptyState'>),
   ...(override as SectionOverrideDefinitionV1<'EmptyState'>),
   Section: EmptyState,
 })

package/src/components/sections/Hero/OverriddenDefaultHero.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/Hero'
+import { override as overridePlugin } from 'src/plugins/overrides/Hero'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import Hero from '.'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default Hero section present in the Headless CMS
  */
 export const OverriddenDefaultHero = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'Hero'>),
   ...(override as SectionOverrideDefinitionV1<'Hero'>),
   Section: Hero,
 })

package/src/components/sections/Navbar/OverriddenDefaultNavbar.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/Navbar'
+import { override as overridePlugin } from 'src/plugins/overrides/Navbar'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 import Navbar from './Navbar'
@@ -9,6 +10,7 @@ import Navbar from './Navbar'
  * This allows users to override the default Navbar section present in the Headless CMS
  */
 export const OverriddenDefaultNavbar = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'Navbar'>),
   ...(override as SectionOverrideDefinitionV1<'Navbar'>),
   Section: Navbar,
 })

package/src/components/sections/Newsletter/OverriddenDefaultNewsletter.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/Newsletter'
+import { override as overridePlugin } from 'src/plugins/overrides/Newsletter'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 import Newsletter from './Newsletter'
@@ -9,6 +10,7 @@ import Newsletter from './Newsletter'
  * This allows users to override the default Newsletter section present in the Headless CMS
  */
 export const OverriddenDefaultNewsletter = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'Newsletter'>),
   ...(override as SectionOverrideDefinitionV1<'Newsletter'>),
   Section: Newsletter,
 })

package/src/components/sections/ProductDetails/OverriddenDefaultProductDetails.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/ProductDetails'
+import { override as overridePlugin } from 'src/plugins/overrides/ProductDetails'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import ProductDetails from './ProductDetails'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default ProductDetails section present in the Headless CMS
  */
 export const OverriddenDefaultProductDetails = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'ProductDetails'>),
   ...(override as SectionOverrideDefinitionV1<'ProductDetails'>),
   Section: ProductDetails,
 })

package/src/components/sections/ProductGallery/OverriddenDefaultProductGallery.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/ProductGallery'
+import { override as overridePlugin } from 'src/plugins/overrides/ProductGallery'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 import ProductGallery from '.'
@@ -9,6 +10,7 @@ import ProductGallery from '.'
  * This allows users to override the default ProductGallery section present in the Headless CMS
  */
 export const OverriddenDefaultProductGallery = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'ProductGallery'>),
   ...(override as SectionOverrideDefinitionV1<'ProductGallery'>),
   Section: ProductGallery,
 })

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

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/ProductShelf'
+import { override as overridePlugin } from 'src/plugins/overrides/ProductShelf'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import ProductShelf from '.'
 
@@ -10,6 +11,7 @@ import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinitio
  * This allows users to override the default ProductShelf section present in the Headless CMS
  */
 export const OverriddenDefaultProductShelf = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'ProductShelf'>),
   ...(override as SectionOverrideDefinitionV1<'ProductShelf'>),
   Section: ProductShelf,
 })

package/src/components/sections/RegionBar/OverriddenDefaultRegionBar.ts

@@ -1,4 +1,5 @@
 import { override } from 'src/customizations/src/components/overrides/RegionBar'
+import { override as overridePlugin } from 'src/plugins/overrides/RegionBar'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
 import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 import RegionBar from '.'
@@ -9,6 +10,7 @@ import RegionBar from '.'
  * This allows users to override the default RegionBar section present in the Headless CMS
  */
 export const OverriddenDefaultRegionBar = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'RegionBar'>),
   ...(override as SectionOverrideDefinitionV1<'RegionBar'>),
   Section: RegionBar,
 })

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

@@ -11,6 +11,7 @@ import Incentives from 'src/components/sections/Incentives'
 import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
+import PLUGINS_COMPONENTS from 'src/plugins'
 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'
@@ -31,6 +32,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   Newsletter,
   ProductShelf,
   ProductTiles,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

package/src/customizations/src/GlobalOverrides.tsx

@@ -1,9 +1,15 @@
 import WebFontsOverrides from 'src/customizations/src/components/overrides/WebFonts'
 import { default as CoreWebFonts } from 'src/fonts/WebFonts'
 import ThirdPartyScriptsOverrides from 'src/customizations/src/components/overrides/ThirdPartyScripts'
+import ThirdPartyScriptsPluginsOverrides from 'src/plugins/overrides/ThirdPartyScripts'
+import WebFontsOverridesPlugins from 'src/plugins/overrides/WebFonts'
 
 const Components = {
   WebFonts: CoreWebFonts,
+
+  ...ThirdPartyScriptsPluginsOverrides.components,
+  ...WebFontsOverridesPlugins.components,
+
   ...WebFontsOverrides.components,
   ...ThirdPartyScriptsOverrides.components,
 }

package/src/pages/404.tsx

@@ -10,6 +10,7 @@ import {
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
@@ -17,6 +18,7 @@ import { PageContentType, getPage } from 'src/server/cms'
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   EmptyState,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

package/src/pages/500.tsx

@@ -10,6 +10,7 @@ import {
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
@@ -17,6 +18,7 @@ import { PageContentType, getPage } from 'src/server/cms'
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   EmptyState,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

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

@@ -21,6 +21,7 @@ import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sectio
 import { OverriddenDefaultProductDetails as ProductDetails } from 'src/components/sections/ProductDetails/OverriddenDefaultProductDetails'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
+import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { useSession } from 'src/sdk/session'
 import { execute } from 'src/server'
@@ -49,6 +50,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ProductShelf,
   ProductTiles,
   CrossSellingShelf,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 

package/src/pages/_app.tsx

@@ -7,6 +7,7 @@ import SEO from '../../next-seo.config'
 
 // FastStore UI's base styles
 import '../styles/global/index.scss'
+import '../plugins/index.scss'
 import '../customizations/src/themes/index.scss'
 
 import { DefaultSeo } from 'next-seo'

package/src/pages/login.tsx

@@ -11,6 +11,7 @@ import {
 } from 'src/components/cms/GlobalSections'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
+import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { PageContentType, getPage } from 'src/server/cms'
 import storeConfig from '../../discovery.config'
@@ -19,6 +20,7 @@ import storeConfig from '../../discovery.config'
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   EmptyState,
+  ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }