feat: statically analyse universal pages and layouts v3

.changeset/forty-weeks-arrive.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: allow running client-side code at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals

.changeset/weak-snails-decide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: remove component code from server nodes that are never used for SSR

documentation/docs/20-core-concepts/40-page-options.md

@@ -127,7 +127,7 @@ export const ssr = false;
 
 If you add `export const ssr = false` to your root `+layout.js`, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.
 
-> [!NOTE] Even with `ssr` set to `false`, code that relies on browser APIs should be imported in your `+page.svelte` or `+layout.svelte` file instead. This is because page options can be overriden and need to be evaluated by importing your `+page.js` or `+layout.js` file on the server (if you have a runtime) or at build time (in case of prerendering).
+> [!NOTE] If all your page options are boolean or string literal values, SvelteKit will evaluate them statically. If not, it will import your `+page.js` or `+layout.js` file on the server (both at build time, and at runtime if your app isn't fully static) so it can evaluate the options. In the second case, browser-only code must not run when the module is loaded. In practice, this means you should import browser-only code in your `+page.svelte` or `+layout.svelte` file instead.
 
 ## csr
 

packages/kit/package.json

@@ -18,7 +18,9 @@
 	"homepage": "https://svelte.dev",
 	"type": "module",
 	"dependencies": {
+		"@sveltejs/acorn-typescript": "^1.0.5",
 		"@types/cookie": "^0.6.0",
+		"acorn": "^8.14.1",
 		"cookie": "^0.6.0",
 		"devalue": "^5.1.0",
 		"esm-env": "^1.2.2",

packages/kit/src/exports/vite/build/build_server.js

@@ -3,7 +3,8 @@ import { mkdirp } from '../../../utils/filesystem.js';
 import { filter_fonts, find_deps, resolve_symlinks } from './utils.js';
 import { s } from '../../../utils/misc.js';
 import { normalizePath } from 'vite';
-import { basename } from 'node:path';
+import { basename, join } from 'node:path';
+import { create_static_analyser } from '../static_analysis/index.js';
 
 /**
  * @param {string} out
@@ -14,7 +15,7 @@ import { basename } from 'node:path';
  * @param {import('vite').Rollup.OutputAsset[] | null} css
  * @param {import('types').RecursiveRequired<import('types').ValidatedConfig['kit']['output']>} output_config
  */
-export function build_server_nodes(out, kit, manifest_data, server_manifest, client_manifest, css, output_config) {
+export async function build_server_nodes(out, kit, manifest_data, server_manifest, client_manifest, css, output_config) {
 	mkdirp(`${out}/server/nodes`);
 	mkdirp(`${out}/server/stylesheets`);
 
@@ -73,7 +74,14 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 		}
 	}
 
-	manifest_data.nodes.forEach((node, i) => {
+	const { get_page_options } = create_static_analyser(async (server_node) => {
+		// Windows needs the file:// protocol for absolute path dynamic imports
+		return import(`file://${join(out, 'server', resolve_symlinks(server_manifest, server_node).chunk.file)}`);
+	});
+
+	for (let i = 0; i < manifest_data.nodes.length; i++) {
+		const node = manifest_data.nodes[i];
+
 		/** @type {string[]} */
 		const imports = [];
 
@@ -101,12 +109,16 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 		}
 
 		if (node.universal) {
-			imports.push(
-				`import * as universal from '../${
-					resolve_symlinks(server_manifest, node.universal).chunk.file
-				}';`
-			);
-			exports.push('export { universal };');
+			const page_options = await get_page_options(node);
+			if (!!page_options && page_options.ssr === false) {
+				exports.push(`export const universal = ${s(page_options, null, 2)};`)
+			} else {
+				imports.push(
+					`import * as universal from '../${resolve_symlinks(server_manifest, node.universal).chunk.file}';`
+				);
+				// TODO: when building for analysis, explain why the file was loaded on the server if we fail to load it
+				exports.push('export { universal };');
+			}
 			exports.push(`export const universal_id = ${s(node.universal)};`);
 		}
 
@@ -186,5 +198,5 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
 			`${out}/server/nodes/${i}.js`,
 			`${imports.join('\n')}\n\n${exports.join('\n')}\n`
 		);
-	});
+	}
 }

packages/kit/src/exports/vite/dev/index.js

@@ -19,6 +19,7 @@ import { not_found } from '../utils.js';
 import { SCHEME } from '../../../utils/url.js';
 import { check_feature } from '../../../utils/features.js';
 import { escape_html } from '../../../utils/escape.js';
+import { create_static_analyser } from '../static_analysis/index.js';
 
 const cwd = process.cwd();
 // vite-specifc queries that we should skip handling for css urls
@@ -101,6 +102,9 @@ export async function dev(vite, vite_config, svelte_config) {
 		return { module, module_node, url };
 	}
 
+	/** @type {(file: string) => void} */
+	let invalidate_page_options;
+
 	function update_manifest() {
 		try {
 			({ manifest_data } = sync.create(svelte_config));
@@ -124,6 +128,12 @@ export async function dev(vite, vite_config, svelte_config) {
 			return;
 		}
 
+		const static_analyser = create_static_analyser(async (server_node) => {
+			const { module } = await resolve(server_node);
+			return module;
+		});
+		invalidate_page_options = static_analyser.invalidate_page_options;
+
 		manifest = {
 			appDir: svelte_config.kit.appDir,
 			appPath: svelte_config.kit.appDir,
@@ -202,9 +212,15 @@ export async function dev(vite, vite_config, svelte_config) {
 						}
 
 						if (node.universal) {
-							const { module, module_node } = await resolve(node.universal);
-							module_nodes.push(module_node);
-							result.universal = module;
+							const page_options = await static_analyser.get_page_options(node);
+							if (page_options?.ssr === false) {
+								result.universal = page_options;
+							} else {
+								// TODO: explain why the file was loaded on the server if we fail to load it
+								const { module, module_node } = await resolve(node.universal);
+								module_nodes.push(module_node);
+								result.universal = module;
+							}
 						}
 
 						if (node.server) {
@@ -344,6 +360,7 @@ export async function dev(vite, vite_config, svelte_config) {
 		if (timeout || restarting) return;
 
 		sync.update(svelte_config, manifest_data, file);
+		invalidate_page_options(path.relative(cwd, file));
 	});
 
 	const { appTemplate, errorTemplate, serviceWorker, hooks } = svelte_config.kit.files;

packages/kit/src/exports/vite/index.js

@@ -821,7 +821,7 @@ Tips:
 				// first, build server nodes without the client manifest so we can analyse it
 				log.info('Analysing routes');
 
-				build_server_nodes(
+				await build_server_nodes(
 					out,
 					kit,
 					manifest_data,
@@ -983,7 +983,7 @@ Tips:
 				);
 
 				// regenerate nodes with the client manifest...
-				build_server_nodes(
+				await build_server_nodes(
 					out,
 					kit,
 					manifest_data,