Sitecore · illiakovalenko · Jun 18, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,7 @@ Our versioning strategy is as follows:
   * `[templates/nextjs-xmcloud]` Added a new _page-props-factory/plugins/preview-mode_ plugin to handle both Chromes and Metadata Edit Mode.
 * `[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.
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` Remove Partial rendering implementation as it will not be used by Pages in its current implementation - includes removing of EditingComponentPlaceholder component, few constants associated with it and RenderingType enum ([#1821](https://github.com/Sitecore/jss/pull/1821))
 
 ### 🐛 Bug Fixes
 

diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
@@ -84,6 +84,23 @@
     }).getHandler();
     ```
 
+* 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;
+        ...
+        {isComponentRendering ? (
+          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
+        ) : (
+          <Layout layoutData={layoutData} headLinks={headLinks} />
+        )}
+        ...
+    ```
+
 # nextjs-xmcloud
 
 * Render a new `EditingScripts` component in your `Scripts.ts` file to support a new Editing Integration feature.
@@ -134,4 +151,4 @@
             ...
         }
         ...
-    ```
+    ```
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/pages/[[...path]].tsx b/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>
   );

diff --git a/packages/sitecore-jss-nextjs/package.json b/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"

diff --git a/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.test.tsx b/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.test.tsx
diff --git a/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx b/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx
diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts b/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;

diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts b/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

diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/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';

diff --git a/packages/sitecore-jss-nextjs/src/test-data/ee-data.ts b/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>';
diff --git a/packages/sitecore-jss/src/layout/index.ts b/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';
 

diff --git a/packages/sitecore-jss/src/layout/models.ts b/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;

diff --git a/yarn.lock b/yarn.lock
@@ -5708,7 +5708,6 @@ __metadata:
     mocha: ^10.2.0
     next: ^14.1.0
     nock: ^13.3.0
-    node-html-parser: ^6.1.4
     nyc: ^15.1.0
     prop-types: ^15.8.1
     react: ^18.2.0
@@ -20216,16 +20215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-html-parser@npm:^6.1.4":
-  version: 6.1.11
-  resolution: "node-html-parser@npm:6.1.11"
-  dependencies:
-    css-select: ^5.1.0
-    he: 1.2.0
-  checksum: 65900e8b664eec99710ca711c7fd1120977cbe8c7798495962ccb6deeda35a32ab49798870743d74b437afc0f1073a678da9e95abe12a5f24467e9560b6a54d3
-  languageName: node
-  linkType: hard
-
 "node-int64@npm:^0.4.0":
   version: 0.4.0
   resolution: "node-int64@npm:0.4.0"