Fix import dev toolbar apps on windows

[bluwy]

Changes

fix #9389

Use JSON.stringify when injecting arbitrary paths so it works on Windows (backslashes wont cause problems)

Testing

I'm not sure if this will fix it, might need help testing from someone on Windows, or add a test (marking draft)

Docs

n/a. bug fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: e62a6e9

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[66Leo66]

@bluwy Hi! I'm the author of #9389 and I can confirm this fixes the problem (on astro's side) on my machine. This patch addressed the second error in the log of original issue. (I did a quick test via pnpm patch astro instead of building astro from scratch)

--- a/dist/vite-plugin-dev-overlay/vite-plugin-dev-overlay.js
+++ b/dist/vite-plugin-dev-overlay/vite-plugin-dev-overlay.js
@@ -12,7 +12,7 @@ function astroDevOverlay({ settings }) {
       if (id === resolvedVirtualModuleId) {
         return `
 					export const loadDevOverlayPlugins = async () => {
-						return [${settings.devToolbarApps.map((plugin) => `(await import('${plugin}')).default`).join(",")}];
+						return [${settings.devToolbarApps.map((plugin) => `(await import(${JSON.stringify(plugin)})).default`).join(",")}];
 					};
 				`;
       }

There's another problem on @spotlightjs/astro's side, fixed similarly via:

--- a/src/snippets.ts
+++ b/src/snippets.ts
@@ -9,7 +9,7 @@ export type ClientInitOptions = {
   injectImmediately?: boolean;
 } & SpotlightAstroIntegrationOptions;
 
-const buildClientImport = (importPath: string) => `import * as Spotlight from '${importPath}';`;
+const buildClientImport = (importPath: string) => `import * as Spotlight from ${JSON.stringify(importPath)};`;
 
 const buildClientInit = (options: ClientInitOptions) => {
   const integrationCalls = options.integrationNames

(They did another import on their own for some reason, but with the same problem)

Together these two patches make Dev Toolbar & Spotlight integration show correctly on my environment. Also the lighthouse integration mentioned in the original issue also works now.

[bluwy]

Awesome, thank you for testing the fix! I'm away from my laptop until next week, but I'll open this PR for review for now so we could get it out, and we could add tests later.

Also feel free to submit a PR to @apotlightjs/Astro to fix that! I didn't notice they did something similar too.