Merge pull request #7187 from mook-as/drop-fork-ts-checker

Drop @vue/cli-plugin-typescript and use ts-loader
rancher-sandbox · Jul 15, 2024 · 95dd2d1 · 95dd2d1
2 parents 62dd9a1 + 313e893
commit 95dd2d1
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 156 deletions.
diff --git a/package.json b/package.json
@@ -128,7 +128,6 @@
     "@typescript-eslint/parser": "7.16.0",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-router": "5.0.8",
-    "@vue/cli-plugin-typescript": "5.0.8",
     "@vue/cli-plugin-unit-jest": "5.0.8",
     "@vue/cli-plugin-vuex": "5.0.8",
     "@vue/cli-service": "5.0.8",
@@ -165,6 +164,7 @@
     "sass": "1.77.8",
     "sass-loader": "14.2.1",
     "ts-jest": "29.2.2",
+    "ts-loader": "^9.5.1",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "typescript": "5.5.3",

diff --git a/pkg/rancher-desktop/main/__tests__/ipcMain.spec.ts b/pkg/rancher-desktop/main/__tests__/ipcMain.spec.ts
@@ -12,7 +12,7 @@ describe('IpcMainProxy', () => {
   let emitter: E;
   let subject: ReturnType<typeof getIpcMainProxy>;
 
-  class E extends events.EventEmitter {
+  class E extends events.EventEmitter implements Electron.IpcMain {
     protected handlers: Record<string, {once: boolean, handler: Handler}> = {};
 
     handle(channel: string, handler: Handler) {
@@ -66,24 +66,7 @@ describe('IpcMainProxy', () => {
   }
 
   beforeAll(() => {
-    const methods: (keyof ReturnType<typeof getIpcMainProxy>)[] = [
-      'on', 'once', 'removeListener', 'removeAllListeners',
-      'handle', 'handleOnce', 'removeHandler',
-    ];
-
     emitter = new E();
-
-    for (const prop of methods) {
-      (Electron.ipcMain as any)[prop] ??= () => {};
-      expect(typeof emitter[prop]).toEqual('function');
-      jest.spyOn(Electron.ipcMain, prop as keyof typeof Electron.ipcMain).mockImplementation((...args: any) => {
-        //  TODO: Issue #5544 Don't use Function as a type
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        const meth = emitter[prop as keyof typeof emitter] as Function;
-
-        return meth.apply(emitter, args);
-      });
-    }
   });
 
   afterAll(() => {
@@ -95,7 +78,7 @@ describe('IpcMainProxy', () => {
     for (const meth of ['log', 'error', 'info', 'warn', 'debug', 'debugE'] as const) {
       jest.spyOn(log, meth);
     }
-    subject = getIpcMainProxy(log);
+    subject = getIpcMainProxy(log, emitter);
   });
 
   afterEach(() => {

diff --git a/pkg/rancher-desktop/main/ipcMain.ts b/pkg/rancher-desktop/main/ipcMain.ts
@@ -66,11 +66,13 @@ type Listener = (event: Electron.IpcMainEvent, ...args: any) => void;
 type Handler = (event: Electron.IpcMainInvokeEvent, ...args: any) => Promise<unknown>;
 
 class IpcMainProxyImpl implements IpcMainProxy {
-  constructor(logger: Log) {
+  constructor(logger: Log, ipcMain?: Electron.IpcMain) {
     this.logger = logger;
+    this.ipcMain = ipcMain ?? Electron.ipcMain;
   }
 
   protected logger: Log;
+  protected ipcMain: Electron.IpcMain;
 
   // Bijective weak maps between the user-provided listener and the wrapper that
   // introduces logging.  We do not keep strong references to either; the user-
@@ -89,7 +91,26 @@ class IpcMainProxyImpl implements IpcMainProxy {
 
     this.listenerWrapperToRaw.set(wrapper, new WeakRef(listener));
     this.listenerRawToWrapper.set(listener, new WeakRef(wrapper));
-    Electron.ipcMain.on(channel, wrapper);
+    this.ipcMain.on(channel, wrapper);
+
+    return this;
+  }
+
+  addListener(channel: string, listener: Listener): this {
+    return this.on(channel, listener);
+  }
+
+  prependListener(channel: string, listener: Listener): this {
+    const wrapper: Listener = (event, ...args) => {
+      const printableArgs = makeArgsPrintable(args);
+
+      this.logger.debug(`ipcMain: "${ channel }" triggered with arguments: ${ printableArgs.join(', ') }`);
+      listener(event, ...args);
+    };
+
+    this.listenerWrapperToRaw.set(wrapper, new WeakRef(listener));
+    this.listenerRawToWrapper.set(listener, new WeakRef(wrapper));
+    this.ipcMain.prependListener(channel, wrapper);
 
     return this;
   }
@@ -104,7 +125,22 @@ class IpcMainProxyImpl implements IpcMainProxy {
 
     this.listenerWrapperToRaw.set(wrapper, new WeakRef(listener));
     this.listenerRawToWrapper.set(listener, new WeakRef(wrapper));
-    Electron.ipcMain.once(channel, wrapper);
+    this.ipcMain.once(channel, wrapper);
+
+    return this;
+  }
+
+  prependOnceListener(channel: string, listener: Listener): this {
+    const wrapper: Listener = (event, ...args) => {
+      const printableArgs = makeArgsPrintable(args);
+
+      this.logger.debug(`ipcMain: "${ channel }" triggered with arguments: ${ printableArgs.join(', ') }`);
+      listener(event, ...args);
+    };
+
+    this.listenerWrapperToRaw.set(wrapper, new WeakRef(listener));
+    this.listenerRawToWrapper.set(listener, new WeakRef(wrapper));
+    this.ipcMain.prependOnceListener(channel, wrapper);
 
     return this;
   }
@@ -113,20 +149,54 @@ class IpcMainProxyImpl implements IpcMainProxy {
     const wrapper = this.listenerRawToWrapper.get(listener)?.deref();
 
     if (wrapper) {
-      Electron.ipcMain.removeListener(channel, wrapper);
+      this.ipcMain.removeListener(channel, wrapper);
       this.listenerWrapperToRaw.delete(wrapper);
     }
     this.listenerRawToWrapper.delete(listener);
 
     return this;
   }
 
+  off(channel: string, listener: Listener): this {
+    return this.removeListener(channel, listener);
+  }
+
   removeAllListeners(channel?: string): this {
-    Electron.ipcMain.removeAllListeners(channel);
+    this.ipcMain.removeAllListeners(channel);
+
+    return this;
+  }
+
+  setMaxListeners(n: number): this {
+    this.ipcMain.setMaxListeners(n);
 
     return this;
   }
 
+  getMaxListeners(): number {
+    return this.ipcMain.getMaxListeners();
+  }
+
+  listeners(eventName: string | symbol) {
+    return this.ipcMain.listeners(eventName);
+  }
+
+  rawListeners(eventName: string | symbol) {
+    return this.ipcMain.rawListeners(eventName);
+  }
+
+  listenerCount(eventName: string | symbol, listener?: Listener): number {
+    return this.ipcMain.listenerCount(eventName, listener);
+  }
+
+  emit(eventName: string | symbol, ...args: any[]): boolean {
+    return this.ipcMain.emit(eventName, ...args);
+  }
+
+  eventNames(): (string | symbol)[] {
+    return this.ipcMain.eventNames();
+  }
+
   // For dealing with handlers, we don't need to keep track of the wrappers
   // (because removeHandler() doesn't actually take the handler to remove).
 
@@ -139,7 +209,7 @@ class IpcMainProxyImpl implements IpcMainProxy {
       return handler(event, ...args);
     };
 
-    Electron.ipcMain.handle(channel, wrapper);
+    this.ipcMain.handle(channel, wrapper);
   }
 
   handleOnce(channel: string, handler: Handler) {
@@ -151,14 +221,14 @@ class IpcMainProxyImpl implements IpcMainProxy {
       return handler(event, ...args);
     };
 
-    Electron.ipcMain.handleOnce(channel, wrapper);
+    this.ipcMain.handleOnce(channel, wrapper);
   }
 
   removeHandler(channel: string): void {
-    Electron.ipcMain.removeHandler(channel);
+    this.ipcMain.removeHandler(channel);
   }
 }
 
-export function getIpcMainProxy(logger: Log): IpcMainProxy {
-  return new IpcMainProxyImpl(logger);
+export function getIpcMainProxy(logger: Log, ipcMain?: Electron.IpcMain): IpcMainProxy {
+  return new IpcMainProxyImpl(logger, ipcMain);
 }
diff --git a/pkg/rancher-desktop/main/tray.ts b/pkg/rancher-desktop/main/tray.ts
@@ -130,13 +130,15 @@ export class Tray {
    * triggered, close the watcher and restart after a duration (one second).
    */
   private async watchForChanges() {
-    this.abortController = new AbortController();
+    const abortController = new AbortController();
+
+    this.abortController = abortController;
     const paths = await kubeconfig.getKubeConfigPaths();
     const options: fs.WatchOptions = {
       persistent: false,
       recursive:  !this.isLinux(), // Recursive not implemented in Linux
       encoding:   'utf-8',
-      signal:     this.abortController.signal,
+      signal:     abortController.signal,
     };
 
     paths.map(filepath => fs.watch(filepath, options, async(eventType) => {

diff --git a/pkg/rancher-desktop/utils/testUtils/setupElectron.ts b/pkg/rancher-desktop/utils/testUtils/setupElectron.ts
@@ -6,15 +6,17 @@
 
 import path from 'path';
 
-jest.mock('electron', () => {
-  return {
-    __esModule: true,
-    default:    {
-      app: {
-        isPackaged: false,
-        getAppPath: () => path.resolve('.'),
+if ('jest' in globalThis && 'mock' in jest) {
+  jest.mock('electron', () => {
+    return {
+      __esModule: true,
+      default:    {
+        app: {
+          isPackaged: false,
+          getAppPath: () => path.resolve('.'),
+        },
+        ipcMain: {},
       },
-      ipcMain: {},
-    },
-  };
-});
+    };
+  });
+}
diff --git a/pkg/rancher-desktop/vue.config.js b/pkg/rancher-desktop/vue.config.js
@@ -17,9 +17,21 @@ module.exports = {
   outputDir:           path.resolve(rootDir, 'dist', 'app'),
   productionSourceMap: false,
 
+  /** @type { (config: import('webpack-chain')) => void } */
   chainWebpack: (config) => {
     config.target('electron-renderer');
     config.resolve.alias.set('@pkg', path.resolve(rootDir, 'pkg', 'rancher-desktop'));
+    config.resolve.extensions.add('.ts');
+
+    config.module.rule('ts')
+      .test(/\.ts$/)
+      .use('ts-loader')
+      .loader('ts-loader')
+      .options({
+        transpileOnly:    process.env.NODE_ENV === 'development',
+        appendTsSuffixTo: ['\\.vue$'],
+        happyPackMode:    true,
+      });
 
     config.module.rule('yaml')
       .test(/\.ya?ml(?:\?[a-z0-9=&.]+)?$/)
@@ -41,6 +53,12 @@ module.exports = {
         featureExtensions:       true,
       }),
     }]);
+
+    config.module.rule('vue').use('vue-loader').tap((options) => {
+      _.set(options, 'loaders.ts', 'ts-loader');
+
+      return options;
+    });
   },
 
   css: {

diff --git a/pkg/rancher-desktop/window/index.ts b/pkg/rancher-desktop/window/index.ts
@@ -468,11 +468,7 @@ export function openDialog(id: string, opts?: Electron.BrowserWindowConstructorO
     }
   });
 
-  if (Shortcuts.isRegistered(window)) {
-    return window;
-  }
-
-  if (escapeKey) {
+  if (!Shortcuts.isRegistered(window) && escapeKey) {
     Shortcuts.register(
       window,
       { key: 'Escape' },

diff --git a/scripts/build.ts b/scripts/build.ts
@@ -52,8 +52,10 @@ class Builder {
   async buildRenderer() {
     process.env.VUE_CLI_SERVICE_CONFIG_PATH = 'pkg/rancher-desktop/vue.config.js';
     await simpleSpawn(
-      'node_modules/.bin/vue-cli-service',
+      process.execPath,
       [
+        '--stack-size=16384',
+        'node_modules/@vue/cli-service/bin/vue-cli-service.js',
         'build',
         '--skip-plugins',
         'eslint',

diff --git a/scripts/dev.ts b/scripts/dev.ts
@@ -111,7 +111,9 @@ class DevRunner extends events.EventEmitter {
 
       this.#rendererProcess = this.spawn(
         'Renderer process',
-        'node_modules/.bin/vue-cli-service',
+        process.execPath,
+        '--stack-size=16384',
+        'node_modules/@vue/cli-service/bin/vue-cli-service.js',
         'serve',
         '--host',
         'localhost',

diff --git a/scripts/e2e.ts b/scripts/e2e.ts
@@ -91,7 +91,9 @@ class E2ETestRunner extends events.EventEmitter {
     process.env.VUE_CLI_SERVICE_CONFIG_PATH = 'pkg/rancher-desktop/vue.config.js';
 
     return buildUtils.spawn(
-      'node_modules/.bin/vue-cli-service',
+      process.execPath,
+      '--stack-size=16384',
+      'node_modules/@vue/cli-service/bin/vue-cli-service.js',
       'build',
       '--skip-plugins',
       'eslint',