build(deps): upgrade to TypeScript 5.1

package.json

@@ -66,7 +66,7 @@
     "semver": "^7.3.4",
     "shell-env": "^3.0.1",
     "tmp": "0.2.1",
-    "tslib": "^2.1.0",
+    "tslib": "^2.6.0",
     "update-electron-app": "^2.0.1"
   },
   "devDependencies": {
@@ -117,7 +117,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "fetch-mock-jest": "^1.5.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "husky": "^5.1.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -141,8 +141,8 @@
     "stylelint-config-standard": "^34.0.0",
     "terser-webpack-plugin": "^5.3.3",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.3.1",
-    "typescript": "~4.3.0",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "webpack": "^5.69.1"
   },
   "lint-staged": {

src/main/windows.ts

@@ -101,7 +101,6 @@ export function createMainWindow(): Electron.BrowserWindow {
   });
 
   ipcMainManager.handle(IpcEvents.GET_APP_PATHS, () => {
-    const paths = {};
     const pathsToQuery = [
       'home',
       'appData',
@@ -110,6 +109,7 @@ export function createMainWindow(): Electron.BrowserWindow {
       'downloads',
       'desktop',
     ] as const;
+    const paths = {} as Record<typeof pathsToQuery[number], string>;
     for (const path of pathsToQuery) {
       paths[path] = app.getPath(path);
     }

src/renderer/app.tsx

@@ -2,7 +2,12 @@ import * as path from 'node:path';
 
 import { autorun, reaction, when } from 'mobx';
 
-import { EditorValues, PACKAGE_NAME, SetFiddleOptions } from '../interfaces';
+import {
+  EditorId,
+  EditorValues,
+  PACKAGE_NAME,
+  SetFiddleOptions,
+} from '../interfaces';
 import { defaultDark, defaultLight } from '../themes-defaults';
 import { USER_DATA_PATH } from './constants';
 import { ElectronTypes } from './electron-types';
@@ -92,7 +97,10 @@ export class App {
     const values = this.state.editorMosaic.values();
 
     if (options) {
-      values[PACKAGE_NAME] = await getPackageJson(this.state, options);
+      values[PACKAGE_NAME as EditorId] = await getPackageJson(
+        this.state,
+        options,
+      );
     }
 
     return values;

src/renderer/components/commands-action-button.tsx

@@ -14,9 +14,11 @@ import { when } from 'mobx';
 import { observer } from 'mobx-react';
 
 import {
+  EditorId,
   EditorValues,
   GistActionState,
   GistActionType,
+  PACKAGE_NAME,
 } from '../../interfaces';
 import { AppState } from '../state';
 import { ensureRequiredFiles } from '../utils/editor-utils';
@@ -125,7 +127,8 @@ export const GistActionButton = observer(
         options,
       );
 
-      defaultGistValues['package.json'] = currentEditorValues['package.json'];
+      defaultGistValues[PACKAGE_NAME as EditorId] =
+        currentEditorValues[PACKAGE_NAME as EditorId];
 
       try {
         const gistFilesList = appState.isPublishingGistAsRevision

src/renderer/components/output-editors-wrapper.tsx

@@ -54,7 +54,9 @@ export class OutputEditorsWrapper extends React.Component<
   public render() {
     return (
       <Mosaic<WrapperEditorId>
-        renderTile={(id: string) => this.MOSAIC_ELEMENTS[id]}
+        renderTile={(id: string) =>
+          this.MOSAIC_ELEMENTS[id as keyof typeof this.MOSAIC_ELEMENTS]
+        }
         resize={{ minimumPaneSizePercentage: 15 }}
         value={this.state.mosaic}
         onChange={this.onChange}

src/renderer/components/settings-execution.tsx

@@ -15,13 +15,10 @@ import { observer } from 'mobx-react';
 import { GlobalSetting, IPackageManager } from '../../interfaces';
 import { AppState } from '../state';
 
-/**
- * @TODO make this a proper enum again once we update Typescript
- */
-export const SettingItemType = {
-  EnvVars: GlobalSetting.environmentVariables,
-  Flags: GlobalSetting.executionFlags,
-} as const;
+export enum SettingItemType {
+  EnvVars = GlobalSetting.environmentVariables,
+  Flags = GlobalSetting.executionFlags,
+}
 
 interface ExecutionSettingsProps {
   appState: AppState;
@@ -118,11 +115,11 @@ export const ExecutionSettings = observer(
      * run with the Electron executable.
      *
      * @param {React.ChangeEvent<HTMLInputElement>} event
-     * @param {GlobalSetting} type
+     * @param {SettingItemType} type
      */
     public handleSettingsItemChange(
       event: React.ChangeEvent<HTMLInputElement>,
-      type: GlobalSetting,
+      type: SettingItemType,
     ) {
       const { name, value } = event.currentTarget;
 
@@ -137,9 +134,9 @@ export const ExecutionSettings = observer(
     /**
      * Adds a new settings item input field.
      *
-     * @param {GlobalSetting} type
+     * @param {SettingItemType} type
      */
-    private addNewSettingsItem(type: GlobalSetting) {
+    private addNewSettingsItem(type: SettingItemType) {
       const array = Object.entries(this.state[type]);
 
       this.setState((prevState) => ({
@@ -163,7 +160,7 @@ export const ExecutionSettings = observer(
       appState.packageManager = value as IPackageManager;
     };
 
-    public renderDeleteItem(idx: string, type: GlobalSetting): JSX.Element {
+    public renderDeleteItem(idx: string, type: SettingItemType): JSX.Element {
       const updated = this.state[type];
 
       const removeFn = () => {

src/renderer/components/sidebar.tsx

@@ -13,7 +13,7 @@ export const Sidebar = ({ appState }: { appState: AppState }) => {
   };
   return (
     <Mosaic<string>
-      renderTile={(id) => ELEMENT_MAP[id]}
+      renderTile={(id) => ELEMENT_MAP[id as keyof typeof ELEMENT_MAP]}
       initialValue={{
         first: 'fileTree',
         second: 'packageManager',

src/renderer/file-manager.ts

@@ -4,6 +4,8 @@ import * as fs from 'fs-extra';
 import semver from 'semver';
 
 import {
+  EditorId,
+  EditorValues,
   FileTransform,
   Files,
   GenericDialogType,
@@ -70,7 +72,7 @@ export class FileManager {
     console.log(`FileManager: Asked to open`, filePath);
     if (!filePath || typeof filePath !== 'string') return;
 
-    const editorValues = {};
+    const editorValues: EditorValues = {};
     const files: [string, string][] = Object.entries(
       await readFiddle(filePath, true),
     );
@@ -115,7 +117,7 @@ export class FileManager {
       }
 
       if (isKnownFile(name) || (await app.remoteLoader.confirmAddFile(name))) {
-        editorValues[name] = value;
+        editorValues[name as EditorId] = value;
       }
     }
 
@@ -185,7 +187,7 @@ export class FileManager {
 
     let output: Files = new Map(Object.entries(values));
 
-    output.set(PACKAGE_NAME, values[PACKAGE_NAME]!);
+    output.set(PACKAGE_NAME, values[PACKAGE_NAME as EditorId]!);
 
     for (const transform of transforms) {
       try {

src/renderer/remote-loader.ts

@@ -1,6 +1,7 @@
 import semver from 'semver';
 
 import {
+  EditorId,
   EditorValues,
   ElectronReleaseChannel,
   GenericDialogType,
@@ -27,7 +28,7 @@ export class RemoteLoader {
       'setElectronVersion',
       'verifyReleaseChannelEnabled',
       'verifyRemoteLoad',
-    ]) {
+    ] as const) {
       this[name] = this[name].bind(this);
     }
   }
@@ -100,7 +101,7 @@ export class RemoteLoader {
             fetch(child.download_url)
               .then((r) => r.text())
               .then((t) => {
-                values[child.name] = t;
+                values[child.name as EditorId] = t;
               }),
           );
         }

src/renderer/themes.ts

@@ -43,7 +43,7 @@ export async function getTheme(
 async function getCssStringForTheme(theme: FiddleTheme): Promise<string> {
   let cssContent = '';
 
-  Object.keys(theme.common).forEach((key) => {
+  Object.keys(theme.common).forEach((key: keyof typeof theme.common) => {
     cssContent += `    --${key}: ${theme.common[key]};\n`;
   });
 

src/utils/editor-utils.ts

@@ -9,7 +9,11 @@ const EMPTY_EDITOR_CONTENT = {
 } as const;
 
 export function getEmptyContent(filename: string): string {
-  return EMPTY_EDITOR_CONTENT[getSuffix(filename)] || '';
+  return (
+    EMPTY_EDITOR_CONTENT[
+      getSuffix(filename) as keyof typeof EMPTY_EDITOR_CONTENT
+    ] || ''
+  );
 }
 
 export function isRequiredFile(id: EditorId) {
@@ -27,6 +31,6 @@ export function getSuffix(filename: string) {
   return filename.slice(filename.lastIndexOf('.') + 1);
 }
 
-export function isSupportedFile(filename: string): boolean {
+export function isSupportedFile(filename: string): filename is EditorId {
   return /\.(css|html|js)$/i.test(filename);
 }

src/utils/read-fiddle.ts

@@ -2,7 +2,7 @@ import * as path from 'node:path';
 
 import * as fs from 'fs-extra';
 
-import { EditorValues, PACKAGE_NAME } from '../interfaces';
+import { EditorId, EditorValues, PACKAGE_NAME } from '../interfaces';
 import { ensureRequiredFiles, isSupportedFile } from './editor-utils';
 
 /**
@@ -31,7 +31,7 @@ export async function readFiddle(
     );
 
     for (let i = 0; i < names.length; ++i) {
-      const name = names[i];
+      const name = names[i] as EditorId;
       const value = values[i];
 
       if (value.status === 'fulfilled') {

tests/mocks/electron-versions.ts

@@ -17,7 +17,7 @@ export class VersionsMock {
       version,
     }));
 
-    const obj = {};
+    const obj: Record<string, RunnableVersion> = {};
     for (const ver of arr) {
       obj[ver.version] = ver;
     }

tests/mocks/state.ts

@@ -181,11 +181,13 @@ export class StateMock {
       [ver.version, ver.source, ver.state].join(' ');
     for (const [key, val] of Object.entries(o)) {
       if (key == 'currentElectronVersion') {
-        o[key] = terserRunnable(val) as any;
+        o[key] = terserRunnable(val as RunnableVersion);
       } else if (key === 'versions') {
-        o[key] = Object.values(val).map(terserRunnable) as any;
+        o[key] = Object.values(val as Record<string, RunnableVersion>).map(
+          terserRunnable,
+        );
       } else if (key === 'versionsToShow') {
-        o[key] = val.map(terserRunnable);
+        o[key] = (val as Array<RunnableVersion>).map(terserRunnable);
       }
     }
 

tests/renderer/bisect-spec.ts

@@ -48,16 +48,20 @@ describe('bisect', () => {
       expect(bisector.revList.length).toBe(2);
       const responseGood = bisector.continue(true);
       expect(responseGood).toHaveLength(2);
-      expect(versions).toContain(responseGood[0]);
-      expect(versions).toContain(responseGood[1]);
+      if (Array.isArray(responseGood)) {
+        expect(versions).toContain(responseGood[0]);
+        expect(versions).toContain(responseGood[1]);
+      }
 
       bisector = new Bisector(versions);
 
       expect(bisector.revList.length).toBe(2);
       const responseBad = bisector.continue(false);
       expect(responseBad).toHaveLength(2);
-      expect(versions).toContain(responseBad[0]);
-      expect(versions).toContain(responseBad[1]);
+      if (Array.isArray(responseBad)) {
+        expect(versions).toContain(responseBad[0]);
+        expect(versions).toContain(responseBad[1]);
+      }
     });
   });
 

tests/renderer/editor-mosaic-spec.ts

@@ -227,7 +227,7 @@ describe('EditorMosaic', () => {
 
       // now modify values _after_ calling editorMosaic.set()
       for (const [file, value] of Object.entries(values)) {
-        values[file] = `${value} plus more text`;
+        values[file as EditorId] = `${value} plus more text`;
       }
 
       // and then add Monaco editors

tests/renderer/remote-loader-spec.ts

@@ -276,7 +276,7 @@ describe('RemoteLoader', () => {
 
       await instance.fetchExampleAndLoad('v4.0.0', 'test/path');
 
-      const expectedValues = {};
+      const expectedValues: Record<string, string> = {};
       for (const filename of Object.keys(mockGistFiles)) {
         expectedValues[filename] = filename;
       }

tests/utils.ts

@@ -90,18 +90,18 @@ export class FetchMock {
 }
 
 // return an object containing props in 'a' that are different from in 'b'
-export function objectDifference<Type>(a: Type, b: Type): Type {
+export function objectDifference(a: any, b: any): Record<string, unknown> {
   const serialize = (input: any) => JSON.stringify(toJS(input));
 
-  const o = {};
+  const o: Record<string, unknown> = {};
   for (const entry of Object.entries(a)) {
     const key = entry[0];
     const val = toJS(entry[1]);
     if (serialize(val) == serialize(b[key])) continue;
 
     o[key] = key === 'editorMosaic' ? objectDifference(val, b[key]) : toJS(val);
   }
-  return o as Type;
+  return o;
 }
 
 /**

tests/utils/read-fiddle-spec.ts

@@ -2,7 +2,7 @@ import * as path from 'node:path';
 
 import * as fs from 'fs-extra';
 
-import { EditorValues, MAIN_JS } from '../../src/interfaces';
+import { EditorId, EditorValues, MAIN_JS } from '../../src/interfaces';
 import {
   ensureRequiredFiles,
   getEmptyContent,
@@ -26,7 +26,7 @@ describe('read-fiddle', () => {
   function setupFSMocks(editorValues: EditorValues) {
     (fs.readdir as jest.Mock).mockResolvedValue(Object.keys(editorValues));
     (fs.readFile as jest.Mock).mockImplementation(
-      async (filename) => editorValues[path.basename(filename)],
+      async (filename) => editorValues[path.basename(filename) as EditorId],
     );
   }
 

tsconfig.json

@@ -16,7 +16,6 @@
     ],
     "noImplicitAny": true,
     "noImplicitReturns": true,
-    "suppressImplicitAnyIndexErrors": true,
     "strictNullChecks": true,
     "noUnusedLocals": true,
     "noImplicitThis": true,