[Chore][Release prep] Move Component Library into feature branch

CHANGELOG.md

@@ -11,10 +11,6 @@ Our versioning strategy is as follows:
 
 ## Unreleased
 
-### 🎉 New Features & Improvements
-
-* `[nextjs][sitecore-jss-nextjs]` Support for Component Library feature in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987)[#2000](https://github.com/Sitecore/jss/pull/2000)[#2002](https://github.com/Sitecore/jss/pull/2002)[#2005](https://github.com/Sitecore/jss/pull/2005))
-
 ### 🐛 Bug Fixes
 
 * `[templates/nextjs-sxa]` Fixed font-awesome import issue in custom workspace configuration ([#1998](https://github.com/Sitecore/jss/pull/1998))

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -13,10 +13,9 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
   // Browser ClientSDK init allows for page view events to be tracked
   useEffect(() => {
     const pageState = props.layoutData?.sitecore?.context.pageState;
-    const renderingType = props.layoutData?.sitecore?.context.renderingType;
     if (process.env.NODE_ENV === 'development')
       console.debug('Browser Events SDK is not initialized in development environment');
-    else if (pageState !== LayoutServicePageState.Normal || renderingType === 'component')
+    else if (pageState !== LayoutServicePageState.Normal)
       console.debug('Browser Events SDK is not initialized in edit and preview modes');
     else {
       CloudSDK({

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -6,62 +6,18 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import {
   editingDataService,
-  isComponentLibraryPreviewData,
   isEditingMetadataPreviewData,
 } from '@sitecore-jss/sitecore-jss-nextjs/editing';
 import { SitecorePageProps } from 'lib/page-props';
 import { graphQLEditingService } from 'lib/graphql-editing-service';
 import { Plugin } from '..';
-import { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
-import config from 'temp/config';
 
 class PreviewModePlugin implements Plugin {
   order = 1;
 
   async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
     if (!context.preview) return props;
 
-    if (isComponentLibraryPreviewData(context.previewData)) {
-      const { itemId, componentUid, site, language, renderingId, dataSourceId, version } =
-        context.previewData;
-
-      const componentService = new RestComponentLayoutService({
-        apiHost: config.sitecoreApiHost,
-        apiKey: config.sitecoreApiKey,
-        siteName: site,
-        configurationName: config.layoutServiceConfigurationName,
-      });
-
-      const componentData = await componentService.fetchComponentData({
-        siteName: site,
-        itemId,
-        language,
-        componentUid,
-        renderingId,
-        dataSourceId,
-        version,
-      });
-
-      // we can reuse editing service, fortunately
-      const dictionaryData = await graphQLEditingService.fetchDictionaryData({
-        siteName: site,
-        language,
-      });
-
-      if (!componentData) {
-        throw new Error(
-          `Unable to fetch editing data for preview ${JSON.stringify(context.previewData)}`
-        );
-      }
-
-      props.locale = context.previewData.language;
-      props.layoutData = componentData;
-      props.headLinks = [];
-      props.dictionary = dictionaryData;
-
-      return props;
-    }
-
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
       const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;

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

@@ -202,85 +202,6 @@ describe('EditingRenderMiddleware', () => {
   });
 
   describe('metadata handler', () => {
-    describe('Component Library handling', () => {
-      const query = {
-        mode: 'library',
-        sc_itemid: '{11111111-1111-1111-1111-111111111111}',
-        sc_lang: 'en',
-        sc_site: 'website',
-        sc_variant: 'dev',
-        sc_version: 'latest',
-        secret: secret,
-        sc_renderingId: '123',
-        sc_datasourceId: '456',
-        sc_uid: '789',
-      };
-
-      it('should handle request with mode=library', async () => {
-        const req = mockRequest(EE_BODY, query, 'GET');
-        const res = mockResponse();
-
-        const middleware = new EditingRenderMiddleware();
-        const handler = middleware.getHandler();
-
-        await handler(req, res);
-
-        expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith({
-          itemId: query.sc_itemid,
-          componentUid: query.sc_uid,
-          renderingId: query.sc_renderingId,
-          language: query.sc_lang,
-          site: query.sc_site,
-          pageState: 'normal',
-          mode: 'library',
-          dataSourceId: query.sc_datasourceId,
-          version: query.sc_version,
-        });
-
-        expect(res.redirect).to.have.been.calledOnce;
-        expect(res.redirect).to.have.been.calledWith('/component-library/render');
-        expect(res.setHeader).to.have.been.calledWith(
-          'Content-Security-Policy',
-          `frame-ancestors 'self' https://allowed.com ${EDITING_ALLOWED_ORIGINS.join(' ')}`
-        );
-      });
-
-      it('should always use component library path for redirect', async () => {
-        const notQuiteRightQuery = {
-          ...query,
-          route: '/Styleguide',
-        };
-        const req = mockRequest(EE_BODY, notQuiteRightQuery, 'GET');
-        const res = mockResponse();
-
-        const middleware = new EditingRenderMiddleware();
-        const handler = middleware.getHandler();
-
-        await handler(req, res);
-
-        expect(res.redirect).to.have.been.calledOnce;
-        expect(res.redirect).to.have.been.calledWith('/component-library/render');
-      });
-
-      it('should response with 400 for missing query params', async () => {
-        const req = mockRequest(EE_BODY, { sc_site: 'website', secret }, 'GET');
-        const res = mockResponse();
-
-        const middleware = new EditingRenderMiddleware();
-        const handler = middleware.getHandler();
-
-        await handler(req, res);
-
-        expect(res.status).to.have.been.calledOnce;
-        expect(res.status).to.have.been.calledWith(400);
-        expect(res.json).to.have.been.calledOnce;
-        expect(res.json).to.have.been.calledWith({
-          html:
-            '<html><body>Missing required query parameters: sc_itemid, sc_lang, route, mode</body></html>',
-        });
-      });
-    });
-
     const query = {
       mode: 'edit',
       route: '/styleguide',

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

@@ -269,7 +269,7 @@ export type EditingRenderMiddlewareMetadataConfig = Pick<
 /**
  * Next.js API request with Metadata query parameters.
  */
-export type MetadataNextApiRequest = NextApiRequest & {
+type MetadataNextApiRequest = NextApiRequest & {
   query: RenderMetadataQueryParams;
 };
 
@@ -287,22 +287,6 @@ export type EditingMetadataPreviewData = {
   layoutKind?: LayoutKind;
 };
 
-/**
- * Data for Component Library rendering mode
- */
-export interface ComponentLibraryRenderPreviewData {
-  site: string;
-  itemId: string;
-  renderingId: string;
-  componentUid: string;
-  language: string;
-  pageState: LayoutServicePageState;
-  mode?: 'library';
-  variant?: string;
-  version?: string;
-  dataSourceId?: string;
-}
-
 /**
  * Type guard for EditingMetadataPreviewData
  * @param {object} data preview data to check
@@ -318,23 +302,6 @@ export const isEditingMetadataPreviewData = (data: unknown): data is EditingMeta
   );
 };
 
-/**
- * Type guard for Component Library mode
- * @param {object} data preview data to check
- * @returns true if the data is EditingMetadataPreviewData
- * @see EditingMetadataPreviewData
- */
-export const isComponentLibraryPreviewData = (
-  data: unknown
-): data is ComponentLibraryRenderPreviewData => {
-  return (
-    typeof data === 'object' &&
-    data !== null &&
-    'mode' in data &&
-    (data as ComponentLibraryRenderPreviewData).mode === 'library'
-  );
-};
-
 /**
  * Handler for the Editing Metadata GET requests.
  * This handler is responsible for redirecting the request to the page route.
@@ -348,19 +315,13 @@ export class MetadataHandler {
 
     const startTimestamp = Date.now();
 
-    const mode = query.mode;
-    const metadataDefaultRequiredParams = ['sc_site', 'sc_itemid', 'sc_lang', 'route', 'mode'];
-
-    const metadataComponentRequiredParams = [
+    const requiredQueryParams: (keyof RenderMetadataQueryParams)[] = [
       'sc_site',
       'sc_itemid',
-      'sc_renderingId',
-      'sc_uid',
       'sc_lang',
+      'route',
       'mode',
     ];
-    const requiredQueryParams =
-      mode === 'library' ? metadataComponentRequiredParams : metadataDefaultRequiredParams;
 
     const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
 
@@ -375,44 +336,23 @@ export class MetadataHandler {
       });
     }
 
-    if (mode === 'library') {
-      // dedicated route and layout to SSR component library
-      query.route = '/component-library/render';
-      res.setPreviewData(
-        {
-          itemId: query.sc_itemid,
-          componentUid: query.sc_uid,
-          renderingId: query.sc_renderingId,
-          language: query.sc_lang,
-          site: query.sc_site,
-          pageState: LayoutServicePageState.Normal,
-          mode: 'library',
-          dataSourceId: query.sc_datasourceId,
-          version: query.sc_version,
-        } as ComponentLibraryRenderPreviewData,
-        {
-          maxAge: 3,
-        }
-      );
-    } else {
-      res.setPreviewData(
-        {
-          site: query.sc_site,
-          itemId: query.sc_itemid,
-          language: query.sc_lang,
-          // for sc_variantId we may employ multiple variants (page-layout + component level)
-          variantIds: query.sc_variant?.split(',') || [DEFAULT_VARIANT],
-          version: query.sc_version,
-          editMode: EditMode.Metadata,
-          pageState: query.mode,
-          layoutKind: query.sc_layoutKind,
-        } as EditingMetadataPreviewData,
-        // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
-        {
-          maxAge: 3,
-        }
-      );
-    }
+    res.setPreviewData(
+      {
+        site: query.sc_site,
+        itemId: query.sc_itemid,
+        language: query.sc_lang,
+        // for sc_variantId we may employ multiple variants (page-layout + component level)
+        variantIds: query.sc_variant?.split(',') || [DEFAULT_VARIANT],
+        version: query.sc_version,
+        editMode: EditMode.Metadata,
+        pageState: query.mode,
+        layoutKind: query.sc_layoutKind,
+      } as EditingMetadataPreviewData,
+      // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
+      {
+        maxAge: 3,
+      }
+    );
 
     // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue
     // when Next.js preview mode is activated, resulting the page to render in normal mode instead.

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

@@ -7,7 +7,6 @@ export {
   EditingRenderMiddlewareConfig,
   EditingMetadataPreviewData,
   isEditingMetadataPreviewData,
-  isComponentLibraryPreviewData,
 } from './editing-render-middleware';
 export {
   EditingPreviewData,
@@ -24,8 +23,3 @@ export {
   EditingConfigMiddleware,
   EditingConfigMiddlewareConfig,
 } from './editing-config-middleware';
-export {
-  RenderingType,
-  EDITING_COMPONENT_PLACEHOLDER,
-  EDITING_COMPONENT_ID,
-} from '@sitecore-jss/sitecore-jss/layout';

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

@@ -38,7 +38,6 @@ export {
   getContentStylesheetLink,
   EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
-export { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss/editing';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export {
   trackingApi,
@@ -150,7 +149,6 @@ export {
   File,
   FileField,
   RichTextField,
-  ComponentLibraryLayout,
   DefaultEmptyFieldEditingComponentImage,
   DefaultEmptyFieldEditingComponentText,
   VisitorIdentification,