create-sitecore-jss 22.5.0-beta.4 → 22.5.0-beta.5

package/dist/templates/nextjs-sxa/src/Layout.tsx

@@ -3,7 +3,14 @@
  */
 import React from 'react';
 import Head from 'next/head';
-import { Placeholder, LayoutServiceData, Field, HTMLLink } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  Placeholder,
+  LayoutServiceData,
+  Field,
+  DesignLibrary,
+  HTMLLink,
+  RenderingType
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 import Scripts from 'src/Scripts';
 
@@ -40,15 +47,29 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
 
       {/* root placeholder for the app, which we add components to using route data */}
       <div className={mainClassPageEditing}>
-        <header>
-          <div id="header">{route && <Placeholder name="headless-header" rendering={route} />}</div>
-        </header>
-        <main>
-          <div id="content">{route && <Placeholder name="headless-main" rendering={route} />}</div>
-        </main>
-        <footer>
-          <div id="footer">{route && <Placeholder name="headless-footer" rendering={route} />}</div>
-        </footer>
+        <% if (templates.includes('nextjs-xmcloud') || templates.includes('nextjs-sxa')) { %>
+          {layoutData.sitecore.context.renderingType === RenderingType.Component ? (
+            <DesignLibrary {...layoutData} />
+          ) : (
+            <>
+              <header>
+                <div id="header">
+                  {route && <Placeholder name="headless-header" rendering={route} />}
+                </div>
+              </header>
+              <main>
+                <div id="content">
+                  {route && <Placeholder name="headless-main" rendering={route} />}
+                </div>
+              </main>
+              <footer>
+                <div id="footer">
+                  {route && <Placeholder name="headless-footer" rendering={route} />}
+                </div>
+              </footer>
+            </>
+          )}
+        <% } %>
       </div>
     </>
   );

package/dist/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -3,7 +3,7 @@ import { SitecorePageProps } from 'lib/page-props';
 import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
 import '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
-import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
+import { LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
@@ -16,7 +16,10 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
     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 ||
+      renderingType === RenderingType.Component
+    )
       console.debug('Browser Events SDK is not initialized in edit and preview modes');
     else {
       CloudSDK({

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts

@@ -1,5 +1,5 @@
 import { SitecorePageProps } from 'lib/page-props';
-import { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
+import { getDesignLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Plugin } from '..';
 import config from 'temp/config';
 
@@ -10,7 +10,7 @@ class ComponentThemesPlugin implements Plugin {
   async exec(props: SitecorePageProps) {
     // Collect FEAAS, BYOC, SXA component themes
     props.headLinks.push(
-      ...getComponentLibraryStylesheetLinks(
+      ...getDesignLibraryStylesheetLinks(
         props.layoutData,
         config.sitecoreEdgeContextId,
         config.sitecoreEdgeUrl

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -6,7 +6,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import {
   editingDataService,
-  isComponentLibraryPreviewData,
+  isDesignLibraryPreviewData,
   isEditingMetadataPreviewData,
 } from '@sitecore-jss/sitecore-jss-nextjs/editing';
 import { SitecorePageProps } from 'lib/page-props';
@@ -21,9 +21,16 @@ class PreviewModePlugin implements Plugin {
   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;
+    if (isDesignLibraryPreviewData(context.previewData)) {
+      const {
+        itemId,
+        componentUid,
+        site,
+        language,
+        renderingId,
+        dataSourceId,
+        version,
+      } = context.previewData;
 
       const componentService = new RestComponentLayoutService({
         apiHost: config.sitecoreApiHost,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.5.0-beta.4",
+  "version": "22.5.0-beta.5",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "ac3ef96479f17147f4805530ae43033d5bdabc37"
+  "gitHead": "3f27536c37ff0b5cf193dde5fb8e22020bc43b26"
 }

package/dist/templates/nextjs-xmcloud/src/pages/component-library/render.tsx

@@ -1,51 +0,0 @@
-import { GetServerSideProps } from 'next';
-import Head from 'next/head';
-import {
-  ComponentLibraryLayout,
-  ComponentPropsContext,
-  SitecoreContext,
-} from '@sitecore-jss/sitecore-jss-nextjs';
-import { SitecorePageProps } from 'lib/page-props';
-import { sitecorePagePropsFactory } from 'lib/page-props-factory';
-import NotFound from 'src/NotFound';
-import { componentBuilder } from 'temp/componentBuilder';
-import config from 'temp/config';
-
-const FEAASRender = ({
-  notFound,
-  componentProps,
-  layoutData,
-  headLinks,
-}: SitecorePageProps): JSX.Element => {
-  if (notFound) {
-    return <NotFound />;
-  }
-  return (
-    <ComponentPropsContext value={componentProps}>
-      <SitecoreContext
-        componentFactory={componentBuilder.getComponentFactory()}
-        layoutData={layoutData}
-      >
-        <Head>
-          <title>Sitecore Component Library</title>
-          <link rel="icon" href={`${config.publicUrl}/favicon.ico`} />
-          {headLinks.map((headLink) => (
-            <link rel={headLink.rel} key={headLink.href} href={headLink.href} />
-          ))}
-        </Head>
-        <ComponentLibraryLayout {...layoutData} />
-      </SitecoreContext>
-    </ComponentPropsContext>
-  );
-};
-
-export const getServerSideProps: GetServerSideProps = async (context) => {
-  const props = await sitecorePagePropsFactory.create(context);
-  return {
-    props,
-    // not found when page not requested through editing render api or notFound set in page-props
-    notFound: props.notFound || !context.preview,
-  };
-};
-
-export default FEAASRender;