From d2f1dfd9d1d9cbdff931b3ec854893343062574e Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Mon, 15 Mar 2021 18:53:14 +0100
Subject: [PATCH] Switch from config factory function to array of plugins

Releasing this preset to the public sparked a discussions on
how presets should be done in vite. Presumably we were the first
project to do so.

It turns out that plugins can be an array of plugins. This makes the
config more composable and we can avoid using a somewhat internal function to
merge configs.

See this issue for more background: https://github.com/vitejs/vite/issues/2500
---
 README.md           | 19 +++++++++---------
 demo/vite.config.ts |  6 ++++--
 src/index.ts        | 48 +++++++++++++++++++++++----------------------
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 488da8b..f6fe4a7 100644
--- a/README.md
+++ b/README.md
@@ -17,25 +17,26 @@ npm install --save-dev @preact/preset-vite
 yarn add -D @preact/preset-vite
 ```
 
-Enhance your vite config with the Preact preset:
+Enhance your vite config with the Preact preset plugin in your `vite.config.ts` or `vite.config.js`:
 
 ```js
-// vite.config.js or vite.config.ts
-import withPreact from "@preact/preset-vite";
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
 
-export default withPreact({
-  // Your usual vite config
+export default defineConfig({
+  plugins: [preact()]
 });
 ```
 
 ## Options
 
-Options can be passed to our preset by adding a second argument:
+Options can be passed to our preset plugin via the first argument:
 
 ```js
-export default withPreact(viteConfig, {
-  // Add your options here
-  devtoolsInProd: true
+export default defineConfig({
+  plugins: [
+    preact({ devtoolsInProd: true })
+  ]
 });
 ```
 
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index 201806a..73c9614 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -1,5 +1,7 @@
 import { defineConfig } from "vite";
-import withPreact from "../src/index";
+import preact from "../src/index";
 
 // https://vitejs.dev/config/
-export default defineConfig(withPreact({}));
+export default defineConfig({
+	plugins: [preact()],
+});
diff --git a/src/index.ts b/src/index.ts
index db0a9a1..1c0481b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { mergeConfig, UserConfig } from "vite";
+import { Plugin } from "vite";
 import prefresh from "@prefresh/vite";
 import { preactDevtoolsPlugin } from "./devtools";
 
@@ -6,28 +6,30 @@ export interface PreactPluginOptions {
 	devtoolsInProd?: boolean;
 }
 
-export default function withPreact(
-	config: UserConfig,
-	{ devtoolsInProd }: PreactPluginOptions = {},
-): UserConfig {
-	const preactConfig: UserConfig = {
-		esbuild: {
-			jsxFactory: "h",
-			jsxFragment: "Fragment",
-			jsxInject: `import { h, Fragment } from 'preact'`,
-		},
-		resolve: {
-			alias: {
-				"react-dom/test-utils": "preact/test-utils",
-				"react-dom": "preact/compat",
-				react: "preact/compat",
+export default function preactPlugin({
+	devtoolsInProd,
+}: PreactPluginOptions = {}): Plugin[] {
+	return [
+		{
+			name: "preact:config",
+			config() {
+				return {
+					esbuild: {
+						jsxFactory: "h",
+						jsxFragment: "Fragment",
+						jsxInject: `import { h, Fragment } from 'preact'`,
+					},
+					resolve: {
+						alias: {
+							"react-dom/test-utils": "preact/test-utils",
+							"react-dom": "preact/compat",
+							react: "preact/compat",
+						},
+					},
+				};
 			},
 		},
-		plugins: [
-			preactDevtoolsPlugin({ injectInProd: devtoolsInProd }),
-			prefresh(),
-		],
-	};
-
-	return mergeConfig(config, preactConfig);
+		preactDevtoolsPlugin({ injectInProd: devtoolsInProd }),
+		prefresh(),
+	];
 }