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

package/dist/templates/nextjs/src/lib/component-props/index.ts

@@ -2,7 +2,14 @@ import {
   ComponentParams,
   ComponentRendering,
   SitecoreContextValue,
+  LayoutServiceData,
+  ComponentPropsService,
+  ComponentPropsCollection,
+  ComponentPropsError,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import { isServerSidePropsContext } from 'lib/page-props-factory';
+import { moduleFactory } from 'temp/componentBuilder';
 
 /**
  * Shared component props
@@ -21,3 +28,36 @@ export type ComponentProps = {
 export type ComponentWithContextProps = ComponentProps & {
   sitecoreContext: SitecoreContextValue;
 };
+
+/**
+ * Fetch component props for a given layout data and context
+ * @param {LayoutServiceData} layoutData - The layout data to fetch component props for
+ * @param {GetServerSidePropsContext | GetStaticPropsContext} context - The context to fetch component props for
+ * @returns {ComponentPropsCollection} The component props
+ * @throws {Error} If there are errors during component props fetching
+ */
+export async function fetchComponentProps(
+  layoutData: LayoutServiceData,
+  context: GetServerSidePropsContext | GetStaticPropsContext
+): Promise<ComponentPropsCollection> {
+  const service = new ComponentPropsService();
+
+  const componentProps = isServerSidePropsContext(context)
+    ? await service.fetchServerSideComponentProps({ layoutData, context, moduleFactory })
+    : await service.fetchStaticComponentProps({ layoutData, context, moduleFactory });
+
+  const errors = Object.keys(componentProps)
+    .map(id => {
+      const c = componentProps[id] as ComponentPropsError;
+      return c?.error
+        ? `\nUnable to get component props for ${c.componentName} (${id}): ${c.error}`
+        : '';
+    })
+    .join('');
+
+  if (errors.length) {
+    throw new Error(errors);
+  }
+
+  return componentProps;
+}

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

@@ -1,50 +1,17 @@
-import { ComponentPropsService, ComponentPropsError } from '@sitecore-jss/sitecore-jss-nextjs';
-import { SitecorePageProps } from 'lib/page-props';
 import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
-import { moduleFactory } from 'temp/componentBuilder';
-import { Plugin, isServerSidePropsContext } from '..';
+import { SitecorePageProps } from 'lib/page-props';
+import { fetchComponentProps } from 'lib/component-props';
+import { Plugin } from '..';
 
 class ComponentPropsPlugin implements Plugin {
-  private componentPropsService: ComponentPropsService;
-
   // Make sure to run this plugin last to ensure that the updated layout data is used
   order = 10;
 
-  constructor() {
-    this.componentPropsService = new ComponentPropsService();
-  }
-
   async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
     if (!props.layoutData.sitecore.route) return props;
 
     // Retrieve component props using side-effects defined on components level
-    if (isServerSidePropsContext(context)) {
-      props.componentProps = await this.componentPropsService.fetchServerSideComponentProps({
-        layoutData: props.layoutData,
-        context,
-        moduleFactory,
-      });
-    } else {
-      props.componentProps = await this.componentPropsService.fetchStaticComponentProps({
-        layoutData: props.layoutData,
-        context,
-        moduleFactory,
-      });
-    }
-
-    const errors = Object.keys(props.componentProps)
-      .map(id => {
-        const component = props.componentProps[id] as ComponentPropsError;
-
-        return component.error
-          ? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
-          : '';
-      })
-      .join('');
-
-    if (errors.length) {
-      throw new Error(errors);
-    }
+    props.componentProps = await fetchComponentProps(props.layoutData, context);
 
     return props;
   }

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

@@ -1,17 +1,19 @@
 import { JSX } from 'react';
-import config from 'temp/config';
+import { GetStaticProps } from 'next';
 import {
   GraphQLErrorPagesService,
   SitecoreContext,
+  ComponentPropsContext,
   ErrorPages,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
 import NotFound from 'src/NotFound';
 import { componentBuilder } from 'temp/componentBuilder';
 import Layout from 'src/Layout';
-import { GetStaticProps } from 'next';
 import { siteResolver } from 'lib/site-resolver';
+import { fetchComponentProps } from 'lib/component-props';
 import clientFactory from 'lib/graphql-client-factory';
+import config from 'temp/config';
 
 const Custom404 = (props: SitecorePageProps): JSX.Element => {
   if (!(props && props.layoutData)) {
@@ -19,20 +21,22 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
   }
 
   return (
-    <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>
+    <ComponentPropsContext value={props.componentProps}>
+      <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>
+    </ComponentPropsContext>
   );
 };
 
@@ -58,10 +62,19 @@ export const getStaticProps: GetStaticProps = async (context) => {
     }
   }
 
+  const layoutData = resultErrorPages?.notFoundPage?.rendered || null;
+
+  let componentProps = {};
+
+  if (layoutData?.sitecore?.route) {
+    componentProps = await fetchComponentProps(layoutData, context);
+  }
+
   return {
     props: {
       headLinks: [],
-      layoutData: resultErrorPages?.notFoundPage?.rendered || null,
+      layoutData,
+      componentProps,
     },
   };
 };

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

@@ -1,17 +1,19 @@
+import { GetStaticProps } from 'next';
 import { JSX } from 'react';
 import Head from 'next/head';
 import {
   GraphQLErrorPagesService,
   SitecoreContext,
+  ComponentPropsContext,
   ErrorPages,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
 import Layout from 'src/Layout';
 import { componentBuilder } from 'temp/componentBuilder';
-import { GetStaticProps } from 'next';
-import config from 'temp/config';
 import { siteResolver } from 'lib/site-resolver';
 import clientFactory from 'lib/graphql-client-factory';
+import { fetchComponentProps } from 'lib/component-props';
+import config from 'temp/config';
 
 /**
  * Rendered in case if we have 500 error
@@ -35,20 +37,22 @@ const Custom500 = (props: SitecorePageProps): JSX.Element => {
   }
 
   return (
-    <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>
+    <ComponentPropsContext value={props.componentProps}>
+      <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>
+    </ComponentPropsContext>
   );
 };
 
@@ -74,10 +78,19 @@ export const getStaticProps: GetStaticProps = async (context) => {
     }
   }
 
+  const layoutData = resultErrorPages?.notFoundPage?.rendered || null;
+
+  let componentProps = {};
+
+  if (layoutData?.sitecore?.route) {
+    componentProps = await fetchComponentProps(layoutData, context);
+  }
+
   return {
     props: {
       headLinks: [],
-      layoutData: resultErrorPages?.serverErrorPage?.rendered || null,
+      layoutData,
+      componentProps,
     },
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.10.0-canary.1",
+  "version": "22.10.0-canary.3",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.2",
     "typescript": "~5.9.2"
   },
-  "gitHead": "fdb771841e9cfec52c003ef4a9e88c8ac9017bd0"
+  "gitHead": "6b65bba899f6e3d2b242bc0f7575ca8302f7706e"
 }