[sitecore-jss-react] [Editing Integration] Add support for chrome hydration for Placeholders

CHANGELOG.md

@@ -11,6 +11,10 @@ Our versioning strategy is as follows:
 
 ## Unreleased
 
+### 🎉 New Features & Improvements
+* `[sitecore-jss-react]` `[sitecore-jss]` Editing Integration Support:
+  * Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata. ([#1776](https://github.com/Sitecore/jss/pull/1776))
+
 ## 21.7.1
 
 ### 🐛 Bug Fixes

packages/sitecore-jss-nextjs/src/index.ts

@@ -79,6 +79,7 @@ export {
   EDITING_COMPONENT_PLACEHOLDER,
   EDITING_COMPONENT_ID,
   getContentStylesheetLink,
+  EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export {

packages/sitecore-jss-react/src/components/Placeholder.test.tsx

@@ -2,7 +2,11 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
+import {
+  ComponentRendering,
+  LayoutServiceData,
+  RouteData,
+} from '@sitecore-jss/sitecore-jss/layout';
 import { expect } from 'chai';
 import { mount, shallow } from 'enzyme';
 import PropTypes from 'prop-types';
@@ -12,6 +16,7 @@ import { convertedData as eeData, emptyPlaceholderData } from '../test-data/ee-d
 import {
   byocWrapperData,
   feaasWrapperData,
+  layoutDataWithMetadata,
   convertedDevData as nonEeDevData,
   convertedLayoutServiceData as nonEeLsData,
   sxaRenderingColumnSplitterVariant,
@@ -31,6 +36,7 @@ import { Placeholder } from './Placeholder';
 import { ComponentProps } from './PlaceholderCommon';
 import { SitecoreContext } from './SitecoreContext';
 import { ComponentFactory } from './sharedTypes';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
 
 const componentFactory: ComponentFactory = (componentName: string) => {
   const components = new Map<string, React.FC>();
@@ -101,9 +107,13 @@ describe('<Placeholder />', () => {
         const phKey = 'page-content';
 
         const renderedComponent = mount(
-          <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+          <SitecoreContext componentFactory={componentFactory}>
+            <Placeholder name={phKey} rendering={component} />
+          </SitecoreContext>
         );
 
+        console.log(renderedComponent.debug());
+
         expect(renderedComponent.find('.download-callout-mock').length).to.equal(1);
       });
 
@@ -300,7 +310,9 @@ describe('<Placeholder />', () => {
       const phKey = 'main';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -318,7 +330,9 @@ describe('<Placeholder />', () => {
       const phKey = 'container-1';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -334,7 +348,9 @@ describe('<Placeholder />', () => {
       const phKey = 'richText';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(0);
@@ -346,7 +362,9 @@ describe('<Placeholder />', () => {
       const phKey = 'dynamic-1-{*}';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -362,7 +380,9 @@ describe('<Placeholder />', () => {
       const phKey = 'main-second';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -377,7 +397,9 @@ describe('<Placeholder />', () => {
       const phKey = 'column-1-{*}';
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
@@ -410,7 +432,9 @@ describe('<Placeholder />', () => {
       ));
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.byoc-component').length).to.equal(2);
@@ -443,7 +467,9 @@ describe('<Placeholder />', () => {
       ));
 
       const renderedComponent = mount(
-        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+        <SitecoreContext componentFactory={componentFactory}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
       );
 
       expect(renderedComponent.find('.feaas-component').length).to.equal(2);
@@ -459,7 +485,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={component} />
+      </SitecoreContext>
     );
 
     const eeChrome = renderedComponent.find({ chrometype: 'placeholder', kind: 'open', id: phKey });
@@ -473,11 +501,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder
-        name={phKey}
-        rendering={emptyPlaceholderData.sitecore.route}
-        componentFactory={componentFactory}
-      />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={emptyPlaceholderData.sitecore.route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.sc-jss-empty-placeholder').length).to.equal(1);
   });
@@ -495,7 +521,9 @@ describe('<Placeholder />', () => {
     const phKey = 'unknown';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.html()).to.be.empty;
   });
@@ -529,7 +557,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1);
   });
@@ -540,7 +570,9 @@ describe('<Placeholder />', () => {
 
       const Home: React.FC<{ rendering?: RouteData }> = ({ rendering }) => (
         <div className="home-mock">
-          <Placeholder name="main" rendering={rendering} />
+          <SitecoreContext componentFactory={componentFactory}>
+            <Placeholder name="main" rendering={rendering} />
+          </SitecoreContext>
         </div>
       );
 
@@ -565,12 +597,9 @@ describe('<Placeholder />', () => {
     const phKey = 'main';
 
     const renderedComponent = mount(
-      <Placeholder
-        name={phKey}
-        rendering={route}
-        componentFactory={componentFactory}
-        errorComponent={CustomError}
-      />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} errorComponent={CustomError} />
+      </SitecoreContext>
     );
     expect(renderedComponent.find('.custom-error').length).to.equal(1);
   });
@@ -595,12 +624,13 @@ it('should render MissingComponent for unknown rendering', () => {
   );
 
   const renderedComponent = mount(
-    <Placeholder
-      name={phKey}
-      rendering={route}
-      componentFactory={componentFactory}
-      missingComponentComponent={CustomMissingComponent}
-    />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder
+        name={phKey}
+        rendering={route}
+        missingComponentComponent={CustomMissingComponent}
+      />
+    </SitecoreContext>
   );
   expect(renderedComponent.find('.missing-component').length).to.equal(1);
 });
@@ -633,7 +663,9 @@ it('should render nothing for rendering without a name', () => {
 
   const renderedComponent = mount(
     <div className="empty-test">
-      <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+      <SitecoreContext componentFactory={componentFactory}>
+        <Placeholder name={phKey} rendering={route} />
+      </SitecoreContext>
     </div>
   );
   expect(renderedComponent.children().length).to.equal(1);
@@ -652,7 +684,9 @@ it('should render HiddenRendering when rendering is hidden', () => {
   const phKey = 'main';
 
   const renderedComponent = mount(
-    <Placeholder name={phKey} rendering={route} componentFactory={componentFactory} />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder name={phKey} rendering={route} />
+    </SitecoreContext>
   );
   expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
 });
@@ -677,18 +711,46 @@ it('should render custom HiddenRendering when rendering is hidden', () => {
   );
 
   const renderedComponent = mount(
-    <Placeholder
-      name={phKey}
-      rendering={route}
-      componentFactory={componentFactory}
-      hiddenRenderingComponent={CustomHiddenRendering}
-    />
+    <SitecoreContext componentFactory={componentFactory}>
+      <Placeholder
+        name={phKey}
+        rendering={route}
+        hiddenRenderingComponent={CustomHiddenRendering}
+      />
+    </SitecoreContext>
   );
   expect(renderedComponent.find('.hidden-rendering').length).to.equal(1);
   expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
   expect(renderedComponent.find('p').props().children).to.equal('Hidden Rendering');
 });
 
+const testDataWithoutEE = [
+  { label: 'Dev data', data: nonEeDevData },
+  { label: 'LayoutService data - EE off', data: nonEeLsData },
+];
+
+testDataWithoutEE.forEach((dataSet) => {
+  describe(`with ${dataSet.label}`, () => {
+    it('renders <PlaceholderMetadata> when editMode is Metadata', () => {
+      const component = ((dataSet.data.sitecore.route.placeholders.main as unknown) as (
+        | ComponentRendering
+        | RouteData
+      )[]).find((c) => (c as ComponentRendering).componentName);
+      const phKey = 'page-content';
+
+      const mockLayoutData: LayoutServiceData = layoutDataWithMetadata;
+
+      const renderedComponent = mount(
+        <SitecoreContext componentFactory={componentFactory} layoutData={mockLayoutData}>
+          <Placeholder name={phKey} rendering={component} />
+        </SitecoreContext>
+      );
+
+      expect(renderedComponent.find(PlaceholderMetadata).length).to.equal(1);
+    });
+  });
+});
+
 after(() => {
   (global as any).window.close();
 });

packages/sitecore-jss-react/src/components/Placeholder.tsx

@@ -3,6 +3,7 @@ import { PlaceholderCommon, PlaceholderProps } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 
 export interface PlaceholderComponentProps extends PlaceholderProps {
   /**
@@ -120,4 +121,8 @@ class PlaceholderComponent extends PlaceholderCommon<PlaceholderComponentProps>
   }
 }
 
-export const Placeholder = withComponentFactory(PlaceholderComponent);
+const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
+
+export const Placeholder = withSitecoreContext()<PlaceholderComponentProps>(
+  PlaceholderWithComponentFactory
+);

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx

@@ -8,13 +8,16 @@ import {
   Field,
   Item,
   HtmlElementRendering,
+  EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
 import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
 import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
 import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
+import { SitecoreContextValue } from './SitecoreContext';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
 
 type ErrorComponentProps = {
   [prop: string]: unknown;
@@ -74,6 +77,10 @@ export interface PlaceholderProps {
    * the placeholder
    */
   errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+  /**
+   *  Context data from the Sitecore Layout Service
+   */
+  sitecoreContext: SitecoreContextValue;
 }
 
 export class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
@@ -102,6 +109,7 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
       PropTypes.func as Requireable<React.FC<unknown>>,
     ]),
     modifyComponentProps: PropTypes.func,
+    sitecoreContext: PropTypes.object.isRequired,
   };
 
   nodeRefs: Element[];
@@ -193,6 +201,11 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
           : `component-${index}`;
         const commonProps = { key };
 
+        // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
+        if (this.props.sitecoreContext?.editMode === EditMode.Metadata) {
+          return <PlaceholderMetadata key={key} rendering={rendering as ComponentRendering} />;
+        }
+
         // if the element is not a 'component rendering', render it 'raw'
         if (
           !(rendering as ComponentRendering).componentName &&