fix(ui): improve ui package typechecking

.changeset/ui-test-jest-dom-types.md

@@ -0,0 +1,2 @@
+---
+---

eslint.config.mjs

@@ -1,3 +1,6 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
 import eslint from '@eslint/js';
 import configPrettier from 'eslint-config-prettier';
 import configTurbo from 'eslint-config-turbo/flat';
@@ -17,10 +20,43 @@ import tseslint from 'typescript-eslint';
 
 import { CUSTOM_BLOCK_TAGS, CUSTOM_MODIFIER_TAGS } from './.typedoc/custom-tags.mjs';
 
+const REPO_ROOT = import.meta.dirname;
 const ECMA_VERSION = 2021,
   JAVASCRIPT_FILES = ['**/*.cjs', '**/*.js', '**/*.jsx', '**/*.mjs'],
   TEST_FILES = ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx', '**/test/**', '**/__tests__/**'],
-  TYPESCRIPT_FILES = ['**/*.cts', '**/*.mts', '**/*.ts', '**/*.tsx'];
+  TYPESCRIPT_FILES = ['**/*.cts', '**/*.mts', '**/*.ts', '**/*.tsx'],
+  // turbo lint runs `eslint src` from each package cwd; these must be repo-absolute
+  IMPORT_RESOLVER_TSCONFIGS = [`${REPO_ROOT}/integration/tsconfig.json`],
+  IMPORT_RESOLVER_TSCONFIG_NAMES = ['tsconfig.json', 'tsconfig.src.json', 'tsconfig.test.json', 'tsconfig.mosaic.json'];
+
+// Each package must see only its own tsconfigs. Several packages define `@/*`, and a
+// shared project list lets the resolver apply clerk-js's alias to UI or shared files.
+const PACKAGE_IMPORT_RESOLVER_CONFIGS = fs
+  .readdirSync(path.join(REPO_ROOT, 'packages'), { withFileTypes: true })
+  .filter(entry => entry.isDirectory() && fs.existsSync(path.join(REPO_ROOT, 'packages', entry.name, 'package.json')))
+  .flatMap(entry => {
+    const project = IMPORT_RESOLVER_TSCONFIG_NAMES.map(name =>
+      path.join(REPO_ROOT, 'packages', entry.name, name),
+    ).filter(file => fs.existsSync(file));
+    if (project.length === 0) {
+      return [];
+    }
+    return [
+      {
+        name: `packages/${entry.name}/import-resolver`,
+        files: [`packages/${entry.name}/**/*.{ts,tsx,js,jsx,mts,cts}`],
+        settings: {
+          'import/resolver': {
+            node: true,
+            typescript: {
+              alwaysTryTypes: true,
+              project,
+            },
+          },
+        },
+      },
+    ];
+  });
 
 const noNavigateUseClerk = {
   meta: {
@@ -339,7 +375,7 @@ export default tseslint.config([
         node: true,
         typescript: {
           alwaysTryTypes: true,
-          project: ['packages/*/tsconfig.json', 'integration/tsconfig.json'],
+          project: IMPORT_RESOLVER_TSCONFIGS,
         },
       },
     },
@@ -517,6 +553,7 @@ export default tseslint.config([
       'react-hooks/rules-of-hooks': 'warn',
     },
   },
+  ...PACKAGE_IMPORT_RESOLVER_CONFIGS,
   {
     name: 'packages/clerk-js',
     files: ['packages/clerk-js/src/ui/**/*'],

packages/ui/package.json

@@ -92,11 +92,11 @@
     "lint": "eslint src",
     "lint:attw": "attw --pack . --exclude-entrypoints themes/shadcn.css --profile esm-only",
     "lint:publint": "publint",
-    "showerrors": "tsc",
+    "showerrors": "tsc -p tsconfig.src.json",
     "test": "vitest run",
     "test:ci": "vitest run --maxWorkers=70%",
     "test:coverage": "vitest --collectCoverage && open coverage/lcov-report/index.html",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit -p tsconfig.src.json"
   },
   "dependencies": {
     "@clerk/localizations": "workspace:^",