Fixes using tsconfig to set aliases

withastro · Jul 21, 2022 · f1265d8 · f1265d8
1 parent 29eef85
commit f1265d8
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 4 deletions.
diff --git a/.changeset/spotty-apricots-deny.md b/.changeset/spotty-apricots-deny.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allow defining aliases with tsconfig
diff --git a/packages/astro/src/vite-plugin-config-alias/index.ts b/packages/astro/src/vite-plugin-config-alias/index.ts
@@ -1,3 +1,4 @@
+import type { AstroConfig } from '../@types/astro';
 import * as path from 'path';
 import * as tsr from 'tsconfig-resolver';
 import * as url from 'url';
@@ -86,10 +87,7 @@ const getConfigAlias = (cwd: string | undefined): Alias[] | null => {
 };
 
 /** Returns a Vite plugin used to alias pathes from tsconfig.json and jsconfig.json. */
-export default function configAliasVitePlugin(astroConfig: {
-	root?: URL;
-	[key: string]: unknown;
-}): vite.PluginOption {
+export default function configAliasVitePlugin({ config: astroConfig }: { config: AstroConfig }): vite.PluginOption {
 	/** Aliases from the tsconfig.json or jsconfig.json configuration. */
 	const configAlias = getConfigAlias(astroConfig.root && url.fileURLToPath(astroConfig.root));
 

diff --git a/packages/astro/test/alias-tsconfig.test.js b/packages/astro/test/alias-tsconfig.test.js
@@ -0,0 +1,38 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { isWindows, loadFixture } from './test-utils.js';
+
+describe('Aliases with tsconfig.json', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/alias-tsconfig/',
+		});
+	});
+
+	if (isWindows) return;
+
+	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);
+		});
+	});
+});
diff --git a/packages/astro/test/fixtures/alias-tsconfig/astro.config.mjs b/packages/astro/test/fixtures/alias-tsconfig/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()],
+});
diff --git a/packages/astro/test/fixtures/alias-tsconfig/package.json b/packages/astro/test/fixtures/alias-tsconfig/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/aliases-tsconfig",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/svelte": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/components/Client.svelte b/packages/astro/test/fixtures/alias-tsconfig/src/components/Client.svelte
@@ -0,0 +1,2 @@
+<script></script>
+<div id="client">test</div>
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro b/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro
@@ -0,0 +1,15 @@
+---
+import Client from '@components/Client.svelte'
+---
+<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 />
+    </main>
+  </body>
+</html>
diff --git a/packages/astro/test/fixtures/alias-tsconfig/tsconfig.json b/packages/astro/test/fixtures/alias-tsconfig/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
+      "@assets/*": [
+        "src/assets/*"
+      ],
+    }
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml