From fd508a0fbb5148aafc180f1b14d3e47974777248 Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Fri, 3 May 2024 21:21:37 +0200
Subject: [PATCH] feat(preact): add support for devtools (#10938)

* feat(preact): add support for devtools

* Update little-dryers-stare.md
---
 .changeset/little-dryers-stare.md         | 18 ++++++++++++++++++
 packages/integrations/preact/src/index.ts | 13 ++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/little-dryers-stare.md

diff --git a/.changeset/little-dryers-stare.md b/.changeset/little-dryers-stare.md
new file mode 100644
index 0000000000..c1880d311f
--- /dev/null
+++ b/.changeset/little-dryers-stare.md
@@ -0,0 +1,18 @@
+---
+"@astrojs/preact": minor
+---
+
+Adds a `devtools` option
+
+You can enable [Preact devtools](https://preactjs.github.io/preact-devtools/) in development by setting `devtools: true` in your `preact()` integration config:
+
+```js
+import { defineConfig } from "astro/config"
+import preact from "@astrojs/preact"
+
+export default defineConfig({
+    integrations: [
+        preact({ devtools: true })
+    ]
+})
+```
diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
index 8de24d5654..bcca01dd0b 100644
--- a/packages/integrations/preact/src/index.ts
+++ b/packages/integrations/preact/src/index.ts
@@ -12,13 +12,16 @@ function getRenderer(development: boolean): AstroRenderer {
 	};
 }
 
-export type Options = Pick<VitePreactPluginOptions, 'include' | 'exclude'> & { compat?: boolean };
+export interface Options extends Pick<VitePreactPluginOptions, 'include' | 'exclude'> {
+	compat?: boolean;
+	devtools?: boolean;
+}
 
-export default function ({ include, exclude, compat }: Options = {}): AstroIntegration {
+export default function ({ include, exclude, compat, devtools }: Options = {}): AstroIntegration {
 	return {
 		name: '@astrojs/preact',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig, command }) => {
+			'astro:config:setup': ({ addRenderer, updateConfig, command, injectScript }) => {
 				const preactPlugin = preact({
 					reactAliasesEnabled: compat ?? false,
 					include,
@@ -56,6 +59,10 @@ export default function ({ include, exclude, compat }: Options = {}): AstroInteg
 				updateConfig({
 					vite: viteConfig,
 				});
+
+				if (command === 'dev' && devtools) {
+					injectScript('page', 'import "preact/debug";');
+				}
 			},
 		},
 	};