refactor: add onGetFiles to renderer IPC (#1450)

* chore: add missing type to ambient.d.ts

* refactor: return localPath from getFiles

* refactor: move PackageJsonOptions to interfaces.ts

* refactor: add IPC event to get file content from renderer

src/ambient.d.ts

@@ -1,17 +1,20 @@
-import { ReleaseInfo } from '@electron/fiddle-core';
+import { ReleaseInfo, SemVer } from '@electron/fiddle-core';
 import * as MonacoType from 'monaco-editor';
 
 import {
   BisectRequest,
   BlockableAccelerator,
   EditorValues,
   FiddleEvent,
+  FileTransformOperation,
+  Files,
   IPackageManager,
   InstallState,
   MessageOptions,
   NodeTypes,
   OutputEntry,
   PMOperationOptions,
+  PackageJsonOptions,
   RunResult,
   RunnableVersion,
   SelectedLocalVersion,
@@ -116,6 +119,12 @@ declare global {
       isReleasedMajor(major: number): Promise<boolean>;
       macTitlebarClicked(): void;
       monaco: typeof MonacoType;
+      onGetFiles(
+        callback: (
+          options: PackageJsonOptions | undefined,
+          transforms: Array<FileTransformOperation>,
+        ) => Promise<{ localPath?: string; files: Files }>,
+      );
       openThemeFolder(): Promise<void>;
       packageRun(
         { dir, packageManager }: PMOperationOptions,

src/interfaces.ts

@@ -247,3 +247,8 @@ export enum AppStateBroadcastMessageType {
 export type NodeTypeDTS = `${string}.d.ts`;
 
 export type NodeTypes = Record<NodeTypeDTS, string>;
+
+export interface PackageJsonOptions {
+  includeElectron?: boolean;
+  includeDependencies?: boolean;
+}

src/ipc-events.ts

@@ -66,6 +66,7 @@ export enum IpcEvents {
   GET_NODE_TYPES = 'GET_NODE_TYPES',
   CLEANUP_DIRECTORY = 'CLEANUP_DIRECTORY',
   DELETE_USER_DATA = 'DELETE_USER_DATA',
+  GET_FILES = 'GET_FILES',
 }
 
 export const ipcMainEvents = [

src/main/utils/get-files.ts

@@ -0,0 +1,26 @@
+import { MessageChannelMain } from 'electron';
+
+import { FileTransformOperation, Files } from '../../interfaces';
+import { IpcEvents } from '../../ipc-events';
+import { ipcMainManager } from '../ipc';
+
+/**
+ * Gets file content from the renderer
+ */
+export function getFiles(
+  transforms: Array<FileTransformOperation>,
+): Promise<{ localPath?: string; files: Files }> {
+  return new Promise((resolve) => {
+    const { port1, port2 } = new MessageChannelMain();
+    ipcMainManager.postMessage(
+      IpcEvents.GET_FILES,
+      { options: undefined, transforms },
+      [port1],
+    );
+    port2.once('message', (event) => {
+      resolve(event.data);
+      port2.close();
+    });
+    port2.start();
+  });
+}

src/preload/preload.ts

@@ -1,7 +1,12 @@
 // Remember to update ambient.d.ts for extending window object
 import { IpcRendererEvent, ipcRenderer } from 'electron';
 
-import { FiddleEvent } from '../interfaces';
+import {
+  FiddleEvent,
+  FileTransformOperation,
+  Files,
+  PackageJsonOptions,
+} from '../interfaces';
 import { IpcEvents, WEBCONTENTS_READY_FOR_IPC_SIGNAL } from '../ipc-events';
 import { FiddleTheme } from '../themes-defaults';
 
@@ -139,6 +144,21 @@ export async function setupFiddleGlobal() {
       ipcRenderer.send(IpcEvents.CLICK_TITLEBAR_MAC);
     },
     monaco: null as any, // will be set in main.tsx
+    onGetFiles(
+      callback: (
+        options: PackageJsonOptions | undefined,
+        transforms: Array<FileTransformOperation>,
+      ) => Promise<{ localPath?: string; files: Files }>,
+    ) {
+      ipcRenderer.removeAllListeners(IpcEvents.GET_FILES);
+      ipcRenderer.on(
+        IpcEvents.GET_FILES,
+        async (e, { options, transforms }) => {
+          const { localPath, files } = await callback(options, transforms);
+          e.ports[0].postMessage({ localPath, files: [...files.entries()] });
+        },
+      );
+    },
     async openThemeFolder() {
       await ipcRenderer.invoke(IpcEvents.OPEN_THEME_FOLDER);
     },

src/renderer/app.tsx

@@ -7,12 +7,13 @@ import { Runner } from './runner';
 import { AppState } from './state';
 import { TaskRunner } from './task-runner';
 import { activateTheme, getTheme } from './themes';
-import { PackageJsonOptions, getPackageJson } from './utils/get-package';
+import { getPackageJson } from './utils/get-package';
 import { getElectronVersions } from './versions';
 import {
   EditorId,
   EditorValues,
   PACKAGE_NAME,
+  PackageJsonOptions,
   SetFiddleOptions,
 } from '../interfaces';
 import { defaultDark, defaultLight } from '../themes-defaults';

src/renderer/file-manager.ts

@@ -7,7 +7,7 @@ import { AppState } from './state';
 import { dotfilesTransform } from './transforms/dotfiles';
 import { forgeTransform } from './transforms/forge';
 import { isKnownFile } from './utils/editor-utils';
-import { DEFAULT_OPTIONS, PackageJsonOptions } from './utils/get-package';
+import { DEFAULT_OPTIONS } from './utils/get-package';
 import {
   EditorId,
   EditorValues,
@@ -16,10 +16,12 @@ import {
   Files,
   GenericDialogType,
   PACKAGE_NAME,
+  PackageJsonOptions,
 } from '../interfaces';
 
 export class FileManager {
   constructor(private readonly appState: AppState) {
+    this.getFiles = this.getFiles.bind(this);
     this.openFiddle = this.openFiddle.bind(this);
     this.saveFiddle = this.saveFiddle.bind(this);
 
@@ -48,6 +50,8 @@ export class FileManager {
     window.ElectronFiddle.addEventListener('save-fiddle-forge', (filePath) => {
       this.saveFiddle(filePath, ['dotfiles', 'forge']);
     });
+
+    window.ElectronFiddle.onGetFiles(this.getFiles);
   }
 
   /**
@@ -132,7 +136,7 @@ export class FileManager {
     if (!pathToSave) {
       window.ElectronFiddle.showSaveDialog();
     } else {
-      const files = await this.getFiles(undefined, transforms);
+      const { files } = await this.getFiles(undefined, transforms);
 
       for (const [fileName, content] of files) {
         const savePath = path.join(pathToSave, fileName);
@@ -161,13 +165,13 @@ export class FileManager {
    *
    * @param {PackageJsonOptions} [options]
    * @param {Array<FileTransformOperation>} [transforms]
-   * @returns {Promise<Files>}
+   * @returns {Promise<{ localPath: string; files: Files }>}
    * @memberof FileManager
    */
   public async getFiles(
     options?: PackageJsonOptions,
     transforms: Array<FileTransformOperation> = [],
-  ): Promise<Files> {
+  ): Promise<{ localPath?: string; files: Files }> {
     const { app } = window.ElectronFiddle;
 
     const pOptions = typeof options === 'object' ? options : DEFAULT_OPTIONS;
@@ -196,7 +200,7 @@ export class FileManager {
       }
     }
 
-    return output;
+    return { localPath: app.state.localPath, files: output };
   }
 
   /**
@@ -212,7 +216,7 @@ export class FileManager {
     transforms?: Array<FileTransformOperation>,
   ): Promise<string> {
     const tmp = await import('tmp');
-    const files = await this.getFiles(options, transforms);
+    const { files } = await this.getFiles(options, transforms);
     const dir = tmp.dirSync({
       prefix: 'electron-fiddle',
     });

src/renderer/runner.ts

@@ -4,12 +4,12 @@ import { Installer } from '@electron/fiddle-core';
 
 import { Bisector } from './bisect';
 import { AppState } from './state';
-import { PackageJsonOptions } from './utils/get-package';
 import { maybePlural } from './utils/plural-maybe';
 import {
   FileTransformOperation,
   InstallState,
   PMOperationOptions,
+  PackageJsonOptions,
   RunResult,
   RunnableVersion,
 } from '../interfaces';

src/renderer/utils/get-package.ts

@@ -1,12 +1,7 @@
 import * as fiddlePackageJSON from '../../../package.json';
-import { MAIN_JS } from '../../interfaces';
+import { MAIN_JS, PackageJsonOptions } from '../../interfaces';
 import { AppState } from '../../renderer/state';
 
-export interface PackageJsonOptions {
-  includeElectron?: boolean;
-  includeDependencies?: boolean;
-}
-
 export const DEFAULT_OPTIONS = {
   includeElectron: true,
   includeDependencies: true,

tests/mocks/electron-fiddle.ts

@@ -32,6 +32,7 @@ export class ElectronFiddleMock {
   public getUsername = jest.fn();
   public macTitlebarClicked = jest.fn();
   public monaco = new MonacoMock();
+  public onGetFiles = jest.fn();
   public openThemeFolder = jest.fn();
   public packageRun = jest.fn();
   public platform = process.platform;

tests/renderer/app-spec.tsx

@@ -1,4 +1,5 @@
 import { mocked } from 'jest-mock';
+import * as semver from 'semver';
 
 import { EditorValues, MAIN_JS, SetFiddleOptions } from '../../src/interfaces';
 import { App } from '../../src/renderer/app';
@@ -33,9 +34,9 @@ describe('App component', () => {
     });
     mocked(window.ElectronFiddle.readThemeFile).mockResolvedValue(defaultDark);
     mocked(window.ElectronFiddle.getReleasedVersions).mockReturnValue([]);
-    mocked(window.ElectronFiddle.getLatestStable).mockReturnValue({
-      version: '24.0.0',
-    });
+    mocked(window.ElectronFiddle.getLatestStable).mockReturnValue(
+      semver.parse('24.0.0')!,
+    );
 
     ({ ElectronFiddle } = window);
     const { app: appMock } = ElectronFiddle;

tests/renderer/file-manager-spec.ts

@@ -234,7 +234,8 @@ describe('FileManager', () => {
     });
 
     it(`always inserts ${PACKAGE_NAME}`, async () => {
-      expect(await fm.getFiles()).toStrictEqual(expected);
+      const { files } = await fm.getFiles();
+      expect(files).toStrictEqual(expected);
     });
 
     it('includes supported files', async () => {
@@ -244,19 +245,21 @@ describe('FileManager', () => {
       const values = { ...editorValues, [file]: content };
 
       app.getEditorValues.mockReturnValue(values);
-      expect((await fm.getFiles()).get(file)).toStrictEqual(content);
+      const { files } = await fm.getFiles();
+      expect(files.get(file)).toStrictEqual(content);
     });
 
     it('applies transforms', async () => {
       const transformed: Files = new Map([['👉', '👈']]);
       mocked(dotfilesTransform).mockResolvedValue(transformed);
-      expect(await fm.getFiles(undefined, ['dotfiles'])).toBe(transformed);
+      const { files } = await fm.getFiles(undefined, ['dotfiles']);
+      expect(files).toBe(transformed);
     });
 
     it('handles transform error', async () => {
       mocked(dotfilesTransform).mockRejectedValue(new Error('💩'));
-      const result = await fm.getFiles(undefined, ['dotfiles']);
-      expect(result).toStrictEqual(expected);
+      const { files } = await fm.getFiles(undefined, ['dotfiles']);
+      expect(files).toStrictEqual(expected);
     });
   });
 });

tests/renderer/versions-spec.ts

@@ -1,4 +1,5 @@
 import { mocked } from 'jest-mock';
+import * as semver from 'semver';
 
 import {
   ElectronReleaseChannel,
@@ -34,9 +35,9 @@ describe('versions', () => {
 
     it('uses the newest stable as a fallback', () => {
       mocked(localStorage.getItem).mockReturnValue(null);
-      mocked(window.ElectronFiddle.getLatestStable).mockReturnValue({
-        version: '13.0.0',
-      });
+      mocked(window.ElectronFiddle.getLatestStable).mockReturnValue(
+        semver.parse('13.0.0')!,
+      );
       const output = getDefaultVersion([
         { version: '11.0.0' },
         { version: '15.0.0-nightly.20210715' },