Skip to content

Commit

Permalink
Support alias use with hydration scripts (#3376)
Browse files Browse the repository at this point in the history
* Support alias use with hydration scripts

* Adds a changeset

* Updated lockfile
  • Loading branch information
matthewp authored May 16, 2022
1 parent 21d9d36 commit b123015
Show file tree
Hide file tree
Showing 10 changed files with 114 additions and 15 deletions.
5 changes: 5 additions & 0 deletions .changeset/tiny-donuts-own.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Allow using aliases for hydrated scripts
1 change: 0 additions & 1 deletion packages/astro/src/core/build/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,6 @@ class AstroBuilder {
try {
await this.build(setupData);
} catch (_err) {
debugger;
throw fixViteErrorMessage(createSafeError(_err), setupData.viteServer);
}
}
Expand Down
13 changes: 3 additions & 10 deletions packages/astro/src/core/render/dev/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 1 addition & 4 deletions packages/astro/src/runtime/server/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
38 changes: 38 additions & 0 deletions packages/astro/test/alias.test.js
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions packages/astro/test/fixtures/alias/astro.config.mjs
Original file line number Diff line number Diff line change
@@ -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 changes: 9 additions & 0 deletions packages/astro/test/fixtures/alias/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "@test/aliases",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/svelte": "workspace:*",
"astro": "workspace:*"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<script></script>
<div id="client">test</div>
25 changes: 25 additions & 0 deletions packages/astro/test/fixtures/alias/src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -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 changes: 17 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b123015

Please sign in to comment.