adjust according to Yarik's comments

Sitecore · Dec 14, 2023 · 850462a · 850462a
1 parent fb6a341
commit 850462a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 108 deletions.
diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx
@@ -151,7 +151,7 @@ describe('BYOCComponent', () => {
     const fooComponent = wrapper.find('feaas-external');
     expect(fooComponent).to.have.lengthOf(1);
     expect(fooComponent.prop('prop1')).to.equal('value1');
-    expect(fooComponent.prop('datasources')).to.equal('{"prop2":"prefetched_value1"}');
+    expect(fooComponent.prop('datasources')).to.equal('{"prop2":"prefetched_value1","_":{}}');
     expect(fooComponent.prop('data-external-id')).to.equal('Foo');
     expect(fooComponent.find('#foo-content')).to.have.length(1);
   });

diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
-import { concatData, getDataFromFields } from '../utils';
+import { getDataFromFields } from '../utils';
 import { MissingComponent, MissingComponentProps } from './MissingComponent';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
 
@@ -152,16 +152,14 @@ export class BYOCComponent extends React.Component<BYOCComponentProps> {
       }
     }
     // apply props from item datasource
-    componentProps = props.fields
-      ? concatData(componentProps, getDataFromFields(props.fields))
-      : componentProps;
+    const dataSourcesData = { ...props.fetchedData, _: getDataFromFields(props.fields ?? {}) };
 
     // we render fallback on client to avoid problems with client-only components
     return (
       <FEAAS.ExternalComponent
         componentName={componentName}
         clientFallback={fallbackComponent}
-        datasources={props.fetchedData}
+        datasources={dataSourcesData}
         {...componentProps}
       />
     );

diff --git a/packages/sitecore-jss-react/src/components/FEaaSComponent.test.tsx b/packages/sitecore-jss-react/src/components/FEaaSComponent.test.tsx
@@ -84,13 +84,12 @@ describe('<FEaaSComponent />', () => {
   });
 
   describe('data', () => {
-    it('should send override data', () => {
+    it('should send fetched data', () => {
       const props: FEaaSComponentProps = {
         params: {
           ...requiredParams,
-          ComponentDataOverride: '{ "foo": "bar", "baz": 1 }',
         },
-        fetchedData: undefined,
+        fetchedData: { foo: 'bar', baz: 1 },
         template: '<h1 data-path="foo"></h1><h2 data-path="baz"></h2>',
       };
       const wrapper = shallow(<FEaaSComponent {...props} />);
@@ -123,10 +122,10 @@ describe('<FEaaSComponent />', () => {
         },
       };
       const template = `
-      <h1 data-path="sampleText"></h1>
-      <img data-path-src="sampleImage.src" data-path-alt="sampleImage.alt"></img>
-      <p data-path="sampleNumber"></p>
-      <a data-path-href="sampleLink.href" data-path-id="sampleLink.id"></a>`;
+      <h1 data-path="_.sampleText"></h1>
+      <img data-path-src="_.sampleImage.src" data-path-alt="_.sampleImage.alt"></img>
+      <p data-path="_.sampleNumber"></p>
+      <a data-path-href="_.sampleLink.href" data-path-id="_.sampleLink.id"></a>`;
       const props: FEaaSComponentProps = {
         params: {
           ...requiredParams,
@@ -137,51 +136,30 @@ describe('<FEaaSComponent />', () => {
       const wrapper = shallow(<FEaaSComponent {...props} />);
       expect(wrapper).to.have.length(1);
       const output = wrapper.html();
-      expect(output).to.contain(`<h1 data-path="sampleText">${fields.sampleText.value}</h1>`);
+      expect(output).to.contain(`<h1 data-path="_.sampleText">${fields.sampleText.value}</h1>`);
       expect(output).to.contain(
-        `<img data-path-src="sampleImage.src" data-path-alt="sampleImage.alt" src="${fields.sampleImage.value.src}" alt="${fields.sampleImage.value.alt}"/>`
+        `<img data-path-src="_.sampleImage.src" data-path-alt="_.sampleImage.alt" src="${fields.sampleImage.value.src}" alt="${fields.sampleImage.value.alt}"/>`
       );
-      expect(output).to.contain(`<p data-path="sampleNumber">${fields.sampleNumber.value}</p>`);
+      expect(output).to.contain(`<p data-path="_.sampleNumber">${fields.sampleNumber.value}</p>`);
       expect(output).to.contain(
-        `<a data-path-href="sampleLink.href" data-path-id="sampleLink.id" href="${fields.sampleLink.value.href}" id="${fields.sampleLink.value.id}"></a>`
+        `<a data-path-href="_.sampleLink.href" data-path-id="_.sampleLink.id" href="${fields.sampleLink.value.href}" id="${fields.sampleLink.value.id}"></a>`
       );
     });
 
-    it('should prefer override data over datasource fields', () => {
+    it('should combine fetched data with datasource fields', () => {
       const fields: ComponentFields = {
-        sampleText: {
+        fieldText: {
           value: 'Welcome to Sitecore JSS',
         },
       };
-      const override = JSON.stringify({ sampleText: 'Welcome to FEAAS' });
+      const fetched = { fetchedText: 'Welcome to FEAAS' };
       const props: FEaaSComponentProps = {
         params: {
           ...requiredParams,
-          ComponentDataOverride: override,
         },
+        fetchedData: fetched,
         fields,
-        template: '<h1 data-path="sampleText"></h1>',
-      };
-
-      const wrapper = shallow(<FEaaSComponent {...props} />);
-      expect(wrapper).to.have.length(1);
-      expect(wrapper.html()).to.contain('Welcome to FEAAS');
-    });
-
-    it('should combine override data with datasource fields', () => {
-      const fields: ComponentFields = {
-        sampleText: {
-          value: 'Welcome to Sitecore JSS',
-        },
-      };
-      const override = JSON.stringify({ otherText: 'Welcome to FEAAS' });
-      const props: FEaaSComponentProps = {
-        params: {
-          ...requiredParams,
-          ComponentDataOverride: override,
-        },
-        fields,
-        template: '<h1 data-path="sampleText"></h1><h1 data-path="otherText"></h1>',
+        template: '<h1 data-path="_.fieldText"></h1><h1 data-path="fetchedText"></h1>',
       };
 
       const wrapper = shallow(<FEaaSComponent {...props} />);
@@ -192,39 +170,6 @@ describe('<FEaaSComponent />', () => {
       expect(wrapper.html()).to.contain('Welcome to Sitecore JSS');
     });
 
-    it('should prefer fetched data and combine it with override data and datasource fields', () => {
-      const fields: ComponentFields = {
-        sampleText: {
-          value: 'Welcome to Sitecore JSS',
-        },
-        description: {
-          value: 'This may be ovewritten',
-        },
-      };
-      const fetchedData = {
-        sampleText: 'Welcome to fetched data',
-      };
-      const override = JSON.stringify({ otherText: 'Welcome to FEAAS' });
-      const props: FEaaSComponentProps = {
-        params: {
-          ...requiredParams,
-          ComponentDataOverride: override,
-        },
-        fields,
-        fetchedData,
-        template:
-          '<h1 data-path="sampleText"></h1><h1 data-path="otherText"></h1><p data-path="description"></p>',
-      };
-
-      const wrapper = shallow(<FEaaSComponent {...props} />);
-      expect(wrapper).to.have.length(1);
-      console.log('DEBUG');
-      console.log(wrapper.html());
-      expect(wrapper.html()).to.contain('Welcome to FEAAS');
-      expect(wrapper.html()).to.contain(fetchedData.sampleText);
-      expect(wrapper.html()).to.contain('This may be ovewritten');
-    });
-
     it('should send prefetched data', () => {
       const fetchedData = {
         foo: 'bar',
@@ -234,7 +179,6 @@ describe('<FEaaSComponent />', () => {
       const props: FEaaSComponentProps = {
         params: {
           ...requiredParams,
-          ComponentDataOverride: '{ "foo": "test", "baz": 22 }',
         },
         fetchedData,
         template: '<h1 data-path="foo"></h1> <h2 data-path="baz"></h2>',

diff --git a/packages/sitecore-jss-react/src/components/FEaaSComponent.tsx b/packages/sitecore-jss-react/src/components/FEaaSComponent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
 import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
-import { concatData, getDataFromFields } from '../utils';
+import { getDataFromFields } from '../utils';
 
 export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 
@@ -76,19 +76,9 @@ export const FEaaSComponent = (props: FEaaSComponentProps): JSX.Element => {
     return null;
   }
 
-  let data = (props.fetchedData as { [key: string]: unknown }) ?? {};
-  if (props.params?.ComponentDataOverride) {
-    // Use override data if provided
-    try {
-      data = concatData(data, JSON.parse(props.params.ComponentDataOverride));
-    } catch (e) {
-      console.error(
-        `ComponentDataOverride param could not be parsed and will be ignored. Error: ${e}`
-      );
-    }
-  }
+  const data = { ...props.fetchedData, _: getDataFromFields(props.fields ?? {}) }; // props.fetchedData as { [key: string]: unknown } ?? {};
   // also apply item datasource data if present
-  data = props.fields ? concatData(data, getDataFromFields(props.fields)) : data;
+  // data._ = props.fields ? getDataFromFields(props.fields) : {};
 
   // FEaaS control would still be hydrated by client
   // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
@@ -125,7 +115,7 @@ export async function fetchFEaaSComponentServerProps(
     pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
   const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
   let template = '';
-  let fetchedData: FEAAS.DataScopes = null;
+  let fetchedData: FEAAS.DataScopes = {};
   const fetchDataOptions: FEAAS.DataOptions = params.ComponentDataOverride
     ? JSON.parse(params.ComponentDataOverride)
     : {};

diff --git a/packages/sitecore-jss-react/src/utils.ts b/packages/sitecore-jss-react/src/utils.ts
@@ -113,20 +113,3 @@ export const getDataFromFields = (fields: ComponentFields): { [key: string]: unk
   }, data);
   return data;
 };
-
-/**
- * Used to combine props data in BYOC and FEAAS components
- */
-export const concatData = (
-  base: { [key: string]: unknown },
-  appendix: { [key: string]: unknown }
-): { [key: string]: unknown } => {
-  const data = base;
-  appendix &&
-    Object.keys(appendix).forEach((key) => {
-      if (Object.keys(base).indexOf(key) === -1) {
-        data[key] = appendix[key];
-      }
-    });
-  return data;
-};