Allow importing .ts files with .js extension (#3518)

* Allow importing .ts files with .js extension * Adds a changeset * Make it also work in .md files
withastro · Jun 3, 2022 · df7c43d · df7c43d
1 parent d9a67d3
commit df7c43d
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 0 deletions.
diff --git a/.changeset/hungry-ears-clap.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
+	});
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import bar from './bar.js';

		export default bar;