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: vitejs/vite#2500

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 })
+  ]
 });
 ```
 

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()],
+});

src/index.ts

@@ -1,33 +1,35 @@
-import { mergeConfig, UserConfig } from "vite";
+import { Plugin } from "vite";
 import prefresh from "@prefresh/vite";
 import { preactDevtoolsPlugin } from "./devtools";
 
 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(),
+	];
 }