fix: don't require 'paths' object in tsconfig to alias paths (#7000)
This commit is contained in:
parent
a44e755cc6
commit
c87d42e766
16 changed files with 235 additions and 18 deletions
5
.changeset/dry-garlics-push.md
Normal file
5
.changeset/dry-garlics-push.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Remove 'paths' requirement for tsconfig path aliasing
|
|
@ -13,7 +13,7 @@ const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
|
||||||
if (!tsConfig || !tsConfigPath || !tsConfig.compilerOptions) return null;
|
if (!tsConfig || !tsConfigPath || !tsConfig.compilerOptions) return null;
|
||||||
|
|
||||||
const { baseUrl, paths } = tsConfig.compilerOptions;
|
const { baseUrl, paths } = tsConfig.compilerOptions;
|
||||||
if (!baseUrl || !paths) return null;
|
if (!baseUrl) return null;
|
||||||
|
|
||||||
// resolve the base url from the configuration file directory
|
// resolve the base url from the configuration file directory
|
||||||
const resolvedBaseUrl = path.resolve(path.dirname(tsConfigPath), baseUrl);
|
const resolvedBaseUrl = path.resolve(path.dirname(tsConfigPath), baseUrl);
|
||||||
|
@ -21,26 +21,28 @@ const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
|
||||||
const aliases: Alias[] = [];
|
const aliases: Alias[] = [];
|
||||||
|
|
||||||
// compile any alias expressions and push them to the list
|
// 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 });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
123
packages/astro/test/alias-tsconfig-baseurl-only.test.js
Normal file
123
packages/astro/test/alias-tsconfig-baseurl-only.test.js
Normal file
|
@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
7
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/astro.config.mjs
vendored
Normal file
7
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/astro.config.mjs
vendored
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import svelte from '@astrojs/svelte';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [svelte()],
|
||||||
|
});
|
10
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json
vendored
Normal file
10
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/package.json
vendored
Normal file
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
4
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Alias.svelte
vendored
Normal file
4
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Alias.svelte
vendored
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<script>
|
||||||
|
import { foo } from 'utils/constants';
|
||||||
|
</script>
|
||||||
|
<div id="alias">{foo}</div>
|
2
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Client.svelte
vendored
Normal file
2
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Client.svelte
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
<script></script>
|
||||||
|
<div id="client">test</div>
|
1
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Foo.astro
vendored
Normal file
1
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Foo.astro
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<p id="foo">foo</p>
|
2
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Style.astro
vendored
Normal file
2
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/components/Style.astro
vendored
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
<p id="style-blue">i am blue</p>
|
||||||
|
<p id="style-red">i am red</p>
|
27
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/pages/index.astro
vendored
Normal file
27
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/pages/index.astro
vendored
Normal file
|
@ -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>
|
3
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/styles/extra.css
vendored
Normal file
3
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/styles/extra.css
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
#style-red {
|
||||||
|
color: red;
|
||||||
|
}
|
5
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/styles/main.css
vendored
Normal file
5
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/styles/main.css
vendored
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
@import "styles/extra.css";
|
||||||
|
|
||||||
|
#style-blue {
|
||||||
|
color: blue;
|
||||||
|
}
|
3
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/utils/constants.js
vendored
Normal file
3
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/utils/constants.js
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export * from '.'
|
||||||
|
|
||||||
|
export const foo = 'foo'
|
1
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/utils/index.js
vendored
Normal file
1
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/src/utils/index.js
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export const index = 'index'
|
5
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/tsconfig.json
vendored
Normal file
5
packages/astro/test/fixtures/alias-tsconfig-baseurl-only/tsconfig.json
vendored
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./src"
|
||||||
|
}
|
||||||
|
}
|
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
|
@ -1672,6 +1672,18 @@ importers:
|
||||||
specifier: ^3.48.0
|
specifier: ^3.48.0
|
||||||
version: 3.58.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/alias-tsconfig/deps/namespace-package: {}
|
||||||
|
|
||||||
packages/astro/test/fixtures/api-routes:
|
packages/astro/test/fixtures/api-routes:
|
||||||
|
@ -16520,6 +16532,11 @@ packages:
|
||||||
typescript: 5.0.2
|
typescript: 5.0.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/svelte@3.54.0:
|
||||||
|
resolution: {integrity: sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==}
|
||||||
|
engines: {node: '>= 8'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/svelte@3.58.0:
|
/svelte@3.58.0:
|
||||||
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
|
resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
|
||||||
engines: {node: '>= 8'}
|
engines: {node: '>= 8'}
|
||||||
|
|
Loading…
Add table
Reference in a new issue