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: https://github.com/evanw/esbuild/issues/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: https://github.com/lumeland/lume/blob/9937f59ba9cf030b09bf01d6ad7289a1157f1e44/plugins/esbuild.ts#L342-L356

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