Support alias use with hydration scripts (#3376)
* Support alias use with hydration scripts * Adds a changeset * Updated lockfile
This commit is contained in:
Matthew Phillips
GitHub
parent
21d9d360ec
commit
b1230152ff
10 changed files with 114 additions and 15 deletions
5
.changeset/tiny-donuts-own.md
Normal file
5
.changeset/tiny-donuts-own.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Allow using aliases for hydrated scripts
|
||||||
|
|
@ -195,7 +195,6 @@ class AstroBuilder {
|
||||||
try {
|
try {
|
||||||
await this.build(setupData);
|
await this.build(setupData);
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
debugger;
|
|
||||||
throw fixViteErrorMessage(createSafeError(_err), setupData.viteServer);
|
throw fixViteErrorMessage(createSafeError(_err), setupData.viteServer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -160,18 +160,11 @@ export async function render(
|
||||||
pathname,
|
pathname,
|
||||||
scripts,
|
scripts,
|
||||||
// Resolves specifiers in the inline hydrated scripts, such as "@astrojs/preact/client.js"
|
// Resolves specifiers in the inline hydrated scripts, such as "@astrojs/preact/client.js"
|
||||||
// TODO: Can we pass the hydration code more directly through Vite, so that we
|
|
||||||
// don't need to copy-paste and maintain Vite's import resolution here?
|
|
||||||
async resolve(s: string) {
|
async resolve(s: string) {
|
||||||
const [resolvedUrl, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s);
|
if(s.startsWith('/@fs')) {
|
||||||
if (resolvedPath.includes('node_modules/.vite')) {
|
return s;
|
||||||
return resolvedPath.replace(/.*?node_modules\/\.vite/, '/node_modules/.vite');
|
|
||||||
}
|
}
|
||||||
// NOTE: This matches the same logic that Vite uses to add the `/@id/` prefix.
|
return '/@id' + prependForwardSlash(s);
|
||||||
if (!resolvedUrl.startsWith('.') && !resolvedUrl.startsWith('/')) {
|
|
||||||
return '/@id' + prependForwardSlash(resolvedUrl);
|
|
||||||
}
|
|
||||||
return '/@fs' + prependForwardSlash(resolvedPath);
|
|
||||||
},
|
},
|
||||||
renderers,
|
renderers,
|
||||||
request,
|
request,
|
||||||
|
|
|
||||||
|
|
@ -603,10 +603,7 @@ export async function renderHead(result: SSRResult): Promise<string> {
|
||||||
if ('data-astro-component-hydration' in script.props) {
|
if ('data-astro-component-hydration' in script.props) {
|
||||||
needsHydrationStyles = true;
|
needsHydrationStyles = true;
|
||||||
}
|
}
|
||||||
return renderElement('script', {
|
return renderElement('script', script);
|
||||||
...script,
|
|
||||||
props: { ...script.props, 'astro-script': result._metadata.pathname + '/script-' + i },
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
if (needsHydrationStyles) {
|
if (needsHydrationStyles) {
|
||||||
styles.push(
|
styles.push(
|
||||||
|
|
|
||||||
38
packages/astro/test/alias.test.js
Normal file
38
packages/astro/test/alias.test.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import * as cheerio from 'cheerio';
|
||||||
|
import { isWindows, loadFixture } from './test-utils.js';
|
||||||
|
|
||||||
|
describe('Aliases', () => {
|
||||||
|
let fixture;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/alias/',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isWindows) return;
|
||||||
|
|
||||||
|
describe('dev', () => {
|
||||||
|
let devServer;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
devServer = await fixture.startDevServer();
|
||||||
|
});
|
||||||
|
|
||||||
|
after(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
it.only('can load client components', async () => {
|
||||||
|
const html = await fixture.fetch('/').then((res) => res.text());
|
||||||
|
const $ = cheerio.load(html);
|
||||||
|
|
||||||
|
// Should render aliased element
|
||||||
|
expect($('#client').text()).to.equal('test');
|
||||||
|
|
||||||
|
const scripts = $('script').toArray();
|
||||||
|
expect(scripts.length).to.be.greaterThan(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
14
packages/astro/test/fixtures/alias/astro.config.mjs
vendored
Normal file
14
packages/astro/test/fixtures/alias/astro.config.mjs
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import svelte from '@astrojs/svelte';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [svelte()],
|
||||||
|
vite: {
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{ find:/^component:(.*)$/, replacement: '/src/components/$1' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
9
packages/astro/test/fixtures/alias/package.json
vendored
Normal file
9
packages/astro/test/fixtures/alias/package.json
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"name": "@test/aliases",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/svelte": "workspace:*",
|
||||||
|
"astro": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
packages/astro/test/fixtures/alias/src/components/Client.svelte
vendored
Normal file
2
packages/astro/test/fixtures/alias/src/components/Client.svelte
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<script></script>
|
||||||
|
<div id="client">test</div>
|
||||||
25
packages/astro/test/fixtures/alias/src/pages/index.astro
vendored
Normal file
25
packages/astro/test/fixtures/alias/src/pages/index.astro
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
import Client from 'component:Client.svelte'
|
||||||
|
---
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title>Svelte Client</title>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: system-ui;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<Client client:load />
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
|
|
@ -681,6 +681,14 @@ importers:
|
||||||
'@astrojs/vue': link:../../../../integrations/vue
|
'@astrojs/vue': link:../../../../integrations/vue
|
||||||
astro: link:../../..
|
astro: link:../../..
|
||||||
|
|
||||||
|
packages/astro/test/fixtures/alias:
|
||||||
|
specifiers:
|
||||||
|
'@astrojs/svelte': workspace:*
|
||||||
|
astro: workspace:*
|
||||||
|
dependencies:
|
||||||
|
'@astrojs/svelte': link:../../../../integrations/svelte
|
||||||
|
astro: link:../../..
|
||||||
|
|
||||||
packages/astro/test/fixtures/astro-assets:
|
packages/astro/test/fixtures/astro-assets:
|
||||||
specifiers:
|
specifiers:
|
||||||
astro: workspace:*
|
astro: workspace:*
|
||||||
|
|
@ -5994,6 +6002,11 @@ packages:
|
||||||
|
|
||||||
/debug/3.2.7:
|
/debug/3.2.7:
|
||||||
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
|
||||||
|
peerDependencies:
|
||||||
|
supports-color: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
supports-color:
|
||||||
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
ms: 2.1.3
|
ms: 2.1.3
|
||||||
dev: false
|
dev: false
|
||||||
|
|
@ -8917,6 +8930,8 @@ packages:
|
||||||
debug: 3.2.7
|
debug: 3.2.7
|
||||||
iconv-lite: 0.4.24
|
iconv-lite: 0.4.24
|
||||||
sax: 1.2.4
|
sax: 1.2.4
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/netmask/2.0.2:
|
/netmask/2.0.2:
|
||||||
|
|
@ -8999,6 +9014,8 @@ packages:
|
||||||
rimraf: 2.7.1
|
rimraf: 2.7.1
|
||||||
semver: 5.7.1
|
semver: 5.7.1
|
||||||
tar: 4.4.19
|
tar: 4.4.19
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/node-releases/2.0.4:
|
/node-releases/2.0.4:
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue