create-sitecore-jss 22.2.0-canary.7 → 22.2.0-canary.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/dist/bin.js +17 -43
  2. package/dist/common/processes/next.js +4 -1
  3. package/dist/common/processes/transform.js +2 -12
  4. package/dist/common/prompts/base.js +0 -13
  5. package/dist/common/prompts/proxy.js +35 -0
  6. package/dist/common/prompts/sxp.js +16 -2
  7. package/dist/common/utils/helpers.js +27 -2
  8. package/dist/init-runner.js +1 -1
  9. package/dist/initializers/angular/prompts.js +4 -4
  10. package/dist/initializers/angular-xmcloud/index.js +21 -7
  11. package/dist/initializers/node-xmcloud-proxy/index.js +2 -1
  12. package/dist/templates/angular/.env +4 -5
  13. package/dist/templates/angular/.eslintrc +1 -0
  14. package/dist/templates/angular/gitignore +5 -0
  15. package/dist/templates/angular/package.json +0 -2
  16. package/dist/templates/angular/scripts/config/plugins/fallback.ts +0 -1
  17. package/dist/templates/angular/scripts/generate-component-factory.ts +8 -0
  18. package/dist/templates/angular/scripts/generate-config.ts +25 -6
  19. package/dist/templates/angular/scripts/update-graphql-fragment-data.ts +21 -30
  20. package/dist/templates/angular/server.bundle.ts +3 -23
  21. package/dist/templates/angular/server.exports.ts +13 -0
  22. package/dist/templates/angular/src/app/JssState.ts +2 -9
  23. package/dist/templates/angular/src/app/app.module.ts +5 -4
  24. package/dist/templates/angular/src/app/app.server.module.ts +9 -6
  25. package/dist/templates/angular/src/app/i18n/jss-translation-client-loader.service.ts +15 -7
  26. package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts +14 -2
  27. package/dist/templates/angular/src/app/jss-context.server-side.service.ts +4 -2
  28. package/dist/templates/angular/src/app/jss-context.service.ts +14 -11
  29. package/dist/templates/angular/src/app/jss-graphql.service.ts +7 -7
  30. package/dist/templates/angular/src/app/layout/jss-layout.service.ts +2 -2
  31. package/dist/templates/angular/src/app/lib/dictionary-service-factory.ts +4 -1
  32. package/dist/templates/angular/src/app/lib/graphql-client-factory/config.ts +21 -0
  33. package/dist/templates/angular/src/app/lib/graphql-client-factory/index.ts +16 -0
  34. package/dist/templates/angular/src/app/lib/layout-service-factory.ts +1 -1
  35. package/dist/templates/angular/src/app/routing/layout/layout.component.ts +10 -9
  36. package/dist/templates/angular/src/environments/gitignore +2 -1
  37. package/dist/templates/angular-sxp/.env +2 -0
  38. package/dist/templates/angular-sxp/scripts/config/plugins/disconnected.ts +4 -2
  39. package/dist/templates/angular-sxp/src/app/components/graph-ql-layout/graph-ql-layout.component.ts +1 -1
  40. package/dist/templates/angular-xmcloud/.env +8 -2
  41. package/dist/templates/angular-xmcloud/angular.json +0 -1
  42. package/dist/templates/angular-xmcloud/scripts/bootstrap.ts +28 -0
  43. package/dist/templates/angular-xmcloud/scripts/config/plugins/xmcloud.ts +16 -0
  44. package/dist/templates/angular-xmcloud/scripts/generate-metadata.ts +25 -0
  45. package/dist/templates/angular-xmcloud/server.exports.ts +24 -0
  46. package/dist/templates/angular-xmcloud/src/app/components/app-components.shared.module.ts +21 -0
  47. package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.html +5 -0
  48. package/dist/templates/angular-xmcloud/src/app/components/column-splitter/column-splitter.component.ts +40 -0
  49. package/dist/templates/angular-xmcloud/src/app/components/container/container.component.html +14 -0
  50. package/dist/templates/angular-xmcloud/src/app/components/container/container.component.ts +30 -0
  51. package/dist/templates/angular-xmcloud/src/app/components/image/image.component.html +36 -0
  52. package/dist/templates/angular-xmcloud/src/app/components/image/image.component.ts +67 -0
  53. package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html +15 -0
  54. package/dist/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts +41 -0
  55. package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.html +23 -0
  56. package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation-item.component.ts +65 -0
  57. package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.html +21 -0
  58. package/dist/templates/angular-xmcloud/src/app/components/navigation/navigation.component.ts +49 -0
  59. package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.html +5 -0
  60. package/dist/templates/angular-xmcloud/src/app/components/page-content/page-content.component.ts +39 -0
  61. package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.html +1 -0
  62. package/dist/templates/angular-xmcloud/src/app/components/partial-design-dynamic-placeholder/partial-design-dynamic-placeholder.component.ts +15 -0
  63. package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.html +21 -0
  64. package/dist/templates/angular-xmcloud/src/app/components/promo/promo.component.ts +13 -0
  65. package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.html +7 -12
  66. package/dist/templates/angular-xmcloud/src/app/components/richtext/richtext.component.ts +6 -1
  67. package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.html +11 -0
  68. package/dist/templates/angular-xmcloud/src/app/components/row-splitter/row-splitter.component.ts +35 -0
  69. package/dist/templates/angular-xmcloud/src/app/components/sxa.component.ts +4 -4
  70. package/dist/templates/angular-xmcloud/src/app/components/title/title.component.html +10 -0
  71. package/dist/templates/angular-xmcloud/src/app/components/title/title.component.ts +56 -0
  72. package/dist/templates/angular-xmcloud/src/app/jss-link.service.ts +55 -0
  73. package/dist/templates/angular-xmcloud/src/app/lib/config.ts +2 -0
  74. package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory/config.ts +58 -0
  75. package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.html +38 -0
  76. package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.ts +104 -0
  77. package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html +3 -0
  78. package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts +10 -0
  79. package/dist/templates/angular-xmcloud/src/assets/styles/basic/_header.scss +3 -1
  80. package/dist/templates/angular-xmcloud/src/assets/styles/main.scss +10 -0
  81. package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/_component-image.scss +1 -1
  82. package/dist/templates/nextjs/package.json +1 -1
  83. package/dist/templates/nextjs/scripts/config/plugins/fallback.ts +0 -1
  84. package/dist/templates/nextjs/scripts/generate-config.ts +8 -1
  85. package/dist/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts +2 -1
  86. package/dist/templates/nextjs-styleguide/scripts/config/plugins/disconnected.ts +1 -0
  87. package/dist/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss +1 -1
  88. package/dist/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss +66 -7
  89. package/dist/templates/nextjs-sxa/src/components/Container.tsx +6 -14
  90. package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts +2 -1
  91. package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts +2 -1
  92. package/dist/templates/node-headless-ssr-experience-edge/gitignore +19 -0
  93. package/dist/templates/node-headless-ssr-proxy/gitignore +19 -0
  94. package/dist/templates/node-headless-ssr-proxy/src/config.ts +3 -3
  95. package/dist/templates/node-headless-ssr-proxy/src/httpAgents.ts +2 -2
  96. package/dist/templates/node-headless-ssr-proxy/src/index.ts +9 -2
  97. package/dist/templates/node-xmcloud-proxy/.env +7 -1
  98. package/dist/templates/node-xmcloud-proxy/README.md +1 -1
  99. package/dist/templates/node-xmcloud-proxy/gitignore +33 -0
  100. package/dist/templates/node-xmcloud-proxy/package.json +3 -2
  101. package/dist/templates/node-xmcloud-proxy/src/config.ts +9 -3
  102. package/dist/templates/node-xmcloud-proxy/src/index.ts +54 -5
  103. package/dist/templates/node-xmcloud-proxy/src/types.ts +10 -42
  104. package/dist/templates/react/scripts/generate-config.js +10 -3
  105. package/dist/templates/vue/scripts/generate-config.js +5 -0
  106. package/package.json +2 -2
  107. package/dist/templates/angular/src/app/lib/graphql-client-factory.ts +0 -28
  108. package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory.ts +0 -44
@@ -4,14 +4,12 @@ import { join } from 'path';
4
4
  import 'reflect-metadata';
5
5
  import 'zone.js';
6
6
  import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
7
- import { environment } from './src/environments/environment';
8
7
  import { AppServerModule, renderModule } from './src/main.server';
9
- import { clientFactory } from './src/app/lib/graphql-client-factory';
10
- import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
11
- import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
12
8
 
13
9
  export * from './src/main.server';
14
10
 
11
+ export * from './server.exports';
12
+
15
13
  const http = require('http');
16
14
  const https = require('https');
17
15
 
@@ -100,22 +98,4 @@ function parseRouteUrl(url: string) {
100
98
  };
101
99
  }
102
100
 
103
- const apiKey = environment.sitecoreApiKey;
104
- const siteName = environment.sitecoreSiteName;
105
- const defaultLanguage = environment.defaultLanguage;
106
- const graphQLEndpointPath = environment.graphQLEndpointPath;
107
- const graphQLEndpoint = environment.graphQLEndpoint;
108
-
109
- export {
110
- renderView,
111
- parseRouteUrl,
112
- setUpDefaultAgents,
113
- apiKey,
114
- siteName,
115
- clientFactory,
116
- dictionaryServiceFactory,
117
- layoutServiceFactory,
118
- defaultLanguage,
119
- graphQLEndpointPath,
120
- graphQLEndpoint,
121
- };
101
+ export { renderView, parseRouteUrl, setUpDefaultAgents };
@@ -0,0 +1,13 @@
1
+ import { environment } from './src/environments/environment';
2
+
3
+ /**
4
+ * Define the required configuration values to be exported from the server.bundle.ts.
5
+ */
6
+
7
+ const apiKey = environment.sitecoreApiKey;
8
+ const siteName = environment.sitecoreSiteName;
9
+
10
+ export {
11
+ apiKey,
12
+ siteName,
13
+ };
@@ -1,15 +1,8 @@
1
- import {
2
- RouteData,
3
- LayoutServiceContextData,
4
- } from '@sitecore-jss/sitecore-jss-angular';
1
+ import { BaseJssState } from '@sitecore-jss/sitecore-jss-angular';
5
2
  import { LayoutServiceError } from './layout/jss-layout.service';
6
3
 
7
- export class JssState<Fields = Record<string, unknown>> {
4
+ export class JssState extends BaseJssState {
8
5
  language: string;
9
6
  serverRoute: string;
10
7
  routeFetchError?: LayoutServiceError;
11
- sitecore?: LayoutServiceContextData & {
12
- route: RouteData<Fields>;
13
- };
14
- viewBag: { [key: string]: unknown };
15
8
  }
@@ -1,9 +1,8 @@
1
1
  import { APP_ID, NgModule, TransferState } from '@angular/core';
2
2
  import { APP_BASE_HREF } from '@angular/common';
3
- import { HttpClientModule, HttpClient } from '@angular/common/http';
3
+ import { HttpClientModule } from '@angular/common/http';
4
4
  import { RoutingModule } from './routing/routing.module';
5
5
  import { JssLayoutService } from './layout/jss-layout.service';
6
- import { JssContextService } from './jss-context.service';
7
6
  import { AppComponentsModule } from './components/app-components.module';
8
7
  import { AppComponent } from './app.component';
9
8
  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
@@ -11,6 +10,7 @@ import { JssTranslationClientLoaderService } from './i18n/jss-translation-client
11
10
  import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
12
11
  import { GraphQLModule } from './jss-graphql.module';
13
12
  import { JssMetaService } from './jss-meta.service';
13
+ import { JssContextService } from './jss-context.service';
14
14
 
15
15
  @NgModule({
16
16
  imports: [
@@ -20,8 +20,9 @@ import { JssMetaService } from './jss-meta.service';
20
20
  TranslateModule.forRoot({
21
21
  loader: {
22
22
  provide: TranslateLoader,
23
- useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()),
24
- deps: [HttpClient, TransferState],
23
+ useFactory: (transferState: TransferState) =>
24
+ new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
25
+ deps: [TransferState],
25
26
  },
26
27
  }),
27
28
  AppComponentsModule,
@@ -1,4 +1,4 @@
1
- import { NgModule } from '@angular/core';
1
+ import { NgModule, TransferState } from '@angular/core';
2
2
  import { ServerModule } from '@angular/platform-server';
3
3
  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
4
4
 
@@ -18,11 +18,14 @@ import { JssTranslationServerLoaderService } from './i18n/jss-translation-server
18
18
  // <-- *Important* to get translation values server-side
19
19
  loader: {
20
20
  provide: TranslateLoader,
21
- useFactory: (ssrViewBag: {
22
- [key: string]: unknown;
23
- dictionary: { [key: string]: string };
24
- }) => new JssTranslationServerLoaderService(ssrViewBag),
25
- deps: ['JSS_SERVER_VIEWBAG'],
21
+ useFactory: (
22
+ ssrViewBag: {
23
+ [key: string]: unknown;
24
+ dictionary: { [key: string]: string };
25
+ },
26
+ transferState: TransferState
27
+ ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
28
+ deps: ['JSS_SERVER_VIEWBAG', TransferState],
26
29
  },
27
30
  }),
28
31
  ],
@@ -1,16 +1,24 @@
1
- import { makeStateKey, Injectable } from '@angular/core';
1
+ import { Injectable, TransferState } from '@angular/core';
2
2
  import { TranslateLoader } from '@ngx-translate/core';
3
- import { EMPTY } from 'rxjs';
4
-
5
- export const dictionaryStateKey = makeStateKey('jssDictionary');
3
+ import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
4
+ import { EMPTY, Observable, of } from 'rxjs';
5
+ import { JssTranslationLoaderService } from './jss-translation-loader.service';
6
+ import { dictionaryStateKey } from './jss-translation-server-loader.service';
6
7
 
7
8
  @Injectable()
8
9
  export class JssTranslationClientLoaderService implements TranslateLoader {
9
10
  constructor(
10
- private fallbackLoader: TranslateLoader,
11
- ) { }
11
+ private fallbackLoader: JssTranslationLoaderService,
12
+ private transferState: TransferState
13
+ ) {}
14
+
15
+ getTranslation(lang: string): Observable<DictionaryPhrases> {
16
+ const dictionary = this.transferState.get(dictionaryStateKey, null);
17
+
18
+ if (dictionary) {
19
+ return of(dictionary);
20
+ }
12
21
 
13
- getTranslation(lang: string) {
14
22
  if (!this.fallbackLoader) {
15
23
  return EMPTY;
16
24
  }
@@ -1,17 +1,29 @@
1
- import { Inject, Injectable } from '@angular/core';
1
+ import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
2
2
  import { TranslateLoader } from '@ngx-translate/core';
3
+ import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
3
4
  import { of as observableOf, EMPTY } from 'rxjs';
4
5
 
6
+ export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
7
+ 'dictionary'
8
+ );
9
+
5
10
  @Injectable()
6
11
  export class JssTranslationServerLoaderService implements TranslateLoader {
7
12
  constructor(
8
13
  // this initial state from sitecore is injected by server.bundle for "integrated" mode
9
14
  @Inject('JSS_SERVER_VIEWBAG')
10
- private serverViewBag: { [key: string]: unknown; dictionary: { [key: string]: string } }
15
+ private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
16
+ private transferState: TransferState
11
17
  ) {}
12
18
  getTranslation(_lang: string) {
13
19
  // read initial dictionary from data injected via server.bundle wrapper
14
20
  const dictionary = this.serverViewBag.dictionary;
21
+
22
+ // set the dictionary in transfer state for the client
23
+ // since for ng-translate there is no obvious way to pass the server side dictionary to the client
24
+ // https://github.com/ngx-translate/core/issues/1207#issuecomment-700741671
25
+ this.transferState.set(dictionaryStateKey, dictionary);
26
+
15
27
  if (dictionary) {
16
28
  return observableOf(dictionary);
17
29
  }
@@ -3,6 +3,7 @@ import { JssContextService, jssKey } from './jss-context.service';
3
3
  import { JssState } from './JssState';
4
4
  import { Observable, of as observableOf } from 'rxjs';
5
5
  import { JssLayoutService } from './layout/jss-layout.service';
6
+ import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
6
7
 
7
8
  /**
8
9
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -14,10 +15,11 @@ export class JssContextServerSideService extends JssContextService {
14
15
  constructor(
15
16
  protected transferState: TransferState,
16
17
  protected layoutService: JssLayoutService,
18
+ protected stateService: JssStateService<JssState>,
17
19
  // this initial state from sitecore is injected by server.bundle for "integrated" mode
18
20
  @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
19
21
  ) {
20
- super(transferState, layoutService);
22
+ super(transferState, layoutService, stateService);
21
23
  }
22
24
  changeRoute(_route: string, _language: string): Observable<JssState> {
23
25
  // console.log('Server route change to ' + route);
@@ -34,7 +36,7 @@ export class JssContextServerSideService extends JssContextService {
34
36
  }
35
37
 
36
38
  // read initial state from data injected via server.bundle wrapper
37
- this.state.next(this.serverToSsrState);
39
+ this.stateService.setState(this.serverToSsrState);
38
40
 
39
41
  // place the initial state into TransferState for the client
40
42
  this.transferState.set<JssState>(jssKey, this.serverToSsrState);
@@ -1,9 +1,9 @@
1
1
  import { Injectable, TransferState, makeStateKey } from '@angular/core';
2
- import { LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';
2
+ import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';
3
3
  import { map, shareReplay, catchError } from 'rxjs/operators';
4
- import { Observable, of as observableOf, BehaviorSubject } from 'rxjs';
5
- import { JssState } from './JssState';
4
+ import { Observable, of as observableOf } from 'rxjs';
6
5
  import { JssLayoutService, LayoutServiceError } from './layout/jss-layout.service';
6
+ import { JssState } from './JssState';
7
7
 
8
8
  export const jssKey = makeStateKey<JssState>('jss');
9
9
 
@@ -16,14 +16,17 @@ export const jssKey = makeStateKey<JssState>('jss');
16
16
  export class JssContextService {
17
17
  // components can subscribe to this (or use getValue()) to get access to latest data from Layout Service,
18
18
  // as well as current language and server route
19
- state: BehaviorSubject<JssState>;
20
-
21
- constructor(protected transferState: TransferState, protected layoutService: JssLayoutService) {
22
- this.state = new BehaviorSubject<JssState>(new JssState());
19
+ get state() {
20
+ return this.stateService.state;
21
+ }
22
+ get stateValue() {
23
+ return this.stateService.stateValue;
24
+ }
25
+ constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService<JssState>) {
23
26
  }
24
27
 
25
28
  changeLanguage(language: string) {
26
- this.state.next({ ...this.state.value, language });
29
+ this.stateService.setState({ ...this.stateService.stateValue, language });
27
30
  }
28
31
 
29
32
  // primarily invoked by JssRouteResolver on URL/route change
@@ -33,11 +36,11 @@ export class JssContextService {
33
36
  if (foundInitialState) {
34
37
  const jssState = this.transferState.get<JssState>(jssKey, null);
35
38
  this.transferState.remove(jssKey);
36
- this.state.next(jssState);
39
+ this.stateService.setState(jssState);
37
40
  return observableOf(jssState);
38
41
  }
39
42
 
40
- const appLanguage = this.state.value.language || language;
43
+ const appLanguage = this.stateService.stateValue.language || language;
41
44
 
42
45
  const jssState$ = this.layoutService.getRouteData(route, appLanguage).pipe(
43
46
  map((routeData) => {
@@ -61,7 +64,7 @@ export class JssContextService {
61
64
 
62
65
  // subscribe to it ourselves so we can maintain current state
63
66
  jssState$.subscribe((jssState) => {
64
- this.state.next(jssState);
67
+ this.stateService.setState(jssState);
65
68
  });
66
69
 
67
70
  return jssState$;
@@ -43,7 +43,7 @@ export class JssGraphQLService {
43
43
  ) {
44
44
  this.isEditingOrPreviewingAndSsr =
45
45
  isPlatformServer(this.platformId) &&
46
- this.sitecoreContext.state.value.sitecore.context.pageState !== 'normal';
46
+ this.sitecoreContext.stateValue.sitecore.context.pageState !== 'normal';
47
47
  }
48
48
 
49
49
  private static extractVariableNames(query: DocumentNode) {
@@ -127,19 +127,19 @@ export class JssGraphQLService {
127
127
 
128
128
  if (
129
129
  usedVariables.contextItem &&
130
- this.sitecoreContext.state.value.sitecore &&
131
- this.sitecoreContext.state.value.sitecore.route &&
132
- this.sitecoreContext.state.value.sitecore.route.itemId
130
+ this.sitecoreContext.stateValue.sitecore &&
131
+ this.sitecoreContext.stateValue.sitecore.route &&
132
+ this.sitecoreContext.stateValue.sitecore.route.itemId
133
133
  ) {
134
- (variables as EmptyObject).contextItem = this.sitecoreContext.state.value.sitecore.route.itemId;
134
+ (variables as EmptyObject).contextItem = this.sitecoreContext.stateValue.sitecore.route.itemId;
135
135
  }
136
136
 
137
137
  // pass language as a variable to the query, if language exists as a variable and in sitecoreContext
138
138
  if (
139
139
  usedVariables.language &&
140
- this.sitecoreContext.state.value.language
140
+ this.sitecoreContext.stateValue.language
141
141
  ) {
142
- (variables as EmptyObject).language = this.sitecoreContext.state.value.language;
142
+ (variables as EmptyObject).language = this.sitecoreContext.stateValue.language;
143
143
  }
144
144
 
145
145
  return variables;
@@ -7,14 +7,14 @@ import { from as fromPromise, Observable, throwError as observableThrow } from '
7
7
  import { catchError, map } from 'rxjs/operators';
8
8
  import { layoutServiceFactory } from '../lib/layout-service-factory';
9
9
 
10
- const layoutServiceInstance = layoutServiceFactory.create();
11
-
12
10
  export class LayoutServiceError {
13
11
  status: number;
14
12
  statusText: string;
15
13
  data?: { sitecore?: LayoutServiceContextData };
16
14
  }
17
15
 
16
+ const layoutServiceInstance = layoutServiceFactory.create();
17
+
18
18
  @Injectable()
19
19
  export class JssLayoutService {
20
20
  getRouteData(
@@ -7,7 +7,7 @@ import {
7
7
  <% } -%>
8
8
  } from '@sitecore-jss/sitecore-jss-angular';
9
9
  import { environment as env } from '../../environments/environment';
10
- import { clientFactory } from './graphql-client-factory';
10
+ import clientFactory from './graphql-client-factory';
11
11
 
12
12
  export class DictionaryServiceFactory {
13
13
  create(): DictionaryService {
@@ -24,6 +24,9 @@ export class DictionaryServiceFactory {
24
24
  new GraphQLDictionaryService({
25
25
  clientFactory,
26
26
  siteName: env.sitecoreSiteName,
27
+ <% if (locals.xmcloud) { -%>
28
+ useSiteQuery: true,
29
+ <% } -%>
27
30
  /*
28
31
  The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
29
32
  app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
@@ -0,0 +1,21 @@
1
+ import { GraphQLRequestClientFactoryConfig } from '@sitecore-jss/sitecore-jss-angular/cjs';
2
+ import { environment as env } from '../../../environments/environment';
3
+
4
+ /**
5
+ * Gets the configuration for the GraphQLRequestClientFactory
6
+ * @returns GraphQLRequestClientFactoryConfig
7
+ */
8
+ export const getGraphQLClientFactoryConfig = () => {
9
+ let clientConfig: GraphQLRequestClientFactoryConfig;
10
+
11
+ if (env.graphQLEndpoint && env.sitecoreApiKey) {
12
+ clientConfig = {
13
+ endpoint: env.graphQLEndpoint,
14
+ apiKey: env.sitecoreApiKey,
15
+ };
16
+ } else {
17
+ throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
18
+ }
19
+
20
+ return clientConfig;
21
+ };
@@ -0,0 +1,16 @@
1
+ import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-angular/cjs';
2
+ import { getGraphQLClientFactoryConfig } from './config';
3
+
4
+ // The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
5
+
6
+ /**
7
+ * Creates a new GraphQLRequestClientFactory instance
8
+ * @returns GraphQLRequestClientFactory instance
9
+ */
10
+ const createGraphQLClientFactory = () => {
11
+ const clientConfig = getGraphQLClientFactoryConfig();
12
+
13
+ return GraphQLRequestClient.createClientFactory(clientConfig);
14
+ };
15
+
16
+ export default createGraphQLClientFactory();
@@ -7,7 +7,7 @@ import {
7
7
  <% } -%>
8
8
  } from '@sitecore-jss/sitecore-jss-angular';
9
9
  import { environment } from '../../environments/environment';
10
- import { clientFactory } from './graphql-client-factory';
10
+ import clientFactory from './graphql-client-factory';
11
11
 
12
12
  export class LayoutServiceFactory {
13
13
  create(): LayoutService {
@@ -9,12 +9,12 @@ import { JssMetaService } from '../../jss-meta.service';
9
9
  enum LayoutState {
10
10
  Layout,
11
11
  NotFound,
12
- Error
12
+ Error,
13
13
  }
14
14
 
15
15
  interface RouteFields {
16
16
  [name: string]: unknown;
17
- pageTitle: Field<string>;
17
+ pageTitle?: Field<string>;
18
18
  }
19
19
 
20
20
  @Component({
@@ -28,14 +28,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
28
28
  subscription: Subscription;
29
29
  errorContextData: LayoutServiceContextData;
30
30
 
31
- constructor(
32
- private activatedRoute: ActivatedRoute,
33
- private readonly meta: JssMetaService,
34
- ) { }
31
+ constructor(private activatedRoute: ActivatedRoute, private readonly meta: JssMetaService) {}
35
32
 
36
33
  ngOnInit() {
37
34
  // route data is populated by the JssRouteResolver
38
- this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState<RouteFields> }) => {
35
+ this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
39
36
  if (!data.jssState) {
40
37
  this.state = LayoutState.NotFound;
41
38
  return;
@@ -48,13 +45,17 @@ export class LayoutComponent implements OnInit, OnDestroy {
48
45
  }
49
46
 
50
47
  if (data.jssState.routeFetchError) {
51
- if (data.jssState.routeFetchError.status >= 400 && data.jssState.routeFetchError.status < 500) {
48
+ if (
49
+ data.jssState.routeFetchError.status >= 400 &&
50
+ data.jssState.routeFetchError.status < 500
51
+ ) {
52
52
  this.state = LayoutState.NotFound;
53
53
  } else {
54
54
  this.state = LayoutState.Error;
55
55
  }
56
56
 
57
- this.errorContextData = data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
57
+ this.errorContextData =
58
+ data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
58
59
  }
59
60
  });
60
61
  }
@@ -1 +1,2 @@
1
- *.ts
1
+ *
2
+ !.gitignore
@@ -0,0 +1,2 @@
1
+ # The way in which layout and dictionary data is fetched from Sitecore
2
+ FETCH_WITH=<%- fetchWith %>
@@ -8,7 +8,7 @@ const chalk = require('chalk');
8
8
  */
9
9
  class DisconnectedPlugin implements ConfigPlugin {
10
10
  // should come before other plugins
11
- order = 0;
11
+ order = 2;
12
12
 
13
13
  async exec(config: JssConfig) {
14
14
  const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
@@ -20,7 +20,9 @@ class DisconnectedPlugin implements ConfigPlugin {
20
20
  );
21
21
  }
22
22
 
23
- return config;
23
+ return Object.assign({}, config, {
24
+ sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
25
+ });
24
26
  }
25
27
  }
26
28
 
@@ -13,6 +13,6 @@ export class GraphQLLayoutComponent implements OnInit {
13
13
  constructor(private contextService: JssContextService) { }
14
14
 
15
15
  ngOnInit() {
16
- this.disconnectedMode = this.contextService.state.value.sitecore.route.itemId === 'available-in-connected-mode';
16
+ this.disconnectedMode = this.contextService.stateValue.sitecore.route.itemId === 'available-in-connected-mode';
17
17
  }
18
18
  }
@@ -1,8 +1,14 @@
1
1
 
2
+ # ========== Sitecore Edge Platform ===========
3
+
4
+ # Your unified Sitecore Edge Context Id.
5
+ # This will be used over any Sitecore Preview / Delivery Edge variables (above).
6
+ SITECORE_EDGE_CONTEXT_ID=
7
+
2
8
  # ========== XM Cloud Proxy ===========
3
9
 
4
10
  # Your XM Cloud Proxy hostname is needed to build the app and execute the client-side requests against the proxy server.
5
- PROXY_HOST=http://localhost:3001
11
+ PROXY_HOST=http://localhost:3000
6
12
 
7
13
  # Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path.
8
- PROXY_BUILD_PATH=<%- helper.relativeProxyAppDestination %>dist
14
+ PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist
@@ -5,7 +5,6 @@
5
5
  "build": {
6
6
  "options": {
7
7
  "styles": [
8
- "node_modules/bootstrap/dist/css/bootstrap.min.css",
9
8
  "src/styles.css",
10
9
  "src/assets/styles/main.scss"
11
10
  ],
@@ -0,0 +1,28 @@
1
+ import 'dotenv/config';
2
+
3
+ /*
4
+ BOOTSTRAPPING
5
+ The bootstrap process runs before build, and generates TS that needs to be
6
+ included into the build - specifically, the component name to component mapping,
7
+ and the global config module.
8
+ */
9
+
10
+ /*
11
+ PLUGINS GENERATION
12
+ */
13
+ require('./generate-plugins');
14
+
15
+ /*
16
+ CONFIG GENERATION
17
+ */
18
+ require('./generate-config');
19
+
20
+ /*
21
+ COMPONENT FACTORY GENERATION
22
+ */
23
+ require('./generate-component-factory');
24
+
25
+ /*
26
+ METADATA GENERATION
27
+ */
28
+ require('./generate-metadata');
@@ -1,6 +1,7 @@
1
1
  import { JssConfig } from 'lib/config';
2
2
  import { ConfigPlugin } from '..';
3
3
  import { constantCase } from 'constant-case';
4
+ import chalk from 'chalk';
4
5
 
5
6
  /**
6
7
  * This plugin will set XM Cloud related config props.
@@ -13,9 +14,24 @@ class XMCloudPlugin implements ConfigPlugin {
13
14
  const proxyBuildPath = process.env[`${constantCase('proxyBuildPath')}`]?.replace(/\/$/, '');
14
15
  const proxyHost = process.env[`${constantCase('proxyHost')}`];
15
16
 
17
+ const sitecoreEdgeUrl =
18
+ process.env[`${constantCase('sitecoreEdgeUrl')}`]?.replace(/\/$/, '') ||
19
+ 'https://edge-platform.sitecorecloud.io';
20
+ const sitecoreEdgeContextId = process.env[`${constantCase('sitecoreEdgeContextId')}`];
21
+
22
+ if (config.sitecoreApiKey && sitecoreEdgeContextId) {
23
+ console.log(
24
+ chalk.yellow(
25
+ "You have configured both 'sitecoreApiKey' and 'sitecoreEdgeContextId' values. The 'sitecoreEdgeContextId' is used instead."
26
+ )
27
+ );
28
+ }
29
+
16
30
  return Object.assign({}, config, {
17
31
  proxyBuildPath,
18
32
  proxyHost,
33
+ sitecoreEdgeUrl,
34
+ sitecoreEdgeContextId,
19
35
  });
20
36
  }
21
37
  }
@@ -0,0 +1,25 @@
1
+ import fs from 'fs';
2
+ import path from 'path';
3
+ import { Metadata, getMetadata } from '@sitecore-jss/sitecore-jss-dev-tools';
4
+
5
+ /*
6
+ METADATA GENERATION
7
+ Generates the /src/environments/metadata.json file which contains application
8
+ configuration metadata that is used for Sitecore XM Cloud integration.
9
+ */
10
+ generateMetadata();
11
+
12
+ function generateMetadata(): void {
13
+ const metadata: Metadata = getMetadata();
14
+ writeMetadata(metadata);
15
+ }
16
+
17
+ /**
18
+ * Writes the metadata object to disk.
19
+ * @param {Metadata} metadata metadata to write.
20
+ */
21
+ function writeMetadata(metadata: Metadata): void {
22
+ const filePath = path.resolve('src/environments/metadata.json');
23
+ console.log(`Writing metadata to ${filePath}`);
24
+ fs.writeFileSync(filePath, JSON.stringify(metadata, null, 2), { encoding: 'utf8' });
25
+ }
@@ -0,0 +1,24 @@
1
+ import clientFactory from './src/app/lib/graphql-client-factory';
2
+ import { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
3
+ import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
4
+ import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
5
+ import { environment } from './src/environments/environment';
6
+ import { components } from './src/app/components/app-components.module';
7
+ import metadata from './src/environments/metadata.json';
8
+
9
+ /**
10
+ * Define the required configuration values to be exported from the server.bundle.ts.
11
+ */
12
+
13
+ const defaultLanguage = environment.defaultLanguage;
14
+ const getClientFactoryConfig = getGraphQLClientFactoryConfig;
15
+
16
+ export {
17
+ clientFactory,
18
+ getClientFactoryConfig,
19
+ dictionaryServiceFactory,
20
+ layoutServiceFactory,
21
+ defaultLanguage,
22
+ components,
23
+ metadata,
24
+ };