feat(preact): add support for devtools (#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";');
+ }
  },
  },
  };