create-sitecore-jss 22.2.0-canary.9 → 22.2.1-canary.1

package/dist/templates/angular/src/app/lib/layout-service-factory.ts

@@ -1,33 +1,25 @@
 import {
   LayoutService,
   GraphQLLayoutService,
-  <% if (!locals.xmcloud) { -%>
   RestLayoutService,
   constants,
-   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import { clientFactory } from './client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    const service =
-    <% if (!locals.xmcloud) { -%>
-      process.env.FETCH_WITH === constants.FETCH_WITH.REST
-        ? new RestLayoutService({
-            apiHost: environment.sitecoreApiHost,
-            apiKey: environment.sitecoreApiKey,
-            siteName: environment.sitecoreSiteName,
-            configurationName: environment.layoutServiceConfigurationName,
-          })
-        : 
-    <% } -%>
-        new GraphQLLayoutService({
-            clientFactory,
-            siteName: environment.sitecoreSiteName,
-          });
-
-    return service;
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
+      ? new GraphQLLayoutService({
+          clientFactory,
+          siteName: environment.sitecoreSiteName,
+        })
+      : new RestLayoutService({
+          apiHost: environment.sitecoreApiHost,
+          apiKey: environment.sitecoreApiKey,
+          siteName: environment.sitecoreSiteName,
+          configurationName: environment.layoutServiceConfigurationName,
+        });
   }
 }
 

package/dist/templates/angular/src/app/routing/layout/layout.component.html

@@ -1,7 +1,7 @@
 <app-navigation></app-navigation>
 <div class="container">
   <ng-container *ngIf="state === LayoutState.Layout">
-    <app-scripts></app-scripts>
+    <app-visitor-identification></app-visitor-identification>
     <sc-placeholder
       name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
       [rendering]="route"

package/dist/templates/angular/src/app/routing/layout/layout.component.ts

@@ -71,8 +71,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onPlaceholderLoaded(_placeholderName: string) {
+  onPlaceholderLoaded(placeholderName: string) {
     // you may optionally hook to the loaded event for a placeholder,
     // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
+    console.debug(`layout.component.ts: placeholder component fired loaded event for the ${placeholderName} placeholder`);
   }
 }

package/dist/templates/angular/src/app/routing/navigation/navigation.component.html

@@ -1,6 +1,4 @@
-<div
-  class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom"
->
+<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
   <h5 class="my-0 me-md-auto fw-normal">
     <a routerLink="/" class="text-dark" class="logo"></a>
   </h5>
@@ -13,8 +11,11 @@
     >
       {{ 'Documentation' | translate }}
     </a>
-    <a href="https://github.com/Sitecore/jss" class="p-2 text-dark">
-      {{ 'JSS Repository' | translate }}
+    <a routerLink="/styleguide" class="p-2 text-dark">
+      {{ 'Styleguide' | translate }}
+    </a>
+    <a routerLink="/graphql" class="p-2 text-dark">
+      {{ 'GraphQL' | translate }}
     </a>
   </nav>
 </div>

package/dist/templates/angular/src/app/routing/navigation/navigation.component.ts

@@ -4,4 +4,5 @@ import { Component } from '@angular/core';
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
 })
-export class NavigationComponent {}
+export class NavigationComponent {
+}

package/dist/templates/angular/src/app/routing/routing.module.ts

@@ -9,7 +9,7 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { BrowserModule } from '@angular/platform-browser';
 import { NavigationComponent } from './navigation/navigation.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { ScriptsModule } from './scripts/scripts.module';
+import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
 
 export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
   // use the route builder to parse out language / server route
@@ -27,7 +27,7 @@ export function jssRouteMatcher(url: UrlSegment[]): UrlMatchResult {
 
   return {
     consumed: url,
-    posParams,
+    posParams
   };
 }
 
@@ -39,25 +39,32 @@ const routes: Routes = [
     matcher: jssRouteMatcher,
     component: LayoutComponent,
     resolve: {
-      jssState: jssRouteResolver,
+      jssState: jssRouteResolver
     },
     runGuardsAndResolvers: 'always',
-  },
+  }
 ];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, {
-      onSameUrlNavigation: 'reload',
-      initialNavigation: 'enabledBlocking',
-    }),
+    RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', initialNavigation: 'enabledBlocking' }),
     JssModule,
     TranslateModule,
-    BrowserModule,
-    ScriptsModule,
+    BrowserModule
+  ],
+  exports: [
+    RouterModule,
+    TranslateModule,
+  ],
+  declarations: [
+    NotFoundComponent,
+    ServerErrorComponent,
+    LayoutComponent,
+    NavigationComponent,
+    VisitorIdentificationComponent
   ],
-  exports: [RouterModule, TranslateModule],
-  declarations: [NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent],
-  providers: [JssRouteBuilderService],
+  providers: [
+    JssRouteBuilderService,
+  ]
 })
-export class RoutingModule {}
+export class RoutingModule { }

package/dist/templates/{angular-sxp/src/app/routing/scripts → angular/src/app/routing}/visitor-identification/visitor-identification.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { JssContextService } from '../../../jss-context.service';
+import { JssContextService } from '../../jss-context.service';
 
 let emittedVI = false;
 
@@ -13,13 +13,7 @@ let emittedVI = false;
  */
 @Component({
   selector: 'app-visitor-identification',
-  template: `
-    <meta
-      *ngIf="visitorIdentificationTimestamp"
-      name="VIcurrentDateTime"
-      [content]="visitorIdentificationTimestamp"
-    />
-  `,
+  template: `<meta *ngIf="visitorIdentificationTimestamp" name="VIcurrentDateTime" [content]="visitorIdentificationTimestamp" />`,
 })
 export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   visitorIdentificationTimestamp: number;
@@ -27,7 +21,7 @@ export class VisitorIdentificationComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
 
   // inject the JssContextService, which maintains the current Sitecore Context
-  constructor(private jssContext: JssContextService) {}
+  constructor(private jssContext: JssContextService) { }
 
   ngOnInit() {
     this.contextSubscription = this.jssContext.state.subscribe((state) => {

package/dist/templates/angular/src/graphql-fragment-types.ts

@@ -48,6 +48,9 @@ export default {
           {
             name: 'UnknownItem',
           },
+          {
+            name: 'StyleguideComponentParamsRenderingParameters',
+          },
           {
             name: 'C__StandardTemplate',
           },
@@ -57,6 +60,95 @@ export default {
           {
             name: 'RenderEngineType',
           },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideTracking',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSitecoreContext',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideSection',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideRouteFields',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideMultilingual',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabsTab',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutTabs',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideLayoutReuse',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideItemLinkItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageText',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageRichText',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageNumber',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageLink',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageItemLink',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageImage',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageFile',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageDate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCustom',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageContentList',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideFieldUsageCheckbox',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideExplanatoryComponent',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideContentListItemTemplate',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideComponentParams',
+          },
+          {
+            name:
+              '<%- helper.getAppPrefix(appPrefix, appName, false) %>StyleguideAngularLazyLoading',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo',
+          },
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
           {
             name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ContentBlock',
           },
@@ -102,6 +194,9 @@ export default {
         kind: 'INTERFACE',
         name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
         possibleTypes: [
+          {
+            name: '<%- helper.getAppPrefix(appPrefix, appName, false) %>ExampleCustomRouteType',
+          },
           {
             name: 'C__<%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute',
           },

package/dist/templates/angular/tsconfig.json

@@ -24,13 +24,8 @@
     "lib": ["es2018", "dom", "esnext.asynciterable"],
     "paths": {
       "@angular/*": ["../node_modules/@angular/*"],
-      "rxjs": ["node_modules/rxjs", "../node_modules/rxjs"],
-      "lib/*": ["src/app/lib/*"],
+      "rxjs": ["node_modules/rxjs", "../node_modules/rxjs"]
     },
-    "baseUrl": "./",
-    "esModuleInterop": true
-  },
-  "ts-node": {
-    "require": ["tsconfig-paths/register"]
+    "baseUrl": "./"
   }
 }

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "22.2.0-canary",
+  "version": "22.2.1-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -25,10 +25,10 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.2.1-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
-    "next": "^14.1.0",
+    "next": "^14.2.7",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -43,8 +43,8 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.1-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.1-canary",
     "@types/node": "^20.14.2",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",

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

@@ -7,7 +7,8 @@ import { Plugin, isServerSidePropsContext } from '..';
 class ComponentPropsPlugin implements Plugin {
   private componentPropsService: ComponentPropsService;
 
-  order = 2;
+  // Make sure to run this plugin last to ensure that the updated layout data is used
+  order = 10;
 
   constructor() {
     this.componentPropsService = new ComponentPropsService();

package/dist/templates/nextjs-styleguide/package.json

@@ -4,7 +4,7 @@
     "nprogress": "~0.2.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.1-canary",
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {

package/dist/templates/nextjs-sxa/src/components/Container.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-
-const BACKGROUND_REG_EXP = new RegExp(
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
-);
+import React from 'react';
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
@@ -16,22 +11,19 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext();
   const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
   const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
   const phKey = `container-${props.params.DynamicPlaceholderId}`;
   const id = props.params.RenderingIdentifier;
+  const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
   let backgroundImage = props.params.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
-  if (backgroundImage) {
-    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
-    backgroundImage = `${backgroundImage
-      ?.match(BACKGROUND_REG_EXP)
-      ?.pop()
-      ?.replace(/-/gi, '')}`;
+  if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || '';
+
     backgroundStyle = {
-      backgroundImage: `url('${prefix}${backgroundImage}')`,
+      backgroundImage: `url('${mediaUrl}')`,
     };
   }
 

package/dist/templates/nextjs-xmcloud/package.json

@@ -1,7 +1,8 @@
 {
   "dependencies": {
-    "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }

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

@@ -1,21 +1,36 @@
+import { useEffect } from 'react';
 import { SitecorePageProps } from 'lib/page-props';
-import { context } from 'src/lib/context';
+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';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
  * that needs to happen early in the application's lifecycle.
  */
 const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
-  /**
-   * Initializes the application Context and associated Software Development Kits (SDKs).
-   * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
-   * It prepares the resources needed to interact with various services and features within the application.
-   */
-  context.init({
-    siteName: props.site?.name || config.sitecoreSiteName,
-    pageState: props.layoutData?.sitecore?.context?.pageState,
-  });
+  // Browser ClientSDK init allows for page view events to be tracked
+  useEffect(() => {
+    const pageState = props.layoutData?.sitecore?.context.pageState;
+    if (process.env.NODE_ENV === 'development')
+      console.debug('Browser Events SDK is not initialized in development environment');
+    else if (pageState !== LayoutServicePageState.Normal)
+      console.debug('Browser Events SDK is not initialized in edit and preview modes');
+    else {
+      CloudSDK({
+        sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+        siteName: props.site?.name || config.sitecoreSiteName,
+        enableBrowserCookie: true,
+        // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
+        cookieDomain: window.location.hostname.replace(/^www\./, ''),
+      })
+        .addEvents()
+        .initialize();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.site?.name]);
 
   return null;
 };

package/dist/templates/nextjs-xmcloud/src/byoc/{index.ts → index.tsx}

@@ -1,26 +1,43 @@
+import React from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
+import * as Events from '@sitecore-cloudsdk/events/browser';
 import '@sitecore/components/context';
 import dynamic from 'next/dynamic';
-import { context } from 'lib/context';
+import config from 'temp/config';
+import {
+  LayoutServicePageState,
+  SitecoreContextReactContext,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 /**
  * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details)
  * It enables registering components in client-only or SSR/hybrid contexts
  * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead
  */
 
-// Set context properties to be available within BYOC components
-FEAAS.setContextProperties(context);
-
 // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side
 const ClientBundle = dynamic(() => import('./index.client'), {
   ssr: false,
 });
 
-// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts
-import './index.hybrid';
-
 // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available
 // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout
 FEAAS.enableNextClientsideComponents(dynamic, ClientBundle);
 
-export default FEAAS.ExternalComponentBundle;
+// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts
+import './index.hybrid';
+
+const BYOCInit = (): JSX.Element | null => {
+  const sitecoreContext = React.useContext(SitecoreContextReactContext).context;
+  // Set context properties to be available within BYOC components
+  FEAAS.setContextProperties({
+    sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+    sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+    pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal,
+    siteName: sitecoreContext?.site?.name || config.sitecoreSiteName,
+    eventsSDK: Events,
+  });
+
+  return <FEAAS.ExternalComponentBundle />;
+};
+
+export default BYOCInit;

package/dist/templates/nextjs-xmcloud/src/components/CdpPageView.tsx

@@ -4,8 +4,8 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
+import { pageView } from '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
-import { context } from 'lib/context';
 
 /**
  * This is the CDP page view component.
@@ -46,19 +46,14 @@ const CdpPageView = (): JSX.Element => {
       variantId as string,
       scope
     );
-    // there are cases where Events SDK will be absent which are expected to reject
-    context
-      .getSDK('Events')
-      .then((Events) =>
-        Events.pageView({
-          channel: 'WEB',
-          currency: 'USD',
-          page: route.name,
-          pageVariantId,
-          language,
-        })
-      )
-      .catch((e) => console.debug(e));
+    // there can be cases where Events are not initialized which are expected to reject
+    pageView({
+      channel: 'WEB',
+      currency: 'USD',
+      page: route.name,
+      pageVariantId,
+      language,
+    }).catch((e) => console.debug(e));
   }, [pageState, route, variantId, site]);
 
   return <></>;

package/dist/templates/nextjs-xmcloud/src/lib/middleware/plugins/personalize.ts

@@ -21,7 +21,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
   order = 1;
 
   constructor() {
-
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {

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

@@ -4,7 +4,8 @@ import { Plugin } from '..';
 import config from 'temp/config';
 
 class ComponentThemesPlugin implements Plugin {
-  order = 2;
+  // Make sure to run this plugin after the personalization plugin, since it relies on the layout data
+  order = 10;
 
   async exec(props: SitecorePageProps) {
     // Collect FEAAS, BYOC, SXA component themes

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

@@ -20,13 +20,14 @@ class PreviewModePlugin implements Plugin {
 
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
-      const { site, itemId, language, version, variantIds } = context.previewData;
+      const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;
 
       const data = await graphQLEditingService.fetchEditingData({
         siteName: site,
         itemId,
         language,
         version,
+        layoutKind,
       });
 
       if (!data) {

package/dist/templates/node-headless-ssr-experience-edge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "22.2.0-canary",
+  "version": "22.2.1-canary",
   "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,7 +19,7 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.1-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

package/dist/templates/node-headless-ssr-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "22.2.0-canary",
+  "version": "22.2.1-canary",
   "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,8 +19,8 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-proxy": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.1-canary",
+    "@sitecore-jss/sitecore-jss-proxy": "~22.2.1-canary",
     "agentkeepalive": "^4.2.1",
     "compression": "~1.7.4",
     "express": "~4.19.2",