michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix linked Astro library style HMR (#5460)

Browse source 
* Fix linked Astro library style HMR

* Update comment

* Try fix windows
This commit is contained in:
Bjorn Lu 2022-11-30 23:58:09 +08:00 committed by GitHub
parent 299ae9bb6a
commit 57888e0690
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 81 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/ten-emus-raise.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix linked Astro library style HMR

31
packages/astro/e2e/astro-component.test.js
View file

@ -1,6 +1,5 @@
import { expect } from '@playwright/test'; import { expect } from '@playwright/test';
import os from 'os'; import { getColor, testFactory } from './test-utils.js';
import { testFactory } from './test-utils.js';
const test = testFactory({ root: './fixtures/astro-component/' }); const test = testFactory({ root: './fixtures/astro-component/' });
@ -79,4 +78,32 @@ test.describe('Astro component HMR', () => {
await updatedLog; await updatedLog;
}); });
test('update linked dep Astro html', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
let h1 = page.locator('#astro-linked-lib');
expect(await h1.textContent()).toBe('astro-linked-lib');
await Promise.all([
page.waitForLoadState('networkidle'),
await astro.editFile('../_deps/astro-linked-lib/Component.astro', (content) =>
content.replace('>astro-linked-lib<', '>astro-linked-lib-update<')
),
]);
h1 = page.locator('#astro-linked-lib');
expect(await h1.textContent()).toBe('astro-linked-lib-update');
});
test('update linked dep Astro style', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
let h1 = page.locator('#astro-linked-lib');
expect(await getColor(h1)).toBe('rgb(255, 0, 0)');
await Promise.all([
page.waitForLoadState('networkidle'),
await astro.editFile('../_deps/astro-linked-lib/Component.astro', (content) =>
content.replace('color: red', 'color: green')
),
]);
h1 = page.locator('#astro-linked-lib');
expect(await getColor(h1)).toBe('rgb(0, 128, 0)');
});
}); });

9
packages/astro/e2e/fixtures/_deps/astro-linked-lib/Component.astro Normal file
View file

@ -0,0 +1,9 @@
<!-- NOTE: this dep is in `_deps` to test HMR with the `/@fs` id -->
<h1 id="astro-linked-lib">astro-linked-lib</h1>
<style>
h1 {
color: red;
}
</style>

13
packages/astro/e2e/fixtures/_deps/astro-linked-lib/package.json Normal file
View file

@ -0,0 +1,13 @@
{
"name": "@e2e/astro-linked-lib",
"version": "0.0.0",
"private": true,
"exports": {
".": {
"astro": "./Component.astro"
}
},
"dependencies": {
"astro": "workspace:*"
}
}

1
packages/astro/e2e/fixtures/astro-component/package.json
View file

@ -4,6 +4,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@astrojs/preact": "^1.1.0", "@astrojs/preact": "^1.1.0",
"@e2e/astro-linked-lib": "link:../_deps/astro-linked-lib",
"astro": "workspace:*", "astro": "workspace:*",
"preact": "^10.11.0" "preact": "^10.11.0"
} }

2
packages/astro/e2e/fixtures/astro-component/src/pages/index.astro
View file

@ -1,5 +1,6 @@
--- ---
import Hero from '../components/Hero.astro'; import Hero from '../components/Hero.astro';
import LinkedLib from '@e2e/astro-linked-lib'
--- ---
<html> <html>
@ -11,6 +12,7 @@ import Hero from '../components/Hero.astro';
<Hero title="Astro Components"> <Hero title="Astro Components">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</Hero> </Hero>
<LinkedLib />
</main> </main>
</body> </body>
</html> </html>

15
packages/astro/src/vite-plugin-astro/index.ts
View file

@ -9,7 +9,12 @@ import esbuild from 'esbuild';
import slash from 'slash'; import slash from 'slash';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { cachedCompilation, CompileProps, getCachedSource } from '../core/compile/index.js'; import { cachedCompilation, CompileProps, getCachedSource } from '../core/compile/index.js';
import { isRelativePath, prependForwardSlash, startsWithForwardSlash } from '../core/path.js'; import {
isRelativePath,
prependForwardSlash,
removeLeadingForwardSlashWindows,
startsWithForwardSlash,
} from '../core/path.js';
import { viteID } from '../core/util.js'; import { viteID } from '../core/util.js';
import { getFileInfo } from '../vite-plugin-utils/index.js'; import { getFileInfo } from '../vite-plugin-utils/index.js';
import { handleHotUpdate } from './hmr.js'; import { handleHotUpdate } from './hmr.js';
@ -80,12 +85,20 @@ export default function astro({ settings, logging }: AstroPluginOptions): vite.P
// serve sub-part requests (*?astro) as virtual modules // serve sub-part requests (*?astro) as virtual modules
const { query } = parseAstroRequest(id); const { query } = parseAstroRequest(id);
if (query.astro) { if (query.astro) {
// TODO: Try to remove these custom resolve so HMR is more predictable.
// Convert /src/pages/index.astro?astro&type=style to /Users/name/ // Convert /src/pages/index.astro?astro&type=style to /Users/name/
// Because this needs to be the id for the Vite CSS plugin to property resolve // Because this needs to be the id for the Vite CSS plugin to property resolve
// relative @imports. // relative @imports.
if (query.type === 'style' && isBrowserPath(id)) { if (query.type === 'style' && isBrowserPath(id)) {
return relativeToRoot(id); return relativeToRoot(id);
} }
// Strip `/@fs` from linked dependencies outside of root so we can normalize
// it in the condition below. This ensures that the style module shared the same is
// part of the same "file" as the main Astro module in the module graph.
// "file" refers to `moduleGraph.fileToModulesMap`.
if (query.type === 'style' && id.startsWith('/@fs')) {
id = removeLeadingForwardSlashWindows(id.slice(4));
}
// Convert file paths to ViteID, meaning on Windows it omits the leading slash // Convert file paths to ViteID, meaning on Windows it omits the leading slash
if (isFullFilePath(id)) { if (isFullFilePath(id)) {
return viteID(new URL('file://' + id)); return viteID(new URL('file://' + id));

8
pnpm-lock.yaml
View file

@ -606,13 +606,21 @@ importers:
chai-as-promised: 7.1.1_chai@4.3.7 chai-as-promised: 7.1.1_chai@4.3.7
mocha: 9.2.2 mocha: 9.2.2
packages/astro/e2e/fixtures/_deps/astro-linked-lib:
specifiers:
astro: workspace:*
dependencies:
astro: link:../../../..
packages/astro/e2e/fixtures/astro-component: packages/astro/e2e/fixtures/astro-component:
specifiers: specifiers:
'@astrojs/preact': ^1.1.0 '@astrojs/preact': ^1.1.0
'@e2e/astro-linked-lib': link:../_deps/astro-linked-lib
astro: workspace:* astro: workspace:*
preact: ^10.11.0 preact: ^10.11.0
dependencies: dependencies:
'@astrojs/preact': link:../../../../integrations/preact '@astrojs/preact': link:../../../../integrations/preact
'@e2e/astro-linked-lib': link:../_deps/astro-linked-lib
astro: link:../../.. astro: link:../../..
preact: 10.11.3 preact: 10.11.3