fix: allow embedding two pages generated into the same page in "embedded" mode (#9610)

* added route leaf hash to global init namespace

* changeset

* update changelog message

* revert leaf hash commit

* updated with latest suggestions

* workong on test case

* added int test for two embedded pages inlined into the same page

* Update .changeset/late-toes-cry.md

Co-authored-by: Ben McCann <[email protected]>

* lint

* delete test html pages

* updated test case

* update lockfile

* simplify embed tests

* remove some unused files

* fix tsconfig

* alphabetize

* prettier

* think i fixed it

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

.changeset/late-toes-cry.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: allow embedding two pages generated into the same page in "embedded" mode

packages/kit/src/runtime/server/page/render.js

@@ -292,10 +292,9 @@ export async function render_response({
 		const blocks = [];
 
 		const properties = [
-			`env: ${s(public_env)}`,
 			paths.assets && `assets: ${s(paths.assets)}`,
 			`base: ${base_expression}`,
-			`element: document.currentScript.parentElement`
+			`env: ${s(public_env)}`
 		].filter(Boolean);
 
 		if (chunks) {
@@ -318,7 +317,9 @@ export async function render_response({
 						${properties.join(',\n\t\t\t\t\t\t')}
 					};`);
 
-		const args = [`app`, `${global}.element`];
+		const args = [`app`, `element`];
+
+		blocks.push(`const element = document.currentScript.parentElement;`);
 
 		if (page_config.ssr) {
 			const serialized = { form: 'null', error: 'null' };

packages/kit/test/apps/embed/.gitignore

@@ -0,0 +1,2 @@
+.custom-out-dir
+!.env

packages/kit/test/apps/embed/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "test-options",
+	"private": true,
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && tsc && svelte-check",
+		"test": "pnpm test:dev && pnpm test:build",
+		"test:dev": "cross-env DEV=true playwright test",
+		"test:build": "playwright test"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "workspace:^",
+		"cross-env": "^7.0.3",
+		"svelte": "^3.56.0",
+		"svelte-check": "^3.0.2",
+		"typescript": "^4.9.4",
+		"vite": "^4.2.0"
+	},
+	"type": "module"
+}

packages/kit/test/apps/embed/playwright.config.js

@@ -0,0 +1 @@
+export { config as default } from '../../utils.js';

packages/kit/test/apps/embed/src/app.html

@@ -0,0 +1,2 @@
+%sveltekit.head%
+<div>%sveltekit.body%</div>

packages/kit/test/apps/embed/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { setup } from '../../../../setup.js';
+
+	setup();
+</script>
+
+<slot />

packages/kit/test/apps/embed/src/routes/embed/+page.js

@@ -0,0 +1,7 @@
+/** @type {import('@sveltejs/kit').Load} */
+export async function load({ fetch }) {
+	return {
+		a: fetch('/embed/a').then((x) => x.text()),
+		b: fetch('/embed/b').then((x) => x.text())
+	};
+}

packages/kit/test/apps/embed/src/routes/embed/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let data;
+</script>
+
+{@html data.a}
+{@html data.b}

packages/kit/test/apps/embed/src/routes/embed/a/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { browser } from '$app/environment';
+</script>
+
+<h2 data-testid="a">a ({browser ? 'browser' : 'server'})</h2>

packages/kit/test/apps/embed/src/routes/embed/b/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import { browser } from '$app/environment';
+</script>
+
+<h2 data-testid="b">b ({browser ? 'browser' : 'server'})</h2>

packages/kit/test/apps/embed/svelte.config.js

@@ -0,0 +1,8 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		embedded: true
+	}
+};
+
+export default config;

packages/kit/test/apps/embed/test/test.js

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test';
+import { test } from '../../../utils.js';
+
+/** @typedef {import('@playwright/test').Response} Response */
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('embed', () => {
+	test('serves embedded components in page', async ({ page, javaScriptEnabled }) => {
+		await page.goto('/embed');
+
+		if (javaScriptEnabled) {
+			expect(await page.textContent('[data-testid="a"]')).toBe('a (browser)');
+			expect(await page.textContent('[data-testid="b"]')).toBe('b (browser)');
+		} else {
+			expect(await page.textContent('[data-testid="a"]')).toBe('a (server)');
+			expect(await page.textContent('[data-testid="b"]')).toBe('b (server)');
+		}
+	});
+});

packages/kit/test/apps/embed/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"paths": {
+			"@sveltejs/kit": ["../../../types"],
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"],
+			"types": ["../../../types/internal"]
+		},
+		"resolveJsonModule": true
+	},
+	"extends": "./.svelte-kit/tsconfig.json"
+}

packages/kit/test/apps/embed/vite.config.js

@@ -0,0 +1,18 @@
+import * as path from 'node:path';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	clearScreen: false,
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			allow: [path.resolve('../../../src')]
+		}
+	}
+};
+
+export default config;