Refactored prettier and sval usage using dynamic imports.

package.json

@@ -35,7 +35,8 @@
     "compile-settings-schema-validator": "ajv compile -s src/app/utils/settings.schema.json -o src/app/utils/validate_settings_schema.js",
     "generate-settings-schema-validator": "npm run generate-settings-schema && npm run compile-settings-schema-validator",
     "webdriver-update-ci": "webdriver-manager update --standalone false --gecko false --versions.chrome=78.0.3904.70",
-    "snyk-protect": "snyk protect"
+    "snyk-protect": "snyk protect",
+    "analyze": "npx webpack-bundle-analyzer dist/stats.json"
   },
   "engines": {
     "node": ">= 6.9.1"

src/app/effects/query.ts

@@ -257,9 +257,9 @@ export class QueryEffects {
         switchMap((action: gqlSchemaActions.SetSchemaAction) => {
           const schema = action.payload;
           if (schema) {
-            return observableOf(
-              new gqlSchemaActions.SetSchemaSDLAction(action.windowId, { sdl: this.gqlService.getSDL(schema) })
-            );
+            this.gqlService.getSDL(schema).then(sdl => {
+              return this.store.dispatch(new gqlSchemaActions.SetSchemaSDLAction(action.windowId, { sdl }))
+            });
           }
 
           return observableEmpty();
@@ -282,7 +282,7 @@ export class QueryEffects {
               this.notifyService.error('There was a problem loading the schema');
               debug.error('Error while loading schema', err);
             }
-          })
+          });
           return observableEmpty();
         })
       );
@@ -577,17 +577,16 @@ export class QueryEffects {
           return { data: state.windows[action.windowId], windowId: action.windowId, action, settings: state.settings };
         }),
         switchMap(res => {
-          let prettified = '';
-          try {
-            prettified = this.gqlService.prettify(res.data.query.query, res.settings.tabSize);
-          } catch (err) {
+          this.gqlService.prettify(res.data.query.query, res.settings.tabSize).then(prettified => {
+            if (prettified) {
+              return this.store.dispatch(new queryActions.SetQueryAction(prettified, res.windowId));
+            }
+          })
+          .catch((err) => {
             debug.log(err);
             this.notifyService.error('Your query does not appear to be valid. Please check it.');
-          }
+          });
 
-          if (prettified) {
-            return observableOf(new queryActions.SetQueryAction(prettified, res.windowId));
-          }
           return observableEmpty();
         }),
       );
@@ -600,19 +599,19 @@ export class QueryEffects {
           return { data: state.windows[action.windowId], windowId: action.windowId, action };
         }),
         switchMap(res => {
-          let compressed = '';
-          try {
-            debug.log('We compress..');
-            compressed = this.gqlService.compress(res.data.query.query);
+          debug.log('We compress..');
+          this.gqlService.compress(res.data.query.query).then(compressed => {
             debug.log('Compressed..');
-          } catch (err) {
+
+            if (compressed) {
+              return this.store.dispatch(new queryActions.SetQueryAction(compressed, res.windowId));
+            }
+          })
+          .catch(err => {
             debug.log(err);
             this.notifyService.error('Your query does not appear to be valid. Please check it.');
-          }
+          });
 
-          if (compressed) {
-            return observableOf(new queryActions.SetQueryAction(compressed, res.windowId));
-          }
           return observableEmpty();
         }),
       );

src/app/services/gql/gql.service.ts

@@ -5,8 +5,8 @@ import {map, catchError, tap} from 'rxjs/operators';
 import { HttpHeaders, HttpClient, HttpResponse, HttpParams, HttpRequest, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
-import * as prettier from 'prettier/standalone';
-import * as prettierGraphql from 'prettier/parser-graphql';
+// import * as prettier from 'prettier/standalone';
+// import * as prettierGraphql from 'prettier/parser-graphql';
 import getTypeInfo from 'codemirror-graphql/utils/getTypeInfo';
 
 
@@ -442,7 +442,9 @@ export class GqlService {
    * Prettifies (formats) a given query
    * @param query
    */
-  prettify(query: string, tabWidth: number = 2) {
+  async prettify(query: string, tabWidth: number = 2) {
+    const prettier = await import('prettier/standalone');
+    const prettierGraphql = await import('prettier/parser-graphql');
     // return print(parse(query));
     return prettier.format(query, { parser: 'graphql', plugins: [ prettierGraphql ], tabWidth });
   }
@@ -451,8 +453,8 @@ export class GqlService {
    * Compresses a given query
    * @param query
    */
-  compress(query: string) {
-    return compress(this.prettify(query));
+  async compress(query: string) {
+    return compress(await this.prettify(query));
   }
 
   /**
@@ -485,7 +487,7 @@ export class GqlService {
    * Return the Schema Definition Language of the provided schema
    * @param schema
    */
-  getSDL(schema): string {
+  async getSDL(schema) {
     if (this.isSchema(schema)) {
       return this.prettify(printSchema(schema));
     }

src/app/services/pre-request/pre-request.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
-import Sval from 'sval';
+// import Sval from 'sval';
 import { CookieService } from 'ngx-cookie-service';
 import { debug } from '../../utils/logger';
 import { HttpClient } from '@angular/common/http';
 
+// let Sval;
 interface ScriptContextData {
   headers;
   variables;
@@ -21,7 +22,8 @@ export class PreRequestService {
     private http: HttpClient,
   ) { }
 
-  executeScript(script: string, data: ScriptContextData): Promise<any> {
+  async executeScript(script: string, data: ScriptContextData): Promise<any> {
+    const Sval = (await import('sval') as any).default;
     const self = this;
     // deep cloning
     data = JSON.parse(JSON.stringify(data));

src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "baseUrl": "",
     "types": [],
     "allowSyntheticDefaultImports": true

tsconfig.json

@@ -18,6 +18,6 @@
       "dom",
       "esnext"
     ],
-    "module": "es2015"
+    "module": "esnext"
   }
 }