chore(test-utils): Migrate to typescript (#453)

.eslintignore

@@ -1 +1 @@
-modules/dev-tools/test/ts-smoosh/
+dist/

.eslintrc.cjs

@@ -4,14 +4,21 @@ module.exports = getESLintConfig({
   react: '16.8.2',
   overrides: {
     parserOptions: {
-      project: ['./tsconfig.json'],
-      babelOptions: {
-        configFile: './babel.config.cjs'
+      project: ['./tsconfig.json']
+    },
+
+    settings: {
+      // Ensure eslint finds typescript files
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
+        }
       }
     },
 
     rules: {
       'import/no-extraneous-dependencies': 0,
+      'import/no-unresolved': 0,
       'no-console': 0,
       'no-continue': 0,
       'no-process-env': 0,
@@ -22,24 +29,6 @@ module.exports = getESLintConfig({
       node: true
     },
 
-    overrides: [
-      {
-        // may use aliases/dev dependencies
-        files: [
-          '**/test/**/*.js',
-          '**/test/**/*.ts'
-        ],
-        globals: {
-          process: true
-        },
-        rules: {
-          'import/no-unresolved': 0,
-          'import/no-extraneous-dependencies': 0,
-          'no-process-env': 0
-        }
-      }
-    ],
-
     ignorePatterns: ['modules/gatsby-theme-ocular']
   }
 });

.ocularrc.js

@@ -4,7 +4,7 @@ import {resolve} from 'path';
 /** @type {OcularConfig} */
 let ocularConfig = {
   typescript: {
-    project: 'tsconfig.json'
+    project: 'tsconfig.build.json'
   },
 
   babel: false,

modules/dev-tools/package.json

@@ -20,12 +20,14 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
-      "import": "./src/index.js"
+      "import": "./dist/index.js"
     },
     "./configuration": {
+      "types": "./dist/configuration/index.d.ts",
       "require": "./dist/configuration/index.cjs",
-      "import": "./src/configuration/index.js"
+      "import": "./dist/configuration/index.js"
     },
     "./ts-transform-version-inline": {
       "require": "./dist/ts-plugins/ts-transform-version-inline/index.cjs",
@@ -36,8 +38,8 @@
       "import": "./dist/ts-plugins/ts-transform-append-extension/index.js"
     }
   },
-  "types": "./src/index.d.ts",
-  "main": "./src/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "bin": {
     "ocular-bootstrap": "./scripts/bootstrap.js",
     "ocular-build": "./scripts/build.js",

modules/dev-tools/scripts/build.sh

@@ -3,11 +3,11 @@
 set -e
 
 DEV_TOOLS_DIR=$(dirname $0)/..
-CONFIG=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".babel.configPath"`
-MODULES=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".modules" | sed -E "s/,/ /g"`
-EXTENSIONS=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".babel.extensions"`
-TS_PROJECT=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".typescript.project"`
-IS_ESM=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".esm"`
+CONFIG=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".babel.configPath"`
+MODULES=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".modules" | sed -E "s/,/ /g"`
+EXTENSIONS=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".babel.extensions"`
+TS_PROJECT=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".typescript.project"`
+IS_ESM=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".esm"`
 
 check_target() {
   if [[ ! "$1" =~ ^es5|esm ]]; then
@@ -28,7 +28,7 @@ build_src() {
 
 build_module_esm() {
   build_src dist esm-strict
-  ts-node $DEV_TOOLS_DIR/src/build-cjs.js
+  node $DEV_TOOLS_DIR/dist/build-cjs.js
 }
 
 build_module() {

modules/dev-tools/scripts/lint.sh

@@ -9,12 +9,12 @@ MODE=$1
 
 DEV_TOOLS_DIR=$(dirname $0)/..
 
-DIRECTORIES=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".lint.paths"`
+DIRECTORIES=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".lint.paths"`
 if [[ $DIRECTORIES == *","* ]]; then
   DIRECTORIES={$DIRECTORIES}
 fi
 
-EXTENSIONS=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".lint.extensions"`
+EXTENSIONS=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".lint.extensions"`
 if [[ $EXTENSIONS == *","* ]]; then
   EXTENSIONS={$EXTENSIONS}
 fi

modules/dev-tools/scripts/metrics.sh

@@ -10,7 +10,7 @@ WORKING_DIR=`pwd`
 TMP_DIR=$WORKING_DIR/tmp
 
 # Get size metric entry point
-ENTRY_POINTS=`ts-node $DEV_TOOLS_DIR/src/helpers/get-config.js ".entry.size"`
+ENTRY_POINTS=`node $DEV_TOOLS_DIR/dist/helpers/get-config.js ".entry.size"`
 IFS=','
 read -a ENTRY_POINTS_ARR <<< "$ENTRY_POINTS"
 IFS=' '

modules/dev-tools/scripts/test.sh

@@ -8,15 +8,15 @@ BASEDIR=$(dirname "$0")
 MODE=$1
 
 MODULE_DIR=$(dirname $0)/..
-TEST_SCRIPT=$MODULE_DIR/src/test.js
+TEST_SCRIPT=$MODULE_DIR/dist/test.js
 
 usage() {
   # TODO: Add more specific url
   open "https://uber-web.github.io/ocular/docs/dev-tools/cli/ocular-test"
 }
 
 run_test_script() {
-  (set -x; NODE_ENV=test ts-node $TEST_SCRIPT $1)
+  (set -x; NODE_ENV=test node $TEST_SCRIPT $1)
 }
 
 run_full_test() {
@@ -48,7 +48,7 @@ case $MODE in
 
   "node-debug")
     echo "Open chrome://inspect/#devices to attach debugger."
-    (set -x; ts-node --inspect-brk $TEST_SCRIPT node)
+    (set -x; node --inspect-brk $TEST_SCRIPT node)
     ;;
 
   "dist")

modules/dev-tools/src/configuration/get-babel-config.js → modules/dev-tools/src/configuration/get-babel-config.ts

@@ -1,4 +1,3 @@
-/** @typedef {import('./get-babel-config')} types */
 import deepMerge from 'deepmerge';
 import {inspect} from 'util';
 
@@ -31,7 +30,7 @@ const COMMON_PRESETS = [
 
 const COMMON_PLUGINS = [];
 
-const ENV_CONFIG = {
+const ENV_CONFIG: any = {
   // fully transpiled build
   es5: {
     presets: [
@@ -107,8 +106,13 @@ const ENV_CONFIG = {
 // Ensure we have an entry for the default BABEL_ENV
 ENV_CONFIG.development = ENV_CONFIG.es5;
 
-/** @type {types['getBabelConfig']} */
-export function getBabelConfig(options = {}) {
+export function getBabelConfig(
+  options: {
+    react?: boolean;
+    overrides?: any;
+    debug?: boolean;
+  } = {}
+) {
   return (api) => {
     if (api.cache) {
       api.cache.using(() => process.env.BABEL_ENV);

modules/dev-tools/src/configuration/get-esbuild-config.js → modules/dev-tools/src/configuration/get-esbuild-config.ts

@@ -4,6 +4,7 @@ import {join} from 'path';
 import util from 'util';
 import {getOcularConfig} from '../helpers/get-ocular-config.js';
 import ext from 'esbuild-plugin-external-global';
+import type {BuildOptions} from 'esbuild';
 
 /**
  * Get list of dependencies to exclude using esbuild-plugin-external-global
@@ -22,8 +23,8 @@ import ext from 'esbuild-plugin-external-global';
  * @param externalPackages string[]
  * @param mapping {[pattern: string]: replacement}
  */
-function getExternalGlobalsIIFE(externalPackages, mapping) {
-  const externals = {};
+function getExternalGlobalsIIFE(externalPackages: string[], mapping: Record<string, string>) {
+  const externals: Record<string, string> = {};
   for (const packageName of externalPackages) {
     for (const key in mapping) {
       if (packageName.search(key) === 0) {
@@ -38,7 +39,7 @@ function getExternalGlobalsIIFE(externalPackages, mapping) {
 // esbuild does not support umd format
 // Work around from https://github.com/evanw/esbuild/issues/819
 // Template: https://webpack.js.org/configuration/output/#type-umd
-function umdWrapper(libName) {
+function umdWrapper(libName: string | undefined) {
   return {
     format: 'iife',
     globalName: '__exports__',
@@ -66,12 +67,11 @@ function umdWrapper(libName) {
   };
 }
 
-/**
- *
- * @param {String} opts.input - path to entry point
- * @param {String} opts.output - output file path
- */
-export async function getCJSExportConfig(opts) {
+/** Returns esbuild config for building .cjs bundles */
+export async function getCJSExportConfig(opts: {
+  input: string;
+  output: string;
+}): Promise<BuildOptions> {
   return {
     entryPoints: [opts.input],
     outfile: opts.output,
@@ -85,8 +85,22 @@ export async function getCJSExportConfig(opts) {
   };
 }
 
+type BundleOptions = {
+  input: string;
+  env?: 'dev' | 'prod';
+  output?: string;
+  format?: 'iife' | 'cjs' | 'esm' | 'umd';
+  target?: string[];
+  externals?: string[];
+  globalName?: string;
+  globals?: {[pattern: string]: string};
+  debug?: boolean;
+  sourcemap?: boolean;
+};
+
 /* eslint-disable max-statements,complexity */
-export async function getBundleConfig(opts) {
+/** Returns esbuild config for building standalone bundles */
+export async function getBundleConfig(opts: BundleOptions): Promise<BuildOptions> {
   // This script must be executed in a submodule's directory
   const packageRoot = process.cwd();
   const packageInfo = JSON.parse(fs.readFileSync(join(packageRoot, 'package.json'), 'utf-8'));
@@ -115,15 +129,16 @@ export async function getBundleConfig(opts) {
 
   let externalPackages = Object.keys(packageInfo.peerDependencies || {});
   if (typeof externals === 'string') {
-    externalPackages = externalPackages.concat(externals.split(','));
+    externalPackages = externalPackages.concat((externals as string).split(','));
   } else if (Array.isArray(externals)) {
     externalPackages = externalPackages.concat(externals);
   }
 
-  const config = {
+  const config: BuildOptions = {
     entryPoints: [input],
     outfile: output,
     bundle: true,
+    // @ts-expect-error umd is not supported by esbuild, will be overwritten below
     format,
     minify: !devMode,
     alias: ocularConfig.aliases,
@@ -161,13 +176,13 @@ export async function getBundleConfig(opts) {
       break;
   }
   if (externalGlobals) {
-    config.plugins.unshift(ext.externalGlobalPlugin(externalGlobals));
+    config.plugins!.unshift(ext.externalGlobalPlugin(externalGlobals));
   }
 
   if (debug) {
     const printableConfig = {
       ...config,
-      plugins: config.plugins.map((item) => {
+      plugins: config.plugins!.map((item) => {
         return {
           name: item.name,
           options: item.name === 'babel' ? babelConfig : externalGlobals

modules/dev-tools/src/configuration/get-eslint-config.js → modules/dev-tools/src/configuration/get-eslint-config.ts

@@ -1,15 +1,15 @@
 import eslint from '@typescript-eslint/eslint-plugin';
 import deepMerge from 'deepmerge';
-import {getValidPath, packageDir} from '../utils/utils';
+import {getValidPath, ocularRoot} from '../utils/utils.js';
 import {inspect} from 'util';
 import {resolve} from 'path';
 
 const typescriptConfigs = eslint.configs;
-const localRules = (path) => resolve(packageDir, '../src/configuration', path);
+const localRules = (path) => resolve(ocularRoot, 'src/configuration', path);
 
 const DEFAULT_OPTIONS = {
   react: false
-};
+} as const;
 
 const DEFAULT_CONFIG = {
   extends: [
@@ -174,7 +174,9 @@ function getReactConfig(options) {
   };
 }
 
-export function getESLintConfig(options = {}) {
+export function getESLintConfig(
+  options: {react?: string | false; overrides?: any; debug?: boolean} = {}
+) {
   options = {...DEFAULT_OPTIONS, ...options};
 
   let config = {...DEFAULT_CONFIG};

modules/dev-tools/src/configuration/get-prettier-config.js → modules/dev-tools/src/configuration/get-prettier-config.ts

@@ -1,4 +1,3 @@
-/** @typedef {import('./get-prettier-config')} types */
 import deepMerge from 'deepmerge';
 
 const DEFAULT_CONFIG = {
@@ -9,8 +8,7 @@ const DEFAULT_CONFIG = {
   bracketSpacing: false
 };
 
-/** @type {types['getPrettierConfig']} */
-export function getPrettierConfig(options = {}) {
+export function getPrettierConfig(options: {overrides?: any; debug?: boolean} = {}) {
   let config = {...DEFAULT_CONFIG};
   if (options.overrides) {
     config = deepMerge(config, options.overrides);

modules/dev-tools/src/configuration/index.ts

@@ -0,0 +1,4 @@
+// JS Tool Configurations
+export {getBabelConfig} from './get-babel-config.js';
+export {getESLintConfig} from './get-eslint-config.js';
+export {getPrettierConfig} from './get-prettier-config.js';

modules/dev-tools/src/configuration/vite.config.js

@@ -1,5 +1,5 @@
 import {defineConfig} from 'vite';
-import {getOcularConfig} from '../helpers/get-ocular-config';
+import {getOcularConfig} from '../helpers/get-ocular-config.js';
 import {createHtmlPlugin} from 'vite-plugin-html';
 import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
 import {NodeModulesPolyfillPlugin} from '@esbuild-plugins/node-modules-polyfill';