diff --git a/.changeset/tiny-donuts-own.md b/.changeset/tiny-donuts-own.md new file mode 100644 index 000000000000..9afdd508291f --- /dev/null +++ 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 index 98278f72a021..7639a9f183a8 100644 --- 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 index 9b8aaf929265..56546637de10 100644 --- 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 index 9a46cb9c7382..0d468a9d362a 100644 --- 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 { 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 new file mode 100644 index 000000000000..de0a1de4fcfb --- /dev/null +++ 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 new file mode 100644 index 000000000000..c355cd08a8f1 --- /dev/null +++ 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 new file mode 100644 index 000000000000..1390fe040184 --- /dev/null +++ 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 new file mode 100644 index 000000000000..2450d326aac4 --- /dev/null +++ b/packages/astro/test/fixtures/alias/src/components/Client.svelte @@ -0,0 +1,2 @@ + +
test
diff --git a/packages/astro/test/fixtures/alias/src/pages/index.astro b/packages/astro/test/fixtures/alias/src/pages/index.astro new file mode 100644 index 000000000000..7c9865d5de3e --- /dev/null +++ b/packages/astro/test/fixtures/alias/src/pages/index.astro @@ -0,0 +1,25 @@ +--- +import Client from 'component:Client.svelte' +--- + + + + + Svelte Client + + + +
+ +
+ + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 497caf7305db..9b4facf0d316 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: