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

package/dist/templates/{angular-sxp → angular}/src/app/components/styleguide-tracking/styleguide-tracking.component.html

@@ -1,175 +1,175 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-tracking">
-  <p *ngIf="disconnectedMode">The tracking API is only available in connected, integrated, or headless modes.</p>
-
-  <div *ngIf="!disconnectedMode">
-    <p class="alert alert-warning">
-      Note: The JSS tracker API is disabled by default. Consult the <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">tracking documentation</a> to enable it.
-    </p>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Event</legend>
-        <p>
-          Events are defined in <code>/sitecore/system/Settings/Analytics/Page Events</code>
-        </p>
-        <label htmlFor="event">Event GUID or Name</label>
-        <input type="text" id="event" class="form-control" [(ngModel)]="event" />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitEvent()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Goal</legend>
-        <p>
-          Goals are defined in <code>/sitecore/system/Marketing Control Panel/Goals</code>
-        </p>
-        <label htmlFor="goal">Goal GUID or Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="goal"
-          name="goal"
-          [(ngModel)]="goal"
-          placeholder="i.e. Register"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitGoal()"
-        >
-          Submit
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Outcome</legend>
-        <p>
-          Outcomes are defined in <code>/sitecore/system/Marketing Control Panel/Outcomes</code>
-        </p>
-        <label htmlFor="outcomeName">Outcome GUID or Name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="outcomeName"
-          name="outcomeName"
-          [(ngModel)]="outcomeName"
-          placeholder="i.e. Marketing Lead"
-        />
-        <br />
-        <label htmlFor="outcomeValue">Monetary Value (optional)</label>
-        <input
-          type="number"
-          class="form-control"
-          id="outcomeValue"
-          name="outcomeValue"
-          [(ngModel)]="outcomeValue"
-          placeholder="i.e. 1337.00"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitOutcome()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Campaign</legend>
-        <p>
-          Campaigns are defined in <code>/sitecore/system/Marketing Control Panel/Campaigns</code>
-        </p>
-        <label htmlFor="campaign">Campaign GUID or Name</label>
-        <input type="text" class="form-control" id="campaign" [(ngModel)]="campaign" />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="triggerCampaign()"
-        >
-          Submit
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Page View</legend>
-        <p>
-          Track arbitrary page views for custom routing or offline use. Note that Layout
-          Service tracks page views by default unless <code>tracking=false</code> is passed
-          in its query string.
-        </p>
-        <label htmlFor="pageId">Page Item GUID</label>
-        <input
-          type="text"
-          class="form-control"
-          id="pageId"
-          name="pageId"
-          [(ngModel)]="pageId"
-          placeholder="i.e. 11111111-1111-1111-1111-111111111111"
-        />
-        <br />
-        <label htmlFor="pageUrl">Page URL</label>
-        <input
-          type="text"
-          class="form-control"
-          id="pageUrl"
-          name="pageUrl"
-          [(ngModel)]="pageUrl"
-          placeholder="i.e. /foo/bar"
-        />
-        <button
-          type="button"
-          class="btn btn-primary mt-3"
-          (click)="submitPageView()"
-        >
-          Submit
-        </button>
-      </fieldset>
-
-      <fieldset class="form-group col-sm">
-        <legend>Batching</legend>
-        <p>
-          The tracking API supports pushing a whole batch of events in a single request.
-          This can be useful for queuing strategies or offline PWA usage.
-        </p>
-        <button
-          type="button"
-          class="btn btn-primary"
-          (click)="submitBatching()"
-        >
-          Submit Batch of Events
-        </button>
-      </fieldset>
-    </div>
-    <div class="row">
-      <fieldset class="form-group col-sm">
-        <legend>Interaction Control</legend>
-        <p>
-          Tracking data is not pushed into the xConnect service until your session ends on
-          the Sitecore server. Click this button to instantly end your session and flush the
-          data - great for debugging and testing.
-        </p>
-        <p class="alert alert-warning">
-          Note: By default <em>anonymous</em> contacts will not be shown in Experience
-          Profile. If your interactions are not showing up in Experience Profile, you may
-          need to
-          <a href="https://doc.sitecore.net/developers/xp/xconnect/xconnect-search-indexer/enable-anonymous-contact-indexing.html">
-            enable anonymous contact indexing.
-          </a>
-        </p>
-        <button
-          type="button"
-          class="btn btn-primary"
-          (click)="abandonSession()"
-        >
-          End Interaction
-        </button>
-      </fieldset>
-    </div>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-tracking">
+  <p *ngIf="disconnectedMode">The tracking API is only available in connected, integrated, or headless modes.</p>
+
+  <div *ngIf="!disconnectedMode">
+    <p class="alert alert-warning">
+      Note: The JSS tracker API is disabled by default. Consult the <a href="https://jss.sitecore.com/docs/fundamentals/services/tracking">tracking documentation</a> to enable it.
+    </p>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Event</legend>
+        <p>
+          Events are defined in <code>/sitecore/system/Settings/Analytics/Page Events</code>
+        </p>
+        <label htmlFor="event">Event GUID or Name</label>
+        <input type="text" id="event" class="form-control" [(ngModel)]="event" />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitEvent()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Goal</legend>
+        <p>
+          Goals are defined in <code>/sitecore/system/Marketing Control Panel/Goals</code>
+        </p>
+        <label htmlFor="goal">Goal GUID or Name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="goal"
+          name="goal"
+          [(ngModel)]="goal"
+          placeholder="i.e. Register"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitGoal()"
+        >
+          Submit
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Outcome</legend>
+        <p>
+          Outcomes are defined in <code>/sitecore/system/Marketing Control Panel/Outcomes</code>
+        </p>
+        <label htmlFor="outcomeName">Outcome GUID or Name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="outcomeName"
+          name="outcomeName"
+          [(ngModel)]="outcomeName"
+          placeholder="i.e. Marketing Lead"
+        />
+        <br />
+        <label htmlFor="outcomeValue">Monetary Value (optional)</label>
+        <input
+          type="number"
+          class="form-control"
+          id="outcomeValue"
+          name="outcomeValue"
+          [(ngModel)]="outcomeValue"
+          placeholder="i.e. 1337.00"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitOutcome()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Campaign</legend>
+        <p>
+          Campaigns are defined in <code>/sitecore/system/Marketing Control Panel/Campaigns</code>
+        </p>
+        <label htmlFor="campaign">Campaign GUID or Name</label>
+        <input type="text" class="form-control" id="campaign" [(ngModel)]="campaign" />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="triggerCampaign()"
+        >
+          Submit
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Page View</legend>
+        <p>
+          Track arbitrary page views for custom routing or offline use. Note that Layout
+          Service tracks page views by default unless <code>tracking=false</code> is passed
+          in its query string.
+        </p>
+        <label htmlFor="pageId">Page Item GUID</label>
+        <input
+          type="text"
+          class="form-control"
+          id="pageId"
+          name="pageId"
+          [(ngModel)]="pageId"
+          placeholder="i.e. 11111111-1111-1111-1111-111111111111"
+        />
+        <br />
+        <label htmlFor="pageUrl">Page URL</label>
+        <input
+          type="text"
+          class="form-control"
+          id="pageUrl"
+          name="pageUrl"
+          [(ngModel)]="pageUrl"
+          placeholder="i.e. /foo/bar"
+        />
+        <button
+          type="button"
+          class="btn btn-primary mt-3"
+          (click)="submitPageView()"
+        >
+          Submit
+        </button>
+      </fieldset>
+
+      <fieldset class="form-group col-sm">
+        <legend>Batching</legend>
+        <p>
+          The tracking API supports pushing a whole batch of events in a single request.
+          This can be useful for queuing strategies or offline PWA usage.
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          (click)="submitBatching()"
+        >
+          Submit Batch of Events
+        </button>
+      </fieldset>
+    </div>
+    <div class="row">
+      <fieldset class="form-group col-sm">
+        <legend>Interaction Control</legend>
+        <p>
+          Tracking data is not pushed into the xConnect service until your session ends on
+          the Sitecore server. Click this button to instantly end your session and flush the
+          data - great for debugging and testing.
+        </p>
+        <p class="alert alert-warning">
+          Note: By default <em>anonymous</em> contacts will not be shown in Experience
+          Profile. If your interactions are not showing up in Experience Profile, you may
+          need to
+          <a href="https://doc.sitecore.net/developers/xp/xconnect/xconnect-search-indexer/enable-anonymous-contact-indexing.html">
+            enable anonymous contact indexing.
+          </a>
+        </p>
+        <button
+          type="button"
+          class="btn btn-primary"
+          (click)="abandonSession()"
+        >
+          End Interaction
+        </button>
+      </fieldset>
+    </div>
+  </div>
+</app-styleguide-specimen>

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

@@ -2,6 +2,7 @@ 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';
 
 /**
@@ -14,6 +15,7 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
+    protected dataFetcher: JssDataFetcherService,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {

package/dist/templates/{angular-sxp → angular}/src/app/jss-data-fetcher.service.ts

@@ -3,9 +3,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpResponse } from '@sitecore-jss/sitecore-jss-angular';
 import { Observable, lastValueFrom } from 'rxjs';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class JssDataFetcherService {
   constructor(
     private readonly httpClient: HttpClient,

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

@@ -1,38 +1,30 @@
 import {
   DictionaryService,
   GraphQLDictionaryService,
-  <% if (!locals.xmcloud) { -%>
   RestDictionaryService,
   constants,
-  <% } -%>
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { clientFactory } from './graphql-client-factory';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    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({
+    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}'
-      */
+            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({
+          apiHost: env.sitecoreApiHost,
+          apiKey: env.sitecoreApiKey,
+          siteName: env.sitecoreSiteName,
         });
-
-    return service;
   }
 }
 

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,17 +1,17 @@
-<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>
+<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>

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,20 +1,21 @@
-<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>
+<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>

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/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>

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 { }