diff --git a/.changeset/seven-feet-juggle.md b/.changeset/seven-feet-juggle.md new file mode 100644 index 000000000000..df23ed777e91 --- /dev/null +++ b/.changeset/seven-feet-juggle.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Allows configuring Astro modules TypeScript compilation with the `vite.esbuild` config diff --git a/packages/astro/src/vite-plugin-astro/compile.ts b/packages/astro/src/vite-plugin-astro/compile.ts index 78d6c416f0ff..5000b42b70d7 100644 --- a/packages/astro/src/vite-plugin-astro/compile.ts +++ b/packages/astro/src/vite-plugin-astro/compile.ts @@ -37,8 +37,8 @@ export async function compileAstro({ // Compile all TypeScript to JavaScript. // Also, catches invalid JS/TS in the compiled output before returning. esbuildResult = await transformWithEsbuild(transformResult.code, compileProps.filename, { + ...compileProps.viteConfig.esbuild, loader: 'ts', - target: 'esnext', sourcemap: 'external', tsconfigRaw: { compilerOptions: { diff --git a/packages/astro/test/units/vite-plugin-astro/compile.test.js b/packages/astro/test/units/vite-plugin-astro/compile.test.js index 25ffdcfe77d0..53a9cb6c06fe 100644 --- a/packages/astro/test/units/vite-plugin-astro/compile.test.js +++ b/packages/astro/test/units/vite-plugin-astro/compile.test.js @@ -5,13 +5,12 @@ import { init, parse } from 'es-module-lexer'; import { resolveConfig } from 'vite'; import { compileAstro } from '../../../dist/vite-plugin-astro/compile.js'; -const viteConfig = await resolveConfig({ configFile: false }, 'serve'); - /** * @param {string} source * @param {string} id */ -async function compile(source, id) { +async function compile(source, id, inlineConfig = {}) { + const viteConfig = await resolveConfig({ configFile: false, ...inlineConfig }, 'serve'); return await compileAstro({ compileProps: { astroConfig: { root: pathToFileURL('/'), base: '/', experimental: {} }, @@ -69,4 +68,24 @@ const name = 'world assert.equal(names.includes('file'), true); assert.equal(names.includes('url'), true); }); + + describe('when the code contains syntax that is transformed by esbuild', () => { + let code = `\ +--- +using x = {} +---`; + + it('should not transform the syntax by default', async () => { + const result = await compile(code, '/src/components/index.astro'); + assert.equal(result.code.includes('using x = {}'), true); + }); + + it('should transform the syntax by esbuild.target', async () => { + const result = await compile(code, '/src/components/index.astro', { + esbuild: { target: 'es2018' }, + }); + assert.equal(result.code.includes('using x = {}'), false); + }); + }); + });