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
This commit is contained in:
Tony Sullivan 2022-05-31 18:13:05 +00:00 committed by GitHub
parent b2f955ec1b
commit 10b2589093
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 3 deletions

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fixes HMR support for inline scripts in Astro components on Linux and OSX

View file

@ -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;
});
});

View file

@ -14,3 +14,7 @@ import Hero from '../components/Hero.astro';
</main>
</body>
</html>
<script>
console.log('Hello, Astro!');
</script>

View file

@ -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++;
}
}