spike: use babel preset typescript to transpile app (#4142)

* use babel-preset-typescript

* run type-check in release process

.github/workflows/release-core.yml

@@ -30,6 +30,8 @@ jobs:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
       - name: Bootstrap packages
         run: npm run bootstrap
+      - name: Type checks
+        run: npm run type-check
       - name: Run tests
         run: npm test
   

.github/workflows/test.yml

@@ -54,6 +54,9 @@ jobs:
       - name: Lint markdown
         run: npm run lint:markdown
 
+      - name: Type checks
+        run: npm run type-check
+
       - name: Run tests
         run: npm test
 

package.json

@@ -37,7 +37,8 @@
     "test:smoke:build": "npm run test:build --prefix packages/insomnia-smoke-test",
     "test:smoke:package": "npm run test:package --prefix packages/insomnia-smoke-test",
     "test:smoke:cli": "npm run test:cli --prefix packages/insomnia-smoke-test",
-    "hard-reset": "npm run clean && npm run bootstrap && npm run app-start"
+    "hard-reset": "npm run clean && npm run bootstrap && npm run app-start",
+    "type-check": "lerna run type-check"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.5",

packages/insomnia-app/.babelrc.js

@@ -0,0 +1,16 @@
+/** @type { import('@babel/core').TransformOptions } */
+module.exports = {
+  presets: [
+    ['@babel/preset-env',{targets: {electron: '11.2.3'}}],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  plugins: [
+    ["@babel/plugin-proposal-nullish-coalescing-operator"],
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }]
+  ],
+
+}

packages/insomnia-app/app/main.development.ts

@@ -1,3 +1,6 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+
 import * as electron from 'electron';
 import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';
 import path from 'path';

packages/insomnia-app/app/renderer.ts

@@ -1 +1,3 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 import './ui';

packages/insomnia-app/app/ui/redux/create.ts

@@ -1,5 +1,5 @@
 /// <reference types="webpack-env" />
-import { applyMiddleware, compose, createStore } from 'redux';
+import { applyMiddleware, compose, createStore, Store } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 
 import { reducer } from './modules';
@@ -24,5 +24,5 @@ export default function() {
     });
   }
 
-  return store;
+  return store as Store;
 }

packages/insomnia-app/app/ui/redux/modules/index.ts

@@ -1,4 +1,4 @@
-import { bindActionCreators, combineReducers } from 'redux';
+import { bindActionCreators, combineReducers, Store } from 'redux';
 
 import * as fetch from '../../../account/fetch';
 import { isLoggedIn, onLoginLogout } from '../../../account/session';
@@ -8,7 +8,7 @@ import configureStore from '../create';
 import * as entities from './entities';
 import * as global from './global';
 
-export async function init() {
+export async function init(): Promise<Store> {
   const store = configureStore();
   // Do things that must happen before initial render
   const { addChanges, initializeWith: initEntities } = bindActionCreators({ addChanges: entities.addChanges, initializeWith: entities.initializeWith }, store.dispatch);

packages/insomnia-app/package.json

@@ -20,6 +20,8 @@
     "postclean": "rimraf build app/main.min.js",
     "test": "jest",
     "test:watch": "jest --watch",
+    "type-check": "tsc --noEmit -p tsconfig.build.json",
+    "type-check:watch": "npm run type-check -- --watch",
     "start:electron": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" cross-env NODE_ENV=development webpack --config webpack/webpack.config.electron.ts && electron .",
     "start:dev-server": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack-dev-server --config webpack/webpack.config.development.ts",
     "start": "concurrently -n dev,app --kill-others \"npm run start:dev-server\" \"npm run start:electron\"",
@@ -175,6 +177,9 @@
     "zprint-clj": "0.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@develohpanda/fluent-builder": "^2.1.2",
     "@grpc/grpc-js": "^1.1.8",
     "@grpc/proto-loader": "^0.5.5",
@@ -246,7 +251,6 @@
     "redux-mock-store": "^1.5.4",
     "source-map-loader": "^1.0.0",
     "style-loader": "^0.23.1",
-    "ts-loader": "^8.2.0",
     "ts-node": "^9.1.1",
     "tsconfig-paths": "^3.9.0",
     "type-fest": "^1.0.2",

packages/insomnia-app/send-request/index.ts

@@ -1 +1,3 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 export { getSendRequestCallbackMemDb, getSendRequestCallback } from '../app/common/send-request';

packages/insomnia-app/tsconfig.build.json

@@ -7,7 +7,8 @@
     "strict": false,
     "strictNullChecks": true,
     "jsx": "react",
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "skipLibCheck": true
   },
   "include": [
     "**/*.d.ts",
@@ -26,7 +27,9 @@
     "**/main.min.js",
     "__jest__",
     "assets",
+    ".babelrc.js",
     "bin",
+    "build",
     "config",
     "jest.config.js",
     "node_modules",

packages/insomnia-app/tsconfig.json

@@ -15,6 +15,7 @@
     "**/@types/mocha",
     "**/main.min.js",
     "bin",
+    "build",
     "config",
     "node_modules"
   ]

packages/insomnia-app/webpack/webpack.config.base.ts

@@ -20,11 +20,8 @@ const configuration: Configuration = {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: [/node_modules/],
-        options: {
-          configFile: 'tsconfig.build.json',
-        },
+        exclude: /node_modules/,
+        loader: 'babel-loader',
       },
       {
         test: /\.(less|css)$/,

packages/insomnia-app/webpack/webpack.config.sr.ts

@@ -26,11 +26,8 @@ const configuration: Configuration = {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: [/node_modules/],
-        options: {
-          configFile: 'tsconfig.build.sr.json',
-        },
+        exclude: /node_modules/,
+        loader: 'babel-loader',
       },
       {
         test: require.resolve('../app/network/ca-certs.js'),