fix: don't require 'paths' object in tsconfig to alias paths (#7000)

.changeset/dry-garlics-push.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Remove 'paths' requirement for tsconfig path aliasing

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

@@ -13,7 +13,7 @@ const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
 	if (!tsConfig || !tsConfigPath || !tsConfig.compilerOptions) return null;
 
 	const { baseUrl, paths } = tsConfig.compilerOptions;
-	if (!baseUrl || !paths) return null;
+	if (!baseUrl) return null;
 
 	// resolve the base url from the configuration file directory
 	const resolvedBaseUrl = path.resolve(path.dirname(tsConfigPath), baseUrl);
@@ -21,26 +21,28 @@ const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
 	const aliases: Alias[] = [];
 
 	// compile any alias expressions and push them to the list
-	for (const [alias, values] of Object.entries(paths)) {
+	if (paths) {
-		/** Regular Expression used to match a given path. */
+		for (const [alias, values] of Object.entries(paths)) {
-		const find = new RegExp(
+			/** Regular Expression used to match a given path. */
-			`^${[...alias]
+			const find = new RegExp(
-				.map((segment) =>
+				`^${[...alias]
-					segment === '*' ? '(.+)' : segment.replace(/[\\^$*+?.()|[\]{}]/, '\\$&')
+					.map((segment) =>
-				)
+						segment === '*' ? '(.+)' : segment.replace(/[\\^$*+?.()|[\]{}]/, '\\$&')
-				.join('')}$`
+					)
-		);
+					.join('')}$`
+			);
 
-		/** Internal index used to calculate the matching id in a replacement. */
+			/** Internal index used to calculate the matching id in a replacement. */
-		let matchId = 0;
+			let matchId = 0;
 
-		for (const value of values) {
+			for (const value of values) {
-			/** String used to replace a matched path. */
+				/** String used to replace a matched path. */
-			const replacement = [...normalizePath(path.resolve(resolvedBaseUrl, value))]
+				const replacement = [...normalizePath(path.resolve(resolvedBaseUrl, value))]
-				.map((segment) => (segment === '*' ? `$${++matchId}` : segment === '$' ? '$$' : segment))
+					.map((segment) => (segment === '*' ? `$${++matchId}` : segment === '$' ? '$$' : segment))
-				.join('');
+					.join('');
 
-			aliases.push({ find, replacement });
+				aliases.push({ find, replacement });
+			}
 		}
 	}
 

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

@@ -0,0 +1,123 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Aliases with tsconfig.json - baseUrl only', () => {
+	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({
+			root: './fixtures/alias-tsconfig-baseurl-only/',
+		});
+	});
+
+	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
+			expect($('#client').text()).to.equal('test');
+
+			const scripts = $('script').toArray();
+			expect(scripts.length).to.be.greaterThan(0);
+		});
+
+		it('can load via baseUrl', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			expect($('#foo').text()).to.equal('foo');
+			expect($('#constants-foo').text()).to.equal('foo');
+			expect($('#constants-index').text()).to.equal('index');
+		});
+
+		it('works in css @import', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			// imported css should be bundled
+			expect(html).to.include('#style-red');
+			expect(html).to.include('#style-blue');
+		});
+
+		it('works in components', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			expect($('#alias').text()).to.equal('foo');
+		});
+	});
+
+	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
+			expect($('#client').text()).to.equal('test');
+
+			const scripts = $('script').toArray();
+			expect(scripts.length).to.be.greaterThan(0);
+		});
+
+		it('can load via baseUrl', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#foo').text()).to.equal('foo');
+			expect($('#constants-foo').text()).to.equal('foo');
+			expect($('#constants-index').text()).to.equal('index');
+		});
+
+		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
+			expect(css).to.include('#style-red');
+			expect(css).to.include('#style-blue');
+		});
+
+		it('works in components', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('#alias').text()).to.equal('foo');
+		});
+	});
+});

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

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

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

@@ -0,0 +1,10 @@
+{
+  "name": "@test/aliases-tsconfig-baseurl-only",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/svelte": "workspace:*",
+    "astro": "workspace:*",
+    "svelte": "^3.48.0"
+  }
+}

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

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

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

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

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

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

packages/astro/test/fixtures/alias-tsconfig-baseurl-only/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-baseurl-only/src/pages/index.astro

@@ -0,0 +1,27 @@
+---
+import Client from 'components/Client.svelte'
+import Foo from 'components/Foo.astro';
+import StyleComp from 'components/Style.astro';
+import Alias from 'components/Alias.svelte';
+import { foo, index } from 'utils/constants';
+import 'styles/main.css';
+---
+<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="constants-foo">{foo}</p>
+      <p id="constants-index">{index}</p>
+      <p id="style-red">style-red</p>
+      <p id="style-blue">style-blue</p>
+    </main>
+  </body>
+</html>

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src"
+  }
+}

pnpm-lock.yaml

@@ -1672,6 +1672,18 @@ importers:
         specifier: ^3.48.0
         version: 3.58.0
 
+  packages/astro/test/fixtures/alias-tsconfig-baseurl-only:
+    dependencies:
+      '@astrojs/svelte':
+        specifier: workspace:*
+        version: link:../../../../integrations/svelte
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+      svelte:
+        specifier: ^3.48.0
+        version: 3.54.0
+
   packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package: {}
 
   packages/astro/test/fixtures/api-routes:
@@ -16520,6 +16532,11 @@ packages:
       typescript: 5.0.2
     dev: false
 
+  /svelte@3.54.0:
+    resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==}
+    engines: {node: '>= 8'}
+    dev: false
+
   /svelte@3.58.0:
     resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
     engines: {node: '>= 8'}