diff --git a/.changeset/late-toes-cry.md b/.changeset/late-toes-cry.md new file mode 100644 index 000000000000..8df9c490a341 --- /dev/null +++ b/.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 diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js index d330001c47a1..66d9449f1a24 100644 --- a/packages/kit/src/runtime/server/page/render.js +++ b/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' }; diff --git a/packages/kit/test/apps/embed/.gitignore b/packages/kit/test/apps/embed/.gitignore new file mode 100644 index 000000000000..216b07aa0731 --- /dev/null +++ b/packages/kit/test/apps/embed/.gitignore @@ -0,0 +1,2 @@ +.custom-out-dir +!.env \ No newline at end of file diff --git a/packages/kit/test/apps/embed/package.json b/packages/kit/test/apps/embed/package.json new file mode 100644 index 000000000000..914e0f83dedc --- /dev/null +++ b/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" +} diff --git a/packages/kit/test/apps/embed/playwright.config.js b/packages/kit/test/apps/embed/playwright.config.js new file mode 100644 index 000000000000..33d36b651014 --- /dev/null +++ b/packages/kit/test/apps/embed/playwright.config.js @@ -0,0 +1 @@ +export { config as default } from '../../utils.js'; diff --git a/packages/kit/test/apps/embed/src/app.html b/packages/kit/test/apps/embed/src/app.html new file mode 100644 index 000000000000..5029518c3ff0 --- /dev/null +++ b/packages/kit/test/apps/embed/src/app.html @@ -0,0 +1,2 @@ +%sveltekit.head% +
%sveltekit.body%
diff --git a/packages/kit/test/apps/embed/src/routes/+layout.svelte b/packages/kit/test/apps/embed/src/routes/+layout.svelte new file mode 100644 index 000000000000..5e1f1fed86c2 --- /dev/null +++ b/packages/kit/test/apps/embed/src/routes/+layout.svelte @@ -0,0 +1,7 @@ + + + diff --git a/packages/kit/test/apps/embed/src/routes/embed/+page.js b/packages/kit/test/apps/embed/src/routes/embed/+page.js new file mode 100644 index 000000000000..4d321641c6d4 --- /dev/null +++ b/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()) + }; +} diff --git a/packages/kit/test/apps/embed/src/routes/embed/+page.svelte b/packages/kit/test/apps/embed/src/routes/embed/+page.svelte new file mode 100644 index 000000000000..a9942193af37 --- /dev/null +++ b/packages/kit/test/apps/embed/src/routes/embed/+page.svelte @@ -0,0 +1,6 @@ + + +{@html data.a} +{@html data.b} diff --git a/packages/kit/test/apps/embed/src/routes/embed/a/+page.svelte b/packages/kit/test/apps/embed/src/routes/embed/a/+page.svelte new file mode 100644 index 000000000000..dfc5534ebd73 --- /dev/null +++ b/packages/kit/test/apps/embed/src/routes/embed/a/+page.svelte @@ -0,0 +1,5 @@ + + +

a ({browser ? 'browser' : 'server'})

diff --git a/packages/kit/test/apps/embed/src/routes/embed/b/+page.svelte b/packages/kit/test/apps/embed/src/routes/embed/b/+page.svelte new file mode 100644 index 000000000000..c9be9fcb86c4 --- /dev/null +++ b/packages/kit/test/apps/embed/src/routes/embed/b/+page.svelte @@ -0,0 +1,5 @@ + + +

b ({browser ? 'browser' : 'server'})

diff --git a/packages/kit/test/apps/embed/svelte.config.js b/packages/kit/test/apps/embed/svelte.config.js new file mode 100644 index 000000000000..6df6938653d1 --- /dev/null +++ b/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; diff --git a/packages/kit/test/apps/embed/test/test.js b/packages/kit/test/apps/embed/test/test.js new file mode 100644 index 000000000000..04efbbc66525 --- /dev/null +++ b/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)'); + } + }); +}); diff --git a/packages/kit/test/apps/embed/tsconfig.json b/packages/kit/test/apps/embed/tsconfig.json new file mode 100644 index 000000000000..a1e1e2da2142 --- /dev/null +++ b/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" +} diff --git a/packages/kit/test/apps/embed/vite.config.js b/packages/kit/test/apps/embed/vite.config.js new file mode 100644 index 000000000000..69200cdb7cd8 --- /dev/null +++ b/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d95f1d4a65a1..86bbb1fff966 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -512,6 +512,27 @@ importers: specifier: ^4.2.0 version: 4.2.0(@types/node@16.18.6) + packages/kit/test/apps/embed: + devDependencies: + '@sveltejs/kit': + specifier: workspace:^ + version: link:../../.. + cross-env: + specifier: ^7.0.3 + version: 7.0.3 + svelte: + specifier: ^3.56.0 + version: 3.56.0 + svelte-check: + specifier: ^3.0.2 + version: 3.0.2(svelte@3.56.0) + typescript: + specifier: ^4.9.4 + version: 4.9.4 + vite: + specifier: ^4.2.0 + version: 4.2.0(@types/node@16.18.6) + packages/kit/test/apps/options: devDependencies: '@sveltejs/kit': @@ -4996,7 +5017,7 @@ packages: '@typescript/twoslash': 3.1.0 '@typescript/vfs': 1.3.4 shiki: 0.10.1 - typescript: 4.9.4 + typescript: 5.0.2 transitivePeerDependencies: - supports-color dev: true