Use esbuild for jsx transform.

Ensure configuration is complete by merging in default values.

docs/recipes.md

@@ -68,7 +68,8 @@ import fable from "vite-plugin-fable";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    fable({ jsxRuntime: "automatic" }),
+    // See `jsx` option from https://esbuild.github.io/api/#transformation
+    fable({ jsx: "automatic" }),
     react({ include: /\.(fs|js|jsx|ts|tsx)$/ }),
   ],
 });

index.js

@@ -4,7 +4,7 @@ import { promises as fs } from "node:fs";
 import path from "node:path";
 import { JSONRPCEndpoint } from "ts-lsp-client";
 import { normalizePath } from "vite";
-import babelCore from "@babel/core";
+import { transform } from "esbuild";
 import colors from "picocolors";
 
 /**
@@ -228,20 +228,23 @@ async function compileProject(addWatchFile, logger, state, config) {
 /**
  * @typedef {Object} PluginOptions
  * @property {string} [fsproj] - The main fsproj to load
- * @property {'classic' | 'automatic' | null} [jsxRuntime] - Does the Fable compiled JavaScript have JSX?
+ * @property {'transform' | 'preserve' | 'automatic' | null} [jsx] - Apply JSX transformation after Fable compilation: https://esbuild.github.io/api/#transformation
  * @property {Boolean} [noReflection] - Pass noReflection value to Fable.Compiler
  * @property {string[]} [exclude] - Pass exclude to Fable.Compiler
  */
 
+/** @type {PluginOptions} */
+const defaultConfig = { jsx: null, noReflection: false, exclude: [] };
+
 /**
  * @function
- * @param {PluginOptions} config - The options for configuring the plugin.
+ * @param {PluginOptions} userConfig - The options for configuring the plugin.
  * @description Initializes and returns a Vite plugin for to process the incoming F# project.
  * @returns {import('vite').Plugin} A Vite plugin object with the standard structure and hooks.
  */
-export default function fablePlugin(
-  config = { jsxRuntime: null, noReflection: false, exclude: [] },
-) {
+export default function fablePlugin(userConfig) {
+  /** @type {PluginOptions} */
+  const config = Object.assign({}, defaultConfig, userConfig);
   /** @type {PluginState} */
   const state = {
     compilableFiles: new Map(),
@@ -305,26 +308,19 @@ export default function fablePlugin(
         );
       }
     },
-    transform(src, id) {
+    transform: async function (src, id) {
       if (fsharpFileRegex.test(id)) {
         logger.info(`[fable] transform: ${id}`, { timestamp: true });
         if (state.compilableFiles.has(id)) {
           let code = state.compilableFiles.get(id);
           // If Fable outputted JSX, we still need to transform this.
-          // @vitejs/plugin-react would not pick this up.
-          if (config.jsxRuntime) {
-            let babelResult = babelCore.transformSync(code, {
-              presets: [
-                [
-                  "@babel/preset-react",
-                  {
-                    runtime: config.jsxRuntime,
-                    development: state.configuration === "Debug",
-                  },
-                ],
-              ],
+          // @vitejs/plugin-react does not do this.
+          if (config.jsx) {
+            const esbuildResult = await transform(code, {
+              loader: "jsx",
+              jsx: config.jsx,
             });
-            code = babelResult.code;
+            code = esbuildResult.code;
           }
           return {
             code: code,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-fable",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "homepage": "https://nojaf.com/vite-plugin-fable/",
   "description": "",
   "main": "index.js",
@@ -26,14 +26,14 @@
   "license": "Apache-2.0",
   "fundinding": "https://nojaf.com/",
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
     "@fable-org/fable-library-js": "^1.1.0",
     "ts-lsp-client": "^1.0.1",
     "vite": "^5.1.1"
   },
+  "peerDependencies": {
+    "esbuild": "^0.19.3"
+  },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
     "@types/node": "^20.11.17",
     "prettier": "3.2.4",
     "typescript": "^5.3.3"