Update TypeScript & make scripts more DRY

magiclabs · smithki · Sep 10, 2021 · Sep 1, 2021 · Sep 1, 2021 · Sep 1, 2021
commit d12760f1c7786f7a34e724f882f0d0d5a3f3566a
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -40,12 +40,12 @@ To ensure ESLint is able to properly lint source files in your VS Code developme
 | ---------- | ----- | ----------- |
 | `bootstrap` | `yarn bootstrap` | Install dependencies/set up a local development environment. |
 | `wsrun` | `PKG=$PACKAGE_TARGET yarn wsrun` | Execute arbitrary scripts via `wsrun` for the specified package. |
+| `wsrun:paths` | `PKG=$PACKAGE_TARGET yarn paths` | Print the relative paths to each project based on the value of `$PKG`. |
 | `dev` | `PKG=$PACKAGE_TARGET yarn dev` | Start the specified package in development mode. |
 | `build` | `PKG=$PACKAGE_TARGET yarn build` | Build the specified package for production, or all packages if `$PKG` is omitted. |
 | `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package, or all packages if `$PKG` is omitted. Available flags: (`--cache`, `--test-artifacts`, `--deps`) |
 | `lint` | `PKG=$PACKAGE_TARGET yarn lint` | Run the linter for the specified package, or all packages if `$PKG` is omitted. |
 | `test` | `PKG=$PACKAGE_TARGET yarn test` | Run tests for the specified package, or all packages if `$PKG` is omitted. |
-| `paths` | `PKG=$PACKAGE_TARGET yarn paths` | Print the relative paths to each project based on the value of `$PKG`. |
 
 ## Opening a Pull Request
 

diff --git a/package.json b/package.json
@@ -4,19 +4,19 @@
  "version": "0.0.0",
  "scripts": {
  "bootstrap": "yarn install && lerna link",
- "wsrun": "wsrun --bin $INIT_CWD/scripts/wsrun/bin.ts -p $PKG",
- "dev": "$INIT_CWD/scripts/clean.ts && $INIT_CWD/scripts/dev.ts",
- "build": "$INIT_CWD/scripts/clean.ts && $INIT_CWD/scripts/build.ts",
- "clean": "$INIT_CWD/scripts/clean.ts",
- "lint": "$INIT_CWD/scripts/lint.ts",
- "test": "$INIT_CWD/scripts/test.ts",
- "paths": "yarn --silent wsrun --parallel --no-prefix -r -c $INIT_CWD/scripts/wsrun/resolve-paths.ts",
+ "wsrun": "wsrun --bin $INIT_CWD/scripts/bin/wsrun/bin.ts -p $PKG",
+ "wsrun:paths": "yarn --silent wsrun --parallel --no-prefix -r -c $INIT_CWD/scripts/bin/wsrun/resolve-paths.ts",
+ "dev": "$INIT_CWD/scripts/bin/clean.ts && $INIT_CWD/scripts/bin/dev.ts",
+ "build": "$INIT_CWD/scripts/bin/clean.ts && $INIT_CWD/scripts/bin/build.ts",
+ "clean": "$INIT_CWD/scripts/bin/clean.ts",
+ "lint": "$INIT_CWD/scripts/bin/lint.ts",
+ "test": "$INIT_CWD/scripts/bin/test.ts",
  "postinstall": "husky install"
  },
  "devDependencies": {
  "@ikscodes/browser-env": "~0.3.1",
- "@ikscodes/eslint-config": "~7.0.0",
- "@ikscodes/prettier-config": "~2.0.0",
+ "@ikscodes/eslint-config": "~7.0.2",
+ "@ikscodes/prettier-config": "~2.0.1",
  "@istanbuljs/nyc-config-typescript": "~0.1.3",
  "@types/jest": "^27.0.0",
  "@types/jsdom": "~12.2.4",
@@ -47,7 +47,7 @@
  "npm-run-all": "^4.1.5",
  "nyc": "13.1.0",
  "ora": "~5.4.1",
- "prettier": "~2.0.5",
+ "prettier": "~2.3.2",
  "react": "^16.13.1",
  "react-native": "^0.62.2",
  "replace-in-file": "^6.1.0",
@@ -56,7 +56,7 @@
  "ts-node": "^10.2.0",
  "tsc-watch": "^4.2.9",
  "typed-emitter": "^1.0.0",
- "typescript": "~3.8.3",
+ "typescript": "~4.4.2",
  "wsrun": "^5.2.1"
  },
  "workspaces": {

diff --git a/packages/@magic-sdk/commons/package.json b/packages/@magic-sdk/commons/package.json
@@ -21,7 +21,7 @@
  "peerDependencies": {
  "@magic-sdk/provider": ">=4.3.0",
  "@magic-sdk/types": ">=3.1.1",
- "tslib": "^2.0.3"
+ "tslib": "^2.3.1"
  },
  "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca"
 }
diff --git a/packages/@magic-sdk/provider/package.json b/packages/@magic-sdk/provider/package.json
@@ -22,7 +22,7 @@
  "@magic-sdk/types": "^4.0.0",
  "eventemitter3": "^4.0.4",
  "semver": "^7.3.2",
- "tslib": "^2.0.3",
+ "tslib": "^2.3.1",
  "web3-core": "1.5.2"
  },
  "peerDependencies": {

diff --git a/packages/@magic-sdk/provider/src/core/sdk.ts b/packages/@magic-sdk/provider/src/core/sdk.ts
@@ -92,7 +92,7 @@ function prepareExtensions(this: SDKBase, options?: MagicSDKAdditionalConfigurat
 
 export interface MagicSDKAdditionalConfiguration<
  TCustomExtName extends string = string,
- TExt extends Extension<string>[] | { [P in TCustomExtName]: Extension<string> } = any
+ TExt extends Extension<string>[] | { [P in TCustomExtName]: Extension<string> } = any,
 > {
  endpoint?: string;
  locale?: SupportedLocale;

diff --git a/packages/@magic-sdk/provider/src/modules/base-extension.ts b/packages/@magic-sdk/provider/src/modules/base-extension.ts
@@ -181,11 +181,7 @@ type UnwrapArray<T extends any[]> = T extends Array<infer P> ? P : never;
  * Create a union type of Extension names from an
  * array of Extension types given by `TExt`.
  */
-type ExtensionNames<TExt extends Extension<string>[]> = UnwrapArray<
- {
- [P in keyof TExt]: TExt[P] extends Extension<infer K> ? K : never;
- }
->;
+type ExtensionNames<TExt extends Extension<string>[]> = UnwrapArray<TExt> extends Extension<infer R> ? R : never;
 
 /**
  * From the literal Extension name type given by `TExtName`,
@@ -203,7 +199,7 @@ export type WithExtensions<SDK extends SDKBase> = {
  new <
  TCustomExtName extends string,
  TExt extends Extension<string>[] | { [P in TCustomExtName]: Extension<string> },
- TExtName extends string = TExt extends Extension<string>[] ? ExtensionNames<TExt> : keyof TExt
+ TExtName extends string = TExt extends Extension<string>[] ? ExtensionNames<TExt> : keyof TExt,
  >(
  apiKey: string,
  options?: MagicSDKAdditionalConfiguration<TCustomExtName, TExt>,

diff --git a/packages/@magic-sdk/provider/src/util/promise-tools.ts b/packages/@magic-sdk/provider/src/util/promise-tools.ts
@@ -36,7 +36,7 @@ type DefaultEvents<TResult> = {
  * A `Promise` executor with can be optionally asynchronous.
  */
 type AsyncPromiseExecutor<TResult> = (
- resolve: (value?: TResult | PromiseLike<TResult>) => void,
+ resolve: (value: TResult | PromiseLike<TResult>) => void,
  reject: (reason?: any) => void,
 ) => void | Promise<void>;
 
@@ -71,13 +71,12 @@ export function createPromiEvent<TResult, TEvents extends EventsDefinition = voi
  * Ensures the next object in the `PromiEvent` chain is overloaded with
  * `EventEmitter` methods.
  */
- const createChainingPromiseMethod = (
- method: typeof thenSymbol | typeof catchSymbol | typeof finallySymbol,
- source: Promise<any>,
- ) => (...args: any[]) => {
- const nextPromise = (source as any)[method].apply(source, args);
- return promiEvent(nextPromise);
- };
+ const createChainingPromiseMethod =
+ (method: typeof thenSymbol | typeof catchSymbol | typeof finallySymbol, source: Promise<any>) =>
+ (...args: any[]) => {
+ const nextPromise = (source as any)[method].apply(source, args);
+ return promiEvent(nextPromise);
+ };
 
  /**
  * Builds a `PromiEvent` by assigning `EventEmitter` methods to a native

diff --git a/packages/@magic-sdk/provider/src/util/web-crypto.ts b/packages/@magic-sdk/provider/src/util/web-crypto.ts
@@ -86,8 +86,8 @@ async function generateWCKP() {
  );
 
  // export keys so we can send the public key.
- const jwkPrivateKey = await subtle.exportKey('jwk', kp.privateKey);
- const jwkPublicKey = await subtle.exportKey('jwk', kp.publicKey);
+ const jwkPrivateKey = await subtle.exportKey('jwk', kp.privateKey!);
+ const jwkPublicKey = await subtle.exportKey('jwk', kp.publicKey!);
 
  // reimport the private key so it becomes non exportable when persisting.
  const nonExportPrivateKey = await subtle.importKey('jwk', jwkPrivateKey, EC_IMPORT_PARAMS, false, ['sign']);

diff --git a/packages/@magic-sdk/react-native/package.json b/packages/@magic-sdk/react-native/package.json
@@ -32,7 +32,7 @@
  "localforage-driver-memory": "^1.0.5",
  "lodash": "^4.17.19",
  "process": "~0.11.10",
- "tslib": "^2.0.3",
+ "tslib": "^2.3.1",
  "whatwg-url": "~8.1.0"
  },
  "devDependencies": {

diff --git a/packages/@magic-sdk/types/package.json b/packages/@magic-sdk/types/package.json
@@ -19,7 +19,7 @@
  "module": "dist/es/index.js",
  "types": "dist/es/index.d.ts",
  "dependencies": {
- "tslib": "^2.0.3"
+ "tslib": "^2.3.1"
  },
  "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca"
 }
diff --git a/packages/magic-sdk/package.json b/packages/magic-sdk/package.json
@@ -33,7 +33,7 @@
  "localforage": "^1.7.4",
  "localforage-driver-memory": "^1.0.5",
  "regenerator-runtime": "0.13.5",
- "tslib": "^2.0.3"
+ "tslib": "^2.3.1"
  },
  "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca"
 }
diff --git a/scripts/bin/build.ts b/scripts/bin/build.ts
@@ -0,0 +1,49 @@
+#!/usr/bin/env ts-node-script
+
+import ora from 'ora';
+import execa from 'execa';
+import chalk from 'chalk';
+import path from 'path';
+import { runAsyncProcess } from '../utils/run-async-process';
+import { handleError } from '../utils/handle-script-error';
+import { getTSConfigs, logTSConfigs } from '../utils/get-tsconfigs';
+
+async function compileTypeScripts(tsconfigs: string[]) {
+ const spinner = ora('Compiling TypeScripts...').start();
+ await execa('tsc', ['-b', ...tsconfigs])
+ .then(() => {
+ spinner.succeed('TypeScripts successfully compiled!');
+ })
+ .catch(handleError(spinner, 'TypeScripts failed to compile.'));
+}
+
+async function bundleForCDN() {
+ console.log(chalk`\n{dim ❮❮❮} Building CDN bundles {dim ❯❯❯}\n`);
+ await execa('yarn', ['--silent', 'wsrun', '--serial', `${process.env.INIT_CWD}/scripts/bin/wsrun/build:cdn.ts`], {
+ stdio: 'inherit',
+ })
+ .then(() => console.log())
+ .catch(handleError('CDN bundles failed to build.'));
+}
+
+async function injectENV(allPkgs: string[]) {
+ const spinner = ora('Injecting environment variables...').start();
+ const onCatch = handleError(spinner, 'Failed to inject environment variables.');
+
+ await execa(`${process.env.INIT_CWD}/scripts/bin/inject-env.ts`, [...allPkgs])
+ .then(() => {
+ spinner.succeed('Environment variables successfully injected!');
+ })
+ .catch(onCatch);
+}
+
+async function main() {
+ const { tsconfigs, packages } = await getTSConfigs(['tsconfig.json', 'tsconfig.cjs.json']);
+
+ logTSConfigs(tsconfigs);
+ await compileTypeScripts(tsconfigs);
+ await bundleForCDN();
+ await injectENV(packages);
+}
+
+runAsyncProcess(main);
diff --git a/scripts/clean.ts → scripts/bin/clean.ts b/scripts/clean.ts → scripts/bin/clean.ts
@@ -4,7 +4,7 @@ import execa from 'execa';
 import meow from 'meow';
 import ora from 'ora';
 import chalk from 'chalk';
-import { runAsyncProcess } from './utils/run-async-process';
+import { runAsyncProcess } from '../utils/run-async-process';
 
 const spinner = ora();
 

diff --git a/scripts/bin/dev.ts b/scripts/bin/dev.ts
@@ -0,0 +1,50 @@
+#!/usr/bin/env ts-node-script
+
+import ora from 'ora';
+import execa from 'execa';
+import TscWatchClient from 'tsc-watch/client';
+import chalk from 'chalk';
+import path from 'path';
+import { runAsyncProcess } from '../utils/run-async-process';
+import { getTSConfigs, logTSConfigs } from '../utils/get-tsconfigs';
+
+async function injectENV(allPkgs: string[]) {
+ await execa(`${process.env.INIT_CWD}/scripts/bin/inject-env.ts`, [...allPkgs]).then(() => {
+ console.log('Environment variables successfully injected!');
+ });
+}
+
+async function runDevServer(tsconfigs: string[], allPkgs: string[]) {
+ const spinner = ora();
+
+ [
+ [5, 0],
+ [4, 1000],
+ [3, 2000],
+ [2, 3000],
+ [1, 4000],
+ ].forEach(([countdown, timeout]) => {
+ if (!spinner.isSpinning) spinner.start();
+
+ setTimeout(() => {
+ spinner.text = `Starting TypeScript development server in ${countdown}...`;
+ }, timeout);
+ });
+
+ setTimeout(() => {
+ spinner.succeed('Starting TypeScript development server...');
+
+ const watch = new TscWatchClient();
+ watch.on('success', async () => injectENV(allPkgs));
+ watch.start('-b', ...tsconfigs);
+ }, 5000);
+}
+
+async function main() {
+ const { tsconfigs, packages } = await getTSConfigs(['tsconfig.json', 'tsconfig.cjs.json']);
+
+ logTSConfigs(tsconfigs);
+ await runDevServer(tsconfigs, packages);
+}
+
+runAsyncProcess(main);
diff --git a/scripts/inject-env.ts → scripts/bin/inject-env.ts b/scripts/inject-env.ts → scripts/bin/inject-env.ts
@@ -6,7 +6,7 @@
 
 import { replaceInFile } from 'replace-in-file';
 import path from 'path';
-import { runAsyncProcess } from './utils/run-async-process';
+import { runAsyncProcess } from '../utils/run-async-process';
 
 /**
  * Environment variables to be interpolated into the built files. Interpolations
@@ -15,8 +15,8 @@ import { runAsyncProcess } from './utils/run-async-process';
  * (FYI: it's best to encapsulate the interpolation as a string, i.e.: `"%VARIABLE_NAME%"`).
  */
 const environment = {
- WEB_VERSION: require(path.resolve(__dirname, '../packages/magic-sdk/package.json')).version,
- REACT_NATIVE_VERSION: require(path.resolve(__dirname, '../packages/@magic-sdk/react-native/package.json')).version,
+ WEB_VERSION: require(path.resolve(__dirname, '../../packages/magic-sdk/package.json')).version,
+ REACT_NATIVE_VERSION: require(path.resolve(__dirname, '../../packages/@magic-sdk/react-native/package.json')).version,
 };
 
 async function main() {

diff --git a/scripts/lint.ts → scripts/bin/lint.ts b/scripts/lint.ts → scripts/bin/lint.ts
@@ -2,7 +2,7 @@
 
 import chalk from 'chalk';
 import execa from 'execa';
-import { runAsyncProcess } from './utils/run-async-process';
+import { runAsyncProcess } from '../utils/run-async-process';
 
 async function main() {
  console.log(chalk`\n{dim ❮❮❮} Linting TypeScripts {dim ❯❯❯}\n`);

diff --git a/scripts/test.ts → scripts/bin/test.ts b/scripts/test.ts → scripts/bin/test.ts
@@ -2,15 +2,15 @@
 
 import chalk from 'chalk';
 import execa from 'execa';
-import { runAsyncProcess } from './utils/run-async-process';
+import { runAsyncProcess } from '../utils/run-async-process';
 
 async function main() {
  console.log(chalk`\n{dim ❮❮❮} Running tests {dim ❯❯❯}\n`);
  const args = process.argv.slice(2);
 
  await execa(
  'yarn',
- ['--silent', 'wsrun', '--serial', `${process.env.INIT_CWD}/scripts/wsrun/test:unit.ts`, ...args],
+ ['--silent', 'wsrun', '--serial', `${process.env.INIT_CWD}/scripts/bin/wsrun/test:unit.ts`, ...args],
  {
  stdio: 'inherit',
  },

diff --git a/scripts/wsrun/bin.ts → scripts/bin/wsrun/bin.ts b/scripts/wsrun/bin.ts → scripts/bin/wsrun/bin.ts
@@ -5,7 +5,7 @@
 /* eslint-disable import/no-dynamic-require */
 
 import execa from 'execa';
-import { runAsyncProcess } from '../utils/run-async-process';
+import { runAsyncProcess } from '../../utils/run-async-process';
 
 /**
  * The binary which `wsrun` uses to consume inputs and run actions.

diff --git a/scripts/wsrun/build:cdn.ts → scripts/bin/wsrun/build:cdn.ts b/scripts/wsrun/build:cdn.ts → scripts/bin/wsrun/build:cdn.ts
@@ -7,7 +7,7 @@
 
 import execa from 'execa';
 import fs from 'fs';
-import { runAsyncProcess } from '../utils/run-async-process';
+import { runAsyncProcess } from '../../utils/run-async-process';
 
 function existsAsync(path: string) {
  return new Promise((resolve) => {

diff --git a/scripts/wsrun/resolve-paths.ts → scripts/bin/wsrun/resolve-paths.ts b/scripts/wsrun/resolve-paths.ts → scripts/bin/wsrun/resolve-paths.ts
@@ -2,13 +2,13 @@
 
 import path from 'path';
 import { existsSync } from 'fs';
-import { runAsyncProcess } from '../utils/run-async-process';
+import { runAsyncProcess } from '../../utils/run-async-process';
 
 async function main() {
  const args = process.argv.slice(2);
  if (!args.length) args.push(''); // We need a minimum of one `args` element
 
- const root = path.join(__dirname, '..', '..');
+ const root = path.join(__dirname, '..', '..', '..');
  const absResults = args.map((a) => path.join(process.cwd(), a ?? ''));
  const relResults = absResults.map((a) => path.relative(root, a));
 

diff --git a/scripts/wsrun/test:unit.ts → scripts/bin/wsrun/test:unit.ts b/scripts/wsrun/test:unit.ts → scripts/bin/wsrun/test:unit.ts
@@ -2,7 +2,7 @@
 
 import execa from 'execa';
 import fs from 'fs';
-import { runAsyncProcess } from '../utils/run-async-process';
+import { runAsyncProcess } from '../../utils/run-async-process';
 
 function existsAsync(path: string) {
  return new Promise((resolve) => {