Add support for custom babel configuration

README.md

@@ -46,6 +46,24 @@ export default defineConfig({
 |---|---|---|---|
 | `devtoolsInProd` | `boolean` | `false` | Inject devtools bridge in production bundle instead of only in development mode |
 
+### Babel configuration
+
+The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file.
+
+```js
+preact({
+  babel: {
+    presets: [...],
+    // Your plugins run before any built-in transform (eg: Fast Refresh)
+    plugins: [...],
+    // Use .babelrc files
+    babelrc: true,
+    // Use babel.config.js files
+    configFile: true,
+  }
+})
+```
+
 ## License
 
 MIT, see [the license file](./LICENSE).

src/index.ts

@@ -1,13 +1,24 @@
 import type { Plugin, ResolvedConfig } from "vite";
 import type { FilterPattern } from "@rollup/pluginutils";
-import type { ParserPlugin } from "@babel/parser";
+import type { ParserPlugin, ParserOptions } from "@babel/parser";
+import type { TransformOptions } from "@babel/core";
 
 import resolve from "resolve";
 import prefresh from "@prefresh/vite";
 import { preactDevtoolsPlugin } from "./devtools.js";
 import { createFilter, parseId } from "./utils.js";
 import { transformAsync } from "@babel/core";
 
+export type BabelOptions = Omit<
+	TransformOptions,
+	| "ast"
+	| "filename"
+	| "root"
+	| "sourceFileName"
+	| "sourceMaps"
+	| "inputSourceMap"
+>;
+
 export interface PreactPluginOptions {
 	/**
 	 * Inject devtools bridge in production bundle instead of only in development mode.
@@ -23,16 +34,43 @@ export interface PreactPluginOptions {
 	 * RegExp or glob to match files to NOT be transformed
 	 */
 	exclude?: FilterPattern;
+
+	/**
+	 * Babel configuration applied in both dev and prod.
+	 */
+	babel?: BabelOptions;
+}
+
+export interface PreactBabelOptions extends BabelOptions {
+	plugins: Extract<BabelOptions["plugins"], any[]>;
+	presets: Extract<BabelOptions["presets"], any[]>;
+	overrides: Extract<BabelOptions["overrides"], any[]>;
+	parserOpts: ParserOptions & {
+		plugins: Extract<ParserOptions["plugins"], any[]>;
+	};
 }
 
 // Taken from https://github.com/vitejs/vite/blob/main/packages/plugin-react/src/index.ts
 export default function preactPlugin({
 	devtoolsInProd,
 	include,
 	exclude,
+	babel,
 }: PreactPluginOptions = {}): Plugin[] {
 	let config: ResolvedConfig;
 
+	let babelOptions = {
+		babelrc: false,
+		configFile: false,
+		...babel,
+	} as PreactBabelOptions;
+
+	babelOptions.plugins ||= [];
+	babelOptions.presets ||= [];
+	babelOptions.overrides ||= [];
+	babelOptions.parserOpts ||= {} as any;
+	babelOptions.parserOpts.plugins ||= [];
+
 	const shouldTransform = createFilter(
 		include || [/\.[tj]sx?$/],
 		exclude || [/node_modules/],
@@ -89,20 +127,22 @@ export default function preactPlugin({
 			].filter(Boolean) as ParserPlugin[];
 
 			const result = await transformAsync(code, {
-				babelrc: false,
-				configFile: false,
+				...babelOptions,
 				ast: true,
 				root: config.root,
 				filename: id,
 				parserOpts: {
+					...babelOptions.parserOpts,
 					sourceType: "module",
 					allowAwaitOutsideFunction: true,
 					plugins: parserPlugins,
 				},
 				generatorOpts: {
+					...babelOptions.generatorOpts,
 					decoratorsBeforeExport: true,
 				},
 				plugins: [
+					...babelOptions.plugins,
 					[
 						config.isProduction
 							? "@babel/plugin-transform-react-jsx"