feat(preact): add support for devtools (withastro#10938)

* feat(preact): add support for devtools

* Update little-dryers-stare.md

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

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";');
+				}
 			},
 		},
 	};