Fix: Windows client-side script reloads on dev server (#4645)

* fix: append forward slash to script paths for "C:/" prob

* chore: remove dead regex

* chore: changeset

* test: add client script test back to windows!

* test: add inline script test for sanity

* The actual fix

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

.changeset/two-cherries-drop.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix client-side scripts reloads on dev server in windows

packages/astro/e2e/astro-component.test.js

@@ -36,10 +36,7 @@ test.describe('Astro component HMR', () => {
 		);
 	});
 
-	// TODO: Re-enable this test on windows when #3424 is fixed
+	test('hoisted scripts', async ({ page, astro }) => {
-	// https://github.com/withastro/astro/issues/3424
-	const it = os.platform() === 'win32' ? test.skip : test;
-	it('hoisted scripts', async ({ page, astro }) => {
 		const initialLog = page.waitForEvent(
 			'console',
 			(message) => message.text() === 'Hello, Astro!'
@@ -60,4 +57,26 @@ test.describe('Astro component HMR', () => {
 
 		await updatedLog;
 	});
+
+	test('inline scripts', async ({ page, astro }) => {
+		const initialLog = page.waitForEvent(
+			'console',
+			(message) => message.text() === 'Hello, inline Astro!'
+		);
+
+		await page.goto(astro.resolveUrl('/'));
+		await initialLog;
+
+		const updatedLog = page.waitForEvent(
+			'console',
+			(message) => message.text() === 'Hello, updated inline Astro!'
+		);
+
+		// Edit the inline script on the page
+		await astro.editFile('./src/pages/index.astro', (content) =>
+			content.replace('Hello, inline Astro!', 'Hello, updated inline Astro!')
+		);
+
+		await updatedLog;
+	});
 });

packages/astro/e2e/fixtures/astro-component/src/pages/index.astro

@@ -18,3 +18,7 @@ import Hero from '../components/Hero.astro';
 <script>
 	console.log('Hello, Astro!');
 </script>
+
+<script is:inline>
+	console.log('Hello, inline Astro!');
+</script>

packages/astro/src/core/util.ts

@@ -126,7 +126,7 @@ export function resolveDependency(dep: string, projectRoot: URL) {
  *   Windows:    C:/Users/astro/code/my-project/src/pages/index.astro
  */
 export function viteID(filePath: URL): string {
-	return slash(fileURLToPath(filePath));
+	return slash(fileURLToPath(filePath) + filePath.search);
 }
 
 export const VALID_ID_PREFIX = `/@id/`;

packages/astro/src/vite-plugin-astro/index.ts

@@ -9,8 +9,9 @@ import ancestor from 'common-ancestor-path';
 import esbuild from 'esbuild';
 import slash from 'slash';
 import { fileURLToPath } from 'url';
+import { isRelativePath, prependForwardSlash, startsWithForwardSlash } from '../core/path.js';
+import { viteID } from '../core/util.js';
 import { cachedCompilation, CompileProps, getCachedSource } from '../core/compile/index.js';
-import { isRelativePath, startsWithForwardSlash } from '../core/path.js';
 import { getFileInfo } from '../vite-plugin-utils/index.js';
 import {
 	createTransformStyles,
@@ -48,6 +49,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 	// Variables for determining if an id starts with /src...
 	const srcRootWeb = config.srcDir.pathname.slice(config.root.pathname.length - 1);
 	const isBrowserPath = (path: string) => path.startsWith(srcRootWeb);
+	const isFullFilePath = (path: string) => path.startsWith(prependForwardSlash(slash(fileURLToPath(config.root))));
 
 	function resolveRelativeFromAstroParent(id: string, parsedFrom: ParsedRequestResult): string {
 		const filename = normalizeFilename(parsedFrom.filename);
@@ -94,7 +96,10 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				if (query.type === 'style' && isBrowserPath(id)) {
 					return relativeToRoot(id);
 				}
-
+				// Convert file paths to ViteID, meaning on Windows it omits the leading slash
+				if(isFullFilePath(id)) {
+					return viteID(new URL('file://' + id));
+				}
 				return id;
 			}
 		},
@@ -245,18 +250,8 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				)};export { $$file as file, $$url as url };\n`;
 				// Add HMR handling in dev mode.
 				if (!resolvedConfig.isProduction) {
-					// HACK: extract dependencies from metadata until compiler static extraction handles them
-					const metadata = transformResult.code.split('$$createMetadata(')[1].split('});\n')[0];
-					const pattern = /specifier:\s*'([^']*)'/g;
-					const deps = new Set();
-					let match;
-					while ((match = pattern.exec(metadata)?.[1])) {
-						deps.add(match);
-					}
-
 					let i = 0;
 					while (i < transformResult.scripts.length) {
-						deps.add(`${id}?astro&type=script&index=${i}&lang.ts`);
 						SUFFIX += `import "${id}?astro&type=script&index=${i}&lang.ts";`;
 						i++;
 					}