Automatically set up Preact DevTools in dev mode

withastro · Aug 27, 2022 · 160e184 · 160e184
1 parent 2708523
commit 160e184
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/.changeset/brown-berries-eat.md 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
@@ -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
@@ -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
@@ -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),
 				});