Support alias use with hydration scripts (#3376)

* Support alias use with hydration scripts * Adds a changeset * Updated lockfile
withastro · 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