Remove baseUrl requirement for tsconfig path aliases

.changeset/polite-boxes-tease.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Remove `baseUrl` requirement for tsconfig path aliases. If a `baseUrl` is not set, `paths` entries in your tsconfig file will resolve relative to the tsconfig file. This aligns with [TypeScript’s module resolution strategy](https://www.typescriptlang.org/docs/handbook/modules/reference.html#relationship-to-baseurl).

packages/astro/src/vite-plugin-config-alias/README.md

@@ -7,9 +7,8 @@ Consider the following example configuration:
 ```
 {
   "compilerOptions": {
-    "baseUrl": "src",
     "paths": {
-      "components:*": ["components/*.astro"]
+      "components:*": ["./src/components/*.astro"]
     }
   }
 }

packages/astro/src/vite-plugin-config-alias/index.ts

@@ -13,8 +13,9 @@ const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
 	const { tsConfig, tsConfigPath } = settings;
 	if (!tsConfig || !tsConfigPath || !tsConfig.compilerOptions) return null;
 
-	const { baseUrl, paths } = tsConfig.compilerOptions as CompilerOptions;
-	if (!baseUrl) return null;
+	// TypeScript resolves `paths` relative to the tsconfig file if `baseUrl` is not set
+	// https://www.typescriptlang.org/docs/handbook/modules/reference.html#relationship-to-baseurl
+	const { baseUrl = '.', paths } = tsConfig.compilerOptions as CompilerOptions;
 
 	// resolve the base url from the configuration file directory
 	const resolvedBaseUrl = path.resolve(path.dirname(tsConfigPath), baseUrl);

packages/astro/test/alias-tsconfig-no-baseurl.test.js

@@ -0,0 +1,154 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Aliases with tsconfig.json', () => {
+	let fixture;
+
+	/**
+	 * @param {string} html
+	 * @returns {string[]}
+	 */
+	function getLinks(html) {
+		let $ = cheerio.load(html);
+		let out = [];
+		$('link[rel=stylesheet]').each((_i, el) => {
+			out.push($(el).attr('href'));
+		});
+		return out;
+	}
+
+	/**
+	 * @param {string} href
+	 * @returns {Promise<{ href: string; css: string; }>}
+	 */
+	async function getLinkContent(href, f = fixture) {
+		const css = await f.readFile(href);
+		return { href, css };
+	}
+
+	before(async () => {
+		fixture = await loadFixture({
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+			root: './fixtures/alias-tsconfig-no-baseurl/',
+		});
+	});
+
+	describe('dev', () => {
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('can load client components', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			// Should render aliased element
+			assert.equal($('#client').text(), 'test');
+
+			const scripts = $('script').toArray();
+			assert.ok(scripts.length > 0);
+		});
+
+		it('can load via baseUrl', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			assert.equal($('#foo').text(), 'foo');
+			assert.equal($('#constants-foo').text(), 'foo');
+			assert.equal($('#constants-index').text(), 'index');
+		});
+
+		it('can load namespace packages with @* paths', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			assert.equal($('#namespace').text(), 'namespace');
+		});
+
+		it('works in css @import', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			// imported css should be bundled
+			assert.ok(html.includes('#style-red'));
+			assert.ok(html.includes('#style-blue'));
+		});
+
+		it('works in components', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			assert.equal($('#alias').text(), 'foo');
+		});
+
+		it('works for import.meta.glob', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			assert.equal($('#glob').text(), '/src/components/glob/a.js');
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('can load client components', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			// Should render aliased element
+			assert.equal($('#client').text(), 'test');
+
+			const scripts = $('script').toArray();
+			assert.ok(scripts.length > 0);
+		});
+
+		it('can load via baseUrl', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			assert.equal($('#foo').text(), 'foo');
+			assert.equal($('#constants-foo').text(), 'foo');
+			assert.equal($('#constants-index').text(), 'index');
+		});
+
+		it('can load namespace packages with @* paths', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			assert.equal($('#namespace').text(), 'namespace');
+		});
+
+		it('works in css @import', async () => {
+			const html = await fixture.readFile('/index.html');
+			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
+			const [{ css }] = content;
+			// imported css should be bundled
+			assert.ok(css.includes('#style-red'));
+			assert.ok(css.includes('#style-blue'));
+		});
+
+		it('works in components', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			assert.equal($('#alias').text(), 'foo');
+		});
+
+		it('works for import.meta.glob', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			assert.equal($('#glob').text(), '/src/components/glob/a.js');
+		});
+	});
+});

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/astro.config.mjs

@@ -0,0 +1,7 @@
+import svelte from '@astrojs/svelte';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [svelte()],
+});

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/deps/namespace-package/index.js

@@ -0,0 +1 @@
+export const namespace = 'namespace';

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/deps/namespace-package/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@test/namespace-package-no-baseurl",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": "./index.js"
+}

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/aliases-tsconfig-no-baseurl",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/svelte": "workspace:*",
+    "@test/namespace-package-no-baseurl": "workspace:*",
+    "astro": "workspace:*",
+    "svelte": "^5.2.9"
+  }
+}

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/components/Alias.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { foo } from 'src/utils/constants';
+</script>
+<div id="alias">{foo}</div>

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/components/Client.svelte

@@ -0,0 +1,2 @@
+<script></script>
+<div id="client">test</div>

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/components/Foo.astro

@@ -0,0 +1 @@
+<p id="foo">foo</p>

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/components/Style.astro

@@ -0,0 +1,2 @@
+<p id="style-blue">i am blue</p>
+<p id="style-red">i am red</p>

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/components/glob/a.js

@@ -0,0 +1 @@
+export default 'a';

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/pages/index.astro

@@ -0,0 +1,32 @@
+---
+import Alias from '@components/Alias.svelte';
+import Client from '@components/Client.svelte'
+import '@styles/main.css';
+import { namespace } from '@test/namespace-package-no-baseurl';
+import Foo from 'src/components/Foo.astro';
+import StyleComp from 'src/components/Style.astro';
+import { foo, index } from 'src/utils/constants';
+
+const globResult = Object.keys(import.meta.glob('@components/glob/*.js')).join(', ')
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Aliases using tsconfig</title>
+  </head>
+  <body>
+    <main>
+      <Client client:load />
+      <Foo />
+      <StyleComp />
+      <Alias client:load />
+      <p id="namespace">{namespace}</p>
+      <p id="constants-foo">{foo}</p>
+      <p id="constants-index">{index}</p>
+      <p id="style-red">style-red</p>
+      <p id="style-blue">style-blue</p>
+      <p id="glob">{globResult}</p>
+    </main>
+  </body>
+</html>

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/styles/extra.css

@@ -0,0 +1,3 @@
+#style-red {
+  color: red;
+}

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/styles/main.css

@@ -0,0 +1,5 @@
+@import "@styles/extra.css";
+
+#style-blue {
+  color: blue;
+}

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/utils/constants.js

@@ -0,0 +1,3 @@
+export * from '.'
+
+export const foo = 'foo'

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/src/utils/index.js

@@ -0,0 +1 @@
+export const index = 'index'

packages/astro/test/fixtures/alias-tsconfig-no-baseurl/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@styles/*": [
+        "./src/styles/*"
+      ],
+      // this can really trip up namespaced packages
+      "@*": [
+        "./src/*"
+      ],
+      // this approximates the functionality you get with a baseUrl set
+      "src/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}