feat: support TS config files using Jiti + hackfix lighthouse import.meta usages

Author: matejchalk

package-lock.json

@@ -6,13 +6,21 @@
     "postinstall": "patch-package"
   },
   "private": true,
+  "workspaces": [
+    "dist/packages/*"
+  ],
+  "dependencies": {
+    "@swc/helpers": "~0.5.0",
+    "jiti": "^1.19.3"
+  },
   "devDependencies": {
     "@nx/js": "16.7.0",
     "@nx/rollup": "16.7.0",
     "@nx/vite": "16.7.0",
     "@nx/workspace": "16.7.0",
     "@swc/cli": "~0.1.62",
     "@swc/core": "~1.3.51",
+    "@types/babel__core": "^7.20.1",
     "@types/eslint": "^8.44.2",
     "@types/node": "18.7.1",
     "@vitest/coverage-c8": "~0.32.0",
@@ -26,11 +34,5 @@
     "typescript": "~5.1.3",
     "vite": "~4.3.9",
     "vitest": "~0.32.0"
-  },
-  "dependencies": {
-    "@swc/helpers": "~0.5.0"
-  },
-  "workspaces": [
-    "dist/packages/*"
-  ]
+  }
 }

package.json

@@ -15,6 +15,7 @@
         "project": "packages/cli/package.json",
         "compiler": "swc",
         "format": ["esm"],
+        "external": "all",
         "rollupConfig": "rollup.config.js"
       }
     },

packages/cli/project.json

@@ -0,0 +1,68 @@
+import type { NodePath, PluginObj } from '@babel/core';
+import type { CallExpression } from '@babel/types';
+
+type Babel = typeof import('@babel/core');
+
+// replace `import.meta` in Lighthouse source code (incompatible with Jiti)
+// often passed to getModuleDirectory and getModulePath: https://github.com/GoogleChrome/lighthouse/blob/main/esm-utils.js#L20-L32
+export function babelPluginLighthouseHackfix({ types: t }: Babel): PluginObj {
+  return {
+    visitor: {
+      CallExpression: (path) => {
+        if (
+          path.node.callee.type === 'Identifier' &&
+          (path.node.callee.name === 'getModuleDirectory' ||
+            path.node.callee.name === 'getModulePath') &&
+          path.node.arguments.length === 1 &&
+          path.node.arguments[0].type === 'MetaProperty' &&
+          path.node.arguments[0].meta.name === 'import' &&
+          path.node.arguments[0].property.name === 'meta'
+        ) {
+          const dirname = getDirname(path);
+          path.replaceWith(t.stringLiteral(dirname));
+        }
+      },
+    },
+  };
+}
+
+function getDirname(path: NodePath<CallExpression>) {
+  if (
+    path.parent.type === 'VariableDeclarator' &&
+    path.parent.id.type === 'Identifier'
+  ) {
+    if (path.parent.id.name === 'LH_ROOT') {
+      // https://github.com/GoogleChrome/lighthouse/blob/main/root.js#L11
+      return './node_modules/lighthouse';
+    }
+
+    const nextSibling =
+      path.parentPath.parent.type === 'VariableDeclaration'
+        ? path.parentPath.parentPath?.getNextSibling()
+        : null;
+    const nextIdentifierName =
+      (nextSibling?.node.type === 'VariableDeclaration' &&
+        nextSibling.node.declarations[0].id.type === 'Identifier' &&
+        nextSibling.node.declarations[0].id.name) ||
+      null;
+
+    if (
+      nextIdentifierName === 'FLOW_REPORT_TEMPLATE' ||
+      nextIdentifierName === 'REPORT_TEMPLATE'
+    ) {
+      // https://github.com/GoogleChrome/lighthouse/blob/main/report/generator/flow-report-assets.js#L12
+      // https://github.com/GoogleChrome/lighthouse/blob/main/report/generator/report-assets.js#L13
+      return './node_modules/lighthouse/report/generator';
+    }
+
+    if (
+      nextIdentifierName === 'LOCALE_MESSAGES' ||
+      nextIdentifierName === 'files'
+    )
+      // https://github.com/GoogleChrome/lighthouse/blob/main/shared/localization/format.js#L15
+      // https://github.com/GoogleChrome/lighthouse/blob/main/shared/localization/locales.js#L31
+      return './node_modules/lighthouse/shared/localization';
+  }
+
+  return '';
+}

packages/cli/src/lib/babel-plugin-lighthouse-hackfix.ts

@@ -1,15 +1,12 @@
+import { TransformOptions } from '@babel/core';
+import jiti from 'jiti';
 import { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
+import { babelPluginLighthouseHackfix } from './babel-plugin-lighthouse-hackfix';
 
 export async function cli(configPath: string) {
   const path = resolveImportPath(configPath);
-  // if (/\.[cm]?ts$/.test(path)) {
-  //   console.log('ts-node/register');
-  //   const { register } = await import('ts-node');
-  //   register();
-  // }
-  const module = await import(path);
-  const data = module.default ?? module;
+  const data = await loadModule(path);
   console.log('Loaded config:', data);
   return data;
 }
@@ -23,3 +20,21 @@ function resolveImportPath(path: string) {
   }
   return relativePath;
 }
+
+async function loadModule(path: string) {
+  if (/\.[cm]?ts$/.test(path)) {
+    const babelOptions: TransformOptions = {
+      plugins: [babelPluginLighthouseHackfix],
+    };
+    const jitiLoader = jiti(fileURLToPath(new URL(import.meta.url)), {
+      interopDefault: true,
+      transformOptions: {
+        babel: babelOptions,
+      },
+    });
+    return jitiLoader(path);
+  }
+
+  const module = await import(path);
+  return module.default ?? module;
+}

packages/cli/src/lib/cli.ts

@@ -14,7 +14,7 @@
         "assets": [],
         "project": "packages/plugin-lighthouse/package.json",
         "compiler": "swc",
-        "format": ["cjs", "esm"],
+        "format": ["esm"],
         "external": "all",
         "generateExportsField": true,
         "rollupConfig": "rollup.config.js"