create-sitecore-jss 22.2.0-canary.48 → 22.2.0-canary.49

package/dist/templates/angular/src/app/JssState.ts

@@ -1,12 +1,8 @@
-import { RouteData, LayoutServiceContextData } from '@sitecore-jss/sitecore-jss-angular';
+import { BaseJssState } from '@sitecore-jss/sitecore-jss-angular';
 import { LayoutServiceError } from './layout/jss-layout.service';
 
-export class JssState {
+export class JssState extends BaseJssState {
   language: string;
   serverRoute: string;
   routeFetchError?: LayoutServiceError;
-  sitecore?: LayoutServiceContextData & {
-    route: RouteData | null;
-  };
-  viewBag: { [key: string]: unknown };
 }

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

@@ -3,7 +3,6 @@ import { APP_BASE_HREF } from '@angular/common';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { RoutingModule } from './routing/routing.module';
 import { JssLayoutService } from './layout/jss-layout.service';
-import { JssContextService } from './jss-context.service';
 import { AppComponentsModule } from './components/app-components.module';
 import { AppComponent } from './app.component';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
@@ -11,6 +10,7 @@ import { JssTranslationClientLoaderService } from './i18n/jss-translation-client
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
 import { JssMetaService } from './jss-meta.service';
+import { JssContextService } from './jss-context.service';
 
 @NgModule({
   imports: [

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

@@ -3,6 +3,7 @@ import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 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).
@@ -14,10 +15,11 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
+    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);
@@ -34,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-sxp/src/app/components/graph-ql-layout/graph-ql-layout.component.ts

@@ -13,6 +13,6 @@ export class GraphQLLayoutComponent implements OnInit {
   constructor(private contextService: JssContextService) { }
 
   ngOnInit() {
-    this.disconnectedMode = this.contextService.state.value.sitecore.route.itemId === 'available-in-connected-mode';
+    this.disconnectedMode = this.contextService.stateValue.sitecore.route.itemId === 'available-in-connected-mode';
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.48",
+  "version": "22.2.0-canary.49",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "652c8a3d016290a368d337082c4a3c26756b6792"
+  "gitHead": "6bf25fd8b2273f0b036d6894ce89d2ff94b7aef6"
 }