create-sitecore-jss 22.4.0-canary.1 → 22.4.0-canary.3

package/dist/templates/angular/README.md

@@ -10,4 +10,4 @@
 @TODO: Verify the link for angular xmcloud when documentation is ready
 -->
 
-[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-angular.html)
+[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/introducing-sitecore-javascript-rendering-sdk.html)

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

@@ -13,9 +13,10 @@ 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 === '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/preview-mode.ts

@@ -6,11 +6,14 @@ 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;
@@ -18,6 +21,48 @@ 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, variant } =
+        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,
+        variant,
+        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;

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

@@ -0,0 +1,51 @@
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.4.0-canary.1",
+  "version": "22.4.0-canary.3",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "d3ecb29aed9eb83d3d4db8df8ee58870aae6e74f"
+  "gitHead": "9e192b19fd1c19e559a93469ce26392eed3621e0"
 }