fix: ssr

swimlane · Dec 29, 2023 · 3c46874 · 3c46874
1 parent 0fcdfe4
commit 3c46874
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 47 deletions.
diff --git a/angular.json b/angular.json
@@ -119,11 +119,8 @@
             "outputPath": "dist/ngx-ui/server",
             "main": "server.ts",
             "tsConfig": "tsconfig.server.json",
-            "sourceMap": {
-              "scripts": true,
-              "styles": true,
-              "vendor": true
-            },
+            "sourceMap": true,
+            "optimization": false,
             "stylePreprocessorOptions": {
               "includePaths": ["dist/swimlane/ngx-ui/lib/styles", "dist/swimlane/ngx-ui/lib/assets"]
             },
@@ -143,6 +140,7 @@
               "extractLicenses": true
             },
             "development": {
+              "optimization": false,
               "sourceMap": true
             }
           },

diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.ts b/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.ts
@@ -28,7 +28,7 @@ const CODEMIRROR_VALUE_ACCESSOR = {
 };
 
 let codeMirror: typeof import('codemirror') = null;
-if (window && document) {
+if (typeof window !== 'undefined') {
   import('codemirror').then(e => {
     // @ts-ignore
     codeMirror = e.default ?? e;
@@ -162,12 +162,12 @@ export class CodeEditorComponent implements OnInit, AfterViewInit, ControlValueA
 
     if (isPlatformBrowser(this.platformId)) {
       this.instance = codeMirror.fromTextArea(this.host.nativeElement, this.config);
-    }
-    this.instance.on('change', this.onChange.bind(this));
-    this.instance.on('blur', this.onBlur.bind(this));
+      this.instance.on('change', this.onChange.bind(this));
+      this.instance.on('blur', this.onBlur.bind(this));
 
-    if (this.autocompleteTokens) {
-      this.instance.on('keyup', this.onKeyUp.bind(this));
+      if (this.autocompleteTokens) {
+        this.instance.on('keyup', this.onKeyUp.bind(this));
+      }
     }
   }
 
@@ -205,6 +205,7 @@ export class CodeEditorComponent implements OnInit, AfterViewInit, ControlValueA
   }
 
   onVisible(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
     // hidden on init will cause incorrect sizing
     this.instance.refresh();
   }

diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/mustache.ts b/projects/swimlane/ngx-ui/src/lib/components/code-editor/mustache.ts
@@ -1,27 +1,34 @@
-import * as CodeMirror from 'codemirror';
+export default null;
 
 // Adds mustache as an overlay to text/html
-CodeMirror.defineMode(
-  'mustache',
-  /* istanbul ignore next */ function (config: any, parserConfig: any) {
-    const mustacheOverlay = {
-      token(stream: any, _: any) {
-        let ch: any;
-        if (stream.match('{{')) {
-          // eslint-disable-next-line no-cond-assign
-          while ((ch = stream.next()) != null)
-            if (ch === '}' && stream.next() === '}') {
-              stream.eat('}');
-              return 'mustache';
-            }
-        }
-        while (stream.next() != null && !stream.match('{{', false)) {
-          continue;
-        }
-
-        return null;
-      }
-    };
-    return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'), mustacheOverlay);
+// @ts-ignore
+(function (mod) {
+  if (typeof window !== 'undefined') {
+    import('codemirror').then(e => mod(e.default ?? e));
   }
-);
+})(function (CodeMirror) {
+  CodeMirror.defineMode(
+    'mustache',
+    /* istanbul ignore next */ function (config: any, parserConfig: any) {
+      const mustacheOverlay = {
+        token(stream: any, _: any) {
+          let ch: any;
+          if (stream.match('{{')) {
+            // eslint-disable-next-line no-cond-assign
+            while ((ch = stream.next()) != null)
+              if (ch === '}' && stream.next() === '}') {
+                stream.eat('}');
+                return 'mustache';
+              }
+          }
+          while (stream.next() != null && !stream.match('{{', false)) {
+            continue;
+          }
+
+          return null;
+        }
+      };
+      return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'), mustacheOverlay);
+    }
+  );
+});
diff --git a/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.service.ts b/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.service.ts
@@ -7,7 +7,7 @@ import { HotkeyStatus } from './hotkey-status.enum';
 
 let hotkeys: { [combo: string]: Hotkey[] } = {};
 const hotkeyChangedSource = new Subject<{ [combo: string]: Hotkey[] }>();
-const isMac = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+const isMac = typeof window !== 'undefined' ? /Mac|iPod|iPhone|iPad/.test(window.navigator.platform) : false;
 const tags = ['INPUT', 'SELECT', 'TEXTAREA'];
 
 /* eslint-disable */

diff --git a/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.ts b/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.ts
@@ -1,15 +1,18 @@
 import {
-  Component,
-  Input,
   ChangeDetectionStrategy,
+  Component,
   ElementRef,
+  Inject,
+  Input,
   OnChanges,
   OnInit,
+  PLATFORM_ID,
   ViewEncapsulation
 } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 import { IconRegistryService } from '../../services/icon-registry/icon-registry.service';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   exportAs: 'ngxIcon',
@@ -35,7 +38,8 @@ export class IconComponent implements OnChanges, OnInit {
   constructor(
     private http: HttpClient,
     private elementRef: ElementRef,
-    private iconRegisteryService: IconRegistryService
+    private iconRegisteryService: IconRegistryService,
+    @Inject(PLATFORM_ID) private platformId: any
   ) {}
 
   ngOnChanges() {
@@ -53,6 +57,7 @@ export class IconComponent implements OnChanges, OnInit {
   }
 
   loadSvg(val: string): void {
+    if (isPlatformServer(this.platformId)) return;
     const opts: any = { responseType: 'text' };
     this.http.get<string>(`${this.defaultPath}/${val}.svg`, opts).subscribe(
       /* istanbul ignore next */

diff --git a/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.ts b/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.ts
@@ -1,14 +1,14 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input,
-  Output,
   EventEmitter,
-  OnInit,
-  HostListener,
   forwardRef,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -20,7 +20,7 @@ const SLIDER_VALUE_ACCESSOR: any = {
   multi: true
 };
 
-const edge = window.navigator.userAgent.indexOf('Edge') > -1;
+const edge = typeof window !== 'undefined' ? window.navigator.userAgent.indexOf('Edge') > -1 : false;
 
 @Component({
   selector: 'ngx-slider',