Support alias use with hydration scripts (withastro#3376)

* Support alias use with hydration scripts * Adds a changeset * Updated lockfile
SiriousHunter · May 16, 2022 · b123015 · b123015
1 parent 21d9d36
commit b123015
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 15 deletions.
diff --git a/.changeset/tiny-donuts-own.md b/.changeset/tiny-donuts-own.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Allow using aliases for hydrated scripts
diff --git a/packages/astro/src/core/build/index.ts b/packages/astro/src/core/build/index.ts
@@ -195,7 +195,6 @@ class AstroBuilder {
  try {
  await this.build(setupData);
  } catch (_err) {
- debugger;
  throw fixViteErrorMessage(createSafeError(_err), setupData.viteServer);
  }
  }

diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts
@@ -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,

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -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(

diff --git a/packages/astro/test/alias.test.js b/packages/astro/test/alias.test.js
@@ -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);
+ });
+ });
+});
diff --git a/packages/astro/test/fixtures/alias/astro.config.mjs b/packages/astro/test/fixtures/alias/astro.config.mjs
@@ -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' }
+ ]
+ }
+ }
+});
diff --git a/packages/astro/test/fixtures/alias/package.json b/packages/astro/test/fixtures/alias/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "@test/aliases",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "@astrojs/svelte": "workspace:*",
+ "astro": "workspace:*"
+ }
+}
diff --git a/packages/astro/test/fixtures/alias/src/components/Client.svelte b/packages/astro/test/fixtures/alias/src/components/Client.svelte
@@ -0,0 +1,2 @@
+<script></script>
+<div id="client">test</div>
diff --git a/packages/astro/test/fixtures/alias/src/pages/index.astro b/packages/astro/test/fixtures/alias/src/pages/index.astro
@@ -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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml