[sitecore-jss-react] [sitecore-jss-nextjs] Add support for chrome's hydration for fields

CHANGELOG.md

@@ -11,6 +11,9 @@ Our versioning strategy is as follows:
 
 ## Unreleased
 
+### 🎉 New Features & Improvements
+* `[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 FieldMetadaComponent should be rendered instead of the actual field component to enable chrome's hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) 
+
 ## 21.7.1
 
 ### 🐛 Bug Fixes

packages/sitecore-jss-nextjs/src/components/Link.test.tsx

@@ -360,4 +360,39 @@ describe('<Link />', () => {
     const rendered = mount(<Link field={field} />).children();
     expect(rendered).to.have.length(0);
   });
+
+  it('should render field metadata component when metadata property is present', () => {
+    const field = {
+      value: {
+        href: '/lorem',
+        text: 'ipsum',
+        class: 'my-link',
+      },
+    };
+
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'single-line',
+      rawValue: 'Test1',
+    };
+
+    const rendered = mount(
+      <Page>
+        <Link field={field} metadata={testMetadata} />
+      </Page>
+    );
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.not.contain(`href="${field.value.href}"`);
+    expect(rendered.find(NextLink).length).to.equal(0);
+    expect(rendered.find(ReactLink).length).to.equal(0);
+  });
 });

packages/sitecore-jss-nextjs/src/components/Link.tsx

@@ -7,6 +7,7 @@ import {
   LinkField,
   LinkProps as ReactLinkProps,
   LinkPropTypes,
+  getFieldMetadataMarkup,
 } from '@sitecore-jss/sitecore-jss-react';
 
 export type LinkProps = ReactLinkProps & {
@@ -22,6 +23,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const {
       field,
       editable,
+      metadata,
       children,
       internalLinkMatcher = /^\//g,
       showLinkTextWithChildrenPresent,
@@ -35,6 +37,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       return null;
     }
 
+    // when metadata is present, render it to be used for chrome hydration
+    if (metadata) {
+      return getFieldMetadataMarkup(metadata, children);
+    }
+
     const value = ((field as LinkFieldValue).href
       ? field
       : (field as LinkField).value) as LinkFieldValue;

packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx

@@ -283,4 +283,27 @@ describe('<NextImage />', () => {
       );
     });
   });
+
+  it('should render field metadata component when metadata property is present', () => {
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'image',
+      rawValue: 'Test1',
+    };
+
+    const field = { value: { src: '/assets/img/test0.png', alt: 'my image' } };
+
+    const rendered = mount(<NextImage field={field} metadata={testMetadata} />);
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.find('img')).to.have.length(0);
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+  });
 });

packages/sitecore-jss-nextjs/src/components/NextImage.tsx

@@ -1,12 +1,12 @@
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import {
   getEEMarkup,
   ImageProps,
   ImageField,
   ImageFieldValue,
+  getFieldMetadataMarkup,
 } from '@sitecore-jss/sitecore-jss-react';
 import Image, { ImageProps as NextImageProperties } from 'next/image';
 
@@ -16,6 +16,7 @@ export const NextImage: React.FC<NextImageProps> = ({
   editable,
   imageParams,
   field,
+  metadata,
   mediaUrlPrefix,
   fill,
   priority,
@@ -36,6 +37,11 @@ export const NextImage: React.FC<NextImageProps> = ({
     return null;
   }
 
+  // when metadata is present, render it to be used for chrome hydration
+  if (metadata) {
+    return getFieldMetadataMarkup(metadata, otherProps.children);
+  }
+
   const imageField = dynamicMedia as ImageField;
 
   // we likely have an experience editor value, should be a string

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-expressions */
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { DateField } from './Date';
 
@@ -81,4 +81,29 @@ describe('<DateField />', () => {
 
     expect(c.html()).equal('<span><h1 class="super">11-23-2001</h1></span>');
   });
+
+  it('should render field metadata component when metadata property is present', () => {
+    const props = {
+      field: {
+        value: '23-11-2001',
+      },
+      metadata: {
+        contextItem: {
+          id: '{09A07660-6834-476C-B93B-584248D3003B}',
+          language: 'en',
+          revision: 'a0b36ce0a7db49418edf90eb9621e145',
+          version: 1,
+        },
+        fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+        fieldType: 'date',
+        rawValue: 'Test1',
+      },
+    };
+
+    const rendered = mount(<DateField {...props} />);
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+  });
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface DateFieldProps {
   /** The date field data. */
@@ -19,11 +20,16 @@ export interface DateFieldProps {
    */
   editable?: boolean;
   render?: (date: Date | null) => React.ReactNode;
+  /**
+   * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages
+   */
+  metadata?: FieldMetadata;
 }
 
 export const DateField: React.FC<DateFieldProps> = ({
   field,
   tag,
+  metadata,
   editable,
   render,
   ...otherProps
@@ -32,6 +38,11 @@ export const DateField: React.FC<DateFieldProps> = ({
     return null;
   }
 
+  // when metadata is present, render it to be used for chrome hydration
+  if (metadata) {
+    return getFieldMetadataMarkup(metadata, otherProps.children);
+  }
+
   let children: React.ReactNode;
 
   const htmlProps: {
@@ -64,6 +75,17 @@ DateField.propTypes = {
     editable: PropTypes.string,
   }).isRequired,
   tag: PropTypes.string,
+  metadata: PropTypes.shape({
+    contextItem: PropTypes.shape({
+      id: PropTypes.string,
+      language: PropTypes.string,
+      revision: PropTypes.string,
+      version: PropTypes.number,
+    }),
+    fieldId: PropTypes.string,
+    fieldType: PropTypes.string,
+    rawValue: PropTypes.string,
+  }),
   editable: PropTypes.bool,
   render: PropTypes.func,
 };

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

@@ -0,0 +1,114 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { expect } from 'chai';
+import { mount, render } from 'enzyme';
+
+import {
+  FieldMetadataComponent,
+  FieldMetadataComponentProps,
+  getFieldMetadataMarkup,
+} from './FieldMetadata';
+import { describe } from 'node:test';
+import { json } from 'stream/consumers';
+
+describe('<FieldMetadataComponent />', () => {
+  const testMetadata = {
+    contextItem: {
+      id: '{09A07660-6834-476C-B93B-584248D3003B}',
+      language: 'en',
+      revision: 'a0b36ce0a7db49418edf90eb9621e145',
+      version: 1,
+    },
+    fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+    fieldType: 'single-line',
+    rawValue: 'Test1',
+  };
+  const stringifiedData = JSON.stringify(testMetadata);
+
+  it('Should render provided metadata', () => {
+    const props: FieldMetadataComponentProps = {
+      data: stringifiedData,
+    };
+
+    const rendered = mount(<FieldMetadataComponent {...props} />);
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.include(stringifiedData);
+  });
+
+  it('Should render with provided children', () => {
+    const props: FieldMetadataComponentProps = {
+      data: stringifiedData,
+    };
+
+    const rendered = mount(
+      <FieldMetadataComponent {...props}>
+        <div>nested</div>
+      </FieldMetadataComponent>
+    );
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.find('div')).to.have.length(1);
+    expect(rendered.html()).to.include('nested');
+  });
+
+  it('Should render with default attributes', () => {
+    const props: FieldMetadataComponentProps = {
+      data: stringifiedData,
+    };
+
+    const rendered = mount(<FieldMetadataComponent {...props} />);
+
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.contain('type="text/sitecore"');
+    expect(rendered.html()).to.contain('chrometype="field"');
+    expect(rendered.html()).to.contain('class="scpm"');
+  });
+
+  it('Should render with provided attributes', () => {
+    const props: FieldMetadataComponentProps = {
+      data: stringifiedData,
+      htmlAttributes: {
+        chrometype: 'foo',
+        type: 'bar',
+        className: 'far',
+      },
+    };
+
+    const rendered = mount(<FieldMetadataComponent {...props} />);
+
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.contain('type="bar"');
+    expect(rendered.html()).to.contain('chrometype="foo"');
+    expect(rendered.html()).to.contain('class="far"');
+  });
+});
+
+describe('getFieldMetadataMarkup', () => {
+  it('Should render component with provided metadata and children ', () => {
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'single-line',
+      rawValue: 'Test1',
+    };
+
+    const div = <div>nested</div>;
+
+    const rendered = mount(getFieldMetadataMarkup(testMetadata, div));
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.include(JSON.stringify(testMetadata));
+    expect(rendered.html()).to.include('<div>nested</div>');
+  });
+});