Merge remote-tracking branch 'ybnd/cache-bust-dynamic-configuration-7.6_CLEAN' into cache-bust-dynamic-configuration-7.6

Author: ybnd

config/config.example.yml

@@ -368,6 +368,7 @@ themes:
   # - name: BASE_THEME_NAME
   #
   - name: dspace
+    prefetch: true
     headTags:
     - tagName: link
       attributes:

server.ts

@@ -72,7 +72,7 @@ const cookieParser = require('cookie-parser');
 const configJson = join(DIST_FOLDER, 'assets/config.json');
 const hashedFileMapping = new ServerHashedFileMapping(DIST_FOLDER, 'index.html');
 const appConfig: AppConfig = buildAppConfig(configJson, hashedFileMapping);
-hashedFileMapping.addThemeStyles(appConfig.themes);
+appConfig.themes.forEach(themeConfig => hashedFileMapping.addThemeStyle(themeConfig.name, themeConfig.prefetch));
 hashedFileMapping.save();
 
 // cache of SSR pages for known bots, only enabled in production mode

src/config/theme.config.ts

@@ -13,6 +13,11 @@ export interface NamedThemeConfig extends Config {
    * A list of HTML tags that should be added to the HEAD section of the document, whenever this theme is active.
    */
   headTags?: HeadTagConfig[];
+
+  /**
+   * Whether this theme's CSS should be prefetched in CSR mode
+   */
+  prefetch?: boolean;
 }
 
 /**

src/modules/dynamic-hash/hashed-file-mapping.server.ts

@@ -22,8 +22,6 @@ import {
 } from 'path';
 import zlib from 'zlib';
 import { hasValue } from '../../app/shared/empty.util';
-import { ThemeConfig } from '../../config/theme.config';
-
 import {
   HashedFileMapping,
   ID,
@@ -46,7 +44,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
   public readonly indexPath: string;
   private readonly indexContent: string;
 
-  protected readonly headLinks: Set<HeadLink> = new Set();
+  protected readonly headLinks: Map<string, HeadLink> = new Map();
 
   constructor(
     private readonly root: string,
@@ -112,33 +110,30 @@ export class ServerHashedFileMapping extends HashedFileMapping {
     return hashPath;
   }
 
-  /**
-   * Add CSS for all configured themes to the mapping
-   * @param themeConfigurations
-   */
-  addThemeStyles(themeConfigurations: ThemeConfig[]) {
-    for (const themeConfiguration of themeConfigurations) {
-      const path = `${this.root}/${themeConfiguration.name}-theme.css`;
-      const hashPath = this.add(path);
+  addThemeStyle(theme: string, prefetch = true) {
+    const path = `${this.root}/${theme}-theme.css`;
+    const hashPath = this.add(path);
 
+    if (prefetch) {
       // We know this CSS is likely needed, so we can avoid a FOUC by retrieving it in advance
       // Angular does the same for global styles, but doesn't "know" about our themes
       this.addHeadLink({
         path,
         rel: 'prefetch',
         as: 'style',
       });
-
-      this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.br');
-      this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.gz');
     }
+
+    // We know theme CSS has been compressed already
+    this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.br');
+    this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.gz');
   }
 
   /**
    * Include a head link for a given resource to the index HTML.
    */
   addHeadLink(headLink: HeadLink) {
-    this.headLinks.add(headLink);
+    this.headLinks.set(headLink.path, headLink);
   }
 
   private renderHeadLink(link: HeadLink): string {
@@ -176,7 +171,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
     root.querySelector('head')
         .appendChild(`<script id="${ID}" type="application/json">${JSON.stringify(out)}</script>` as any);
 
-    for (const headLink of this.headLinks) {
+    for (const headLink of this.headLinks.values()) {
       root.querySelector('head')
           .appendChild(this.renderHeadLink(headLink) as any);
     }