TypeScript 5.9.3, Sass update

.yarnrc.yml

@@ -1,3 +1,11 @@
+approvedGitRepositories:
+  - "https://github.com/alexstrat/content-disposition.git"
+  - "https://github.com/tj/react-click-outside.git"
+
+enableScripts: true
+
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+npmMinimalAgeGate: 0
+
+yarnPath: .yarn/releases/yarn-4.18.0.cjs

package.json

@@ -44,7 +44,7 @@
   },
   "volta": {
     "node": "24.19.0",
-    "yarn": "4.1.0"
+    "yarn": "4.18.0"
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.18.0"
 }

packages/app/manifests/index.ts

@@ -40,7 +40,7 @@ export function allApplicationsDictionary(): Record<string, Manifest> {
   return ids.reduce((acc, id) => {
     acc[id] = getApplicationById(id);
     return acc;
-  }, {});
+  }, {} as Record<string, Manifest>);
 }
 
 export function listMostPopularApplications(): PopularApps {

packages/app/package.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "1password-node": "^3.0.0",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/runtime": "^7.4.3",
     "@electron/remote": "^2.1.3",
     "@getstation/apollo-link-reactive-schema": "^1.0.0",
@@ -193,6 +192,7 @@
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.7.1",
@@ -217,6 +217,8 @@
     "@storybook/addon-viewport": "4",
     "@storybook/addons": "4",
     "@storybook/react": "4",
+    "@swc/core": "^1.16.1",
+    "@swc/jest": "^0.2.39",
     "@types/array-uniq": "^1.0.1",
     "@types/async-lock": "^0.0.21",
     "@types/bluebird": "^3.5.26",
@@ -276,6 +278,7 @@
     "@types/yargs": "^13.0.2",
     "apollo-storybook-react": "^0.2.1",
     "babel-eslint": "^8.2.3",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "chai": "^4.2.0",
@@ -323,19 +326,18 @@
     "remote-redux-devtools": "0.5.0",
     "replace-in-file": "^4.1.3",
     "rimraf": "^5.0.10",
-    "sass": ">=1.34.1 <1.100.0",
+    "sass": "^1.103.1",
     "simple-git": "^1.107.0",
     "sinon": "^7.1.1",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^4.2.3",
     "tmp": "0.0.31",
-    "ts-jest": "^26.5.6",
     "ts-loader": "^6.2.1",
     "ts-node": "^8.1.0",
     "tslint": "^5.11.0",
     "tslint-config-station": "^0.6.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.3",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-merge": "^4.2.2",
@@ -346,9 +348,34 @@
   "jest": {
     "runner": "@jest-runner/electron/main",
     "testEnvironment": "node",
-    "preset": "ts-jest/presets/js-with-babel",
     "transform": {
-      "^.+\\.svg$": "jest-svg-transformer"
+      "^.+\\.svg$": "jest-svg-transformer",
+      "^.+\\.tsx?$": [
+        "@swc/jest",
+        {
+          "jsc": {
+            "target": "es2016",
+            "parser": {
+              "syntax": "typescript",
+              "tsx": true,
+              "decorators": true
+            },
+            "transform": {
+              "legacyDecorator": true,
+              "decoratorMetadata": true,
+              "useDefineForClassFields": false,
+              "react": {
+                "runtime": "classic"
+              }
+            }
+          },
+          "module": {
+            "type": "commonjs",
+            "noInterop": true
+          }
+        }
+      ],
+      "^.+\\.jsx?$": "babel-jest"
     },
     "setupFilesAfterEnv": [
       "<rootDir>/test/setup.jest.ts"
@@ -363,12 +390,7 @@
       "json",
       "jsx"
     ],
-    "testURL": "http://localhost/",
-    "globals": {
-      "ts-jest": {
-        "isolatedModules": true
-      }
-    }
+    "testURL": "http://localhost/"
   },
   "electronWebpack": {
     "title": false,

packages/app/src/app/selectors.ts

@@ -128,7 +128,7 @@ export const getKeyAboveTab = (state: StationState): string => {
   const windowsCommonKeymap = {};
   const linuxCommonKeymap = {};
 
-  const keymap = { ...appleCommonKeymap, ...windowsCommonKeymap, ...linuxCommonKeymap };
+  const keymap: Record<string, string> = { ...appleCommonKeymap, ...windowsCommonKeymap, ...linuxCommonKeymap };
   return keymap[getKeyboardLayout(state)] || '';
 };
 

packages/app/src/applications/components/Application.tsx

@@ -23,7 +23,7 @@ interface OwnProps {
   getIconRef?: boolean,
 }
 
-const ApplicationActionButtonIconMap = {
+const ApplicationActionButtonIconMap: Record<ApplicationActionType, IconSymbol> = {
   [ApplicationActionType.Add]: IconSymbol.PLUS,
   [ApplicationActionType.Settings]: IconSymbol.COG,
   [ApplicationActionType.Remove]: IconSymbol.CROSS,
@@ -143,7 +143,7 @@ class ApplicationImpl extends React.PureComponent<Props, {}> {
 
         {actionType &&
           <Icon
-            symbolId={ApplicationActionButtonIconMap[actionType]}
+            symbolId={ApplicationActionButtonIconMap[actionType as ApplicationActionType]}
             size={24}
             className={classes!.action}
             onClick={this.handleAddApplication}

packages/app/src/bang/components/BangList.tsx

@@ -172,7 +172,7 @@ export default class BangList extends React.PureComponent<Props, State> {
       collapseSections: this.props.items.reduce((state, item) => {
         state[item.sectionName] = { collapsed: true };
         return state;
-      }, {}),
+      }, {} as CollapseSections),
     });
   }
 
@@ -195,7 +195,7 @@ export default class BangList extends React.PureComponent<Props, State> {
         collapseSectionsNewState[item.sectionName] = { collapsed: true };
         return collapseSectionsNewState;
       },
-      {},
+      {} as CollapseSections,
     );
 
     this.updateCollapsedSections(nextCollapseSectionsState);

packages/app/src/common/components/ComponentWithPopover.tsx

@@ -72,7 +72,7 @@ export default class ComponentWithPopover extends React.PureComponent<Props, Sta
   getChild(indice: number) {
     const { children } = this.props;
     const { showPopper } = this.state;
-    const child = children![indice];
+    const child = (children as any)[indice];
 
     if (typeof child === 'function') {
       return child({

packages/app/src/common/components/ElectronWebview.tsx

@@ -233,11 +233,13 @@ class ElectronWebview extends React.Component<ElectronWebviewProps, {}> {
   componentDidMount() {
     const container = ReactDOM.findDOMNode(this.ref);
 
+    const props = this.props as Record<string, any>;
+
     let propString = '';
     Object.keys(this.props).forEach((propName) => {
       // Waiting for a fix https://github.com/electron/electron/issues/9618
-      if (this.props[propName] !== undefined && typeof this.props[propName] !== 'function') {
-        propString += getPropString(propName, this.props[propName]);
+      if (props[propName] !== undefined && typeof props[propName] !== 'function') {
+        propString += getPropString(propName, props[propName]);
       }
     });
     if (this.props.className) {
@@ -265,8 +267,8 @@ class ElectronWebview extends React.Component<ElectronWebviewProps, {}> {
       this.ready = true;
       events.forEach((event) => {
         const propName = camelCase(`on-${event}`);
-        if (this.props[propName]) {
-          this.view.addEventListener(event, this.props[propName], false);
+        if (props[propName]) {
+          this.view.addEventListener(event, props[propName], false);
         }
       });
       if (this.props.onDidAttach) this.props.onDidAttach(...attachArgs);
@@ -279,12 +281,13 @@ class ElectronWebview extends React.Component<ElectronWebviewProps, {}> {
       this.view.focus();
     });
 
+    const self = this as Record<string, any>;
     methods.forEach((method) => {
-      if (this[method]) return;
-      this[method] = (...args: any[]) => {
+      if (self[method]) return;
+      self[method] = (...args: any[]) => {
         if (!this.ready) return;
         try {
-          return this.view[method](...args);
+          return (this.view as Record<string, any>)[method](...args);
         } catch (e) {
           logger.notify(e);
         }
@@ -338,10 +341,13 @@ class ElectronWebview extends React.Component<ElectronWebviewProps, {}> {
   }
 
   componentDidUpdate(prevProps: ElectronWebviewProps) {
+    const props = this.props as Record<string, any>;
+    const previousProps = prevProps as Record<string, any>;
+    const self = this as Record<string, any>;
     Object.keys(changableProps).forEach((propName) => {
-      const propValue = this.props[propName];
-      if (propValue !== prevProps[propName]) {
-        this[changableProps[propName]](propValue);
+      const propValue = props[propName];
+      if (propValue !== previousProps[propName]) {
+        self[(changableProps as Record<string, any>)[propName]](propValue);
       }
     });
   }

packages/app/src/context-menu.ts

@@ -52,7 +52,7 @@ export default class ContextMenu extends EventEmitter {
 
     const editFlags = props.editFlags;
     const hasText = props.selectionText.trim().length > 0;
-    const can = (type: string) => editFlags[`can${type}`] && hasText;
+    const can = (type: string) => (editFlags as Record<string, any>)[`can${type}`] && hasText;
 
     let menuTpl: MenuItemConstructorOptions[] = [
       {

packages/app/src/dock/components/NativeAppDockIcon.tsx

@@ -142,7 +142,7 @@ export default class NativeAppDockIcon extends React.PureComponent<Props, State>
     if (active) {
       return (
         <g fill="none" fillRule="evenodd" mask={`url(#${this.maskId})`}>
-          <rect {...sizeProps[size!]} className={classes!.activeInner} />
+          <rect {...(sizeProps as Record<string, any>)[size!]} className={classes!.activeInner} />
         </g>
       );
     }

packages/app/src/notification-center/webview-preload.ts

@@ -61,7 +61,7 @@ export class BxNotification extends EventTarget('click', 'error', 'close', 'show
 
     Object.keys(properties).forEach(key => {
       Object.defineProperty(this, key, {
-        value: properties[key],
+        value: (properties as Record<string, any>)[key],
         writable: false,
       });
     });

packages/app/src/password-managers/components/ConfigurePasswordManager.tsx

@@ -32,7 +32,7 @@ export default class ConfigurePasswordManager extends React.PureComponent<Props
       onCancel,
     } = this.props;
 
-    const ProviderForm = ProvidersForm[provider.id];
+    const ProviderForm = (ProvidersForm as Record<string, any>)[provider.id];
     const error = configurationProcess.step === ConfigurationStep.Error ? configurationProcess.payload : null;
 
     return (

packages/app/src/password-managers/providers/onePassword/form.tsx

@@ -95,7 +95,7 @@ export default class OnePasswordForm extends React.PureComponent<Props & Overrid
       .reduce((result, [k, v]) => {
         result[k] = v;
         return result;
-      }, {});
+      }, {} as Record<string, any>);
   }
 
   // tslint:disable-next-line:function-name

packages/app/src/persistence/index.ts

@@ -19,15 +19,15 @@ async function waitForPromise(backend: SingletonStateProxy<any>) {
   const keys = Object.keys(backend);
   const a = [];
   for (const k of keys) {
-    a.push([k, await backend[k].get()]);
+    a.push([k, await (backend as Record<string, any>)[k].get()]);
   }
   return a;
 }
 
 export const getInitialState = async (backendKey: string) => {
   await checkSqliteBackend();
   await migrateUmzug();
-  const state = await waitForPromise(backends[backendKey]);
+  const state = await waitForPromise((backends as Record<string, any>)[backendKey]);
   return Immutable.Map(state);
 };
 

packages/app/src/plugins/helpers.ts

@@ -6,7 +6,7 @@ import { JAVASCRIPT_INJECTIONS } from '../applications/manifest-provider/const';
 export const injectJS = memoize(
   async (legacyServiceId: Maybe<string>): Promise<string | undefined> => {
     if (!legacyServiceId) return;
-    const scriptsFiles: string[] = JAVASCRIPT_INJECTIONS[legacyServiceId];
+    const scriptsFiles: string[] = (JAVASCRIPT_INJECTIONS as Record<string, string[]>)[legacyServiceId];
 
     if (scriptsFiles) {
       return scriptsFiles.map(

packages/app/src/resources/utils.ts

@@ -68,9 +68,9 @@ const graphQLResolverProxyHandler = (dynamicFetchFn: () => Promise<BxResource>):
     get: (obj, prop) => {
       if (!(prop in obj)) {
         // We can have an async getter here because it is used by GraphQL resolvers
-        return promiseOnce(newObj => Object.assign(obj, newObj)).then(() => obj[prop]);
+        return promiseOnce(newObj => Object.assign(obj, newObj)).then(() => (obj as any)[prop]);
       }
-      return obj[prop];
+      return (obj as any)[prop];
     },
   };
 };

packages/app/src/sdk/api.ts

@@ -2,6 +2,7 @@ import { Consumer } from '@getstation/sdk';
 import { BxSDK } from '.';
 
 export const isActiveConsumer = (namespace: string, manifestURL: string, sdk: BxSDK): boolean => {
-  return sdk[namespace] &&
-    sdk[namespace].provider._consumers.map((c: Consumer) => c.id).includes(manifestURL);
+  const consumer = (sdk as Record<string, any>)[namespace];
+  return consumer &&
+    consumer.provider._consumers.map((c: Consumer) => c.id).includes(manifestURL);
 };

packages/app/src/sdk/search/SearchProvider.ts

@@ -36,7 +36,7 @@ function getSearchResults(loadingCategories: Set<string>,
   const allCategories = resultsGroupedByCat.keySeq().toSet().union(Immutable.Set(loadingCategories));
   const sectionsMap: Map<string, SearchSection> = new Map();
   // @ts-ignore: incomplete Immutable declarations
-  for (const category: string of allCategories) {
+  for (const category of allCategories as Iterable<string>) {
     sectionsMap.set(category, {
       sectionName: category,
       loading: loadingCategories.has(category),

packages/app/src/services/lib/class.ts

@@ -150,6 +150,7 @@ export class ServicePeerHandler {
     const requestMethod = getRequestMethod(peer, methodInfos, this);
     d('defining a new request', methodInfos.type, methodInfos.getId());
     Object.defineProperty(srvc, methodName, {
+      // tslint:disable-next-line:only-arrow-functions
       value: function (this: ServiceBase, ...params: any[]) {
         try {
           return requestMethod(...params);

packages/app/src/services/lib/helpers.ts

@@ -48,5 +48,5 @@ export const observer = <T>(object: T, prefix?: string): RPC.Node<T> & ServiceBa
 };
 
 export const serviceFullURI = (srvc: ServiceBase) => {
-  return `${srvc.constructor[namespace]}:${srvc.uuid}`;
+  return `${(srvc.constructor as any)[namespace]}:${srvc.uuid}`;
 };

packages/app/src/services/services/tab-webcontents/api.ts

@@ -78,8 +78,8 @@ export const addOnNavigateObserver = (wc: Electron.WebContents, obs: RPC.Observe
     );
     return allEvents.subscribe(() => {
       obs.onNavigate!({
-        canGoBack: wc.canGoBack(),
-        canGoForward: wc.canGoForward(),
+        canGoBack: wc.navigationHistory.canGoBack(),
+        canGoForward: wc.navigationHistory.canGoForward(),
       });
     });
   }

packages/app/src/services/servicesManager.ts

@@ -12,7 +12,7 @@ function mapObject(...args: any[]): any {
   const services: GlobalServices = {} as any;
   const [initializer, handler] = args;
   for (const key of Object.keys(initializer)) {
-    services[key] = handler ? initializer[key](handler) : initializer[key]();
+    (services as Record<string, any>)[key] = handler ? initializer[key](handler) : initializer[key]();
   }
   return services;
 }