Use Bun.build to transpile a single file

[TomasHubelbauer]

Hi, I am looking at Bun.build as a replacement for using the TypeScript package for my use-case which is transpiling single TypeScript files to JavaScript without the need for any extras in terms of lowering, type checking, bundling, minification, etc. Basically all I need is for type annotations to be removed and JSX converted to React.createElement calls.

I came up with this code:

const result = await Bun.build({
  entrypoints: ['./test/Test.tsx'],
  sourcemap: 'inline',
});

if (!result.success) {
  for (const item of result.logs) {
    console.log(item);
  }

  process.exit(1);
}

if (result.logs.length > 0) {
  throw new Error('Expected no logs, got ' + result.logs.length);
}

if (result.outputs.length !== 1) {
  throw new Error('Expected 1 output, got ' + result.outputs.length);
}

if (result.outputs[0].kind !== 'entry-point') {
  throw new Error('Expected output kind to be "entry-point", got ' + result.outputs[0].kind);
}

if (result.outputs[0].sourcemap !== null) {
  throw new Error('Expected output sourcemap to be null, got ' + result.outputs[0].sourcemap);
}

console.log(await result.outputs[0].text());

The file at test/Test.tsx is here and it stands alone in its directory:

import NonExistent from './NonExistent';

export default function Test() {
  return (
    <div>TEST</div>
  );
}

When I run my code, I get this error:

Could not resolve: "react/jsx-dev-runtime". Maybe you need to "bun install"?

This only happens when there is TSX/JSX in the test file.
Is there a way to make Bun build transpile it without needing any other external files which it seems to be needing here?

I found this config option: externals. I added react to it and then the transpilation worked, but I got an extra import and the createElement function is not used, instead jsxDEV is used:

// test/Test.tsx
import {
jsxDEV
} from "react/jsx-dev-runtime";
function Test() {
  return jsxDEV("div", {
    children: "TEST"
  }, undefined, false, undefined, this);
}
export {
  Test as default
};

Looks like I missed this news: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Is there any way to remove the import that was automatically added? I don't really care what the createElement function is called so I don't need it to be named something other than jsxDEV.

I also added target: 'browser' and target: 'esm' but these had no effect so I removed them.

[TomasHubelbauer]

Found the answer:

const transpiler = new Bun.Transpiler({ loader: 'tsx', tsconfig: { compilerOptions: { jsx: 'react' } } });
const typeScript = await Bun.file('./test/Test.tsx').text();
const javaScript = await transpiler.transform(typeScript);
console.log(javaScript);

[edemaine]

When I try this, I don't get the implicit import (e.g. import React from 'react'). Do you know how to tell the Transpiler to add it?