TS JsxFactory and JsxFragment Ignored (enhancement)

[bayes343]

This is mostly an FYI for the maintainer and anyone who stumbles across this issue. It's pretty niche as most aren't using custom JsxFactory declarations.

If you have custom compilerOptions for jsxFactory and/or jsxFragmentFactory, and you experience runtime errors referecning React, it's likely due to the underlying esbuild script not using the values you specify in deno.json or tsconfig.json.

My workaround was to setup an esbuild script (vice using denoflare) which passes these values into the build and/or context functions (show below).

A good enhancement for denoflare could be to read those options from deno.json and/or tsconfig.json and pass them in.

import * as esbuild from "npm:esbuild@0.25.9";
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.1";

const isProductionBuild = Deno.args.includes('prod');
const outfile = "./worker.js";
const entryPoints = ["./worker.ts"];
const plugins = [...denoPlugins()];
const bundle = true;
const format = "esm";
const jsxFactory = 'ParseJsx';
const jsxFragment = 'Fragment';

if (isProductionBuild) {
  await esbuild.build({
    plugins,
    entryPoints,
    outfile,
    bundle,
    format,
    jsxFactory,
    jsxFragment,
  });
  esbuild.stop();
} else {
  const context = await esbuild.context({
    plugins,
    entryPoints,
    outfile,
    bundle,
    format,
    jsxFactory,
    jsxFragment,
    sourcemap: true,
  });
  context.watch();
}

[johnspurlock-skymethod]

That sounds doable, the bundling is done here:

denoflare/cli/bundle.ts

Line 214 in f461835

const result = await esbuild.build({

and we can pass through whatever makes sense, assuming it does not complicate everyone else. Would also want to make sure a flag could be passed via command line for CI, samples etc instead of requiring a project file.

Can you send me a sample small project that doesn't work today, but would work with those jsxFactory and jsxFragment set?