Enable Prettier for TypeScript frontend (#3524)

compiler-explorer · Apr 20, 2022 · c199b54 · c199b54
1 parent ef8f36d
commit c199b54
Show file tree

Hide file tree

Showing 28 changed files with 466 additions and 347 deletions.
diff --git a/.github/workflows/test-and-deploy.yml b/.github/workflows/test-and-deploy.yml
@@ -30,6 +30,7 @@ jobs:
         run: |
           npm run lint
           npm run ci-test
+          npm run format-check
           python3 ./etc/scripts/util/orphancompiler.py
       - name: Code coverage
         run: npm run codecov

diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -1,14 +1,10 @@
-trailingComma: all
-printWidth: 80
+trailingComma: es5
+printWidth: 120
 singleQuote: true
 arrowParens: avoid
 tabWidth: 4
 bracketSpacing: false
-requirePragma: true
 overrides:
   - files: '*.{yml,json}'
     options:
       tabWidth: 2
-  - files: 'static/**/*'
-    options:
-      trailingComma: es5
diff --git a/package.json b/package.json
@@ -165,8 +165,9 @@
     "sentry": "npx -p @sentry/cli sentry-cli",
     "update-browserslist": "npx browserslist@latest -- --update-db",
     "prepare": "husky install",
-    "format": "prettier --ignore-unknown .",
-    "format-fix": "prettier --write --ignore-unknown .",
+    "format": "prettier --ignore-unknown ./static/*.ts",
+    "format-fix": "prettier --write --ignore-unknown ./static/*.ts",
+    "format-check": "prettier --ignore-unknown --check ./static/*.ts",
     "ts-compile": "tsc",
     "webpack": "webpack --node-env=production"
   },

diff --git a/static/alert.interfaces.ts b/static/alert.interfaces.ts
@@ -49,26 +49,26 @@ export interface AlertNotifyOptions {
      * Which group this notification is from. Sets data-group attribute value
      * Default: ""
      */
-    group?: string
+    group?: string;
     /** If set to true, other notifications within the same group will be removed before sending this one. (Note that
      * this only has any effect if options.group is set).
      * Default: true
      */
-    collapseSimilar?: boolean
+    collapseSimilar?: boolean;
     /**
      * Space separated list of HTML classes to give to the notification's div element.
      * Default: ""
      */
-    alertClass?: string
+    alertClass?: string;
     /**
      * If set to true, the notification will fade out and be removed automatically.
      * Default: true
      */
-    autoDismiss?: boolean
+    autoDismiss?: boolean;
     /**
      * If allow by autoDismiss, controls how long the notification will be visible (in milliseconds) before
      * automatically removed
      * Default: 5000
      */
-    dismissTime?: number
+    dismissTime?: number;
 }
diff --git a/static/alert.ts b/static/alert.ts
@@ -24,8 +24,8 @@
 
 import $ from 'jquery';
 
-import { AlertAskOptions, AlertEnterTextOptions, AlertNotifyOptions } from './alert.interfaces';
-import { toggleEventListener } from './utils';
+import {AlertAskOptions, AlertEnterTextOptions, AlertNotifyOptions} from './alert.interfaces';
+import {toggleEventListener} from './utils';
 import Sentry from '@sentry/browser';
 
 export class Alert {
@@ -66,20 +66,14 @@ export class Alert {
         this.yesHandler = askOptions.yes ?? (() => undefined);
         this.noHandler = askOptions.no ?? (() => undefined);
         modal.find('.modal-title').html(title);
-        modal.find('.modal-body')
-            .css('min-height', 'inherit')
-            .html(question);
+        modal.find('.modal-body').css('min-height', 'inherit').html(question);
         if (askOptions.yesHtml) modal.find('.modal-footer .yes').html(askOptions.yesHtml);
         if (askOptions.yesClass) {
-            modal.find('.modal-footer .yes')
-                .removeClass('btn-link')
-                .addClass(askOptions.yesClass);
+            modal.find('.modal-footer .yes').removeClass('btn-link').addClass(askOptions.yesClass);
         }
         if (askOptions.noHtml) modal.find('.modal-footer .no').html(askOptions.noHtml);
         if (askOptions.noClass) {
-            modal.find('.modal-footer .no')
-                .removeClass('btn-link')
-                .addClass(askOptions.noClass);
+            modal.find('.modal-footer .no').removeClass('btn-link').addClass(askOptions.noClass);
         }
         if (askOptions.onClose) {
             modal.off('hidden.bs.modal');
@@ -92,13 +86,16 @@ export class Alert {
     /**
      * Notifies the user of something by a popup which can be stacked, auto-dismissed, etc... based on options
      */
-    notify(body: string, {
-        group = '',
-        collapseSimilar = true,
-        alertClass = '',
-        autoDismiss = true,
-        dismissTime = 5000,
-    }: AlertNotifyOptions) {
+    notify(
+        body: string,
+        {
+            group = '',
+            collapseSimilar = true,
+            alertClass = '',
+            autoDismiss = true,
+            dismissTime = 5000,
+        }: AlertNotifyOptions
+    ) {
         const container = $('#notifications');
         if (container.length === 0) {
             Sentry.captureMessage('#notifications not found');
@@ -157,7 +154,7 @@ export class Alert {
 
         const answerEdit = modal.find('.modal-body .question-answer');
         answerEdit.val(defaultValue);
-        answerEdit.on('keyup', (e) => {
+        answerEdit.on('keyup', e => {
             if (e.keyCode === 13 || e.which === 13) {
                 yesButton.trigger('click');
             }

diff --git a/static/analytics.ts b/static/analytics.ts
@@ -36,20 +36,21 @@ if (options.statusTrackingEnabled && options.sentryDsn) {
 class GAProxy {
     private hasBeenEnabled = false;
     private isEnabled = false;
-    private _proxy: (...args) => void = () => {
-    };
+    private _proxy: (...args) => void = () => {};
 
     initialise() {
         if (!this.isEnabled && options.statusTrackingEnabled && options.googleAnalyticsEnabled) {
             // Check if this is a re-enable, as the script is already there in this case
             if (!this.hasBeenEnabled) {
                 (function (i, s, o, g, r, a, m) {
                     i.GoogleAnalyticsObject = r;
-                    i[r] = i[r] || function () {
-                        // We could push the unexpanded args, but better might have some unintended side-effects
-                        // eslint-disable-next-line prefer-rest-params
-                        (i[r].q = i[r].q || []).push(arguments);
-                    };
+                    i[r] =
+                        i[r] ||
+                        function () {
+                            // We could push the unexpanded args, but better might have some unintended side-effects
+                            // eslint-disable-next-line prefer-rest-params
+                            (i[r].q = i[r].q || []).push(arguments);
+                        };
                     i[r].l = Date.now();
                     // @ts-ignore
                     a = s.createElement(o);
@@ -74,8 +75,7 @@ class GAProxy {
             this.hasBeenEnabled = true;
         } else {
             this.isEnabled = false;
-            this._proxy = () => {
-            };
+            this._proxy = () => {};
         }
     }
 
@@ -84,8 +84,7 @@ class GAProxy {
             if (!this.isEnabled) this.initialise();
         } else {
             this.isEnabled = false;
-            this._proxy = () => {
-            };
+            this._proxy = () => {};
         }
     }
 
@@ -95,6 +94,4 @@ class GAProxy {
 }
 
 const ga = new GAProxy();
-export {
-    ga,
-};
+export {ga};
diff --git a/static/ansi-to-html.ts b/static/ansi-to-html.ts
@@ -28,7 +28,7 @@
 // Converted to typescript by MarkusJx
 
 import _ from 'underscore';
-import { AnsiToHtmlOptions, ColorCodes } from './ansi-to-html.interfaces';
+import {AnsiToHtmlOptions, ColorCodes} from './ansi-to-html.interfaces';
 
 const defaults: AnsiToHtmlOptions = {
     fg: '#FFF',
@@ -59,15 +59,15 @@ function getDefaultColors(): ColorCodes {
         15: '#FFF',
     };
 
-    range(0, 5).forEach((red) => {
-        range(0, 5).forEach((green) => {
-            range(0, 5).forEach((blue) => {
+    range(0, 5).forEach(red => {
+        range(0, 5).forEach(green => {
+            range(0, 5).forEach(blue => {
                 setStyleColor(red, green, blue, colors);
             });
         });
     });
 
-    range(0, 23).forEach((gray) => {
+    range(0, 23).forEach(gray => {
         const c = gray + 232;
         const l = toHexString(gray * 10 + 8);
 
@@ -190,7 +190,10 @@ function resetStyles(stack: string[]): string {
     const stackClone = stack.slice(0);
     stack.length = 0;
 
-    return stackClone.reverse().map((tag) => `</${tag}>`).join('');
+    return stackClone
+        .reverse()
+        .map(tag => `</${tag}>`)
+        .join('');
 }
 
 /**
@@ -241,9 +244,9 @@ function categoryForCode(_code: string | number): string {
         return 'hide';
     } else if (code === 9) {
         return 'strike';
-    } else if (29 < code && code < 38 || code === 39 || 89 < code && code < 98) {
+    } else if ((29 < code && code < 38) || code === 39 || (89 < code && code < 98)) {
         return 'foreground-color';
-    } else if (39 < code && code < 48 || code === 49 || 99 < code && code < 108) {
+    } else if ((39 < code && code < 48) || code === 49 || (99 < code && code < 108)) {
         return 'background-color';
     }
     return '';
@@ -344,28 +347,36 @@ function tokenize(text: string, options: AnsiToHtmlOptions, callback: TokenizeCa
     }
 
     /* eslint no-control-regex:0 */
-    const tokens: Token[] = [{
-        pattern: /^\x08+/,
-        sub: remove,
-    }, {
-        pattern: /^\x1b\[[012]?K/,
-        sub: remove,
-    }, {
-        pattern: /^\x1b\[[34]8;5;(\d+)m/,
-        sub: removeXterm256,
-    }, {
-        pattern: /^\n/,
-        sub: newline,
-    }, {
-        pattern: /^\x1b\[((?:\d{1,3};)*\d{1,3}|)m/,
-        sub: ansiMess,
-    }, {
-        pattern: /^\x1b\[?[\d;]{0,3}/,
-        sub: remove,
-    }, {
-        pattern: /^([^\x1b\x08\n]+)/,
-        sub: realText,
-    }];
+    const tokens: Token[] = [
+        {
+            pattern: /^\x08+/,
+            sub: remove,
+        },
+        {
+            pattern: /^\x1b\[[012]?K/,
+            sub: remove,
+        },
+        {
+            pattern: /^\x1b\[[34]8;5;(\d+)m/,
+            sub: removeXterm256,
+        },
+        {
+            pattern: /^\n/,
+            sub: newline,
+        },
+        {
+            pattern: /^\x1b\[((?:\d{1,3};)*\d{1,3}|)m/,
+            sub: ansiMess,
+        },
+        {
+            pattern: /^\x1b\[?[\d;]{0,3}/,
+            sub: remove,
+        },
+        {
+            pattern: /^([^\x1b\x08\n]+)/,
+            sub: realText,
+        },
+    ];
 
     function process(handler: Token, i: number): void {
         if (i > ansiHandler && ansiMatch) {
@@ -421,7 +432,8 @@ interface StickyStackElement {
 function updateStickyStack(
     stickyStack: StickyStackElement[],
     token: string,
-    data: string | number): StickyStackElement[] {
+    data: string | number
+): StickyStackElement[] {
     if (token !== 'text') {
         stickyStack = stickyStack.filter(notCategory(categoryForCode(data)));
         stickyStack.push({

diff --git a/static/codelens-handler.ts b/static/codelens-handler.ts
@@ -37,7 +37,8 @@ const providersPerLanguage: Record<string, monaco.IDisposable> = {};
 export function registerLensesForCompiler(
     compilerId: number,
     editorModel: monaco.editor.ITextModel,
-    lenses: monaco.languages.CodeLens[]): void {
+    lenses: monaco.languages.CodeLens[]
+): void {
     const item = _.find(registeredCodelenses, (item: RegisteredCodeLens): boolean => {
         return item.compilerId === compilerId;
     });

diff --git a/static/colour.ts b/static/colour.ts
@@ -23,7 +23,7 @@
 // POSSIBILITY OF SUCH DAMAGE.
 
 import * as monaco from 'monaco-editor';
-import { Themes } from './themes';
+import {Themes} from './themes';
 
 export type AppTheme = Themes | 'all';
 
@@ -38,10 +38,30 @@ export interface ColourSchemeInfo {
 export const schemes: ColourSchemeInfo[] = [
     {name: 'rainbow', desc: 'Rainbow 1', count: 12, themes: ['default']},
     {name: 'rainbow2', desc: 'Rainbow 2', count: 12, themes: ['default']},
-    {name: 'earth', desc: 'Earth tones (colourblind safe)', count: 9, themes: ['default']},
-    {name: 'green-blue', desc: 'Greens and blues (colourblind safe)', count: 4, themes: ['default']},
-    {name: 'gray-shade', desc: 'Gray shades', count: 4, themes: ['dark', 'darkplus']},
-    {name: 'rainbow-dark', desc: 'Dark Rainbow', count: 12, themes: ['dark', 'darkplus']},
+    {
+        name: 'earth',
+        desc: 'Earth tones (colourblind safe)',
+        count: 9,
+        themes: ['default'],
+    },
+    {
+        name: 'green-blue',
+        desc: 'Greens and blues (colourblind safe)',
+        count: 4,
+        themes: ['default'],
+    },
+    {
+        name: 'gray-shade',
+        desc: 'Gray shades',
+        count: 4,
+        themes: ['dark', 'darkplus'],
+    },
+    {
+        name: 'rainbow-dark',
+        desc: 'Dark Rainbow',
+        count: 12,
+        themes: ['dark', 'darkplus'],
+    },
 ];
 
 export function applyColours(
@@ -50,18 +70,17 @@ export function applyColours(
     schemeName: string,
     previousDecorations: string[]
 ): string[] {
-    const scheme = schemes.find((scheme) => scheme.name === schemeName) ?? schemes[0];
-    const newDecorations: monaco.editor.IModelDeltaDecoration[] = Object.entries(colours)
-        .map(([line, index]) => {
-            const realLineNumber = parseInt(line) + 1;
-            return {
-                range: new monaco.Range(realLineNumber, 1, realLineNumber, 1),
-                options: {
-                    isWholeLine: true,
-                    className: 'line-linkage ' + scheme.name + '-' + (index % scheme.count),
-                },
-            };
-        });
+    const scheme = schemes.find(scheme => scheme.name === schemeName) ?? schemes[0];
+    const newDecorations: monaco.editor.IModelDeltaDecoration[] = Object.entries(colours).map(([line, index]) => {
+        const realLineNumber = parseInt(line) + 1;
+        return {
+            range: new monaco.Range(realLineNumber, 1, realLineNumber, 1),
+            options: {
+                isWholeLine: true,
+                className: 'line-linkage ' + scheme.name + '-' + (index % scheme.count),
+            },
+        };
+    });
 
     return editor.deltaDecorations(previousDecorations, newDecorations);
 }