From 8efdfbac0a346bb4819885f7161d0ab19368e244 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 17 Jun 2024 10:46:59 +0300 Subject: [PATCH 1/7] remove EditingComponentPlaceholder implementation and unit tests --- .../nextjs/src/pages/[[...path]].tsx | 14 +-- packages/sitecore-jss-nextjs/package.json | 1 - .../EditingComponentPlaceholder.test.tsx | 37 -------- .../EditingComponentPlaceholder.tsx | 17 ---- .../editing/editing-render-middleware.test.ts | 88 +------------------ .../src/editing/editing-render-middleware.ts | 15 +--- packages/sitecore-jss-nextjs/src/index.ts | 4 - .../src/test-data/ee-data.ts | 12 --- packages/sitecore-jss/src/layout/index.ts | 3 - packages/sitecore-jss/src/layout/models.ts | 18 ---- yarn.lock | 11 --- 11 files changed, 3 insertions(+), 217 deletions(-) delete mode 100644 packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.test.tsx delete mode 100644 packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx 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 index 97e6a91de3..8301c7edbf 100644 --- 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,8 +34,6 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec } const isEditing = layoutData.sitecore.context.pageEditing; - const isComponentRendering = - layoutData.sitecore.context.renderingType === RenderingType.Component; return ( @@ -45,15 +41,7 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec 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 ? ( - - ) : ( - - )} + ); diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json index d779ba4ca7..e0cda0d748 100644 --- 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 deleted file mode 100644 index 35765edbcc..0000000000 --- a/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { - EDITING_COMPONENT_ID, - EDITING_COMPONENT_PLACEHOLDER, - RouteData, -} from '@sitecore-jss/sitecore-jss/layout'; -import { EditingComponentPlaceholder } from './EditingComponentPlaceholder'; -import * as PlaceholderModule from './Placeholder'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import sinon from 'sinon'; - -describe('', () => { - it('should render component', () => { - const stub = sinon.stub(PlaceholderModule, 'Placeholder').returns(
); - const rendering: RouteData = { - name: 'ComponentRendering', - placeholders: { - [EDITING_COMPONENT_PLACEHOLDER]: [ - { - componentName: 'Home', - }, - ], - }, - }; - - const c = mount(); - - const component = c.find(`#${EDITING_COMPONENT_ID}`); - - expect(component.length).to.equal(1); - - expect(component.find(PlaceholderModule.Placeholder).length).to.equal(1); - expect(component.find('.test').length).to.equal(1); - stub.restore(); - }); -}); diff --git a/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx b/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx deleted file mode 100644 index 913f449602..0000000000 --- a/packages/sitecore-jss-nextjs/src/components/EditingComponentPlaceholder.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { - EDITING_COMPONENT_ID, - EDITING_COMPONENT_PLACEHOLDER, - RouteData, -} from '@sitecore-jss/sitecore-jss/layout'; -import { Placeholder } from './Placeholder'; - -export const EditingComponentPlaceholder = ({ - rendering, -}: { - rendering: RouteData; -}): JSX.Element => ( -
- -
-); 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 index ecff851634..1c23935a67 100644 --- 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 = - '

Hello world

Something amazing

'; - 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: '

Hello world

Something amazing

', - }); - }); - - it('should throw error when component rendering markup is missing', async () => { - const 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: 'Error: Failed to render component for /test/path', - }); - }); - it('should handle 404 for route data request', async () => { const html = 'Page not found'; 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 index 677869d4f4..544f7a1561 100644 --- 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 index 70f8a07998..629d573594 100644 --- 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 index 8e04729103..914df7499e 100644 --- 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":"

Thanks for using JSS!! Here are some resources to get you started:

"}}}]}}}}`; 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":"

Thanks for using JSS!! Here are some resources to get you started:

"}}}]}}}}`; 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 = '{"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}'; diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts index d88905dc3f..bea0c1b392 100644 --- 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 index 60716d8750..eae3853605 100644 --- 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 index b42cac5d5e..fe5842ec87 100644 --- 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" From 8ea395398de7f51eb90e5371a72b2c0aacc1efb7 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 17 Jun 2024 10:47:10 +0300 Subject: [PATCH 2/7] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 828a1ca3ad..41d63bc201 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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. From c95e73c59890d8d3bf72c83b6374746781286469 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 17 Jun 2024 11:00:56 +0300 Subject: [PATCH 3/7] add upgrade guide entry --- docs/upgrades/unreleased.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index 67b22dc6f2..db4b60a0af 100644 --- a/docs/upgrades/unreleased.md +++ b/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 ? ( + + ) : ( + + )} + ... ``` \ No newline at end of file From c859c8e54bb71468b4c109fc27dc9f91c5ebb4c0 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 17 Jun 2024 11:48:26 +0300 Subject: [PATCH 4/7] add pull request in changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41d63bc201..968c5df618 100644 --- a/CHANGELOG.md +++ b/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. From b30babafba585b8b99637b01ea4e68698b04d28a Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 18 Jun 2024 08:34:12 +0300 Subject: [PATCH 5/7] update upgrade guide entry --- docs/upgrades/unreleased.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index db4b60a0af..9a92f50615 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -145,10 +145,6 @@ 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 ? ( ) : ( From 995f1bfafbef3b7c4d9a7a89809e79c75a798ae3 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 18 Jun 2024 08:41:19 +0300 Subject: [PATCH 6/7] update changelog entry; make it a standalone change, not part of editing flip integration --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 968c5df618..a417aca276 100644 --- a/CHANGELOG.md +++ b/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)[#1821](https://github.com/Sitecore/jss/pull/1821)) +* 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)) * `[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,9 +36,9 @@ 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. +* `[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 From 1658614d4fa55c3fd37170e13fec420086419441 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 18 Jun 2024 08:42:48 +0300 Subject: [PATCH 7/7] move upgrade guide entry under nextjs section --- docs/upgrades/unreleased.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index 9a92f50615..e4a1d9ca51 100644 --- 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 ? ( + + ) : ( + + )} + ... + ``` + # nextjs-xmcloud * Render a new `EditingScripts` component in your `Scripts.ts` file to support a new Editing Integration feature. @@ -135,20 +152,3 @@ } ... ``` - -* 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 ? ( - - ) : ( - - )} - ... - ``` \ No newline at end of file