chore: improve overrides bundle size (#2186)

## What's the purpose of this pull request? This PR improves the performance of the Section Override API. ## How it works? It works by removing the centralized imports where an object would contain the components for all of the sections. This made the sections and default components to be imported even where they were not used, making the bundle to be bigger than necessary. It also introduces a breaking change to the previously proposed API: instead of providing the name of the section to be overridden, users should provide the section itself. ```tsx import { Alert, getOverriddenSection } from "@faststore/core"; const NewAlert = getOverriddenSection({ Section: Alert, components: {} }); export default NewAlert; ``` ## How to test it? Use this version of the package on the starter and try to create overrides for the supported V2 sections!
vtex · Jan 8, 2024 · 7a46e5e · 7a46e5e
1 parent f3b56c7
commit 7a46e5e
Show file tree

Hide file tree

Showing 29 changed files with 536 additions and 377 deletions.
diff --git a/packages/core/index.ts b/packages/core/index.ts
@@ -18,3 +18,16 @@ export { useProductsQuery } from './src/sdk/product/useProductsQuery'
 
 export * from './src/typings/overrides'
 export { getOverriddenSection } from './src/sdk/overrides/getOverriddenSection'
+
+// Overridable Sections
+export { default as AlertSection } from './src/components/sections/Alert'
+export { default as BannerTextSection } from './src/components/sections/BannerText'
+export { default as BreadcrumbSection } from './src/components/sections/Breadcrumb'
+export { default as CrossSellingShelfSection } from './src/components/sections/CrossSellingShelf'
+export { default as HeroSection } from './src/components/sections/Hero'
+export { default as NavbarSection } from './src/components/sections/Navbar'
+export { default as NewsletterSection } from './src/components/sections/Newsletter'
+export { default as ProductDetailsSection } from './src/components/sections/ProductDetails'
+export { default as ProductGallerySection } from './src/components/sections/ProductGallery'
+export { default as ProductShelfSection } from './src/components/sections/ProductShelf'
+export { default as RegionBarSection } from './src/components/sections/RegionBar'
diff --git a/packages/core/src/components/sections/Alert/Alert.tsx b/packages/core/src/components/sections/Alert/Alert.tsx
@@ -2,8 +2,10 @@ import type { ReactNode } from 'react'
 
 import CommonAlert, {
   type AlertProps as CommonAlertProps,
-} from 'src/components/common/Alert'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../components/common/Alert'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { AlertDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface AlertProps extends Omit<CommonAlertProps, 'link' | 'icon'> {
   icon: string
@@ -35,4 +37,10 @@ function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
   )
 }
 
-export default Alert
+const OverridableAlert = getOverridableSection<typeof Alert>(
+  'Alert',
+  Alert,
+  AlertDefaultComponents
+)
+
+export default OverridableAlert
diff --git a/packages/core/src/components/sections/Alert/OverriddenDefaultAlert.ts b/packages/core/src/components/sections/Alert/OverriddenDefaultAlert.ts
@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/Alert'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import Alert from '.'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default Alert section present in the Headless CMS
  */
-export const OverriddenDefaultAlert = getOverriddenSection(
-  override as SectionOverrideDefinition<'Alert'>
-)
+export const OverriddenDefaultAlert = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Alert'>),
+  Section: Alert,
+})
diff --git a/packages/core/src/components/sections/BannerText/BannerText.tsx b/packages/core/src/components/sections/BannerText/BannerText.tsx
@@ -3,10 +3,12 @@ import {
   BannerTextContentProps as UIBannerTextContentProps,
 } from '@faststore/ui'
 
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 import Section from '../Section'
 
 import styles from './section.module.scss'
+import { BannerTextDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface BannerTextProps {
   title: UIBannerTextContentProps['title']
@@ -55,4 +57,10 @@ function BannerText({
   )
 }
 
-export default BannerText
+const OverridableBannerText = getOverridableSection<typeof BannerText>(
+  'BannerText',
+  BannerText,
+  BannerTextDefaultComponents
+)
+
+export default OverridableBannerText
diff --git a/packages/core/src/components/sections/BannerText/OverriddenDefaultBannerText.ts b/packages/core/src/components/sections/BannerText/OverriddenDefaultBannerText.ts
@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/BannerText'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import BannerText from '.'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default BannerText section present in the Headless CMS
  */
-export const OverriddenDefaultBannerText = getOverriddenSection(
-  override as SectionOverrideDefinition<'BannerText'>
-)
+export const OverriddenDefaultBannerText = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'BannerText'>),
+  Section: BannerText,
+})
diff --git a/packages/core/src/components/sections/Breadcrumb/Breadcrumb.tsx b/packages/core/src/components/sections/Breadcrumb/Breadcrumb.tsx
@@ -9,8 +9,10 @@ import {
   isPDP,
   isPLP,
   usePage,
-} from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { BreadcrumbDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 interface BreadcrumbSectionProps {
   icon: string
@@ -39,4 +41,8 @@ function BreadcrumbSection({ ...otherProps }: BreadcrumbSectionProps) {
   )
 }
 
-export default memo(BreadcrumbSection)
+const OverridableBreadcrumbSection = getOverridableSection<
+  typeof BreadcrumbSection
+>('Breadcrumb', BreadcrumbSection, BreadcrumbDefaultComponents)
+
+export default memo(OverridableBreadcrumbSection)
diff --git a/packages/core/src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb.ts b/packages/core/src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb.ts
@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/Breadcrumb'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import Breadcrumb from '.'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default Breadcrumb section present in the Headless CMS
  */
-export const OverriddenDefaultBreadcrumb = getOverriddenSection(
-  override as SectionOverrideDefinition<'Breadcrumb'>
-)
+export const OverriddenDefaultBreadcrumb = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Breadcrumb'>),
+  Section: Breadcrumb,
+})
diff --git a/packages/core/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx b/packages/core/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx
@@ -1,10 +1,12 @@
 import { useMemo } from 'react'
 
-import UIProductShelf from 'src/components/ui/ProductShelf'
+import UIProductShelf from '../../../components/ui/ProductShelf'
 import { useInView } from 'react-intersection-observer'
 import { usePDP } from 'src/sdk/overrides/PageProvider'
 import styles from '../ProductShelf/section.module.scss'
 import Section from '../Section'
+import { CrossSellingShelfDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 interface Props {
   numberOfItems: number
@@ -43,4 +45,8 @@ const CrossSellingShelf = ({
   )
 }
 
-export default CrossSellingShelf
+const OverridableCrossSellingShelf = getOverridableSection<
+  typeof CrossSellingShelf
+>('CrossSellingShelf', CrossSellingShelf, CrossSellingShelfDefaultComponents)
+
+export default OverridableCrossSellingShelf
diff --git a/...ages/core/src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf.ts b/...ages/core/src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf.ts
@@ -1,5 +1,6 @@
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import CrossSellingShelf from '.'
 
 export const OverriddenDefaultCrossSellingShelf = getOverriddenSection({
-  section: 'CrossSellingShelf',
+  Section: CrossSellingShelf,
 })
diff --git a/packages/core/src/components/sections/EmptyState/Overrides.tsx b/packages/core/src/components/sections/EmptyState/Overrides.tsx
@@ -2,13 +2,13 @@ import { EmptyState as UIEmptyState } from '@faststore/ui'
 
 import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/EmptyState'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 const { EmptyState } = getSectionOverrides(
   {
     EmptyState: UIEmptyState,
   },
-  override as SectionOverrideDefinition<'EmptyState'>
+  override as SectionOverrideDefinitionV1<'EmptyState'>
 )
 
 export { EmptyState }
diff --git a/packages/core/src/components/sections/Hero/Hero.tsx b/packages/core/src/components/sections/Hero/Hero.tsx
@@ -3,13 +3,15 @@ import {
   HeroHeaderProps as UIHeroHeaderProps,
 } from '@faststore/ui'
 import { ReactNode } from 'react'
-import { Image } from 'src/components/ui/Image'
+import { Image } from '../../../components/ui/Image'
 
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 
 import Section from '../Section'
 
 import styles from './section.module.scss'
+import { HeroDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export type HeroProps = {
   title: UIHeroHeaderProps['title']
@@ -74,4 +76,10 @@ const Hero = ({
   )
 }
 
-export default Hero
+const OverridableHero = getOverridableSection<typeof Hero>(
+  'Hero',
+  Hero,
+  HeroDefaultComponents
+)
+
+export default OverridableHero
diff --git a/packages/core/src/components/sections/Hero/OverriddenDefaultHero.ts b/packages/core/src/components/sections/Hero/OverriddenDefaultHero.ts
@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/Hero'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import Hero from '.'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default Hero section present in the Headless CMS
  */
-export const OverriddenDefaultHero = getOverriddenSection(
-  override as SectionOverrideDefinition<'Hero'>
-)
+export const OverriddenDefaultHero = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Hero'>),
+  Section: Hero,
+})
diff --git a/packages/core/src/components/sections/Navbar/Navbar.tsx b/packages/core/src/components/sections/Navbar/Navbar.tsx
@@ -1,8 +1,10 @@
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 import Section from '../Section'
 
 import styles from './section.module.scss'
 
-import Navbar from 'src/components/navigation/Navbar'
+import Navbar from '../../../components/navigation/Navbar'
+import { NavbarDefaultComponents } from './DefaultComponents'
 
 type PageLinks = {
   url: string
@@ -91,4 +93,10 @@ function NavbarSection({
   )
 }
 
-export default NavbarSection
+const OverridableNavbar = getOverridableSection<typeof NavbarSection>(
+  'Navbar',
+  NavbarSection,
+  NavbarDefaultComponents
+)
+
+export default OverridableNavbar
diff --git a/packages/core/src/components/sections/Navbar/OverriddenDefaultNavbar.ts b/packages/core/src/components/sections/Navbar/OverriddenDefaultNavbar.ts
@@ -1,12 +1,14 @@
 import { override } from 'src/customizations/src/components/overrides/Navbar'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import Navbar from './Navbar'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default Navbar section present in the Headless CMS
  */
-export const OverriddenDefaultNavbar = getOverriddenSection(
-  override as SectionOverrideDefinition<'Navbar'>
-)
+export const OverriddenDefaultNavbar = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Navbar'>),
+  Section: Navbar,
+})
diff --git a/packages/core/src/components/sections/Newsletter/Newsletter.tsx b/packages/core/src/components/sections/Newsletter/Newsletter.tsx
@@ -4,10 +4,12 @@ import {
   NewsletterHeaderProps as UINewsletterHeaderProps,
 } from '@faststore/ui'
 
-import UINewsletter from 'src/components/ui/Newsletter'
+import UINewsletter from '../../ui/Newsletter'
 
 import Section from '../Section'
 import styles from './section.module.scss'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
+import { NewsletterDefaultComponents } from './DefaultComponents'
 
 type SubscribeMessage = {
   icon: string
@@ -111,4 +113,10 @@ function Newsletter({
   )
 }
 
-export default Newsletter
+const OverridableNewsletter = getOverridableSection<typeof Newsletter>(
+  'Newsletter',
+  Newsletter,
+  NewsletterDefaultComponents
+)
+
+export default OverridableNewsletter
diff --git a/packages/core/src/components/sections/Newsletter/OverriddenDefaultNewsletter.ts b/packages/core/src/components/sections/Newsletter/OverriddenDefaultNewsletter.ts
@@ -1,12 +1,14 @@
 import { override } from 'src/customizations/src/components/overrides/Newsletter'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import Newsletter from './Newsletter'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default Newsletter section present in the Headless CMS
  */
-export const OverriddenDefaultNewsletter = getOverriddenSection(
-  override as SectionOverrideDefinition<'Newsletter'>
-)
+export const OverriddenDefaultNewsletter = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Newsletter'>),
+  Section: Newsletter,
+})
diff --git a/packages/core/src/components/sections/ProductDetails/OverriddenDefaultProductDetails.ts b/packages/core/src/components/sections/ProductDetails/OverriddenDefaultProductDetails.ts
@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/ProductDetails'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import ProductDetails from './ProductDetails'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default ProductDetails section present in the Headless CMS
  */
-export const OverriddenDefaultProductDetails = getOverriddenSection(
-  override as SectionOverrideDefinition<'ProductDetails'>
-)
+export const OverriddenDefaultProductDetails = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'ProductDetails'>),
+  Section: ProductDetails,
+})
diff --git a/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx b/packages/core/src/components/sections/ProductDetails/ProductDetails.tsx
@@ -4,18 +4,20 @@ import { gql } from '@faststore/graphql-utils'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 
-import type { AnalyticsItem } from 'src/sdk/analytics/types'
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import { useSession } from 'src/sdk/session'
+import type { AnalyticsItem } from '../../../sdk/analytics/types'
+import { useFormattedPrice } from '../../../sdk/product/useFormattedPrice'
+import { useSession } from '../../../sdk/session'
 
 import Section from '../Section'
-import ProductDescription from 'src/components/ui/ProductDescription'
-import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
+import ProductDescription from '../../../components/ui/ProductDescription'
+import { ProductDetailsSettings } from '../../../components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
-import { usePDP } from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { usePDP } from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { ProductDetailsDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -280,4 +282,10 @@ export const fragment = gql`
   }
 `
 
-export default ProductDetails
+const OverridableProductDetails = getOverridableSection<typeof ProductDetails>(
+  'ProductDetails',
+  ProductDetails,
+  ProductDetailsDefaultComponents
+)
+
+export default OverridableProductDetails