Merge remote-tracking branch 'ybnd/cache-bust-dynamic-configuration-7…

….6_CLEAN' into cache-bust-dynamic-configuration-7.6

server.ts

@@ -72,6 +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();
 hashedFileMapping.save();
 
 // cache of SSR pages for known bots, only enabled in production mode

src/app/app.module.ts

@@ -10,6 +10,8 @@ import { MetaReducer, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/sto
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import { DYNAMIC_MATCHER_PROVIDERS } from '@ng-dynamic-forms/core';
+import { HashedFileMapping } from '../modules/dynamic-hash/hashed-file-mapping';
+import { BrowserHashedFileMapping } from '../modules/dynamic-hash/hashed-file-mapping.browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -110,6 +112,10 @@ const PROVIDERS = [
     useClass: DspaceRestInterceptor,
     multi: true
   },
+  {
+    provide: HashedFileMapping,
+    useClass: BrowserHashedFileMapping,
+  },
   // register the dynamic matcher used by form. MUST be provided by the app module
   ...DYNAMIC_MATCHER_PROVIDERS,
 ];

src/app/shared/theme-support/theme.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Inject, Injector } from '@angular/core';
 import { Store, createFeatureSelector, createSelector, select } from '@ngrx/store';
 import { BehaviorSubject, EMPTY, Observable, of as observableOf, from, concatMap } from 'rxjs';
+import { HashedFileMapping } from '../../../modules/dynamic-hash/hashed-file-mapping';
 import { ThemeState } from './theme.reducer';
 import { SetThemeAction, ThemeActionTypes } from './theme.actions';
 import { defaultIfEmpty, expand, filter, map, switchMap, take, toArray } from 'rxjs/operators';
@@ -54,6 +55,7 @@ export class ThemeService {
     @Inject(GET_THEME_CONFIG_FOR_FACTORY) private gtcf: (str) => ThemeConfig,
     private router: Router,
     @Inject(DOCUMENT) private document: any,
+    private hashedFileMapping: HashedFileMapping,
   ) {
     // Create objects from the theme configs in the environment file
     this.themes = environment.themes.map((themeConfig: ThemeConfig) => themeFactory(themeConfig, injector));
@@ -179,7 +181,10 @@ export class ThemeService {
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
     link.setAttribute('class', 'theme-css');
-    link.setAttribute('href', `${encodeURIComponent(themeName)}-theme.css`);
+    link.setAttribute(
+      'href',
+      this.hashedFileMapping.resolve(`${encodeURIComponent(themeName)}-theme.css`),
+    );
     // wait for the new css to download before removing the old one to prevent a
     // flash of unstyled content
     link.onload = () => {

src/main.browser.ts

@@ -11,7 +11,7 @@ import { extendEnvironmentWithAppConfig } from './config/config.util';
 import { enableProdMode } from '@angular/core';
 import { BrowserHashedFileMapping } from './modules/dynamic-hash/hashed-file-mapping.browser';
 
-const hashedFileMapping = new BrowserHashedFileMapping();
+const hashedFileMapping = new BrowserHashedFileMapping(document);
 const bootstrap = () => platformBrowserDynamic()
   .bootstrapModule(BrowserAppModule, {});
 

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

@@ -5,7 +5,11 @@
  *
  * http://www.dspace.org/license/
  */
-import { Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {
+  Inject,
+  Injectable,
+} from '@angular/core';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import { hasValue } from '../../app/shared/empty.util';
@@ -21,7 +25,9 @@ import {
  */
 @Injectable()
 export class BrowserHashedFileMapping extends HashedFileMapping {
-  constructor() {
+  constructor(
+    @Inject(DOCUMENT) protected document: any,
+  ) {
     super();
     const element = document.querySelector(`script#${ID}`);
 

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

@@ -10,6 +10,8 @@ import {
   readFileSync,
   rmSync,
   writeFileSync,
+  copyFileSync,
+  existsSync,
 } from 'fs';
 import glob from 'glob';
 import { parse } from 'node-html-parser';
@@ -48,9 +50,9 @@ export class ServerHashedFileMapping extends HashedFileMapping {
    * Otherwise, it is read out from the original path.
    * The original path is never overwritten.
    */
-  add(path: string, content?: string, compress = false) {
+  add(path: string, content?: string, compress = false): string {
     if (content === undefined) {
-      readFileSync(path);
+      content = readFileSync(path).toString();
     }
 
     // remove previous files
@@ -92,6 +94,27 @@ export class ServerHashedFileMapping extends HashedFileMapping {
         }
       });
     }
+
+    return hashPath;
+  }
+
+  addThemeStyles() {
+    glob.GlobSync(`${this.root}/*-theme.css`)
+        .found
+        .forEach(p => {
+          const hp = this.add(p);
+          this.ensureCompressedFilesAssumingUnchangedContent(p, hp, '.br');
+          this.ensureCompressedFilesAssumingUnchangedContent(p, hp, '.gz');
+        });
+  }
+
+  private ensureCompressedFilesAssumingUnchangedContent(path: string, hashedPath: string, compression: string) {
+    const compressedPath = `${path}${compression}`;
+    const compressedHashedPath = `${hashedPath}${compression}`;
+
+    if (existsSync(compressedPath) && !existsSync(compressedHashedPath)) {
+      copyFileSync(compressedPath, compressedHashedPath);
+    }
   }
 
   /**