From 999250d651996c2833b747b84447aa4e97c91a38 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <marvinhagemeister50@gmail.com>
Date: Wed, 7 Sep 2022 20:49:07 +0200
Subject: [PATCH] Automatically set up Preact DevTools in dev mode (#4515)

---
 .changeset/brown-berries-eat.md            |  5 +++++
 packages/integrations/preact/client-dev.js |  4 ++++
 packages/integrations/preact/package.json  |  1 +
 packages/integrations/preact/src/index.ts  | 15 ++++++++-------
 4 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/brown-berries-eat.md
 create mode 100644 packages/integrations/preact/client-dev.js

diff --git a/.changeset/brown-berries-eat.md b/.changeset/brown-berries-eat.md
new file mode 100644
index 000000000000..540fe6d39f30
--- /dev/null
+++ b/.changeset/brown-berries-eat.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': minor
+---
+
+Automatically set up Preact DevTools bridge when running `astro dev`.
diff --git a/packages/integrations/preact/client-dev.js b/packages/integrations/preact/client-dev.js
new file mode 100644
index 000000000000..8f264a9039f2
--- /dev/null
+++ b/packages/integrations/preact/client-dev.js
@@ -0,0 +1,4 @@
+import "preact/debug"
+import clientFn from "./client.js";
+
+export default clientFn;
diff --git a/packages/integrations/preact/package.json b/packages/integrations/preact/package.json
index aa1fe4729387..9660e5c86a5f 100644
--- a/packages/integrations/preact/package.json
+++ b/packages/integrations/preact/package.json
@@ -22,6 +22,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./client.js": "./client.js",
+    "./client-dev.js": "./client-dev.js",
     "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
diff --git a/packages/integrations/preact/src/index.ts b/packages/integrations/preact/src/index.ts
index 5c5ed0363aff..88c603751839 100644
--- a/packages/integrations/preact/src/index.ts
+++ b/packages/integrations/preact/src/index.ts
@@ -1,9 +1,9 @@
 import { AstroIntegration, AstroRenderer, ViteUserConfig } from 'astro';
 
-function getRenderer(): AstroRenderer {
+function getRenderer(development: boolean): AstroRenderer {
 	return {
 		name: '@astrojs/preact',
-		clientEntrypoint: '@astrojs/preact/client.js',
+		clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js',
 		serverEntrypoint: '@astrojs/preact/server.js',
 		jsxImportSource: 'preact',
 		jsxTransformOptions: async () => {
@@ -18,10 +18,10 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getCompatRenderer(): AstroRenderer {
+function getCompatRenderer(development: boolean): AstroRenderer {
 	return {
 		name: '@astrojs/preact',
-		clientEntrypoint: '@astrojs/preact/client.js',
+		clientEntrypoint: development ? '@astrojs/preact/client-dev.js' : '@astrojs/preact/client.js',
 		serverEntrypoint: '@astrojs/preact/server.js',
 		jsxImportSource: 'react',
 		jsxTransformOptions: async () => {
@@ -96,9 +96,10 @@ export default function ({ compat }: { compat?: boolean } = {}): AstroIntegratio
 	return {
 		name: '@astrojs/preact',
 		hooks: {
-			'astro:config:setup': ({ addRenderer, updateConfig }) => {
-				if (compat) addRenderer(getCompatRenderer());
-				addRenderer(getRenderer());
+			'astro:config:setup': ({ addRenderer, updateConfig, command }) => {
+				const development = command === 'dev';
+				if (compat) addRenderer(getCompatRenderer(development));
+				addRenderer(getRenderer(development));
 				updateConfig({
 					vite: getViteConfiguration(compat),
 				});