27.2.0 - Support retrieving custom image variants

Key Changes

Improvement

• Added getVariant() and getVariants() methods to ImageSet to support retrieving custom image variants
  Usage examples:

const imageSet: ImageSet = imageRef && page.getContent<ImageSet>(imageRef);

// retrieves a specific variant
const smallImage: Image = imageSet.getVariant('small');
smallImage.getHeight();

// retrieves a map of all variants 
const allVariants: Record<string, Image> = imageSet.getVariants();
allVariants['small'].getHeight();

// retrieves a map of specific variants. Then to get the height of the small image:
const variants: Record<string, Image> = imageSet.getVariants(['small', 'large']);
variants['small'].getHeight();

Full Changelog: spa-sdk-27.1.0...spa-sdk-27.2.0

27.1.0 - Angular 21 and Nuxt 4 support

Key Changes

Improvement

• Added support for Angular 21 in ng-sdk
• Updated example/nuxt app to Nuxt 4

Bug Fixes

• Fixed a bug in vue-sdk that caused component rendering issues when using pagination

Full Changelog: spa-sdk-27.0.0...spa-sdk-27.1.0

27.0.0 - React Server Components (RSC) support

🔧 Key Changes

• Added a new package, @bloomreach/react-sdk/server, which provides support for React Server Components (RSC). It exports the following components:
  • BrPageServer: BrPage component with RSC support.
  • BrComponentServer: BrComponent component with RSC support.
  • BrProps and BrMapping: Same interfaces as from the default package (@bloomreach/react-sdk). Re-exported for your convenience.
• To maintain support for the Experience Manager, and for backwards compatibility, BrPage and BrComponent components from the default package remain as client components. If you are not going to use RSC, you don't need to make any changes.
• The default package sets a client-server boundary by using the use client directive. Therefore, it's possible to render your own mapped components as both server and client components. For example, you don't have to write two versions of the same components for live site and the Experience Manager. For this reason, you should not mix-use components from default and server packages (BrPage and BrPageServer, for example) in the same tsx file.
• Added a new property isClientComponent to BrProps. You can use it to tell if the current component is within a client boundary. Useful for conditionally render client-only components. For example, BrManageContentButton.
• Please refer to the README file for details on how to use the new server components. You can also check the example/next app for an example implementation.

Full Changelog: spa-sdk-26.0.1...spa-sdk-27.0.0

26.0.1 - Support refPrefix query parameter of the PDA

Added support for the refPrefix PDA query parameter:
https://xmdocumentation.bloomreach.com/library/concepts/page-model-api/page-model-api-v1.0.html

Configuration example

  let configuration: Configuration = {
    path: `${location.pathname}${location.search}`,
    endpoint: process.env.REACT_APP_BRXM_ENDPOINT,
    httpClient: axios,
    debug: true,
    refPrefix: "//",
  };

Changelog: spa-sdk-26.0.0...spa-sdk-26.0.1

Release v26.0.0 - Remove React Context usages

⚠️ Breaking Changes

This is a major breaking change that requires migration:

• Removed: All React Context APIs (BrPageContext, BrComponentContext, BrMappingContext)
• Required: All components now require page and mapping props (except for BrPage itself).
• New: Render props pattern for BrPage and BrComponent instead of React Context

📝 Migration Example
Component Props:

  // Before
  function Banner({ component }: BrProps) {
    const page = useContext(BrPageContext);
  }

  // After  
  function Banner({ component, page, mapping }: BrProps) {
    // page and mapping are now required props
  }

Page property access:

  // Before
  <BrPageContext.Consumer>
    {(page) => page && <div>{page.getTitle()}</div>}
  </BrPageContext.Consumer>

  // After - using render props
  <BrPage configuration={configuration} mapping={mapping}>
    {({ page }) => (
      <>
        {page && <h1>{page.getTitle()}</h1>}
        <BrComponent path="main" page={page!} mapping={mapping} component={component} />
      </>
    )}
  </BrPage>

🔧 Key Changes

• BrPage now uses render props pattern for page data access
• All SDK components require explicit page and mapping props
• TypeScript interfaces enforce required props at compile time

25.0.0 Angular 20 and React Functional Components

🚀 What's New

• Angular 20 Support: Upgraded from Angular 18 to 20 with full compatibility
• React Modernization: Converted class components to functional components for better performance
• Node.js 20: Updated minimum Node.js requirement from v18 to v20

🛠️ Improvements

• Enhanced event bus subscription lifecycle management
• Simplified page cleanup and initialization

BREAKING CHANGE:
The reason for a major version bump is because with the changed page cleanup and initialization we have now enforced the limitation of having only 1 BrPage component per view/route. This was already the case as the channel manager preview would not work with multiple BrPage components, but with the new page cleanup logic this is now ensured so no lingering pages and event listeners are leaking over time.

24.1.2 - React StrictMode now usable

React StrictMode renders all components twice. It is supposed to mount, unmount and remount each component.
Currently next.js has an open bug on the way StrictMode is executed:
vercel/next.js#65655

This meant the BrPage component called the initialize method of the core SDK twice without calling destroy in between, which lead to a memory leak and preview integration errors.

We refactored the SPA SDK such that initialize will ensure the cleanup of previous listeners when its called.

This also means that you can only have a singular BrPage component on a route/page. This previously did not work either in the preview, and really does not make sense to do anyway, but is now a clear restriction and documented in the README as such.

24.1.0 - Support for React 19

• Updated React SDK to make it compatible with React 19
• Update Docs, React example, Next example to React 19 and Next 15

24.0.1 - Fix issues in vue-sdk and Vue SSR app

• Fix 500 issue in Nuxt example app
• Fix a bug in vue-sdk that does not update its meta tags when a container item gets updated
• Fix security vulnerabilities

24.0.0 - Support for Angular 18

• Update ng-sdk and Angular example app to Angular 18
• Drop support for lower Angular versions (< 18) in ng-sdk due to incompatible changes