create-sitecore-jss 22.8.0-canary.15 → 22.8.0-canary.17

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

@@ -3,7 +3,16 @@
  */
 import { JSX } from 'react';
 import Head from 'next/head';
-import { Placeholder, LayoutServiceData, Field, HTMLLink } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  LayoutServiceData,
+  Field,
+  HTMLLink,
+  Placeholder,
+  <% if (templates.includes('nextjs-xmcloud')) { %>
+  DesignLibrary,
+  RenderingType,
+  <% } %>
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 import Scripts from 'src/Scripts';
 
@@ -27,6 +36,26 @@ const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
   const isPageEditing = layoutData.sitecore.context.pageEditing;
   const mainClassPageEditing = isPageEditing ? 'editing-mode' : 'prod-mode';
 
+  const renderContent = () => (
+    <>
+      <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>
+    </>
+  );
+
   return (
     <>
       <Scripts />
@@ -40,18 +69,19 @@ 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')) { %>
+          {layoutData.sitecore.context.renderingType === RenderingType.Component ? (
+            <DesignLibrary {...layoutData} />
+          ) : (
+            renderContent()
+          )}
+        <% } else { %>
+          {renderContent()}
+        <% } %>
       </div>
     </>
   );
 };
 
 export default Layout;
+

package/dist/templates/nextjs-sxa/src/assets/sass/components/_component-column-splitter.scss

@@ -1,14 +1,14 @@
-@import '@sass/abstracts/vars';
-
-.row.column-splitter {
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: $default-padding * 0.5;
-    padding-right: $default-padding * 0.5;
-    max-width: none;
-
-    > div {
-       padding-left: $default-padding;
-       padding-right: $default-padding;
-    }
-}
+@import '@sass/abstracts/vars';
+
+.row.column-splitter {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: $default-padding * 0.5;
+    padding-right: $default-padding * 0.5;
+    max-width: none;
+
+    > div {
+       padding-left: $default-padding;
+       padding-right: $default-padding;
+    }
+}

package/dist/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss

@@ -1,42 +1,42 @@
-@import "@sass/abstracts/vars";
-@import "@sass/abstracts/mixins";
-
-.promo-shadow {
-    max-width: 960px;
-    padding: 0;
-    border-top-width: 3px;
-    border-top-color: $promo-shadow-border;
-    border-style: solid;
-    overflow: visible;
-    position: relative;
-    &.promo {
-        float: left;
-    }
-    >.component-content {
-        padding: 15px;
-        margin: 0 0 30px 0;
-        @include respond-to(all-mobile) {
-            margin: 0 10px 30px 10px;
-        }
-        &:before, &:after {
-            opacity: 0.7;
-            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
-            position: absolute;
-            z-index: -1;
-            height: 20%;
-            max-height: 100px;
-            max-width: 460px;
-            width: 47%;
-            content: "";
-            bottom: 10px;
-        }
-        &:before {
-            left: 2%;
-            transform: rotate(-3deg);
-        }
-        &:after {
-            right: 2%;
-            transform: rotate(3deg);
-        }
-    }
-}
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+
+.promo-shadow {
+    max-width: 960px;
+    padding: 0;
+    border-top-width: 3px;
+    border-top-color: $promo-shadow-border;
+    border-style: solid;
+    overflow: visible;
+    position: relative;
+    &.promo {
+        float: left;
+    }
+    >.component-content {
+        padding: 15px;
+        margin: 0 0 30px 0;
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        &:before, &:after {
+            opacity: 0.7;
+            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
+            position: absolute;
+            z-index: -1;
+            height: 20%;
+            max-height: 100px;
+            max-width: 460px;
+            width: 47%;
+            content: "";
+            bottom: 10px;
+        }
+        &:before {
+            left: 2%;
+            transform: rotate(-3deg);
+        }
+        &:after {
+            right: 2%;
+            transform: rotate(3deg);
+        }
+    }
+}

package/dist/templates/nextjs-sxa/src/pages/404.tsx

@@ -22,6 +22,14 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
     <SitecoreContext
       componentFactory={componentBuilder.getComponentFactory()}
       layoutData={props.layoutData}
+      <% if (templates.includes('nextjs-xmcloud')) { %>
+        api={{
+          edge: {
+            contextId: config.sitecoreEdgeContextId,
+            edgeUrl: config.sitecoreEdgeUrl,
+          },
+        }}
+      <% } %>
     >
       <Layout layoutData={props.layoutData} headLinks={props.headLinks} />
     </SitecoreContext>

package/dist/templates/nextjs-sxa/src/pages/500.tsx

@@ -38,6 +38,14 @@ const Custom500 = (props: SitecorePageProps): JSX.Element => {
     <SitecoreContext
       componentFactory={componentBuilder.getComponentFactory()}
       layoutData={props.layoutData}
+      <% if (templates.includes('nextjs-xmcloud')) { %>
+        api={{
+          edge: {
+            contextId: config.sitecoreEdgeContextId,
+            edgeUrl: config.sitecoreEdgeUrl,
+          },
+        }}
+      <% } %>
     >
       <Layout layoutData={props.layoutData} headLinks={props.headLinks} />
     </SitecoreContext>

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
@@ -13,9 +13,13 @@ 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)
+    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,11 +6,14 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import {
   editingDataService,
+  isDesignLibraryPreviewData,
   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;
@@ -18,6 +21,54 @@ class PreviewModePlugin implements Plugin {
   async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
     if (!context.preview) return props;
 
+    if (isDesignLibraryPreviewData(context.previewData)) {
+      const {
+        itemId,
+        componentUid,
+        site,
+        language,
+        renderingId,
+        dataSourceId,
+        version,
+        mode,
+      } = context.previewData;
+
+      const componentService = new RestComponentLayoutService({
+        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+        sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+      });
+
+      const componentData = await componentService.fetchComponentData({
+        siteName: site,
+        itemId,
+        language,
+        componentUid,
+        renderingId,
+        dataSourceId,
+        version,
+        mode,
+      });
+
+      if (!componentData) {
+        throw new Error(
+          `Unable to fetch editing data for preview ${JSON.stringify(context.previewData)}`
+        );
+      }
+
+      // we can reuse editing service, fortunately
+      const dictionaryData = await graphQLEditingService.fetchDictionaryData({
+        siteName: site,
+        language,
+      });
+
+      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;

package/dist/templates/react/package.json

@@ -35,9 +35,9 @@
     "graphql": "~16.8.1",
     "graphql-tag": "~2.12.6",
     "i18next": "^22.0.6",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-helmet": "~6.1.0",
     "react-i18next": "~12.0.0",
     "react-router-dom": "~6.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.8.0-canary.15",
+  "version": "22.8.0-canary.17",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "2d13caa586cdca34048f059d813accdd4f5af9a8"
+  "gitHead": "9410adbc422816647f24b8fe117d6096181e0b5a"
 }