[templates/nextjs] [sitecore-jss-nextjs] [sitecore-jss] Remove partial rendering implementation (EditingComponentPlaceholder component)

CHANGELOG.md

@@ -24,7 +24,7 @@ Our versioning strategy is as follows:
 
 ### 🛠 Breaking Change
 
-* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))
+* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819)[#1821](https://github.com/Sitecore/jss/pull/1821))
   * `[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.
@@ -36,6 +36,7 @@ Our versioning strategy is as follows:
   * `[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.
+  * `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` Remove EditingComponentPlaceholder as it will not be used by Pages in its current implementation
 * `[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](https://github.com/Sitecore/jss/pull/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.
 

docs/upgrades/unreleased.md

@@ -134,4 +134,25 @@
             ...
         }
         ...
+    ```
+
+* The implementation of 'EditingComponentPlaceholder' has been removed. Its purpose to avoid refreshing the entire page during component editing in Pages had never been fully utilized. The references to it and to `RenderingType` enum in `[[...path]].tsx` of the nextjs app (and in any custom code) should be removed: 
+
+    ```ts
+        import Layout from 'src/Layout';
+        import { RenderingType, EditingComponentPlaceholder } from '@sitecore-jss/sitecore-jss-nextjs';
+        ...
+        const isComponentRendering =
+            layoutData.sitecore.context.renderingType === RenderingType.Component;
+        ...
+        {/*
+          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
+          If you are using Experience Editor only, this logic can be removed, Layout can be left.
+        */}
+        {isComponentRendering ? (
+          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
+        ) : (
+          <Layout layoutData={layoutData} headLinks={headLinks} />
+        )}
+        ...
     ```

packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx

@@ -7,10 +7,8 @@ import { GetServerSideProps } from 'next';
 import NotFound from 'src/NotFound';
 import Layout from 'src/Layout';
 import {
-  RenderingType,
   SitecoreContext,
   ComponentPropsContext,
-  EditingComponentPlaceholder,
   <% if (prerender === 'SSG') { -%>
   StaticPath,
   <% } -%>
@@ -36,24 +34,14 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec
   }
 
   const isEditing = layoutData.sitecore.context.pageEditing;
-  const isComponentRendering =
-    layoutData.sitecore.context.renderingType === RenderingType.Component;
 
   return (
     <ComponentPropsContext value={componentProps}>
       <SitecoreContext
         componentFactory={componentBuilder.getComponentFactory({ isEditing })}
         layoutData={layoutData}
       >
-        {/*
-          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
-          If you are using Experience Editor only, this logic can be removed, Layout can be left.
-        */}
-        {isComponentRendering ? (
-          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
-        ) : (
-          <Layout layoutData={layoutData} headLinks={headLinks} />
-        )}
+        <Layout layoutData={layoutData} headLinks={headLinks} />
       </SitecoreContext>
     </ComponentPropsContext>
   );

packages/sitecore-jss-nextjs/package.json

@@ -76,7 +76,6 @@
     "@sitecore-jss/sitecore-jss-dev-tools": "22.1.0-canary.30",
     "@sitecore-jss/sitecore-jss-react": "22.1.0-canary.30",
     "@vercel/kv": "^0.2.1",
-    "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
     "sync-disk-cache": "^2.1.0"

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts

@@ -11,14 +11,7 @@ import {
   QUERY_PARAM_PROTECTION_BYPASS_SITECORE,
   QUERY_PARAM_PROTECTION_BYPASS_VERCEL,
 } from './constants';
-import {
-  EE_PATH,
-  EE_LANGUAGE,
-  EE_LAYOUT,
-  EE_DICTIONARY,
-  EE_BODY,
-  EE_COMPONENT_BODY,
-} from '../test-data/ee-data';
+import { EE_PATH, EE_LANGUAGE, EE_LAYOUT, EE_DICTIONARY, EE_BODY } from '../test-data/ee-data';
 import {
   ChromesHandler,
   EditingRenderMiddleware,
@@ -323,85 +316,6 @@ describe('EditingRenderMiddleware', () => {
       });
     });
 
-    it('should handle component rendering request', async () => {
-      const html =
-        '<html phkey="test1"><body phkey="test2"><div id="editing-component"><h1>Hello world</h1><p>Something amazing</p></div></body></html>';
-      const query = {} as Query;
-      query[QUERY_PARAM_EDITING_SECRET] = secret;
-      const previewData = { key: 'key1234' } as EditingPreviewData;
-
-      const fetcher = mockFetcher(html);
-      const dataService = mockDataService(previewData);
-      const req = mockRequest(EE_COMPONENT_BODY, query);
-      const res = mockResponse();
-
-      const middleware = new EditingRenderMiddleware({
-        dataFetcher: fetcher,
-        editingDataService: dataService,
-      });
-      const handler = middleware.getHandler();
-
-      await handler(req, res);
-
-      expect(dataService.setEditingData, 'stash editing data').to.have.been.called;
-      expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith(previewData);
-      expect(res.getHeader, 'get preview cookies').to.have.been.calledWith('Set-Cookie');
-      expect(fetcher.get).to.have.been.calledOnce;
-      expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWith(
-        match('http://localhost:3000/test/path?timestamp'),
-        {
-          headers: {
-            Cookie: mockNextJsPreviewCookies.join(';'),
-          },
-        }
-      );
-      expect(res.status).to.have.been.calledOnce;
-      expect(res.status).to.have.been.calledWith(200);
-      expect(res.json).to.have.been.calledOnce;
-      expect(res.json).to.have.been.calledWith({
-        html: '<h1>Hello world</h1><p>Something amazing</p>',
-      });
-    });
-
-    it('should throw error when component rendering markup is missing', async () => {
-      const html = '<html phkey="test1"><body phkey="test2"><div></div></body></html>';
-      const query = {} as Query;
-      query[QUERY_PARAM_EDITING_SECRET] = secret;
-      const previewData = { key: 'key1234' } as EditingPreviewData;
-
-      const fetcher = mockFetcher(html);
-      const dataService = mockDataService(previewData);
-      const req = mockRequest(EE_COMPONENT_BODY, query);
-      const res = mockResponse();
-
-      const middleware = new EditingRenderMiddleware({
-        dataFetcher: fetcher,
-        editingDataService: dataService,
-      });
-      const handler = middleware.getHandler();
-
-      await handler(req, res);
-
-      expect(dataService.setEditingData, 'stash editing data').to.have.been.called;
-      expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith(previewData);
-      expect(res.getHeader, 'get preview cookies').to.have.been.calledWith('Set-Cookie');
-      expect(fetcher.get).to.have.been.calledOnce;
-      expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWith(
-        match('http://localhost:3000/test/path?timestamp'),
-        {
-          headers: {
-            Cookie: mockNextJsPreviewCookies.join(';'),
-          },
-        }
-      );
-      expect(res.status).to.have.been.calledOnce;
-      expect(res.status).to.have.been.calledWith(500);
-      expect(res.json).to.have.been.calledOnce;
-      expect(res.json).to.have.been.calledWithMatch({
-        html: '<html><body>Error: Failed to render component for /test/path</body></html>',
-      });
-    });
-
     it('should handle 404 for route data request', async () => {
       const html = '<html phkey="test1"><body phkey="test2">Page not found</body></html>';
       const query = {} as Query;

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts

@@ -1,13 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
-import {
-  EDITING_COMPONENT_ID,
-  EditMode,
-  LayoutServicePageState,
-  RenderingType,
-} from '@sitecore-jss/sitecore-jss/layout';
-import { parse } from 'node-html-parser';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { EditingData } from './editing-data';
 import { EditingDataService, editingDataService } from './editing-data-service';
 import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
@@ -161,13 +155,6 @@ export class ChromesHandler extends RenderMiddlewareBase {
       // The following line will trick it into thinking we're SSR, thus avoiding any router.replace.
       html = html.replace(STATIC_PROPS_ID, SERVER_PROPS_ID);
 
-      if (editingData.layoutData.sitecore.context.renderingType === RenderingType.Component) {
-        // Handle component rendering. Extract component markup only
-        html = parse(html).getElementById(EDITING_COMPONENT_ID)?.innerHTML;
-
-        if (!html) throw new Error(`Failed to render component for ${editingData.path}`);
-      }
-
       const body = { html };
 
       // Return expected JSON result

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

@@ -34,9 +34,6 @@ export {
   ComponentRendering,
   ComponentFields,
   ComponentParams,
-  RenderingType,
-  EDITING_COMPONENT_PLACEHOLDER,
-  EDITING_COMPONENT_ID,
   getContentStylesheetLink,
   EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
@@ -119,7 +116,6 @@ export {
 export { Link, LinkProps } from './components/Link';
 export { RichText, RichTextProps } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
-export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
 import * as FEaaSWrapper from './components/FEaaSWrapper';
 import * as BYOCWrapper from './components/BYOCWrapper';

packages/sitecore-jss-nextjs/src/test-data/ee-data.ts

@@ -19,7 +19,6 @@ export const EE_PATH = '/test/path';
 export const EE_LANGUAGE = 'en';
 export const EE_LAYOUT = `{"sitecore":{"context":{"pageEditing":true,"site":{"name":"JssNext"},"pageState":"normal","language":"en","itemPath":"${EE_PATH}"},"route":{"name":"home","displayName":"home","fields":{"pageTitle":{"value":"Welcome to Sitecore JSS"}},"databaseName":"master","deviceId":"fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3","itemId":"d6ac9d26-9474-51cf-982d-4f8d44951229","itemLanguage":"en","itemVersion":1,"layoutId":"4092f843-b14e-5f7a-9ae6-3ed9f5c2b919","templateId":"ca5a5aeb-55ae-501b-bb10-d37d009a97e1","templateName":"App Route","placeholders":{"jss-main":[{"uid":"2c4a53cc-9da8-5f51-9d79-6ee2fc671b2d","componentName":"ContentBlock","dataSource":"{FF0E7D28-D8EF-539C-9CEC-28E1175F8C1D}","params":{},"fields":{"heading":{"value":"Welcome to Sitecore JSS"},"content":{"value":"<p>Thanks for using JSS!! Here are some resources to get you started:</p>"}}}]}}}}`;
 export const EE_DICTIONARY = '{"entry1":"Entry One","entry2":"Entry Two"}';
-export const EE_COMPONENT_LAYOUT = `{"sitecore":{"context":{"pageEditing":true,"renderingType":"component","site":{"name":"JssNext"},"pageState":"normal","language":"en","itemPath":"${EE_PATH}"},"route":{"name":"home","displayName":"home","fields":{"pageTitle":{"value":"Welcome to Sitecore JSS"}},"databaseName":"master","deviceId":"fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3","itemId":"d6ac9d26-9474-51cf-982d-4f8d44951229","itemLanguage":"en","itemVersion":1,"layoutId":"4092f843-b14e-5f7a-9ae6-3ed9f5c2b919","templateId":"ca5a5aeb-55ae-501b-bb10-d37d009a97e1","templateName":"App Route","placeholders":{"editing-componentmode-placeholder":[{"uid":"2c4a53cc-9da8-5f51-9d79-6ee2fc671b2d","componentName":"ContentBlock","dataSource":"{FF0E7D28-D8EF-539C-9CEC-28E1175F8C1D}","params":{},"fields":{"heading":{"value":"Welcome to Sitecore JSS"},"content":{"value":"<p>Thanks for using JSS!! Here are some resources to get you started:</p>"}}}]}}}}`;
 
 export const EE_BODY = {
   id: 'JssApp',
@@ -28,16 +27,5 @@ export const EE_BODY = {
   moduleName: 'server.bundle',
 };
 
-export const EE_COMPONENT_BODY = {
-  id: 'JssApp',
-  args: [
-    '/',
-    EE_COMPONENT_LAYOUT,
-    `{\"language\":\"${EE_LANGUAGE}\",\"dictionary\":${EE_DICTIONARY}}`,
-  ],
-  functionName: 'renderView',
-  moduleName: 'server.bundle',
-};
-
 export const imageField =
   '<input id=\'fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13\' class=\'scFieldValue\' name=\'fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13\' type=\'hidden\' value="&lt;image mediaid=&quot;{B013777F-C6CA-4880-9562-B9B7688AF63A}&quot; /&gt;" /><code id="fld_F5201E35767444EBB903E52488A0EB5A_B7F425624A1F4F3F925C4A4381197239_en_1_0f581df6173e468f9c0b36bd730739e4_13_edit" type="text/sitecore" chromeType="field" scFieldType="image" class="scpm" kind="open">{"commands":[{"click":"chrome:field:editcontrol({command:\\"webedit: chooseimage\\"})","header":"Choose Image","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2.png","disabledIcon":"/temp/photo_landscape2_disabled16x16.png","isDivider":false,"tooltip":"Choose an image.","type":""},{"click":"chrome:field:editcontrol({command:\\"webedit: editimage\\"})","header":"Properties","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_edit.png","disabledIcon":"/temp/photo_landscape2_edit_disabled16x16.png","isDivider":false,"tooltip":"Modify image appearance.","type":""},{"click":"chrome:field:editcontrol({command:\\"webedit: clearimage\\"})","header":"Clear","icon":"/sitecore/shell/themes/standard/custom/16x16/photo_landscape2_delete.png","disabledIcon":"/temp/photo_landscape2_delete_disabled16x16.png","isDivider":false,"tooltip":"Remove the image.","type":""},{"click":"chrome:common:edititem({command:\\"webedit: open\\"})","header":"Edit the related item","icon":"/temp/iconcache/office/16x16/cubes.png","disabledIcon":"/temp/cubes_disabled16x16.png","isDivider":false,"tooltip":"Edit the related item in the Content Editor.","type":"common"},{"click":"chrome:rendering:personalize({command:\\"webedit: personalize\\"})","header":"Personalize","icon":"/temp/iconcache/office/16x16/users_family.png","disabledIcon":"/temp/users_family_disabled16x16.png","isDivider":false,"tooltip":"Create or edit personalization for this component.","type":"sticky"},{"click":"chrome:rendering:editvariations({command:\\"webedit: editvariations\\"})","header":"Edit variations","icon":"/temp/iconcache/office/16x16/windows.png","disabledIcon":"/temp/windows_disabled16x16.png","isDivider":false,"tooltip":"Edit the variations.","type":"sticky"}],"contextItemUri":"sitecore://master/{F5201E35-7674-44EB-B903-E52488A0EB5A}?lang=en&ver=1","custom":{},"displayName":"Image","expandedDisplayName":null}</code><img src="http://jssadvancedapp/sitecore/shell/-/media/JssAdvancedApp/assets/img/portfolio/1.ashx?h=350&amp;la=en&amp;w=650&amp;hash=B973470AA333773341C62A76511361C88897E2D4" alt="" width="650" height="350" /><code class="scpm" type="text/sitecore" chromeType="field" kind="close"></code>';

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

@@ -13,9 +13,6 @@ export {
   PlaceholdersData,
   ComponentFields,
   ComponentParams,
-  RenderingType,
-  EDITING_COMPONENT_PLACEHOLDER,
-  EDITING_COMPONENT_ID,
   EditMode,
 } from './models';
 

packages/sitecore-jss/src/layout/models.ts

@@ -1,13 +1,3 @@
-/**
- * Static placeholder name used for component rendering
- */
-export const EDITING_COMPONENT_PLACEHOLDER = 'editing-componentmode-placeholder';
-
-/**
- * Id of wrapper for component rendering
- */
-export const EDITING_COMPONENT_ID = 'editing-component';
-
 /**
  * A reply from the Sitecore Layout Service
  */
@@ -26,13 +16,6 @@ export enum LayoutServicePageState {
   Normal = 'normal',
 }
 
-/**
- * Editing rendering type
- */
-export enum RenderingType {
-  Component = 'component',
-}
-
 /**
  * Represents the possible modes for rendering content in Sitecore Editor
  * - chromes - supported by Sitecore Experience Editor / Pages
@@ -48,7 +31,6 @@ export enum EditMode {
  */
 export interface LayoutServiceContext {
   [key: string]: unknown;
-  renderingType?: RenderingType;
   pageEditing?: boolean;
   language?: string;
   pageState?: LayoutServicePageState;