create-sitecore-jss 22.2.0-canary.11 → 22.2.0-canary.12

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

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

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

@@ -11,6 +11,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 { JssLinkService } from './jss-link.service';
 
 @NgModule({
   imports: [
@@ -32,6 +33,7 @@ import { JssMetaService } from './jss-meta.service';
     JssContextService,
     JssLayoutService,
     JssMetaService,
+    JssLinkService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.
     // the Sitecore Experience Editor will not work correctly when a base tag is used.
     { provide: APP_BASE_HREF, useValue: '/' },

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;
       }
     });
   }

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

@@ -4,11 +4,7 @@ import { HTMLLink } from '@sitecore-jss/sitecore-jss-angular';
 
 @Injectable()
 export class JssLinkService {
-  document: Document;
-
-  constructor() {
-    this.document = Inject(DOCUMENT);
-  }
+  constructor(@Inject(DOCUMENT) private document: Document) {}
 
   /**
    * Adds link element in the document head.
@@ -19,6 +15,11 @@ export class JssLinkService {
       return;
     }
 
+    // Check if a link with the same rel and href already exists
+    if (this.isDuplicateLink(headLink)) {
+      return;
+    }
+
     this.createLink(headLink);
   }
 
@@ -39,13 +40,14 @@ export class JssLinkService {
   }
 
   /**
-   * Removes all link elements that match the specified rel attribute.
-   * @param rel - The rel attribute of the links to be removed.
+   * Checks for an existing link element with the same rel and href attributes.
+   * @param headLink - An HTMLLink object to be checked.
+   * @returns {boolean} - True if a matching link exists, false otherwise.
    */
-  removeLinksByRel(rel: string) {
-    const links = this.document.head.querySelectorAll(`link[rel="${rel}"]`);
-    links.forEach((link) => {
-      this.document.head.removeChild(link);
-    });
+  private isDuplicateLink(headLink: HTMLLink): boolean {
+    const existingLink = this.document.head.querySelector(
+      `link[rel='${headLink.rel}'][href='${headLink.href}']`
+    );
+    return !!existingLink;
   }
 }

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

@@ -25,7 +25,7 @@
         <sc-placeholder
           name="headless-footer"
           [rendering]="route"
-          (loaded)="onMainPlaceholderLoaded($event)"
+          (loaded)="onPlaceholderLoaded($event)"
         ></sc-placeholder>
       </div>
     </footer>

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

@@ -21,7 +21,7 @@ enum LayoutState {
 
 interface RouteFields {
   [name: string]: unknown;
-  pageTitle: Field<string>;
+  pageTitle?: Field<string>;
 }
 
 @Component({
@@ -44,50 +44,45 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     // route data is populated by the JssRouteResolver
-    this.subscription = this.activatedRoute.data.subscribe(
-      (data: { jssState: JssState<RouteFields> }) => {
-        if (!data.jssState) {
-          this.state = LayoutState.NotFound;
-          return;
-        }
-
-        if (data.jssState.sitecore && data.jssState.sitecore.route) {
-          this.route = data.jssState.sitecore.route;
-          this.setMetadata(this.route.fields);
-          this.state = LayoutState.Layout;
-          this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
-            ? 'editing-mode'
-            : 'prod-mode';
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
+      if (!data.jssState) {
+        this.state = LayoutState.NotFound;
+        return;
+      }
 
-          const contentStyles = getContentStylesheetLink(
-            { sitecore: data.jssState.sitecore },
-            env.sitecoreEdgeContextId,
-            env.sitecoreEdgeUrl
-          );
+      if (data.jssState.sitecore && data.jssState.sitecore.route) {
+        this.route = data.jssState.sitecore.route;
+        this.setMetadata(this.route.fields);
+        this.state = LayoutState.Layout;
+        this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
+          ? 'editing-mode'
+          : 'prod-mode';
 
-          // Clear existing stylesheets
-          this.linkService.removeLinksByRel('stylesheet');
+        const contentStyles = getContentStylesheetLink(
+          { sitecore: data.jssState.sitecore },
+          env.sitecoreEdgeContextId,
+          env.sitecoreEdgeUrl
+        );
 
-          if (contentStyles) {
-            this.linkService.addHeadLinks(contentStyles);
-          }
+        if (contentStyles) {
+          this.linkService.addHeadLinks(contentStyles);
         }
+      }
 
-        if (data.jssState.routeFetchError) {
-          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;
+      if (data.jssState.routeFetchError) {
+        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;
       }
-    );
+    });
   }
 
   ngOnDestroy() {
@@ -102,7 +97,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  onMainPlaceholderLoaded(_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.
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.11",
+  "version": "22.2.0-canary.12",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "f4cca11e7c8662590ae43f3100065f0adb1728c5"
+  "gitHead": "64712384661c6bf2379a610df10c259cd709299e"
 }