From 10b2589093f23d5f92e0509f9d3eebfaae2d46a7 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Tue, 31 May 2022 18:13:05 +0000
Subject: [PATCH] Fixing HMR for hoisted scripts (#3427)

* WIP: the leading /@fs broke script HMR

* Revert "WIP: the leading /@fs broke script HMR"

This reverts commit 84fce366268033261369aed48f909e59e78bf3e4.

* Metadata needs to strip off /@fs from hoisted script URLs

* adding a test for hoisted script HMR support

* removing 2 second timeout on navigation, allow default 30 seconds

* simplifying the hoisted script test sync

* TEMP: bubbling up console logs to track down windows failure

* removing temp logging

* disabling the test on windows for now

* chore: adding changeset
---
 .changeset/quick-crabs-lay.md                 |  5 ++++
 packages/astro/e2e/astro-component.test.js    | 24 +++++++++++++++++--
 .../astro-component/src/pages/index.astro     |  4 ++++
 packages/astro/src/runtime/server/metadata.ts |  3 ++-
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/quick-crabs-lay.md

diff --git a/.changeset/quick-crabs-lay.md b/.changeset/quick-crabs-lay.md
new file mode 100644
index 000000000..48f488797
--- /dev/null
+++ b/.changeset/quick-crabs-lay.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes HMR support for inline scripts in Astro components on Linux and OSX
diff --git a/packages/astro/e2e/astro-component.test.js b/packages/astro/e2e/astro-component.test.js
index 65499499f..5dcf2daea 100644
--- a/packages/astro/e2e/astro-component.test.js
+++ b/packages/astro/e2e/astro-component.test.js
@@ -1,4 +1,5 @@
 import { test as base, expect } from '@playwright/test';
+import os from 'os';
 import { loadFixture } from './test-utils.js';
 
 const test = base.extend({
@@ -18,8 +19,8 @@ test.afterEach(async () => {
 	await devServer.stop();
 });
 
-test.describe('Astro components', () => {
-	test('HMR', async ({ page, astro }) => {
+test.describe('Astro component HMR', () => {
+	test('component styles', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const hero = page.locator('section');
@@ -39,4 +40,23 @@ test.describe('Astro components', () => {
 			'rgb(230, 230, 230)'
 		);
 	});
+
+	// TODO: Re-enable this test on windows when #3424 is fixed
+	// 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!');
+
+		await page.goto(astro.resolveUrl('/'));
+		await initialLog;
+
+		const updatedLog = page.waitForEvent('console', (message) => message.text() === 'Hello, updated Astro!');
+
+		// Edit the hoisted script on the page
+		await astro.editFile('./src/pages/index.astro', (content) =>
+			content.replace('Hello, Astro!', 'Hello, updated Astro!')
+		);
+
+		await updatedLog;
+	});
 });
diff --git a/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro b/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
index a52ee713f..76221b040 100644
--- a/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
@@ -14,3 +14,7 @@ import Hero from '../components/Hero.astro';
 		</main>
   </body>
 </html>
+
+<script>
+	console.log('Hello, Astro!');
+</script>
diff --git a/packages/astro/src/runtime/server/metadata.ts b/packages/astro/src/runtime/server/metadata.ts
index 9fb23724d..9379cc3ff 100644
--- a/packages/astro/src/runtime/server/metadata.ts
+++ b/packages/astro/src/runtime/server/metadata.ts
@@ -102,7 +102,8 @@ export class Metadata {
 			let i = 0,
 				pathname = metadata.mockURL.pathname;
 			while (i < metadata.hoisted.length) {
-				yield `${pathname}?astro&type=script&index=${i}`;
+				// Strip off the leading "/@fs" added during compilation.
+				yield `${pathname.replace('/@fs', '')}?astro&type=script&index=${i}`;
 				i++;
 			}
 		}