Sitecore/jss v22.1.0

22.1.0

on GitHub

22.1.0

🐛 Bug Fixes

• [templates/nextjs] [templates/react] [templates/vue] [templates/angular] Changed formatting in temp/config to prevent parse issues in Unix systems (#1787)(#1791)
• [sitecore-jss] GraphQLRequestClientFactory type is updated and config parameter is now optional. Since it should match GraphQLRequestClient.createClientFactory method return type (#1806)
• [templates/nextjs-sxa] The banner variant of image component is fixed with supporting metadata mode. (#1826)
• [sitecore-jss] [sitecore-jss-react] DateField empty value is not treated as empty (#1836)
• [templates/nextjs-sxa] Fix styles of title component in metadata mode. (#1839)
• [templates/nextjs-sxa] Fix missing value of field property in Title component. (#1842)
• [templates/nextjs-sxa] The background image in the Container component was being generated from the image ID instead of the mediaUrl parameter. This fix changes that behavior. (#1879)
• [templates/nextjs-sxa] The caption of image component has been fixed. (#1874)
• [sitecore-jss-nextjs] A bug has been fixed in the redirect middleware that occurred when a user clicked on a link rendered by the Link component from the Next.js library(next/link). (#1876) (#1891) (#1893)(#1895)
• [sitecore-jss-nextjs] Disable nextjs image optimization in edit and preview modes. This prevents rendering issues in XM Cloud Pages Edit and Preview.

🎉 New Features & Improvements

• [sitecore-jss-react] Introduce ErrorBoundary component. All rendered components are wrapped with it and it will catch client or server side errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. (#1786)(#1790)(#1793)(#1794)(#1799)(#1807)(#1829)
• [sitecore-jss-nextjs] Enforce CORS policy that matches Sitecore Pages domains for editing middleware API endpoints (#1798#1801)
• [sitecore-jss] GraphQLRequestClient now can accept custom 'headers' in the constructor or via createClientFactory (#1806)
• [templates/nextjs] Removed cors header for API endpoints from lib/next-config/plugins/cors-header plugin since cors is handled by API handlers / middlewares (#1806)
• [sitecore-jss-nextjs] Updates to Next.js editing integration to further support secure hosting scenarios (on XM Cloud & Vercel) (#1832)
• [templates/nextjs-xmcloud] [sitecore-jss] JSS is now ready to support A/B testing and component-level personalization. This feature will be enabled in Pages after the current release. (#1844)(#1847)(#1848)
• [sitecore-jss] [nextjs-xmcloud] DictionaryService can now use a site GraphQL query instead of search one to improve performance. This is currently only available for XMCloud deployments and is enabled with nextjs-xmcloud add-on by default (#1804)(#1846)(commit)(commit)(commit)(commit)
• [templates/nextjs-sxa] SXA components now use the NextImage component instead of the Image component from JSS lib for image optimization (#1843)(#1850)(#1860)
• [sitecore-jss-react] [sitecore-jss-nextjs] [sitecore-jss-angular] [sitecore-jss-vue] The default Hidden Rendering component now contains the text 'The component is hidden' (#1857)

🛠 Breaking Change

• Editing Integration Support: (#1776)(#1792)(#1773)(#1797)(#1800)(#1803)(#1806)(#1809)(#1814)(#1816)(#1819)(#1828)(#1835)(#1849)(#1831)(#1853)(#1854)(#1857)(#1862)(#1883)
  • [sitecore-jss-react] Introduces PlaceholderMetadata component which supports the hydration of chromes on Pages by rendering the components and placeholders with required metadata.
  • [sitecore-jss] Chromes are hydrated based on the basis of new editMode property derived from LayoutData, which is defined as an enum consisting of metadata and chromes.
  • ComponentConsumerProps is removed. You might need to reuse WithSitecoreContextProps type.
  • [sitecore-jss-react] [sitecore-jss-nextjs] Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs.
  • [sitecore-jss-react] Introduced EditingScripts component to render clientScripts / clientData in editing.
  • [sitecore-jss-nextjs] [template/nextjs-xmlcoud] Add editMode to /editing/config endpoint response with configurable integration option.
  • [sitecore-jss-nextjs] Integrated a new Metadata Edit Mode in /api/editing/render endpoint.
    • Exported new EditingMetadataPreviewData type and isEditingMetadataPreviewData guard function.
  • [sitecore-jss] Introduced GraphQLEditingService class to fetch editing data in Metadata Edit Mode.
  • [templates/nextjs-xmcloud] Introduced /lib/graphql-editing-service to fetch editing data in Metadata Edit Mode.
  • [templates/nextjs-xmcloud] Added a new page-props-factory/plugins/preview-mode plugin to handle both Chromes and Metadata Edit Mode.
  • [sitecore-jss] layout-personalizer will mark components hidden by personalization by setting 'Hidden Rendering' component name in Metadata edit mode
• [sitecore-jss] Introduced /editing submodule that contains all editing related functionality. Editing utils are now available in /editing submodule. Editing utils exported from /utils marked as deprecated. (#1806)
• [sitecore-jss-nextjs] EditingRenderMiddleware resolvePageUrl function now accepts an object (args: { serverUrl?: string; itemPath: string }) => string instead of multiple parameters (serverUrl: string, itemPath: string) => string. serverUrl is now optional and omitted when Metadata Edit Mode is used.
• [templates/nextjs] [sitecore-jss-nextjs] [sitecore-jss] Remove Partial rendering implementation as it will not be used by Pages in its current implementation - includes removing of EditingComponentPlaceholder component, few constants associated with it and RenderingType enum (#1821)
• [sitecore-jss-angular] [sitecore-jss-schematics] [templates/angular] Upgrade Angular to v17 (#1837) (#1841)
  • Updated Angular and core dependencies to ~17.3.11
  • Updated Typescript to ~5.2.2
  • Updated import statements from zone.js/dist/zone-node to zone.js
• [sitecore-jss/personalize] [sitecore-jss-nextjs] CdpHelper.getPersonalizedRewrite signature changed to accept variantIds: string[] as second parameter. CdpHelper.getContentId was renamed to CdpHelper.getPageFriendlyId. (#1848)

🧹 Chores

• Update node/types to version 20 in all packages and samples (#1810)
• Github - Teams integration (#1823)
• [nextjs] Add sharp dependency to be in-line with nextjs's Image Optimizaion best practices: https://nextjs.org/docs/messages/install-sharp