diff options
8 files changed, 65 insertions, 0 deletions
diff --git a/.changeset/hungry-ears-clap.md b/.changeset/hungry-ears-clap.md new file mode 100644 index 000000000..e10b35f58 --- /dev/null +++ b/.changeset/hungry-ears-clap.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Allow importing .ts files with .js extension diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts index 790262249..91eadf9e3 100644 --- a/packages/astro/src/vite-plugin-astro/index.ts +++ b/packages/astro/src/vite-plugin-astro/index.ts @@ -216,6 +216,13 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu return { code: `${code}${SUFFIX}`, map, + meta: { + vite: { + // Setting this vite metadata to `ts` causes Vite to resolve .js + // extensions to .ts files. + lang: 'ts' + } + } }; } catch (err: any) { // Verify frontmatter: a common reason that this plugin fails is that diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index 6a8d59767..6f0410bbb 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -194,6 +194,11 @@ ${tsResult}`; return { code: escapeViteEnvReferences(code), map: null, + meta: { + vite: { + lang: 'ts' + } + } }; } diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts b/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts new file mode 100644 index 000000000..98b90b031 --- /dev/null +++ b/packages/astro/test/fixtures/import-ts-with-js/src/bar.ts @@ -0,0 +1,3 @@ +export default function() { + return 'bar'; +} diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts b/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts new file mode 100644 index 000000000..95492488d --- /dev/null +++ b/packages/astro/test/fixtures/import-ts-with-js/src/foo.ts @@ -0,0 +1,3 @@ +import bar from './bar.js'; + +export default bar; diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro b/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro new file mode 100644 index 000000000..36186b21b --- /dev/null +++ b/packages/astro/test/fixtures/import-ts-with-js/src/pages/index.astro @@ -0,0 +1,9 @@ +--- +import foo from '../foo.js'; +--- +<html> + <head><title></title></head> + <body> + <h1>{ foo() }</h1> + </body> +</html> diff --git a/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md b/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md new file mode 100644 index 000000000..f2b81e605 --- /dev/null +++ b/packages/astro/test/fixtures/import-ts-with-js/src/pages/post.md @@ -0,0 +1,8 @@ +--- +setup: | + import foo from '../foo.js' +--- + +# Testing + +## { foo() } diff --git a/packages/astro/test/import-ts-with-js.test.js b/packages/astro/test/import-ts-with-js.test.js new file mode 100644 index 000000000..d3882ae8f --- /dev/null +++ b/packages/astro/test/import-ts-with-js.test.js @@ -0,0 +1,25 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Using .js extension on .ts file', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ root: './fixtures/import-ts-with-js/' }); + await fixture.build(); + }); + + it('works in .astro files', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + expect($('h1').text()).to.equal('bar'); + }); + + it('works in .md files', async () => { + const html = await fixture.readFile('/post/index.html'); + const $ = cheerio.load(html); + expect($('h2').text()).to.equal('bar'); + }); +}); |