create-sitecore-jss 22.10.0-canary.9 → 22.11.0-canary.2

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/package.json

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