[UXP-114] split service into SSR and CSR

Author: Andrea Barbasso

src/app/core/shared/client-math.service.ts

@@ -0,0 +1,80 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ClientMathService extends MathService {
+
+  protected signal: Subject<boolean>;
+
+  protected mathJaxOptions = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']]
+    },
+    svg: {
+      fontCache: 'global'
+    },
+    startup: {
+      typeset: false
+    }
+  };
+
+  protected mathJax: MathJaxConfig = {
+    source: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
+    id: 'MathJaxScript'
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js',
+    id: 'MathJaxBackupScript'
+  };
+
+  constructor() {
+    super();
+
+    this.signal = new ReplaySubject<boolean>();
+
+    void this.registerMathJaxAsync(this.mathJax)
+      .then(() => this.signal.next(true))
+      .catch(_ => {
+        void this.registerMathJaxAsync(this.mathJaxFallback)
+          .then(() => this.signal.next(true))
+          .catch((error) => console.log(error));
+      });
+  }
+
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    if (environment.markdown.mathjax) {
+      return new Promise<void>((resolve, reject) => {
+
+        const optionsScript: HTMLScriptElement = document.createElement('script');
+        optionsScript.type = 'text/javascript';
+        optionsScript.text = `MathJax = ${JSON.stringify(this.mathJaxOptions)};`;
+        document.head.appendChild(optionsScript);
+
+        const script: HTMLScriptElement = document.createElement('script');
+        script.id = config.id;
+        script.type = 'text/javascript';
+        script.src = config.source;
+        script.crossOrigin = 'anonymous';
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = error => reject(error);
+        document.head.appendChild(script);
+      });
+    }
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return this.signal;
+  }
+
+  render(element: HTMLElement) {
+    if (environment.markdown.mathjax) {
+      (window as any).MathJax.typesetPromise([element]);
+    }
+  }
+}

src/app/core/shared/math.service.ts

@@ -1,77 +1,16 @@
-import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 
-interface MathJaxConfig {
+export interface MathJaxConfig {
   source: string;
   id: string;
 }
 
-@Injectable({
-  providedIn: 'root'
-})
-export class MathService {
+export abstract class MathService {
+  protected abstract mathJaxOptions: any;
+  protected abstract mathJax: MathJaxConfig;
+  protected abstract mathJaxFallback: MathJaxConfig;
 
-  private signal: Subject<boolean>;
-
-  private mathJaxOptions = {
-    tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']]
-    },
-    svg: {
-      fontCache: 'global'
-    },
-    startup: {
-      typeset: false
-    }
-  };
-
-  private mathJax: MathJaxConfig = {
-    source: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
-    id: 'MathJaxScript'
-  };
-  private mathJaxFallback: MathJaxConfig = {
-    source: 'assets/mathjax/mml-chtml.js',
-    id: 'MathJaxBackupScript'
-  };
-
-  constructor() {
-
-    this.signal = new ReplaySubject<boolean>();
-
-    void this.registerMathJaxAsync(this.mathJax)
-      .then(() => this.signal.next(true))
-      .catch(_ => {
-        void this.registerMathJaxAsync(this.mathJaxFallback)
-          .then(() => this.signal.next(true))
-          .catch((error) => console.log(error));
-      });
-  }
-
-  private async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
-    return new Promise<void>((resolve, reject) => {
-
-      const optionsScript: HTMLScriptElement = document.createElement('script');
-      optionsScript.type = 'text/javascript';
-      optionsScript.text = `MathJax = ${JSON.stringify(this.mathJaxOptions)};`;
-      document.head.appendChild(optionsScript);
-
-      const script: HTMLScriptElement = document.createElement('script');
-      script.id = config.id;
-      script.type = 'text/javascript';
-      script.src = config.source;
-      script.crossOrigin = 'anonymous';
-      script.async = true;
-      script.onload = () => resolve();
-      script.onerror = error => reject(error);
-      document.head.appendChild(script);
-    });
-  }
-
-  ready(): Observable<boolean> {
-    return this.signal;
-  }
-
-  render(element: HTMLElement) {
-    (window as any).MathJax.typesetPromise([element]);
-  }
+  protected abstract registerMathJaxAsync(config: MathJaxConfig): Promise<any>;
+  abstract ready(): Observable<boolean>;
+  abstract render(element: HTMLElement): void;
 }

src/app/core/shared/server-math.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServerMathService extends MathService {
+
+  protected signal: Subject<boolean>;
+
+  protected mathJaxOptions = {};
+
+  protected mathJax: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+
+  constructor() {
+    super();
+
+    this.signal = new ReplaySubject<boolean>();
+    this.signal.next(true);
+  }
+
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return this.signal;
+  }
+
+  render(element: HTMLElement) {
+    return;
+  }
+}

src/modules/app/browser-app.module.ts

@@ -33,6 +33,8 @@ import { BrowserAuthRequestService } from '../../app/core/auth/browser-auth-requ
 import { BrowserInitService } from './browser-init.service';
 import { ReferrerService } from '../../app/core/services/referrer.service';
 import { BrowserReferrerService } from '../../app/core/services/browser.referrer.service';
+import { MathService } from '../../app/core/shared/math.service';
+import { ClientMathService } from '../../app/core/shared/client-math.service';
 
 export const REQ_KEY = makeStateKey<string>('req');
 
@@ -116,6 +118,10 @@ export function getRequest(transferState: TransferState): any {
     {
       provide: LocationToken,
       useFactory: locationProvider,
+    },
+    {
+      provide: MathService,
+      useClass: ClientMathService
     }
   ]
 })

src/modules/app/server-app.module.ts

@@ -37,6 +37,8 @@ import { XhrFactory } from '@angular/common';
 import { ServerXhrService } from '../../app/core/services/server-xhr.service';
 import { ReferrerService } from '../../app/core/services/referrer.service';
 import { ServerReferrerService } from '../../app/core/services/server.referrer.service';
+import { MathService } from '../../app/core/shared/math.service';
+import { ServerMathService } from '../../app/core/shared/server-math.service';
 
 export function createTranslateLoader(transferState: TransferState) {
   return new TranslateServerLoader(transferState, 'dist/server/assets/i18n/', '.json');
@@ -116,6 +118,10 @@ export function createTranslateLoader(transferState: TransferState) {
       provide: ReferrerService,
       useClass: ServerReferrerService,
     },
+    {
+      provide: MathService,
+      useClass: ServerMathService
+    }
   ]
 })
 export class ServerAppModule {