@faststore/core 2.2.70 → 2.2.71

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

@@ -1,12 +1,14 @@
 import { override } from 'src/customizations/src/components/overrides/RegionBar'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import RegionBar from '.'
 
 /**
  * This component exists to support overrides 1.0
  *
  * This allows users to override the default RegionBar section present in the Headless CMS
  */
-export const OverriddenDefaultRegionBar = getOverriddenSection(
-  override as SectionOverrideDefinition<'RegionBar'>
-)
+export const OverriddenDefaultRegionBar = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'RegionBar'>),
+  Section: RegionBar,
+})

package/src/components/sections/RegionBar/RegionBar.tsx

@@ -1,8 +1,8 @@
-import RegionBar, {
-  RegionBarProps,
-} from 'src/components/region/RegionBar/RegionBar'
-import Section from 'src/components/sections/Section/Section'
+import RegionBar, { RegionBarProps } from '../../region/RegionBar/RegionBar'
+import Section from '../Section/Section'
 import styles from './section.module.scss'
+import { RegionBarDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
 
 type RegionBarSectionProps = {
   /**
@@ -38,4 +38,10 @@ function RegionBarSection({
   )
 }
 
-export default RegionBarSection
+const OverridableRegionBar = getOverridableSection<typeof RegionBarSection>(
+  'RegionBar',
+  RegionBarSection,
+  RegionBarDefaultComponents
+)
+
+export default OverridableRegionBar

package/src/sdk/overrides/getOverriddenSection.tsx

@@ -1,44 +1,52 @@
-import type { ComponentProps, ComponentType } from 'react'
+import { useMemo, type ComponentProps, type ComponentType } from 'react'
 
-import { OverrideProvider } from './OverrideContext'
-import { DefaultComponents, Sections } from './sections'
-import { getSectionOverrides } from './overrides'
 import type {
   DefaultSectionComponentsDefinitions,
-  OverriddenComponents,
   SectionOverrideDefinition,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
-import type { SupportedSectionsOverridesV2 } from '../../typings/overrides'
-
-/**
- * This function adds OverrideContext to the tree. It is essential for the compatible sections
- * to consume the components it provides.
- */
-function createOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->({
-  Section,
-  sectionOverrides,
-  className,
-}: {
-  Section: (typeof Sections)[SectionName]
-  sectionOverrides: OverriddenComponents<SectionName>
-  className?: string
-}) {
-  const overrideContextValue = { className, components: sectionOverrides }
+import type { SectionsOverrides } from '../../typings/overrides'
+import { getSectionOverrides } from './overrides'
+import { OverrideProvider } from './OverrideContext'
 
-  return function OverriddenSection(
-    props: React.ComponentProps<typeof Section>
+export function getOverridableSection<
+  Section extends ComponentType,
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+>(
+  sectionName: SectionName,
+  Section: Section,
+  defaultComponents: DefaultSectionComponentsDefinitions<SectionName>
+) {
+  function OverridableSection(
+    propsWithOverrides: ComponentProps<typeof Section> & {
+      __overrides?: Omit<SectionOverrideDefinitionV1<SectionName>, 'Section'>
+    }
   ) {
+    const { __overrides: overrides, ...props } = propsWithOverrides
+
+    const overrideContextValue = useMemo(
+      () => ({
+        ...(overrides ?? {}),
+        components: getSectionOverrides<SectionName>(defaultComponents, {
+          ...(overrides ?? {}),
+          section: sectionName,
+        }),
+      }),
+      [overrides]
+    )
+
     /** This type wizardry is here because the props won't behave correctly if nothing is done */
-    const SectionComponent = Section as ComponentType<typeof props>
+    const SectionComponent = Section as ComponentType<ComponentProps<Section>>
 
     return (
       <OverrideProvider value={overrideContextValue}>
-        <SectionComponent {...props} />
+        <SectionComponent {...(props as ComponentProps<typeof Section>)} />
       </OverrideProvider>
     )
   }
+
+  // This type cast is here so the symbol prop doesn't show up in the type definition
+  return OverridableSection as Section
 }
 
 /**
@@ -50,23 +58,16 @@ function createOverriddenSection<
  * @see https://www.faststore.dev/docs/building-sections/overriding-components-and-props
  */
 export function getOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->(override: SectionOverrideDefinition<SectionName>) {
-  const defaultComponents = DefaultComponents[
-    override.section
-  ] as DefaultSectionComponentsDefinitions<SectionName>
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+>(override: SectionOverrideDefinition<Section>) {
+  const { Section, ...rest } = override
 
-  if (!defaultComponents) {
-    throw new Error(
-      `Section ${override.section} does not exist. Please provide a valid section name to override.`
-    )
-  }
+  /** This type wizardry is here because the props won't behave correctly if nothing is done */
+  const OverridableSection = Section as ComponentType<ComponentProps<Section>>
 
-  const sectionOverrides = getSectionOverrides(defaultComponents, override)
-
-  return createOverriddenSection({
-    Section: Sections[override.section],
-    sectionOverrides: sectionOverrides,
-    className: override.className,
-  })
+  return function OverriddenSection(
+    props: ComponentProps<typeof OverridableSection>
+  ) {
+    return <OverridableSection {...props} {...{ __overrides: rest }} />
+  }
 }

package/src/sdk/overrides/overrides.ts

@@ -1,8 +1,8 @@
 import type {
   DefaultSectionComponentsDefinitions,
   ComponentOverrideDefinition,
-  SectionOverrideDefinition,
   OverriddenComponents,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
 
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -11,7 +11,7 @@ export function getSectionOverrides<
   SectionName extends keyof SectionsOverrides
 >(
   defaultComponents: DefaultSectionComponentsDefinitions<SectionName>,
-  override: SectionOverrideDefinition<SectionName>
+  override: SectionOverrideDefinitionV1<SectionName>
 ): OverriddenComponents<SectionName> {
   const overriddenComponents = {} as OverriddenComponents<SectionName>