refactor: move npm.ts to main process (#1341)

Author: dsanders11

src/ambient.d.ts

@@ -5,8 +5,10 @@ import {
   BlockableAccelerator,
   EditorValues,
   FiddleEvent,
+  IPackageManager,
   MessageOptions,
   OutputEntry,
+  PMOperationOptions,
   RunResult,
   SelectedLocalVersion,
   TestRequest,
@@ -66,6 +68,10 @@ declare global {
         type: 'toggle-monaco-option',
         listener: (path: string) => void,
       ): void;
+      addModules(
+        { dir, packageManager }: PMOperationOptions,
+        ...names: Array<string>
+      ): Promise<string>;
       app: App;
       appPaths: Record<string, string>;
       arch: string;
@@ -76,13 +82,21 @@ declare global {
         name?: string,
       ): Promise<LoadedFiddleTheme>;
       getAvailableThemes(): Promise<Array<LoadedFiddleTheme>>;
+      getIsPackageManagerInstalled(
+        packageManager: IPackageManager,
+        ignoreCache?: boolean,
+      ): Promise<boolean>;
       getTemplate(version: string): Promise<EditorValues>;
       getTemplateValues: (name: string) => Promise<EditorValues>;
       getTestTemplate(): Promise<EditorValues>;
       isDevMode: boolean;
       macTitlebarClicked(): void;
       monaco: typeof MonacoType;
       openThemeFolder(): Promise<void>;
+      packageRun(
+        { dir, packageManager }: PMOperationOptions,
+        command: string,
+      ): Promise<string>;
       platform: string;
       pushOutputEntry(entry: OutputEntry): void;
       readThemeFile(name?: string): Promise<LoadedFiddleTheme | null>;

src/interfaces.ts

@@ -178,3 +178,10 @@ export interface MessageOptions {
   detail?: string;
   buttons?: string[];
 }
+
+export type IPackageManager = 'npm' | 'yarn';
+
+export interface PMOperationOptions {
+  dir: string;
+  packageManager: IPackageManager;
+}

src/ipc-events.ts

@@ -47,6 +47,9 @@ export enum IpcEvents {
   READ_THEME_FILE = 'READ_THEME_FILE',
   GET_THEME_PATH = 'GET_THEME_PATH',
   IS_DEV_MODE = 'IS_DEV_MODE',
+  NPM_ADD_MODULES = 'NPM_ADD_MODULES',
+  NPM_IS_PM_INSTALLED = 'NPM_IS_PM_INSTALLED',
+  NPM_PACKAGE_RUN = 'NPM_PACKAGE_RUN',
 }
 
 export const ipcMainEvents = [
@@ -72,6 +75,9 @@ export const ipcMainEvents = [
   IpcEvents.READ_THEME_FILE,
   IpcEvents.GET_THEME_PATH,
   IpcEvents.IS_DEV_MODE,
+  IpcEvents.NPM_ADD_MODULES,
+  IpcEvents.NPM_IS_PM_INSTALLED,
+  IpcEvents.NPM_PACKAGE_RUN,
 ];
 
 export const WEBCONTENTS_READY_FOR_IPC_SIGNAL =

src/main/main.ts

@@ -18,6 +18,7 @@ import { setupDevTools } from './devtools';
 import { setupDialogs } from './dialogs';
 import { onFirstRunMaybe } from './first-run';
 import { ipcMainManager } from './ipc';
+import { setupNpm } from './npm';
 import { listenForProtocolHandler, setupProtocolHandler } from './protocol';
 import { shouldQuit } from './squirrel';
 import { setupTemplates } from './templates';
@@ -55,6 +56,7 @@ export async function onReady() {
   setupContent();
   setupThemes();
   setupIsDevMode();
+  setupNpm();
 
   processCommandLine(argv);
 }

src/renderer/npm.ts src/main/npm.tssrc/renderer/npm.ts renamed to src/main/npm.ts

@@ -1,11 +1,9 @@
-import { exec } from '../utils/exec';
-
-export type IPackageManager = 'npm' | 'yarn';
+import { IpcMainEvent } from 'electron';
 
-export interface PMOperationOptions {
-  dir: string;
-  packageManager: IPackageManager;
-}
+import { IPackageManager, PMOperationOptions } from '../interfaces';
+import { IpcEvents } from '../ipc-events';
+import { exec } from '../utils/exec';
+import { ipcMainManager } from './ipc';
 
 let isNpmInstalled: boolean | null = null;
 let isYarnInstalled: boolean | null = null;
@@ -24,7 +22,7 @@ export async function getIsPackageManagerInstalled(
     return isYarnInstalled;
 
   const command =
-    window.ElectronFiddle.platform === 'win32'
+    process.platform === 'win32'
       ? `where.exe ${packageManager}`
       : `which ${packageManager}`;
 
@@ -84,3 +82,27 @@ export function packageRun(
 ): Promise<string> {
   return exec(dir, `${packageManager} run ${command}`);
 }
+
+export async function setupNpm() {
+  ipcMainManager.handle(
+    IpcEvents.NPM_ADD_MODULES,
+    (
+      _: IpcMainEvent,
+      { dir, packageManager }: PMOperationOptions,
+      ...names: Array<string>
+    ) => addModules({ dir, packageManager }, ...names),
+  );
+  ipcMainManager.handle(
+    IpcEvents.NPM_IS_PM_INSTALLED,
+    (_: IpcMainEvent, packageManager: IPackageManager, ignoreCache?: boolean) =>
+      getIsPackageManagerInstalled(packageManager, ignoreCache),
+  );
+  ipcMainManager.handle(
+    IpcEvents.NPM_PACKAGE_RUN,
+    (
+      _: IpcMainEvent,
+      { dir, packageManager }: PMOperationOptions,
+      command: string,
+    ) => packageRun({ dir, packageManager }, command),
+  );
+}

src/preload/preload.ts

@@ -58,6 +58,13 @@ export async function setupFiddleGlobal() {
         }
       }
     },
+    addModules({ dir, packageManager }, ...names) {
+      return ipcRenderer.invoke(
+        IpcEvents.NPM_ADD_MODULES,
+        { dir, packageManager },
+        ...names,
+      );
+    },
     app: null as any, // will be set in main.tsx
     appPaths: await ipcRenderer.invoke(IpcEvents.GET_APP_PATHS),
     arch: process.arch,
@@ -73,6 +80,13 @@ export async function setupFiddleGlobal() {
     getAvailableThemes() {
       return ipcRenderer.invoke(IpcEvents.GET_AVAILABLE_THEMES);
     },
+    getIsPackageManagerInstalled(packageManager, ignoreCache) {
+      return ipcRenderer.invoke(
+        IpcEvents.NPM_IS_PM_INSTALLED,
+        packageManager,
+        ignoreCache,
+      );
+    },
     getTemplate: (version: string) =>
       ipcRenderer.invoke(IpcEvents.GET_TEMPLATE, version),
     getTemplateValues: (name: string) => {
@@ -87,6 +101,13 @@ export async function setupFiddleGlobal() {
     async openThemeFolder() {
       await ipcRenderer.invoke(IpcEvents.OPEN_THEME_FOLDER);
     },
+    packageRun({ dir, packageManager }, command) {
+      return ipcRenderer.invoke(
+        IpcEvents.NPM_PACKAGE_RUN,
+        { dir, packageManager },
+        command,
+      );
+    },
     platform: process.platform,
     pushOutputEntry(entry) {
       ipcRenderer.send(IpcEvents.OUTPUT_ENTRY, entry);

src/renderer/components/settings-execution.tsx

@@ -12,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 
-import { IPackageManager } from '../npm';
+import { IPackageManager } from '../../interfaces';
 import { AppState } from '../state';
 
 export enum SettingItemType {

src/renderer/runner.ts

@@ -6,18 +6,13 @@ import { Installer } from '@electron/fiddle-core';
 import {
   FileTransform,
   InstallState,
+  PMOperationOptions,
   RunResult,
   RunnableVersion,
 } from '../interfaces';
 import { PackageJsonOptions } from '../utils/get-package';
 import { maybePlural } from '../utils/plural-maybe';
 import { Bisector } from './bisect';
-import {
-  PMOperationOptions,
-  addModules,
-  getIsPackageManagerInstalled,
-  packageRun,
-} from './npm';
 import { AppState } from './state';
 import { getVersionState } from './versions';
 
@@ -267,7 +262,9 @@ export class Runner {
     pushOutput(`📦 ${strings[0]} current Fiddle...`);
 
     const packageManager = this.appState.packageManager;
-    const pmInstalled = await getIsPackageManagerInstalled(packageManager);
+    const pmInstalled = await window.ElectronFiddle.getIsPackageManagerInstalled(
+      packageManager,
+    );
     if (!pmInstalled) {
       let message = `Error: Could not find ${packageManager}. Fiddle requires Node.js and npm or yarn `;
       message += `to compile packages. Please visit https://nodejs.org to install `;
@@ -292,7 +289,12 @@ export class Runner {
     // Cool, let's run "package"
     try {
       console.log(`Now creating ${strings[1].toLowerCase()}...`);
-      pushOutput(await packageRun({ dir, packageManager }, operation));
+      pushOutput(
+        await window.ElectronFiddle.packageRun(
+          { dir, packageManager },
+          operation,
+        ),
+      );
       pushOutput(`✅ ${strings[1]} successfully created.`, { isNotPre: true });
     } catch (error) {
       pushError(`Creating ${strings[1].toLowerCase()} failed.`, error);
@@ -320,7 +322,9 @@ export class Runner {
     if (modules && modules.length > 0) {
       this.appState.isInstallingModules = true;
       const packageManager = pmOptions.packageManager;
-      const pmInstalled = await getIsPackageManagerInstalled(packageManager);
+      const pmInstalled = await window.ElectronFiddle.getIsPackageManagerInstalled(
+        packageManager,
+      );
       if (!pmInstalled) {
         let message = `The ${maybePlural(`module`, modules)} ${modules.join(
           ', ',
@@ -342,7 +346,10 @@ export class Runner {
         { isNotPre: true },
       );
 
-      const result = await addModules(pmOptions, ...modules);
+      const result = await window.ElectronFiddle.addModules(
+        pmOptions,
+        ...modules,
+      );
       pushOutput(result);
 
       this.appState.isInstallingModules = false;
@@ -478,7 +485,7 @@ export class Runner {
   public async packageInstall(options: PMOperationOptions): Promise<boolean> {
     try {
       this.appState.pushOutput(`Now running "npm install..."`);
-      this.appState.pushOutput(await addModules(options));
+      this.appState.pushOutput(await window.ElectronFiddle.addModules(options));
       return true;
     } catch (error) {
       this.appState.pushError('Failed to run "npm install".', error);

src/renderer/state.ts

@@ -21,6 +21,7 @@ import {
   GenericDialogOptions,
   GenericDialogType,
   GistActionState,
+  IPackageManager,
   InstallState,
   OutputEntry,
   OutputOptions,
@@ -37,7 +38,6 @@ import { Bisector } from './bisect';
 import { ELECTRON_DOWNLOAD_PATH, ELECTRON_INSTALL_PATH } from './constants';
 import { EditorMosaic } from './editor-mosaic';
 import { ELECTRON_MIRROR } from './mirror-constants';
-import { IPackageManager } from './npm';
 import {
   addLocalVersion,
   fetchVersions,

tests/renderer/npm-spec.ts tests/main/npm-spec.tstests/renderer/npm-spec.ts renamed to tests/main/npm-spec.ts

@@ -2,9 +2,9 @@ import {
   addModules,
   getIsPackageManagerInstalled,
   packageRun,
-} from '../../src/renderer/npm';
+} from '../../src/main/npm';
 import { exec } from '../../src/utils/exec';
-import { overrideRendererPlatform, resetRendererPlatform } from '../utils';
+import { overridePlatform, resetPlatform } from '../utils';
 jest.mock('../../src/utils/exec');
 
 describe('npm', () => {
@@ -14,10 +14,10 @@ describe('npm', () => {
         jest.resetModules();
       });
 
-      afterEach(() => resetRendererPlatform());
+      afterEach(() => resetPlatform());
 
       it('returns true if npm installed', async () => {
-        overrideRendererPlatform('darwin');
+        overridePlatform('darwin');
 
         (exec as jest.Mock).mockResolvedValueOnce('/usr/bin/fake-npm');
 
@@ -28,7 +28,7 @@ describe('npm', () => {
       });
 
       it('returns true if npm installed', async () => {
-        overrideRendererPlatform('win32');
+        overridePlatform('win32');
 
         (exec as jest.Mock).mockResolvedValueOnce('/usr/bin/fake-npm');
 
@@ -39,7 +39,7 @@ describe('npm', () => {
       });
 
       it('returns false if npm not installed', async () => {
-        overrideRendererPlatform('darwin');
+        overridePlatform('darwin');
 
         (exec as jest.Mock).mockRejectedValueOnce('/usr/bin/fake-npm');
 
@@ -67,10 +67,10 @@ describe('npm', () => {
         jest.resetModules();
       });
 
-      afterEach(() => resetRendererPlatform());
+      afterEach(() => resetPlatform());
 
       it('returns true if yarn installed', async () => {
-        overrideRendererPlatform('darwin');
+        overridePlatform('darwin');
 
         (exec as jest.Mock).mockResolvedValueOnce('/usr/bin/fake-yarn');
 
@@ -81,7 +81,7 @@ describe('npm', () => {
       });
 
       it('returns true if yarn installed', async () => {
-        overrideRendererPlatform('win32');
+        overridePlatform('win32');
 
         (exec as jest.Mock).mockResolvedValueOnce('/usr/bin/fake-yarn');
 
@@ -92,7 +92,7 @@ describe('npm', () => {
       });
 
       it('returns false if yarn not installed', async () => {
-        overrideRendererPlatform('darwin');
+        overridePlatform('darwin');
 
         (exec as jest.Mock).mockRejectedValueOnce('/usr/bin/fake-yarn');