michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes using tsconfig to set aliases (#4010)

Browse source
This commit is contained in:
Matthew Phillips 2022-07-21 13:45:20 -04:00 • committed by GitHub
parent 92de6e00a3
commit d503c5bf3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/spotty-apricots-deny.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Allow defining aliases with tsconfig

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

@ -1,3 +1,4 @@
import type { AstroConfig } from '../@types/astro';
import * as path from 'path'; import * as path from 'path';
import * as tsr from 'tsconfig-resolver'; import * as tsr from 'tsconfig-resolver';
import * as url from 'url'; 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. */ /** Returns a Vite plugin used to alias pathes from tsconfig.json and jsconfig.json. */
export default function configAliasVitePlugin(astroConfig: { export default function configAliasVitePlugin({ config: astroConfig }: { config: AstroConfig }): vite.PluginOption {
root?: URL;
[key: string]: unknown;
}): vite.PluginOption {
/** Aliases from the tsconfig.json or jsconfig.json configuration. */ /** Aliases from the tsconfig.json or jsconfig.json configuration. */
const configAlias = getConfigAlias(astroConfig.root && url.fileURLToPath(astroConfig.root)); const configAlias = getConfigAlias(astroConfig.root && url.fileURLToPath(astroConfig.root));

38
packages/astro/test/alias-tsconfig.test.js Normal file
View file

@ -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);
});
});
});

7
packages/astro/test/fixtures/alias-tsconfig/astro.config.mjs vendored Normal file
View file

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

9
packages/astro/test/fixtures/alias-tsconfig/package.json vendored Normal file
View file

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

2
packages/astro/test/fixtures/alias-tsconfig/src/components/Client.svelte vendored Normal file
View file

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

15
packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro vendored Normal file
View file

@ -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>

16
packages/astro/test/fixtures/alias-tsconfig/tsconfig.json vendored Normal file
View file

@ -0,0 +1,16 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": [
"src/components/*"
],
"@layouts/*": [
"src/layouts/*"
],
"@assets/*": [
"src/assets/*"
],
}
}
}

8
pnpm-lock.yaml generated
View file

@ -1070,6 +1070,14 @@ importers:
'@astrojs/svelte': link:../../../../integrations/svelte '@astrojs/svelte': link:../../../../integrations/svelte
astro: link:../../.. astro: link:../../..
packages/astro/test/fixtures/alias-tsconfig:
specifiers:
'@astrojs/svelte': workspace:*
astro: workspace:*
dependencies:
'@astrojs/svelte': link:../../../../integrations/svelte
astro: link:../../..
packages/astro/test/fixtures/api-routes: packages/astro/test/fixtures/api-routes:
specifiers: specifiers:
astro: workspace:* astro: workspace:*