chore(vite): auto-generate resolve aliases from package.json exports (#8489)

Author: Lukas742

config/vite-monorepo-aliases.ts

@@ -0,0 +1,84 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import type { Alias } from 'vite';
+
+/**
+ * Reads the `exports` field from each internal package's `package.json` and
+ * generates Vite `resolve.alias` entries that map subpath imports to source
+ * files (`src/`) during dev, so `dist/` doesn't need to exist.
+ *
+ * Uses Vite's built-in alias plugin (Rolldown's `viteAliasPlugin`) which
+ * feeds replacements back into Vite's resolver, so `.ts`/`.tsx` extension
+ * resolution is handled automatically — no filesystem probing at runtime.
+ *
+ * Ordering: wildcard (regex) entries come first, then exact (string) entries
+ * sorted by descending subpath length. This prevents Vite's alias plugin
+ * from prefix-matching string entries before regex wildcards are checked.
+ */
+export function generateMonorepoAliases(packagesDir: string): Alias[] {
+  const wildcardAliases: Alias[] = [];
+  const exactAliases: Alias[] = [];
+  const absPackagesDir = resolve(packagesDir);
+
+  const packageDirs = readdirSync(absPackagesDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => join(absPackagesDir, d.name));
+
+  for (const pkgDir of packageDirs) {
+    let pkgJson: Record<string, unknown>;
+    try {
+      pkgJson = JSON.parse(readFileSync(join(pkgDir, 'package.json'), 'utf-8'));
+    } catch {
+      continue;
+    }
+
+    const name = pkgJson.name as string | undefined;
+    const exports = pkgJson.exports as Record<string, unknown> | undefined;
+    if (!name || !exports) {
+      continue;
+    }
+
+    const exactEntries: Array<{ subpath: string; srcRelative: string }> = [];
+    const wildcardEntries: Array<{ subpath: string; srcRelative: string }> = [];
+
+    for (const [subpath, target] of Object.entries(exports)) {
+      const targetPath = typeof target === 'string' ? target : (target as Record<string, string>)?.default;
+      if (!targetPath || typeof targetPath !== 'string') continue;
+      if (!targetPath.startsWith('./dist/')) continue;
+
+      const srcRelative = targetPath.slice('./dist/'.length).replace(/\.js$/, '');
+
+      if (subpath.includes('*')) {
+        wildcardEntries.push({ subpath, srcRelative });
+      } else {
+        exactEntries.push({ subpath, srcRelative });
+      }
+    }
+
+    // Sort exact entries by subpath length descending so more-specific aliases come first.
+    exactEntries.sort((a, b) => b.subpath.length - a.subpath.length);
+
+    const srcDir = join(pkgDir, 'src');
+    const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    // Wildcards first — they must be checked before string entries because
+    // Vite's alias plugin uses prefix matching for strings, which would
+    // incorrectly intercept imports like `pkg/dist/foo` via the `pkg` root alias.
+    for (const { subpath, srcRelative } of wildcardEntries) {
+      const subpathPattern = subpath
+        .slice(2)
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        .replace(/\\\*/, '(.+)');
+      const find = new RegExp(`^${escapedName}/${subpathPattern}$`);
+      const replacement = join(srcDir, srcRelative).replace(/\*/g, '$1');
+      wildcardAliases.push({ find, replacement });
+    }
+
+    for (const { subpath, srcRelative } of exactEntries) {
+      const find = subpath === '.' ? name : name + '/' + subpath.slice(2);
+      exactAliases.push({ find, replacement: join(srcDir, srcRelative) });
+    }
+  }
+
+  return [...wildcardAliases, ...exactAliases];
+}

vite.config.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import IstanbulPlugin from 'vite-plugin-istanbul';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { generateMonorepoAliases } from './config/vite-monorepo-aliases.js';
 
 // https://vitejs.dev/config/
 
@@ -12,13 +13,11 @@ export default defineConfig(() => {
       'process.env.STORYBOOK_ENV': `'${process.env.STORYBOOK_ENV}'`,
     },
     resolve: {
-      alias: {
-        '@sb': fileURLToPath(new URL('./.storybook', import.meta.url)),
-        '@ui5/webcomponents-react-charts': fileURLToPath(new URL('./packages/charts/src/index.ts', import.meta.url)),
-        '@ui5/webcomponents-react/dist': fileURLToPath(new URL('./packages/main/src/', import.meta.url)),
-        '@ui5/webcomponents-react': fileURLToPath(new URL('./packages/main/src/index.ts', import.meta.url)),
-        '@/': fileURLToPath(new URL('./', import.meta.url)),
-      },
+      alias: [
+        { find: '@sb', replacement: fileURLToPath(new URL('./.storybook', import.meta.url)) },
+        ...generateMonorepoAliases(fileURLToPath(new URL('./packages', import.meta.url))),
+        { find: '@/', replacement: fileURLToPath(new URL('./', import.meta.url)) },
+      ],
     },
     optimizeDeps: {
       esbuildOptions: {