From 561a34d91209c9d4959f74beaa17008edb27ff5d Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 10 Aug 2022 15:26:58 -0400 Subject: [PATCH] Include astro components for HMR invalidation (#4240) * Include astro components for HMR invalidation * Changeset * remove extra vite server passing --- .changeset/nasty-gifts-push.md | 5 +++ .../invalidate-script-deps/package.json | 8 +++++ .../src/pages/index.astro | 11 +++++++ .../src/scripts/heading.js | 2 ++ .../astro/e2e/invalidate-script-deps.test.js | 31 +++++++++++++++++++ packages/astro/src/vite-plugin-astro/hmr.ts | 14 ++++++++- packages/astro/src/vite-plugin-astro/index.ts | 6 +++- packages/astro/src/vite-plugin-astro/query.ts | 5 +++ pnpm-lock.yaml | 6 ++++ 9 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 .changeset/nasty-gifts-push.md create mode 100644 packages/astro/e2e/fixtures/invalidate-script-deps/package.json create mode 100644 packages/astro/e2e/fixtures/invalidate-script-deps/src/pages/index.astro create mode 100644 packages/astro/e2e/fixtures/invalidate-script-deps/src/scripts/heading.js create mode 100644 packages/astro/e2e/invalidate-script-deps.test.js diff --git a/.changeset/nasty-gifts-push.md b/.changeset/nasty-gifts-push.md new file mode 100644 index 000000000000..8c175ef77f70 --- /dev/null +++ b/.changeset/nasty-gifts-push.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Properly invalidate Astro modules when a child script updates in HMR diff --git a/packages/astro/e2e/fixtures/invalidate-script-deps/package.json b/packages/astro/e2e/fixtures/invalidate-script-deps/package.json new file mode 100644 index 000000000000..4b45ad505eb1 --- /dev/null +++ b/packages/astro/e2e/fixtures/invalidate-script-deps/package.json @@ -0,0 +1,8 @@ +{ + "name": "@e2e/invalidate-script-deps", + "version": "0.0.0", + "private": true, + "devDependencies": { + "astro": "workspace:*" + } +} diff --git a/packages/astro/e2e/fixtures/invalidate-script-deps/src/pages/index.astro b/packages/astro/e2e/fixtures/invalidate-script-deps/src/pages/index.astro new file mode 100644 index 000000000000..3954329f4abe --- /dev/null +++ b/packages/astro/e2e/fixtures/invalidate-script-deps/src/pages/index.astro @@ -0,0 +1,11 @@ + + + Test + + +

+ + + diff --git a/packages/astro/e2e/fixtures/invalidate-script-deps/src/scripts/heading.js b/packages/astro/e2e/fixtures/invalidate-script-deps/src/scripts/heading.js new file mode 100644 index 000000000000..0d3fece4a8b9 --- /dev/null +++ b/packages/astro/e2e/fixtures/invalidate-script-deps/src/scripts/heading.js @@ -0,0 +1,2 @@ + +document.querySelector('h1').textContent = 'before'; diff --git a/packages/astro/e2e/invalidate-script-deps.test.js b/packages/astro/e2e/invalidate-script-deps.test.js new file mode 100644 index 000000000000..811f6bdfd757 --- /dev/null +++ b/packages/astro/e2e/invalidate-script-deps.test.js @@ -0,0 +1,31 @@ +import { expect } from '@playwright/test'; +import { testFactory } from './test-utils.js'; + +const test = testFactory({ + root: './fixtures/invalidate-script-deps/', +}); + +let devServer; + +test.beforeEach(async ({ astro }) => { + devServer = await astro.startDevServer(); +}); + +test.afterEach(async () => { + await devServer.stop(); +}); + +test.describe('Scripts with dependencies', () => { + test('refresh with HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const h = page.locator('h1'); + await expect(h, 'original text set').toHaveText('before'); + + await astro.editFile('./src/scripts/heading.js', (original) => + original.replace('before', 'after') + ); + + await expect(h, 'text changed').toHaveText('after'); + }); +}); diff --git a/packages/astro/src/vite-plugin-astro/hmr.ts b/packages/astro/src/vite-plugin-astro/hmr.ts index f44b844f7634..e307166db313 100644 --- a/packages/astro/src/vite-plugin-astro/hmr.ts +++ b/packages/astro/src/vite-plugin-astro/hmr.ts @@ -6,6 +6,7 @@ import type { LogOptions } from '../core/logger/core.js'; import { info } from '../core/logger/core.js'; import * as msg from '../core/messages.js'; import { cachedCompilation, invalidateCompilation, isCached } from './compile.js'; +import { isAstroScript } from './query.js'; interface TrackCSSDependenciesOptions { viteDevServer: ViteDevServer | null; @@ -141,12 +142,23 @@ export async function handleHotUpdate( // Add hoisted scripts so these get invalidated for (const mod of mods) { for (const imp of mod.importedModules) { - if (imp.id?.includes('?astro&type=script')) { + if (imp.id && isAstroScript(imp.id)) { mods.push(imp); } } } + // If this is a module that is imported from a