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

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/jss-context.server-side.service.ts

@@ -2,7 +2,6 @@ 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';
 
 /**
@@ -15,7 +14,6 @@ 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/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,38 @@
 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,
+          /*
+        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/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,7 +1,7 @@
 <app-navigation></app-navigation>
 <div class="container">
   <ng-container *ngIf="state === LayoutState.Layout">
-    <app-visitor-identification></app-visitor-identification>
+    <app-scripts></app-scripts>
     <sc-placeholder
       name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
       [rendering]="route"

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

@@ -71,9 +71,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,4 +1,6 @@
-<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>
@@ -11,11 +13,8 @@
     >
       {{ '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 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/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 { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+import { ScriptsModule } from './scripts/scripts.module';
 
 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,32 +39,25 @@ 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
-  ],
-  exports: [
-    RouterModule,
-    TranslateModule,
-  ],
-  declarations: [
-    NotFoundComponent,
-    ServerErrorComponent,
-    LayoutComponent,
-    NavigationComponent,
-    VisitorIdentificationComponent
+    BrowserModule,
+    ScriptsModule,
   ],
-  providers: [
-    JssRouteBuilderService,
-  ]
+  exports: [RouterModule, TranslateModule],
+  declarations: [NotFoundComponent, ServerErrorComponent, LayoutComponent, NavigationComponent],
+  providers: [JssRouteBuilderService],
 })
-export class RoutingModule { }
+export class RoutingModule {}

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

@@ -0,0 +1 @@
+<div></div>

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-scripts',
+  templateUrl: './scripts.component.html',
+})
+export class ScriptsComponent {}

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

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  declarations: [ScriptsComponent],
+})
+export class ScriptsModule {}

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

@@ -48,9 +48,6 @@ export default {
           {
             name: 'UnknownItem',
           },
-          {
-            name: 'StyleguideComponentParamsRenderingParameters',
-          },
           {
             name: 'C__StandardTemplate',
           },
@@ -60,95 +57,6 @@ 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',
           },
@@ -194,9 +102,6 @@ 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/src/polyfills.ts

@@ -47,16 +47,12 @@ import 'core-js/es/reflect';
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /** Polyfill for node.js process **/
-(window as any).process = { env: { DEBUG: undefined }, };
-
-
+(window as any).process = { env: { DEBUG: undefined } };
 
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

package/dist/templates/angular/src/test.ts

@@ -1,11 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

package/dist/templates/angular/tsconfig.json

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

package/dist/templates/angular-sxp/package.json

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
+    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
+    "lint:yml": "ts-node ./scripts/lint-yml.ts",
+    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component"
+  },
+  "devDependencies": {
+    "yaml-lint": "^1.2.4"
+  }
+}

package/dist/templates/angular-sxp/proxy.conf.js

@@ -0,0 +1,43 @@
+/*
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  When the app runs in connected mode, Sitecore is present and some of the requests should be
+  proxied to the Sitecore API
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling angular-cli to proxy requests to the API paths to this express instance.
+
+*/
+const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
+const environment = require('./src/environments/environment.js').environment;
+
+const port = 3043;
+
+const PROXY_CONFIG =
+  process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED
+    ? [
+        {
+          context: ['/data', '/sitecore'],
+          target: `http://localhost:${port}`,
+          secure: false,
+        },
+      ]
+    : [
+        {
+          context: [
+            // API endpoints
+            '/sitecore',
+            // media items
+            '/-',
+            // visitor identification
+            '/layouts',
+          ],
+          target: environment.sitecoreApiHost,
+          secure: false,
+          changeOrigin: true,
+        },
+      ];
+
+module.exports = PROXY_CONFIG;

package/dist/templates/angular-sxp/scripts/config/plugins/disconnected.ts

@@ -0,0 +1,27 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
+const chalk = require('chalk');
+
+/**
+ * This plugin will check if fetchwith graphgl is beeing used in disconnected mode and throw error if so
+ */
+class DisconnectedPlugin implements ConfigPlugin {
+  // should come before other plugins
+  order = 0;
+
+  async exec(config: JssConfig) {
+    const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+    if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
+      throw new Error(
+        chalk.red(
+          'GraphQL requests to Dictionary and Layout services are not supported in disconnected mode.'
+        )
+      );
+    }
+
+    return config;
+  }
+}
+
+export const disconnectedPlugin = new DisconnectedPlugin();

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

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+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';
+
+/*
+  This module is imported by the generated app-components.module.ts.
+  You can use this module to provide shared Angular components that are not
+  JSS components, etc to the generated module.
+
+  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
+  ],
+})
+export class AppComponentsSharedModule { }

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

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

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

@@ -0,0 +1,23 @@
+<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-sxp/src/app/routing/scripts/scripts.component.html

@@ -0,0 +1,3 @@
+<div>
+  <app-visitor-identification></app-visitor-identification>
+</div>

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+import { VisitorIdentificationComponent } from './visitor-identification/visitor-identification.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  declarations: [ScriptsComponent, VisitorIdentificationComponent],
+})
+export class ScriptsModule {}