Merge pull request #5 from preactjs/array-of-plugins

Author: marvinhagemeister

.prettierignore

@@ -0,0 +1,2 @@
+# Avoid tabs in code samples
+README.md

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