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

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

.changeset/olive-bags-drive.md

@@ -0,0 +1,24 @@
+---
+"@astrojs/solid-js": minor
+---
+
+Adds a `devtools` option
+
+You can enable the [official Solid Devtools](https://github.com/thetarnav/solid-devtools) while working in development mode by setting `devtools: true` in your `solid()` integration config and adding `solid-devtools` to your project dependencies:
+
+```bash
+npm install solid-devtools
+# yarn add solid-devtools
+# pnpm add solid-devtools
+```
+
+```js
+import { defineConfig } from "astro/config"
+import solid from "@astrojs/solid-js"
+
+export default defineConfig({
+    integrations: [
+        solid({ devtools: true })
+    ]
+})
+```

packages/astro/test/sourcemap.test.js

@@ -12,7 +12,7 @@ describe('Sourcemap', async () => {
 
 	it('Builds sourcemap', async () => {
 		const dir = await fixture.readdir('./_astro');
-		const counterMap = dir.find((file) => file.match(/^Counter\.\w+\.js\.map$/));
+		const counterMap = dir.find((file) => file.match(/^Counter\.[\w-]+\.js\.map$/));
 		assert.ok(counterMap);
 	});
 

packages/integrations/solid/package.json

@@ -40,11 +40,18 @@
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "solid-js": "^1.8.17"
+    "solid-js": "^1.8.17",
+    "vite": "^5.2.10"
   },
   "peerDependencies": {
+    "solid-devtools": "^0.30.1",
     "solid-js": "^1.8.5"
   },
+  "peerDependenciesMeta": {
+    "solid-devtools": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
   },

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