introduce getFieldMetadataMarkup function and used in the field compo…

…nents; add unit test

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

@@ -7,8 +7,7 @@ import {
   LinkField,
   LinkProps as ReactLinkProps,
   LinkPropTypes,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
+  getFieldMetadataMarkup,
 } from '@sitecore-jss/sitecore-jss-react';
 
 export type LinkProps = ReactLinkProps & {
@@ -40,11 +39,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 
     // when metadata is present, render it to be used for chrome hydration
     if (metadata) {
-      const props: FieldMetadataComponentProps = {
-        data: JSON.stringify(metadata),
-      };
-
-      return <FieldMetadataComponent {...props}>{children}</FieldMetadataComponent>;
+      return getFieldMetadataMarkup(metadata, children);
     }
 
     const value = ((field as LinkFieldValue).href

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

@@ -6,8 +6,7 @@ import {
   ImageProps,
   ImageField,
   ImageFieldValue,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
+  getFieldMetadataMarkup,
 } from '@sitecore-jss/sitecore-jss-react';
 import Image, { ImageProps as NextImageProperties } from 'next/image';
 
@@ -40,11 +39,7 @@ export const NextImage: React.FC<NextImageProps> = ({
 
   // when metadata is present, render it to be used for chrome hydration
   if (metadata) {
-    const props: FieldMetadataComponentProps = {
-      data: JSON.stringify(metadata),
-    };
-
-    return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+    return getFieldMetadataMarkup(metadata, otherProps.children);
   }
 
   const imageField = dynamicMedia as ImageField;

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

@@ -1,10 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface DateFieldProps {
   /** The date field data. */
@@ -44,11 +40,7 @@ export const DateField: React.FC<DateFieldProps> = ({
 
   // when metadata is present, render it to be used for chrome hydration
   if (metadata) {
-    const props: FieldMetadataComponentProps = {
-      data: JSON.stringify(metadata),
-    };
-
-    return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+    return getFieldMetadataMarkup(metadata, otherProps.children);
   }
 
   let children: React.ReactNode;

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

@@ -3,8 +3,13 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount, render } from 'enzyme';
 
-import { FieldMetadataComponent, FieldMetadataComponentProps } from './FieldMetadata';
+import {
+  FieldMetadataComponent,
+  FieldMetadataComponentProps,
+  getFieldMetadataMarkup,
+} from './FieldMetadata';
 import { describe } from 'node:test';
+import { json } from 'stream/consumers';
 
 describe('<FieldMetadataComponent />', () => {
   const testMetadata = {
@@ -82,3 +87,28 @@ describe('<FieldMetadataComponent />', () => {
     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>');
+  });
+});

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

@@ -49,3 +49,11 @@ export const FieldMetadataComponent: FunctionComponent<FieldMetadataComponentPro
     </React.Fragment>
   );
 };
+
+export const getFieldMetadataMarkup = (metadata: FieldMetadata, children: any) => {
+  const props: FieldMetadataComponentProps = {
+    data: JSON.stringify(metadata),
+  };
+
+  return <FieldMetadataComponent {...props}>{children}</FieldMetadataComponent>;
+};

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

@@ -1,10 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface FileFieldValue {
   [propName: string]: unknown;
@@ -42,11 +38,7 @@ export const File: React.FC<FileProps> = ({ field, children, metadata, ...otherP
 
   // when metadata is present, render it to be used for chrome hydration
   if (metadata) {
-    const props: FieldMetadataComponentProps = {
-      data: JSON.stringify(metadata),
-    };
-
-    return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+    return getFieldMetadataMarkup(metadata, otherProps.children);
   }
 
   // handle link directly on field for forgetful devs

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

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { addClassName, convertAttributesToReactProps } from '../utils';
 import { getAttributesString } from '../utils';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface ImageFieldValue {
   [attributeName: string]: unknown;
@@ -183,11 +179,7 @@ export const Image: React.FC<ImageProps> = ({
 
   // when metadata is present, render it to be used for chrome hydration
   if (metadata) {
-    const props: FieldMetadataComponentProps = {
-      data: JSON.stringify(metadata),
-    };
-
-    return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+    return getFieldMetadataMarkup(metadata, otherProps.children);
   }
 
   const imageField = dynamicMedia as ImageField;

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

@@ -1,10 +1,6 @@
 import React, { ReactElement, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface LinkFieldValue {
   [attributeName: string]: unknown;
@@ -65,11 +61,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 
     // when metadata is present, render it to be used for chrome hydration
     if (metadata) {
-      const props: FieldMetadataComponentProps = {
-        data: JSON.stringify(metadata),
-      };
-
-      return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+      return getFieldMetadataMarkup(metadata, children);
     }
 
     const resultTags: ReactElement<unknown>[] = [];

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

@@ -1,10 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 
 export interface RichTextField {
   value?: string;
@@ -40,11 +36,7 @@ export const RichText: React.FC<RichTextProps> = forwardRef(
 
     // when metadata is present, render it to be used for chrome hydration
     if (otherProps.metadata) {
-      const props: FieldMetadataComponentProps = {
-        data: JSON.stringify(otherProps.metadata),
-      };
-
-      return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+      return getFieldMetadataMarkup(otherProps.metadata, otherProps.children);
     }
 
     const htmlProps = {

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

@@ -1,9 +1,5 @@
 import React, { ReactElement, FunctionComponent } from 'react';
-import {
-  FieldMetadata,
-  FieldMetadataComponent,
-  FieldMetadataComponentProps,
-} from './FieldMetadata';
+import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata';
 import PropTypes from 'prop-types';
 
 export interface TextField {
@@ -49,11 +45,7 @@ export const Text: FunctionComponent<TextProps> = ({
 
   // when metadata is present, render it to be used for chrome hydration
   if (metadata) {
-    const props: FieldMetadataComponentProps = {
-      data: JSON.stringify(metadata),
-    };
-
-    return <FieldMetadataComponent {...props}>{otherProps.children}</FieldMetadataComponent>;
+    return getFieldMetadataMarkup(metadata, otherProps.children);
   }
 
   // can't use editable value if we want to output unencoded

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

@@ -104,4 +104,5 @@ export {
   FieldMetadata,
   FieldMetadataComponent,
   FieldMetadataComponentProps,
+  getFieldMetadataMarkup,
 } from './components/FieldMetadata';