From 504c383e20dfb5d8eb0825a70935f221b43577b2 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 26 Jul 2024 13:54:10 -0400
Subject: [PATCH] Fix server islands with trailingSlash: always (#11529)

* Fix server islands with trailingSlash: always

* Fix test missing trailingslash

* Prepend base to the server island URL

* Add tests for base
---
 .changeset/wicked-books-sip.md                            | 5 +++++
 .../astro/e2e/fixtures/server-islands/astro.config.mjs    | 2 ++
 packages/astro/e2e/server-islands.test.js                 | 8 ++++----
 packages/astro/src/@types/astro.ts                        | 2 ++
 packages/astro/src/core/render-context.ts                 | 2 ++
 .../astro/src/runtime/server/render/server-islands.ts     | 3 ++-
 6 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/wicked-books-sip.md

diff --git a/.changeset/wicked-books-sip.md b/.changeset/wicked-books-sip.md
new file mode 100644
index 0000000000..d6e4741a56
--- /dev/null
+++ b/.changeset/wicked-books-sip.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix server islands with trailingSlash: always
diff --git a/packages/astro/e2e/fixtures/server-islands/astro.config.mjs b/packages/astro/e2e/fixtures/server-islands/astro.config.mjs
index f03c53335d..4bec97b9e1 100644
--- a/packages/astro/e2e/fixtures/server-islands/astro.config.mjs
+++ b/packages/astro/e2e/fixtures/server-islands/astro.config.mjs
@@ -5,9 +5,11 @@ import nodejs from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
+	base: '/base',
 	output: 'hybrid',
 	adapter: nodejs({ mode: 'standalone' }),
 	integrations: [react(), mdx()],
+	trailingSlash: 'always',
 	experimental: {
 		serverIslands: true,
 	}
diff --git a/packages/astro/e2e/server-islands.test.js b/packages/astro/e2e/server-islands.test.js
index 1479b807b1..5f29acf609 100644
--- a/packages/astro/e2e/server-islands.test.js
+++ b/packages/astro/e2e/server-islands.test.js
@@ -16,7 +16,7 @@ test.describe('Server islands', () => {
 		});
 
 		test('Load content from the server', async ({ page, astro }) => {
-			await page.goto(astro.resolveUrl('/'));
+			await page.goto(astro.resolveUrl('/base/'));
 			let el = page.locator('#island');
 
 			await expect(el, 'element rendered').toBeVisible();
@@ -24,7 +24,7 @@ test.describe('Server islands', () => {
 		});
 
 		test('Can be in an MDX file', async ({ page, astro }) => {
-			await page.goto(astro.resolveUrl('/mdx'));
+			await page.goto(astro.resolveUrl('/base/mdx/'));
 			let el = page.locator('#island');
 
 			await expect(el, 'element rendered').toBeVisible();
@@ -32,7 +32,7 @@ test.describe('Server islands', () => {
 		});
 
 		test('Slots are provided back to the server islands', async ({ page, astro }) => {
-			await page.goto(astro.resolveUrl('/'));
+			await page.goto(astro.resolveUrl('/base/'));
 			let el = page.locator('#children');
 
 			await expect(el, 'element rendered').toBeVisible();
@@ -55,7 +55,7 @@ test.describe('Server islands', () => {
 		});
 
 		test('Only one component in prod', async ({ page, astro }) => {
-			await page.goto(astro.resolveUrl('/'));
+			await page.goto(astro.resolveUrl('/base/'));
 
 			let el = page.locator('#island');
 
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index f11d708f1b..20eb91f638 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -3324,6 +3324,7 @@ export interface SSRResult {
 	 * Whether the page has failed with a non-recoverable error, or the client disconnected.
 	 */
 	cancelled: boolean;
+	base: string;
 	styles: Set<SSRElement>;
 	scripts: Set<SSRElement>;
 	links: Set<SSRElement>;
@@ -3352,6 +3353,7 @@ export interface SSRResult {
 	pathname: string;
 	cookies: AstroCookies | undefined;
 	serverIslandNameMap: Map<string, string>;
+	trailingSlash: AstroConfig['trailingSlash'];
 	_metadata: SSRMetadata;
 }
 
diff --git a/packages/astro/src/core/render-context.ts b/packages/astro/src/core/render-context.ts
index bc97212a86..902ba0fc23 100644
--- a/packages/astro/src/core/render-context.ts
+++ b/packages/astro/src/core/render-context.ts
@@ -347,6 +347,7 @@ export class RenderContext {
 		// This object starts here as an empty shell (not yet the result) but then
 		// calling the render() function will populate the object with scripts, styles, etc.
 		const result: SSRResult = {
+			base: manifest.base,
 			cancelled: false,
 			clientDirectives,
 			inlinedScripts,
@@ -368,6 +369,7 @@ export class RenderContext {
 			styles,
 			actionResult,
 			serverIslandNameMap: manifest.serverIslandNameMap ?? new Map(),
+			trailingSlash: manifest.trailingSlash,
 			_metadata: {
 				hasHydrationScript: false,
 				rendererSpecificHydrationScripts: new Set(),
diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts
index 52b6b006e1..9a27fed51a 100644
--- a/packages/astro/src/runtime/server/render/server-islands.ts
+++ b/packages/astro/src/runtime/server/render/server-islands.ts
@@ -60,6 +60,7 @@ export function renderServerIsland(
 			}
 
 			const hostId = crypto.randomUUID();
+			const serverIslandUrl = `${result.base}_server-islands/${componentId}${result.trailingSlash === 'always' ? '/' : ''}`;
 
 			destination.write(`<script async type="module" data-island-id="${hostId}">
 let componentId = ${safeJsonStringify(componentId)};
@@ -71,7 +72,7 @@ let data = {
 	slots: ${safeJsonStringify(renderedSlots)},
 };
 
-let response = await fetch('/_server-islands/${componentId}', {
+let response = await fetch('${serverIslandUrl}', {
 	method: 'POST',
 	body: JSON.stringify(data),
 });