create-sitecore-jss 22.2.1 → 22.3.0-canary.10

package/dist/templates/angular/src/app/components/app-components.shared.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
-import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
 
 /*
@@ -14,22 +13,8 @@ import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
   Don't want code generation? See ./.gitignore for instructions to turn it off.
 */
 @NgModule({
-  imports: [
-    CommonModule,
-    TranslateModule,
-    RouterModule,
-    JssModule,
-    FormsModule,
-  ],
-  exports: [
-    CommonModule,
-    TranslateModule,
-    RouterModule,
-    FormsModule,
-    StyleguideSpecimenComponent
-  ],
-  declarations: [
-    StyleguideSpecimenComponent
-  ],
+  imports: [CommonModule, TranslateModule, RouterModule, JssModule, FormsModule],
+  exports: [CommonModule, TranslateModule, RouterModule, FormsModule],
+  declarations: [],
 })
-export class AppComponentsSharedModule { }
+export class AppComponentsSharedModule {}

package/dist/templates/angular/src/app/components/content-block/content-block.component.html

@@ -1,4 +1,4 @@
-<div class="contentBlock">
-  <h2 class="contentTitle" *scText="rendering.fields.heading"></h2>
-  <div class="contentDescription" *scRichText="rendering.fields.content"></div>
-</div>
+<div class="contentBlock">
+  <h2 class="contentTitle" *scText="rendering.fields.heading"></h2>
+  <div class="contentDescription" *scRichText="rendering.fields.content"></div>
+</div>

package/dist/templates/angular/src/app/components/gitignore

@@ -1,7 +1,7 @@
-# App component module is auto-generated by default.
-# To manually maintain the module,
-# - Remove this ignore file
-# - Delete /scripts/generate-component-factory.ts
-# - Remove the reference from /scripts/bootstrap.ts
-# - Consider merging app-components.shared and app-components modules
-app-components.module.ts
+# App component module is auto-generated by default.
+# To manually maintain the module,
+# - Remove this ignore file
+# - Delete /scripts/generate-component-factory/index.ts
+# - Remove the reference from /scripts/bootstrap.ts
+# - Consider merging app-components.shared and app-components modules
+app-components.module.ts

package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,16 +1,24 @@
-import { makeStateKey, Injectable } from '@angular/core';
+import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { EMPTY } from 'rxjs';
-
-export const dictionaryStateKey = makeStateKey('jssDictionary');
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
+import { EMPTY, Observable, of } from 'rxjs';
+import { JssTranslationLoaderService } from './jss-translation-loader.service';
+import { dictionaryStateKey } from './jss-translation-server-loader.service';
 
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
   constructor(
-    private fallbackLoader: TranslateLoader,
-  ) { }
+    private fallbackLoader: JssTranslationLoaderService,
+    private transferState: TransferState
+  ) {}
+
+  getTranslation(lang: string): Observable<DictionaryPhrases> {
+    const dictionary = this.transferState.get(dictionaryStateKey, null);
+
+    if (dictionary) {
+      return of(dictionary);
+    }
 
-  getTranslation(lang: string) {
     if (!this.fallbackLoader) {
       return EMPTY;
     }

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,17 +1,29 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
 
+export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
+  'dictionary'
+);
+
 @Injectable()
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: { [key: string]: string } }
+    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
+    private transferState: TransferState
   ) {}
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;
+
+    // set the dictionary in transfer state for the client
+    // since for ng-translate there is no obvious way to pass the server side dictionary to the client
+    // https://github.com/ngx-translate/core/issues/1207#issuecomment-700741671
+    this.transferState.set(dictionaryStateKey, dictionary);
+
     if (dictionary) {
       return observableOf(dictionary);
     }

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -2,8 +2,8 @@ import { Injectable, Inject, TransferState } from '@angular/core';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
-import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssLayoutService } from './layout/jss-layout.service';
+import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -15,11 +15,11 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
-    protected dataFetcher: JssDataFetcherService,
+    protected stateService: JssStateService<JssState>,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {
-    super(transferState, layoutService);
+    super(transferState, layoutService, stateService);
   }
   changeRoute(_route: string, _language: string): Observable<JssState> {
     // console.log('Server route change to ' + route);
@@ -36,7 +36,7 @@ export class JssContextServerSideService extends JssContextService {
     }
 
     // read initial state from data injected via server.bundle wrapper
-    this.state.next(this.serverToSsrState);
+    this.stateService.setState(this.serverToSsrState);
 
     // place the initial state into TransferState for the client
     this.transferState.set<JssState>(jssKey, this.serverToSsrState);

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

@@ -1,9 +1,9 @@
 import { Injectable, TransferState, makeStateKey } from '@angular/core';
-import { LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';
+import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 import { map, shareReplay, catchError } from 'rxjs/operators';
-import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
-import { JssState } from './JssState';
+import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService, LayoutServiceError } from './layout/jss-layout.service';
+import { JssState } from './JssState';
 
 export const jssKey = makeStateKey<JssState>('jss');
 
@@ -16,14 +16,17 @@ export const jssKey = makeStateKey<JssState>('jss');
 export class JssContextService {
   // components can subscribe to this (or use getValue()) to get access to latest data from Layout Service,
   // as well as current language and server route
-  state: BehaviorSubject<JssState>;
-
-  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService) {
-    this.state = new BehaviorSubject<JssState>(new JssState());
+  get state() {
+    return this.stateService.state;
+  }
+  get stateValue() {
+    return this.stateService.stateValue;
+  }
+  constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
   }
 
   changeLanguage(language: string) {
-    this.state.next({ ...this.state.value, language });
+    this.stateService.setState({ ...this.stateService.stateValue, language });
   }
 
   // primarily invoked by JssRouteResolver on URL/route change
@@ -33,11 +36,11 @@ export class JssContextService {
     if (foundInitialState) {
       const jssState = this.transferState.get<JssState>(jssKey, null);
       this.transferState.remove(jssKey);
-      this.state.next(jssState);
+      this.stateService.setState(jssState);
       return observableOf(jssState);
     }
 
-    const appLanguage = this.state.value.language || language;
+    const appLanguage = this.stateService.stateValue.language || language;
 
     const jssState$ = this.layoutService.getRouteData(route, appLanguage).pipe(
       map((routeData) => {
@@ -61,7 +64,7 @@ export class JssContextService {
 
     // subscribe to it ourselves so we can maintain current state
     jssState$.subscribe((jssState) => {
-      this.state.next(jssState);
+      this.stateService.setState(jssState);
     });
 
     return jssState$;

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

@@ -43,7 +43,7 @@ export class JssGraphQLService {
   ) {
     this.isEditingOrPreviewingAndSsr =
       isPlatformServer(this.platformId) &&
-      this.sitecoreContext.state.value.sitecore.context.pageState !== 'normal';
+      this.sitecoreContext.stateValue.sitecore.context.pageState !== 'normal';
   }
 
   private static extractVariableNames(query: DocumentNode) {
@@ -127,19 +127,19 @@ export class JssGraphQLService {
 
     if (
       usedVariables.contextItem &&
-      this.sitecoreContext.state.value.sitecore &&
-      this.sitecoreContext.state.value.sitecore.route &&
-      this.sitecoreContext.state.value.sitecore.route.itemId
+      this.sitecoreContext.stateValue.sitecore &&
+      this.sitecoreContext.stateValue.sitecore.route &&
+      this.sitecoreContext.stateValue.sitecore.route.itemId
     ) {
-      (variables as EmptyObject).contextItem = this.sitecoreContext.state.value.sitecore.route.itemId;
+      (variables as EmptyObject).contextItem = this.sitecoreContext.stateValue.sitecore.route.itemId;
     }
 
     // pass language as a variable to the query, if language exists as a variable and in sitecoreContext
     if (
       usedVariables.language &&
-      this.sitecoreContext.state.value.language
+      this.sitecoreContext.stateValue.language
     ) {
-      (variables as EmptyObject).language = this.sitecoreContext.state.value.language;
+      (variables as EmptyObject).language = this.sitecoreContext.stateValue.language;
     }
 
     return variables;

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

@@ -7,14 +7,14 @@ import { from as fromPromise, Observable, throwError as observableThrow } from '
 import { catchError, map } from 'rxjs/operators';
 import { layoutServiceFactory } from '../lib/layout-service-factory';
 
-const layoutServiceInstance = layoutServiceFactory.create();
-
 export class LayoutServiceError {
   status: number;
   statusText: string;
   data?: { sitecore?: LayoutServiceContextData };
 }
 
+const layoutServiceInstance = layoutServiceFactory.create();
+
 @Injectable()
 export class JssLayoutService {
   getRouteData(

package/dist/templates/angular/src/app/lib/config.ts

@@ -0,0 +1,16 @@
+/*
+ * Represents the type of config object available within the generated /environments/environment.js
+ */
+export interface JssConfig extends Record<string, string | boolean | undefined> {
+  production?: false;
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  sitecoreSiteName?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
+  graphQLEndpointPath?: string;
+  <% if (!locals.xmcloud) { -%>
+  layoutServiceConfigurationName?: string;
+  <% } -%>
+  defaultServerRoute?: string;
+}

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

@@ -1,30 +1,41 @@
 import {
   DictionaryService,
   GraphQLDictionaryService,
+  <% if (!locals.xmcloud) { -%>
   RestDictionaryService,
   constants,
+  <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLDictionaryService({
-          clientFactory,
-          siteName: env.sitecoreSiteName,
-          /*
-            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
-            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
-            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-            rootItemId: '{GUID}'
-          */
-        })
-      : new RestDictionaryService({
+    const service =
+    <% if (!locals.xmcloud) { -%>
+     process.env.FETCH_WITH === constants.FETCH_WITH.REST
+      ? new RestDictionaryService({
           apiHost: env.sitecoreApiHost,
           apiKey: env.sitecoreApiKey,
           siteName: env.sitecoreSiteName,
+        })
+      : 
+    <% } -%>
+      new GraphQLDictionaryService({
+          clientFactory,
+          siteName: env.sitecoreSiteName,
+          <% if (locals.xmcloud) { -%>
+          useSiteQuery: true,
+          <% } -%>
+          /*
+        The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
+        app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+        otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+        rootItemId: '{GUID}'
+      */
         });
+
+    return service;
   }
 }
 

package/dist/templates/angular/src/app/lib/graphql-client-factory/config.ts

@@ -0,0 +1,21 @@
+import { GraphQLRequestClientFactoryConfig } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (env.graphQLEndpoint && env.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: env.graphQLEndpoint,
+      apiKey: env.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return clientConfig;
+};

package/dist/templates/angular/src/app/lib/graphql-client-factory/index.ts

@@ -0,0 +1,16 @@
+import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { getGraphQLClientFactoryConfig } from './config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+const createGraphQLClientFactory = () => {
+  const clientConfig = getGraphQLClientFactoryConfig();
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export default createGraphQLClientFactory();

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

@@ -1,25 +1,33 @@
 import {
   LayoutService,
   GraphQLLayoutService,
+  <% if (!locals.xmcloud) { -%>
   RestLayoutService,
   constants,
+   <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
-import { clientFactory } from './client-factory';
+import clientFactory from './graphql-client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    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,
-        });
+    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;
   }
 }
 

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

@@ -1,17 +1,17 @@
-<app-navigation></app-navigation>
-<div class="container">
-  <ng-container *ngIf="state === LayoutState.Layout">
-    <app-visitor-identification></app-visitor-identification>
-    <sc-placeholder
-      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
-      [rendering]="route"
-      (loaded)="onPlaceholderLoaded($event)"
-    ></sc-placeholder>
-  </ng-container>
-
-  <app-not-found
-    *ngIf="state === LayoutState.NotFound"
-    [errorContextData]="errorContextData"
-  ></app-not-found>
-  <app-server-error *ngIf="state === LayoutState.Error"></app-server-error>
-</div>
+<app-navigation></app-navigation>
+<div class="container">
+  <ng-container *ngIf="state === LayoutState.Layout">
+    <app-scripts></app-scripts>
+    <sc-placeholder
+      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
+      [rendering]="route"
+      (loaded)="onPlaceholderLoaded($event)"
+    ></sc-placeholder>
+  </ng-container>
+
+  <app-not-found
+    *ngIf="state === LayoutState.NotFound"
+    [errorContextData]="errorContextData"
+  ></app-not-found>
+  <app-server-error *ngIf="state === LayoutState.Error"></app-server-error>
+</div>

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

@@ -9,12 +9,12 @@ import { JssMetaService } from '../../jss-meta.service';
 enum LayoutState {
   Layout,
   NotFound,
-  Error
+  Error,
 }
 
 interface RouteFields {
   [name: string]: unknown;
-  pageTitle: Field<string>;
+  pageTitle?: Field<string>;
 }
 
 @Component({
@@ -28,14 +28,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
   subscription: Subscription;
   errorContextData: LayoutServiceContextData;
 
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private readonly meta: JssMetaService,
-  ) { }
+  constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver
-    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState<RouteFields> }) => {
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
       if (!data.jssState) {
         this.state = LayoutState.NotFound;
         return;
@@ -48,13 +45,17 @@ export class LayoutComponent implements OnInit, OnDestroy {
       }
 
       if (data.jssState.routeFetchError) {
-        if (data.jssState.routeFetchError.status >= 400 && data.jssState.routeFetchError.status < 500) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
           this.state = LayoutState.NotFound;
         } else {
           this.state = LayoutState.Error;
         }
 
-        this.errorContextData = data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
       }
     });
   }
@@ -71,9 +72,8 @@ 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,21 +1,20 @@
-<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>
-  <nav class="my-2 my-md-0 me-md-3">
-    <a
-      class="p-2 text-dark"
-      href="https://jss.sitecore.com"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {{ 'Documentation' | translate }}
-    </a>
-    <a routerLink="/styleguide" class="p-2 text-dark">
-      {{ 'Styleguide' | translate }}
-    </a>
-    <a routerLink="/graphql" class="p-2 text-dark">
-      {{ 'GraphQL' | translate }}
-    </a>
-  </nav>
-</div>
+<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>
+  <nav class="my-2 my-md-0 me-md-3">
+    <a
+      class="p-2 text-dark"
+      href="https://jss.sitecore.com"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ 'Documentation' | translate }}
+    </a>
+    <a href="https://github.com/Sitecore/jss" class="p-2 text-dark">
+      {{ 'JSS Repository' | translate }}
+    </a>
+  </nav>
+</div>

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

@@ -4,5 +4,4 @@ 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/not-found/not-found.component.html

@@ -1,7 +1,7 @@
-<h1>Not found</h1>
-<p>This page does not exist.</p>
-<p>
-  Site: {{errorContextData?.context?.site?.name}}
-  <br />
-  Language: {{errorContextData?.context?.language}}
-</p>
+<h1>Not found</h1>
+<p>This page does not exist.</p>
+<p>
+  Site: {{errorContextData?.context?.site?.name}}
+  <br />
+  Language: {{errorContextData?.context?.language}}
+</p>