[Feature]: allow to define custom JSX factories

[jraoult]

What is the new or updated feature that you are suggesting?

To be able to support @emtion/react's css prop on React elements, esbuild's config needs to be slightly tweaked.

I managed to patch Remix's https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler.ts and https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/shims/react.ts to make it work in dev but ideally it we would be possible to configure esbuild from remix.config.js (or similar).

It could be a jsx factory specific thing:

module.exports = {
  [...],
  jsxFactory: "jsx",
  reactShim: "path/to/shim"
}

or just allowing the whole esbuild configuration to be extended:

module.exports = {
  [...],
  esbuildConf: {
    jsxFactory: "jsx",
    inject: ["path/to/shim"]
  }
}

Why should this feature be included?

To be able to support custom JSX factories like emotion's one.

[jraoult]

Here's the patch I created for v1.1.3:

diff --git a/compiler/shims/react.ts b/compiler/shims/react.ts
index eb0f102ecb7ea96274f00ad964393c86981dbdf9..a65ef8521b1dedf754adc1013f5c32799b6d5136 100644
--- a/compiler/shims/react.ts
+++ b/compiler/shims/react.ts
@@ -1,2 +1,4 @@
+import { jsx } from "@emotion/react";
 import * as React from "react";
-export { React };
+
+export { jsx, React };
diff --git a/compiler.js b/compiler.js
index 1a6cabc2ae7102055cba88cb57084ba7ec8642b4..3cf652f33445a4b198b5f10b2915300654181e88 100644
--- a/compiler.js
+++ b/compiler.js
@@ -297,6 +297,7 @@ async function createBrowserBuild(config, options) {
     platform: "browser",
     format: "esm",
     external: externals,
+    jsxFactory: "jsx",
     inject: [reactShim],
     loader: loaders.loaders,
     bundle: true,
@@ -329,6 +330,7 @@ async function createServerBuild(config, options) {
     format: config.serverModuleFormat,
     mainFields: config.serverModuleFormat === "esm" ? ["module", "main"] : ["main", "module"],
     target: options.target,
+    jsxFactory: "jsx",
     inject: [reactShim],
     loader: loaders.loaders,
     bundle: true,