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

Support alias use with hydration scripts (#3376)

Browse source 
* Support alias use with hydration scripts

* Adds a changeset

* Updated lockfile
This commit is contained in:
Matthew Phillips 2022-05-16 11:37:51 -04:00 committed by GitHub
parent 21d9d360ec
commit b1230152ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 114 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tiny-donuts-own.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Allow using aliases for hydrated scripts

1
packages/astro/src/core/build/index.ts
View file

@ -195,7 +195,6 @@ class AstroBuilder {
try {
await this.build(setupData);
} catch (_err) {
debugger;
throw fixViteErrorMessage(createSafeError(_err), setupData.viteServer);
}
}

13
packages/astro/src/core/render/dev/index.ts
View file

@ -160,18 +160,11 @@ export async function render(
pathname,
scripts,
// 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) {
const [resolvedUrl, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s);
if (resolvedPath.includes('node_modules/.vite')) {
return resolvedPath.replace(/.*?node_modules\/\.vite/, '/node_modules/.vite');
if(s.startsWith('/@fs')) {
return s;
}
// NOTE: This matches the same logic that Vite uses to add the `/@id/` prefix.
if (!resolvedUrl.startsWith('.') && !resolvedUrl.startsWith('/')) {
return '/@id' + prependForwardSlash(resolvedUrl);
}
return '/@fs' + prependForwardSlash(resolvedPath);
return '/@id' + prependForwardSlash(s);
},
renderers,
request,

5
packages/astro/src/runtime/server/index.ts
View file

@ -603,10 +603,7 @@ export async function renderHead(result: SSRResult): Promise<string> {
if ('data-astro-component-hydration' in script.props) {
needsHydrationStyles = true;
}
return renderElement('script', {
...script,
props: { ...script.props, 'astro-script': result._metadata.pathname + '/script-' + i },
});
return renderElement('script', script);
});
if (needsHydrationStyles) {
styles.push(

38
packages/astro/test/alias.test.js Normal file
View 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
View 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
View 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
View 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
View 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
View file

@ -681,6 +681,14 @@ importers:
'@astrojs/vue': link:../../../../integrations/vue
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:
specifiers:
astro: workspace:*
@ -5994,6 +6002,11 @@ packages:
/debug/3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.3
dev: false
@ -8917,6 +8930,8 @@ packages:
debug: 3.2.7
iconv-lite: 0.4.24
sax: 1.2.4
transitivePeerDependencies:
- supports-color
dev: false
/netmask/2.0.2:
@ -8999,6 +9014,8 @@ packages:
rimraf: 2.7.1
semver: 5.7.1
tar: 4.4.19
transitivePeerDependencies:
- supports-color
dev: false
/node-releases/2.0.4: