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

package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts

@@ -1,11 +1,15 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { Subscription } from 'rxjs';
 import { SxaComponent } from '../sxa.component';
 import { JssContextService } from '../../jss-context.service';
+import { NavigationItemComponent } from './navigation-item.component';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
+  imports: [CommonModule, JssModule, NavigationItemComponent],
   host: {
     'class': 'component navigation',
     '[id]': 'id',
@@ -17,16 +21,15 @@ export class NavigationComponent extends SxaComponent implements OnInit, OnDestr
   private contextSubscription: Subscription;
   isOpenMenu = false;
   baseLevel = 1;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
+  private jssContext = inject(JssContextService);
+  fieldKeys: string[];
 
   ngOnInit() {
     super.ngOnInit();
     this.contextSubscription = this.jssContext.state.subscribe((newState) => {
       this.isEditing = newState.sitecore && newState.sitecore.context.pageEditing;
     });
+    this.fieldKeys = Object.keys(this.rendering.fields || {});
   }
 
   ngOnDestroy() {

package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { RichTextField } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService } from '../../jss-context.service';
 import { SxaComponent } from './../sxa.component';
@@ -7,6 +8,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-page-content',
   templateUrl: './page-content.component.html',
+  imports: [JssModule],
   host: {
     'class': 'component content',
     '[class]': 'styles',
@@ -17,10 +19,8 @@ export class PageContentComponent extends SxaComponent implements OnInit, OnDest
   content?: RichTextField;
   contextContent?: RichTextField;
   private contextSubscription: Subscription;
+  private jssContext = inject(JssContextService);
 
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
   ngOnInit() {
     super.ngOnInit();
 

package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-partial-design-dynamic-placeholder',
   templateUrl: './partial-design-dynamic-placeholder.component.html',
+  imports: [JssModule]
 })
 export class PartialDesignDynamicPlaceholderComponent extends SxaComponent implements OnInit {
   sig: string;

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.html

@@ -1,5 +1,5 @@
 <div class="component-content">
-  <ng-container *ngIf="rendering.fields; else empty">
+  @if (rendering.fields) {
     <div class="field-promoicon">
       <img *scImage="rendering.fields.PromoIcon" />
     </div>
@@ -13,9 +13,7 @@
         <a *scGenericLink="rendering.fields.PromoLink"></a>
       </div>
     </div>
-  </ng-container>
+  } @else {
+    <span className="is-empty-hint">Promo</span>
+  }
 </div>
-
-<ng-template #empty>
-  <span className="is-empty-hint">Promo</span>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-promo',
   templateUrl: './promo.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     'class': 'component promo',
     '[class]': "styles",

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html

@@ -1,8 +1,7 @@
 <div class="component-content">
-  <ng-container *ngIf="text; else emptyHint">
+  @if (text) {
     <div *scRichText="text"></div>
-  </ng-container>
-  <ng-template #emptyHint>
+  } @else {
     <span class="is-empty-hint">Rich text</span>
-  </ng-template>
+  }
 </div>

package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { Field } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-richtext',
   templateUrl: './richtext.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     'class': 'component rich-text',
     '[class]': "styles",

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html

@@ -1,11 +1,12 @@
-<div
-  *ngFor="let ph of enabledPlaceholders"
-  class="container-fluid"
-  [ngClass]="getRowClass(+ph - 1)"
->
-  <div>
-    <div class="row">
-      <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+@for (ph of enabledPlaceholders; track ph) {
+  <div
+    class="container-fluid"
+    [ngClass]="getRowClass(+ph - 1)"
+  >
+    <div>
+      <div class="row">
+        <sc-placeholder [name]="getPlaceholderName(ph)" [rendering]="rendering"> </sc-placeholder>
+      </div>
     </div>
   </div>
-</div>
+}

package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 
 @Component({
   selector: 'app-row-splitter',
   templateUrl: './row-splitter.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     "class": "component row-splitter",
     "[class]": "rowSplitterStyles",

package/dist/templates/angular-xmcloud/src/app/components/title/title.component.html

@@ -1,10 +1,9 @@
 <div clas="component-content">
   <div class="field-title">
-    <ng-container *ngIf="!pageEditing; else textOnly">
+    @if (!pageEditing) {
       <a *scGenericLink="link"></a>
-    </ng-container>
+    } @else {
+      <span *scText="text"></span>
+    }
   </div>
 </div>
-<ng-template #textOnly>
-  <span *scText="text"></span>
-</ng-template>

package/dist/templates/angular-xmcloud/src/app/components/title/title.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 import { LinkField, SxaTitleFields, TextField } from '@sitecore-jss/sitecore-jss-angular';
 import { SxaComponent } from '../sxa.component';
 import { Subscription } from 'rxjs';
@@ -7,6 +9,7 @@ import { JssContextService } from '../../jss-context.service';
 @Component({
   selector: 'app-title',
   templateUrl: './title.component.html',
+  imports: [CommonModule, JssModule],
   host: {
     'class': 'component title',
     '[class]': 'styles',
@@ -19,10 +22,7 @@ export class TitleComponent extends SxaComponent<SxaTitleFields> implements OnIn
   pageEditing?: boolean;
   
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {
-    super();
-  }
+  private jssContext = inject(JssContextService);
 
   ngOnInit() {
     super.ngOnInit();

package/dist/templates/angular-xmcloud/src/app/jss-link.service.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
 
@@ -6,7 +6,7 @@ import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
   providedIn: 'root',
 })
 export class JssLinkService {
-  constructor(@Inject(DOCUMENT) private document: Document) {}
+  private document = inject(DOCUMENT);
 
   /**
    * Adds link element in the document head.

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

@@ -1,38 +1,40 @@
 <div class="{{ mainClassPageEditing }}">
-  <ng-container *ngIf="state === LayoutState.Layout">
-    <app-scripts></app-scripts>
-    <header>
-      <div id="header">    
-        <sc-placeholder
-          name="headless-header"
-          [rendering]="route"
-          (loaded)="onPlaceholderLoaded($event)"
-        ></sc-placeholder>
-      </div>
-    </header>
-    <main>
-      <div id="content">
-        <sc-placeholder
-          name="headless-main"
-          [rendering]="route"
-          (loaded)="onPlaceholderLoaded($event)"
-        ></sc-placeholder>
-      </div>
-    </main>
-    <footer>
-      <div id="footer">
-        <sc-placeholder
-          name="headless-footer"
-          [rendering]="route"
-          (loaded)="onPlaceholderLoaded($event)"
-        ></sc-placeholder>
-      </div>
-    </footer>
-  </ng-container>
-
-  <app-not-found
-    *ngIf="state === LayoutState.NotFound"
-    [errorContextData]="errorContextData"
-  ></app-not-found>
-  <app-server-error *ngIf="state === LayoutState.Error"></app-server-error>
+  @if (state === LayoutState.Layout) {
+    <ng-container>
+      <app-scripts></app-scripts>
+      <header>
+        <div id="header">    
+          <sc-placeholder
+            name="headless-header"
+            [rendering]="route"
+            (loaded)="onPlaceholderLoaded($event)"
+          ></sc-placeholder>
+        </div>
+      </header>
+      <main>
+        <div id="content">
+          <sc-placeholder
+            name="headless-main"
+            [rendering]="route"
+            (loaded)="onPlaceholderLoaded($event)"
+          ></sc-placeholder>
+        </div>
+      </main>
+      <footer>
+        <div id="footer">
+          <sc-placeholder
+            name="headless-footer"
+            [rendering]="route"
+            (loaded)="onPlaceholderLoaded($event)"
+          ></sc-placeholder>
+        </div>
+      </footer>
+    </ng-container>
+  }
+  @if (state === LayoutState.NotFound) {
+    <app-not-found [errorContextData]="errorContextData"></app-not-found>
+  }
+  @if (state === LayoutState.Error) {
+    <app-server-error></app-server-error>
+  }
 </div>

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

@@ -1,17 +1,22 @@
 /* eslint-disable no-shadow, no-console */
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import {
   RouteData,
   Field,
   LayoutServiceContextData,
   getContentStylesheetLink,
+  JssModule,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { JssState } from '../../JssState';
 import { JssMetaService } from '../../jss-meta.service';
 import { JssLinkService } from '../../jss-link.service';
+import { NotFoundComponent } from '../not-found/not-found.component';
+import { ServerErrorComponent } from '../server-error/server-error.component';
+import { ScriptsComponent } from '../scripts/scripts.component';
 import { environment as env } from '../../../environments/environment';
+import { CommonModule } from '@angular/common';
 
 enum LayoutState {
   Layout,
@@ -27,6 +32,7 @@ interface RouteFields {
 @Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
+  imports: [CommonModule, JssModule, NotFoundComponent, ServerErrorComponent, ScriptsComponent],
 })
 export class LayoutComponent implements OnInit, OnDestroy {
   route: RouteData<RouteFields>;
@@ -36,11 +42,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
   errorContextData: LayoutServiceContextData;
   mainClassPageEditing: string;
 
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private readonly meta: JssMetaService,
-    private linkService: JssLinkService
-  ) {}
+  private activatedRoute = inject(ActivatedRoute);
+  private readonly meta = inject(JssMetaService);
+  private linkService = inject(JssLinkService);
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { isServer, CdpHelper, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular';
 import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser';
@@ -18,8 +18,7 @@ import { environment } from '../../../environments/environment';
 })
 export class CdpPageViewComponent implements OnInit, OnDestroy {
   private contextSubscription: Subscription;
-
-  constructor(private jssContext: JssContextService) {}
+  private jssContext = inject(JssContextService);
 
   ngOnInit(): void {
     if (!isServer()) {

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
 import '@sitecore-cloudsdk/events/browser';
@@ -15,7 +15,7 @@ import { JssState } from '../../JssState';
   template: '',
 })
 export class CloudSdkInitComponent implements OnInit {
-  constructor(private jssContext: JssContextService) {}
+  private jssContext = inject(JssContextService);
 
   ngOnInit(): void {
     if (!isServer() && environment.production) {

package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { CloudSdkInitComponent } from './cloud-sdk-init.component';
+import { CdpPageViewComponent } from './cdp-page-view.component';
+
+@Component({
+  selector: 'app-scripts',
+  templateUrl: './scripts.component.html',
+  imports: [CommonModule, JssModule, CloudSdkInitComponent, CdpPageViewComponent]
+})
+export class ScriptsComponent {}
+

package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts

@@ -5,8 +5,7 @@ import { CloudSdkInitComponent } from './cloud-sdk-init.component';
 import { CdpPageViewComponent } from './cdp-page-view.component';
 
 @NgModule({
+  imports: [JssModule, ScriptsComponent, CloudSdkInitComponent, CdpPageViewComponent],
   exports: [ScriptsComponent],
-  imports: [JssModule],
-  declarations: [ScriptsComponent, CloudSdkInitComponent, CdpPageViewComponent],
 })
 export class ScriptsModule {}

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,
     },
   };
 };