esbuild: `.ts` imports aren't transformed into `.js`

[scarf005]

Version

2.1.3

Platform

linux

What steps will reproduce the bug?

1. initialize lume project with esbuild.

.
├── _config.ts
├── _site
│   ├── a.js
│   └── b.js
├── a.ts
├── b.ts
└── deno.json

2. setup project as following:

_config.ts

import lume from "lume/mod.ts"
import esbuild from "lume/plugins/esbuild.ts"

const site = lume()

site.use(esbuild({
  extensions: [".tsx", ".ts"],
  options: {
    minify: false,
    keepNames: false,
    bundle: false,
    splitting: true,
  },
}))

export default site

a.ts

import { b } from "./b.ts"

console.log(b)

b.ts

export const b = 3

3. run deno task build.

How often does it reproduce? Is there a required condition?

it always happens.

What is the expected behavior?

.ts extension in compiled output is converted to .js.

What do you see instead?

a.js

import { b } from "./b.ts";
console.log(b);

b.js

const b = 3;
export {
  b
};

output extension is unchanged './b.ts', thus fails to load in browser.

Additional information

No response

[scarf005]

site.process([".js"], (pages) => {
	for (const page of pages) {
		if (!page.content) return
		console.log(page.content)
		page.content = (page.content as string).replace(
			re,
			(line) => line.replace(/"(\..*)\.tsx?/, '"$1.js'),
		)
	}
})

This hack works as a band-aid but is very prone to error as it does not use AST.

[oscarotero]

Thanks for highlighting this.
I'll try if https://esbuild.github.io/api/#out-extension can fix that.

[oscarotero]

After different attemps, I wasn't able to configure esbuild to make this change automatically. Seems like this decision is made by design, and the only way to change the extension is configuring the bundle option as true: evanw/esbuild#3371

[oscarotero]

@scarf005 I've been making a lot of changes in the esbuild plugin, and, among other things, I tried to fix this issue.

It's not a perfect solution but I think covers most of cases (even npm: and jsr: imports are replaced by esm.sh). You can take a look here:

lume/plugins/esbuild.ts

Lines 342 to 356 in 9937f59

	function resolveImports(content: string, esm: EsmOptions): string {
	return content.replaceAll(
	/(from\s*)["']([^"']+)["']/g,
	(_, from, path) => {
	if (path.startsWith(".") || path.startsWith("/")) {
	const resolved = path.endsWith(".json")
	? path
	: replaceExtension(path, ".js");
	return `${from}"${resolved}"`;
	}
	const resolved = import.meta.resolve(path);
	return `${from}"${handleEsm(resolved, esm) || resolved}"`;
	},
	);
	}

Could you test it to make sure it works fine?
Just ugrade Lume with deno task lume upgrade --dev.