How to check transpired code from jsx/tsx → js/ts ?

[ras0q]

I know that jsr:@deno/emit can transpile ts/tsx code to js, but in this case, of course, the compilerOptions in deno.json(c) are not applied by default.

I can run the tsx file in deno with deno run foo.tsx, but is there a way to see the code during the process?

[sunnypatell]

@ras0q use jsr:@deno/emit's transpile() but pass compilerOptions explicitly -- by default it doesn't read your deno.json, which is why the JSX output doesn't match what deno run produces.

import { transpile } from "jsr:@deno/emit";

const denoConfig = JSON.parse(await Deno.readTextFile("./deno.json"));
const url = new URL("./foo.tsx", import.meta.url);

const result = await transpile(url, {
  compilerOptions: denoConfig.compilerOptions,
});

console.log(result.get(url.href));

this reads your project's compilerOptions (including jsx, jsxImportSource, jsxFactory, etc.) and passes them to the transpiler so the output matches what deno generates internally.

if you just want a quick one-off check without writing a script, you can also use deno eval:

deno eval "import { transpile } from 'jsr:@deno/emit'; const r = await transpile(new URL('./foo.tsx', import.meta.url)); console.log([...r.values()][0])"

ref: @deno/emit API docs

[ras0q]

Thanks❤