feat: prevent Electron versions that are in use by some window from being removed

Author: erikian

src/renderer/components/settings-electron.tsx

@@ -31,6 +31,7 @@ interface ElectronSettingsProps {
 }
 
 interface ElectronSettingsState {
+  activeVersions: Set<string>;
   isDownloadingAll: boolean;
   isDeletingAll: boolean;
 }
@@ -60,11 +61,47 @@ export const ElectronSettings = observer(
       this.handleStateChange = this.handleStateChange.bind(this);
 
       this.state = {
+        activeVersions: new Set<string>([
+          props.appState.getVersionLockName(props.appState.version),
+        ]),
         isDownloadingAll: false,
         isDeletingAll: false,
       };
     }
 
+    /**
+     * Queries the currently active versions and update the local state.
+     *
+     * This currently gives a warning/error in development mode when the ElectronSettings component is unmounted
+     * ("Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak
+     * in your application"). This is a false positive, the warning has been removed in React 18+ (see
+     * https://github.com/facebook/react/pull/22114).
+     *
+     * @TODO upgrade to React 18
+     */
+    updateActiveVersions = () => {
+      this.props.appState
+        .getActiveVersions()
+        .then((activeVersions) =>
+          this.setState({ ...this.state, activeVersions }),
+        )
+        .catch((err) => {
+          console.error(
+            'Error updating the currently active Electron versions:',
+          );
+          console.error(err);
+        });
+    };
+
+    public componentDidMount() {
+      this.updateActiveVersions();
+    }
+
+    // Fired when other windows change their active Electron version
+    public componentDidUpdate() {
+      this.updateActiveVersions();
+    }
+
     public handleUpdateElectronVersions() {
       this.props.appState.updateElectronVersions();
     }
@@ -204,6 +241,7 @@ export const ElectronSettings = observer(
         </ButtonGroup>
       );
     }
+
     private filterSection(): JSX.Element {
       const { appState } = this.props;
       return (
@@ -390,7 +428,7 @@ export const ElectronSettings = observer(
           break;
       }
 
-      if (version === appState.currentElectronVersion.version) {
+      if (this.state.activeVersions.has(appState.getVersionLockName(version))) {
         return (
           <Tooltip
             position="auto"

src/renderer/state.ts

@@ -207,6 +207,34 @@ export class AppState {
     versions: this.baseVersions,
   });
 
+  // Lock on the active Electron version that prevents other windows from removing it
+  private versionLock: Lock | null = null;
+
+  // Used to release the lock when the current window switches Electron versions
+  private versionLockController = new AbortController();
+
+  private static versionLockNamePrefix = 'version:';
+
+  public getVersionLockName(ver: string) {
+    return [AppState.versionLockNamePrefix, ver].join('');
+  }
+
+  /**
+   * Retrieves all Electron versions that are currently active in some window.
+   */
+  public async getActiveVersions(): Promise<Set<string>> {
+    return ((await navigator.locks.query()).held || []).reduce<Set<string>>(
+      (acc, item) => {
+        if (item.name?.startsWith(AppState.versionLockNamePrefix)) {
+          acc.add(item.name);
+        }
+
+        return acc;
+      },
+      new Set(),
+    );
+  }
+
   constructor(versions: RunnableVersion[]) {
     makeObservable<AppState, 'setPageHash'>(this, {
       Bisector: observable,
@@ -700,7 +728,9 @@ export class AppState {
   public async removeVersion(ver: RunnableVersion): Promise<void> {
     const { version, state, source } = ver;
 
-    if (ver === this.currentElectronVersion) {
+    const activeVersions = await this.getActiveVersions();
+
+    if (activeVersions.has(this.getVersionLockName(ver.version))) {
       console.log(`State: Not removing active version ${version}`);
       return;
     }
@@ -851,10 +881,36 @@ export class AppState {
       return;
     }
 
+    if (this.versionLock) {
+      console.log(`Releasing lock on version ${this.version}`);
+
+      // release the lock on the previous version
+      this.versionLockController.abort();
+
+      // replace the spent AbortController
+      this.versionLockController = new AbortController();
+    }
+
     const { version } = ver;
     console.log(`State: Switching to Electron ${version}`);
     this.version = version;
 
+    navigator.locks.request(
+      this.getVersionLockName(version),
+      { mode: 'shared' },
+      (lock) => {
+        this.versionLock = lock;
+
+        /**
+         * The lock is released when this promise resolves, so we keep it in the
+         * pending state until our AbortController is aborted.
+         */
+        return new Promise<void>((resolve) => {
+          this.versionLockController.signal.onabort = () => resolve();
+        });
+      },
+    );
+
     // If there's no current fiddle,
     // or if the current fiddle is the previous version's template,
     // then load the new version's template.