feat(solid): add support for devtools (#10937)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 74 insertions, 8 deletions

diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts
index 8707c006f..5672cd140 100644
--- a/packages/integrations/solid/src/index.ts
+++ b/packages/integrations/solid/src/index.ts
@@ -1,11 +1,54 @@
-import type { AstroConfig, AstroIntegration, AstroRenderer } from 'astro';
+import type { AstroIntegration, AstroIntegrationLogger, AstroRenderer } from 'astro';
 import solid, { type Options as ViteSolidPluginOptions } from 'vite-plugin-solid';
+import type { UserConfig, PluginOption } from 'vite';
 
-async function getViteConfiguration(isDev: boolean, { include, exclude }: Options = {}) {
+// TODO: keep in sync with https://github.com/thetarnav/solid-devtools/blob/main/packages/main/src/vite/index.ts#L7
+type DevtoolsPluginOptions = {
+	/** Add automatic name when creating signals, memos, stores, or mutables */
+	autoname?: boolean;
+	locator?:
+		| boolean
+		| {
+				/** Choose in which IDE the component source code should be revealed. */
+				targetIDE?: string;
+				/**
+				 * Holding which key should enable the locator overlay?
+				 * @default 'Alt'
+				 */
+				key?: string;
+				/** Inject location attributes to jsx templates */
+				jsxLocation?: boolean;
+				/** Inject location information to component declarations */
+				componentLocation?: boolean;
+		  };
+};
+type DevtoolsPlugin = (_options?: DevtoolsPluginOptions) => PluginOption;
+
+async function getDevtoolsPlugin(logger: AstroIntegrationLogger, retrieve: boolean) {
+	if (!retrieve) {
+		return null;
+	}
+
+	try {
+		// @ts-ignore
+		return (await import('solid-devtools/vite')).default as DevtoolsPlugin;
+	} catch (_) {
+		logger.warn(
+			'Solid Devtools requires `solid-devtools` as a peer dependency, add it to your project.'
+		);
+		return null;
+	}
+}
+
+async function getViteConfiguration(
+	isDev: boolean,
+	{ include, exclude }: Options,
+	devtoolsPlugin: DevtoolsPlugin | null
+) {
 	// https://github.com/solidjs/vite-plugin-solid
 	// We inject the dev mode only if the user explicitly wants it or if we are in dev (serve) mode
 	const nestedDeps = ['solid-js', 'solid-js/web', 'solid-js/store', 'solid-js/html', 'solid-js/h'];
-	return {
+	const config: UserConfig = {
 		resolve: {
 			conditions: ['solid', ...(isDev ? ['development'] : [])],
 			dedupe: nestedDeps,
@@ -34,7 +77,13 @@ async function getViteConfiguration(isDev: boolean, { include, exclude }: Option
 		ssr: {
 			external: ['babel-preset-solid'],
 		},
-	} satisfies AstroConfig['vite'];
+	};
+
+	if (devtoolsPlugin) {
+		config.plugins?.push(devtoolsPlugin({ autoname: true }));
+	}
+
+	return config;
 }
 
 function getRenderer(): AstroRenderer {
@@ -45,17 +94,34 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-export type Options = Pick<ViteSolidPluginOptions, 'include' | 'exclude'>;
+export interface Options extends Pick<ViteSolidPluginOptions, 'include' | 'exclude'> {
+	devtools?: boolean;
+}
 
-export default function (opts: Options = {}): AstroIntegration {
+export default function (options: Options = {}): AstroIntegration {
 	return {
 		name: '@astrojs/solid-js',
 		hooks: {
-			'astro:config:setup': async ({ command, addRenderer, updateConfig }) => {
+			'astro:config:setup': async ({
+				command,
+				addRenderer,
+				updateConfig,
+				injectScript,
+				logger,
+			}) => {
+				const devtoolsPlugin = await getDevtoolsPlugin(
+					logger,
+					!!options.devtools && command === 'dev'
+				);
+
 				addRenderer(getRenderer());
 				updateConfig({
-					vite: await getViteConfiguration(command === 'dev', opts),
+					vite: await getViteConfiguration(command === 'dev', options, devtoolsPlugin),
 				});
+
+				if (devtoolsPlugin) {
+					injectScript('page', 'import "solid-devtools";');
+				}
 			},
 		},
 	};