@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.21

package/src/exports/vite/build/build_server.js

@@ -1,7 +1,6 @@
-/** @import { AssetDependencies, ManifestData, SSRNode, ValidatedKitConfig } from 'types' */
+/** @import { AssetDependencies, ManifestData, ValidatedConfig } from 'types' */
 /** @import { Manifest, Rolldown } from 'vite' */
 import fs from 'node:fs';
-import { mkdirp } from '../../../utils/filesystem.js';
 import {
 	create_function_as_string,
 	filter_fonts,
@@ -16,39 +15,16 @@ import { fix_css_urls } from '../../../utils/css.js';
 import { escape_for_interpolation } from '../../../utils/escape.js';
 
 /**
- * @overload Build without the client manifest so we can analyse the nodes.
  * @param {string} out
- * @param {ValidatedKitConfig} kit
+ * @param {ValidatedConfig} kit
  * @param {ManifestData} manifest_data
  * @param {Manifest} server_manifest
- * @param {null} client_manifest
- * @param {null} assets_path
- * @param {null} client_chunks
- * @param {string} root
- * @returns {void}
- */
-/**
- * @overload Or build with the client manifest
- * @param {string} out
- * @param {ValidatedKitConfig} kit
- * @param {ManifestData} manifest_data
- * @param {Manifest} server_manifest
- * @param {Manifest} client_manifest
+ * @param {Manifest | null} client_manifest
  * @param {string} assets_path
- * @param {Rolldown.RolldownOutput['output']} client_chunks
+ * @param {(Rolldown.OutputAsset | Rolldown.OutputChunk)[]} chunks
  * @param {string} root
  * @returns {void}
  */
-/**
- * @param {string} out
- * @param {ValidatedKitConfig} kit
- * @param {ManifestData} manifest_data
- * @param {Manifest} server_manifest
- * @param {Manifest | null} client_manifest
- * @param {string | null} assets_path
- * @param {Rolldown.RolldownOutput['output'] | null} client_chunks
- * @param {string} root
- */
 export function build_server_nodes(
 	out,
 	kit,
@@ -56,11 +32,11 @@ export function build_server_nodes(
 	server_manifest,
 	client_manifest,
 	assets_path,
-	client_chunks,
+	chunks,
 	root
 ) {
-	mkdirp(`${out}/server/nodes`);
-	mkdirp(`${out}/server/stylesheets`);
+	fs.mkdirSync(`${out}/server/nodes`, { recursive: true });
+	fs.mkdirSync(`${out}/server/stylesheets`, { recursive: true });
 
 	/**
 	 * Stylesheet names and their contents which are below the inline threshold
@@ -75,8 +51,8 @@ export function build_server_nodes(
 	 */
 	let prepare_css_for_inlining = (css) => s(css);
 
-	if (client_chunks && kit.inlineStyleThreshold > 0 && kit.output.bundleStrategy === 'split') {
-		for (const chunk of client_chunks) {
+	if (chunks && kit.inlineStyleThreshold > 0 && kit.output.bundleStrategy === 'split') {
+		for (const chunk of chunks) {
 			if (chunk.type !== 'asset' || !chunk.fileName.endsWith('.css')) {
 				continue;
 			}
@@ -132,6 +108,9 @@ export function build_server_nodes(
 		}
 	}
 
+	/** path to the `.svelte-kit` directory */
+	const out_dir = normalizePath(kit.outDir);
+
 	for (let i = 0; i < manifest_data.nodes.length; i++) {
 		const node = manifest_data.nodes[i];
 
@@ -139,7 +118,7 @@ export function build_server_nodes(
 		const imports = [];
 
 		// String representation of
-		/** @type {SSRNode} */
+		/* @type {SSRNode} */
 		/** @type {string[]} */
 		const exports = [`export const index = ${i};`];
 
@@ -159,7 +138,7 @@ export function build_server_nodes(
 			? node.child_pages.some((child) => child.page_options?.ssr !== false)
 			: node.page_options?.ssr !== false;
 
-		if (node.component && client_manifest && uses_server_component) {
+		if (node.component && uses_server_component) {
 			exports.push(
 				'let component_cache;',
 				`export const component = async () => component_cache ??= (await import('../${
@@ -169,7 +148,12 @@ export function build_server_nodes(
 		}
 
 		if (node.universal) {
-			if (!!node.page_options && node.page_options.ssr === false) {
+			if (
+				(kit.router.type === 'hash' &&
+					node.page_options !== null &&
+					node.page_options?.ssr === undefined) ||
+				(node.page_options && node.page_options.ssr === false)
+			) {
 				exports.push(`export const universal = ${s(node.page_options, null, 2)};`);
 			} else {
 				imports.push(
@@ -189,18 +173,7 @@ export function build_server_nodes(
 			exports.push(`export const server_id = ${s(node.server)};`);
 		}
 
-		if (
-			client_manifest &&
-			(node.universal || node.component) &&
-			kit.output.bundleStrategy === 'split'
-		) {
-			const entry_path = `${normalizePath(kit.outDir)}/generated/client-optimized/nodes/${i}.js`;
-			const entry = find_deps(client_manifest, entry_path, true, root);
-
-			// Eagerly load client stylesheets and fonts imported by the SSR-ed page to avoid FOUC.
-			// However, if it is not used during SSR (not present in the server manifest),
-			// then it can be lazily loaded in the browser.
-
+		if ((node.universal || node.component) && kit.output.bundleStrategy === 'split') {
 			/** @type {AssetDependencies | undefined} */
 			let component;
 			if (node.component) {
@@ -213,25 +186,41 @@ export function build_server_nodes(
 				universal = find_deps(server_manifest, node.universal, true, root);
 			}
 
-			/** @type {Set<string>} */
-			const eager_css = new Set();
+			if (client_manifest) {
+				const entry_path = `${out_dir}/generated/client-optimized/nodes/${i}.js`;
+				const entry = find_deps(client_manifest, entry_path, true, root);
 
-			entry.stylesheet_map.forEach((value, filepath) => {
-				// pages and layouts are renamed to node indexes when optimised for the client
-				// so we use the original filename instead to check against the server manifest
-				if (filepath === entry_path) {
-					filepath = node.component ?? filepath;
-				}
+				// Eagerly load client stylesheets and fonts imported by the SSR-ed page to avoid FOUC.
+				// However, if it is not used during SSR (not present in the server manifest),
+				// then it can be lazily loaded in the browser.
 
-				if (component?.stylesheet_map.has(filepath) || universal?.stylesheet_map.has(filepath)) {
-					value.css.forEach((file) => eager_css.add(file));
-					value.assets.forEach((file) => eager_assets.add(file));
-				}
-			});
+				/** @type {Set<string>} */
+				const eager_css = new Set();
 
-			imported = entry.imports;
-			stylesheets = Array.from(eager_css);
-			fonts = filter_fonts(Array.from(eager_assets));
+				entry.stylesheet_map.forEach((value, filepath) => {
+					// pages and layouts are renamed to node indexes when optimised for the client
+					// so we use the original filename instead to check against the server manifest
+					if (filepath === entry_path) {
+						filepath = node.component ?? filepath;
+					}
+
+					if (component?.stylesheet_map.has(filepath) || universal?.stylesheet_map.has(filepath)) {
+						value.css.forEach((file) => eager_css.add(file));
+						value.assets.forEach((file) => eager_assets.add(file));
+					}
+				});
+
+				imported = entry.imports;
+				stylesheets = Array.from(eager_css);
+				fonts = filter_fonts(Array.from(eager_assets));
+			} else {
+				for (const entry of [component, universal]) {
+					if (!entry) continue;
+					imported.push(...entry.imports);
+					stylesheets.push(...entry.stylesheets);
+					fonts.push(...entry.fonts);
+				}
+			}
 		}
 
 		exports.push(
@@ -248,7 +237,7 @@ export function build_server_nodes(
 
 		// Keep track of Vite asset filenames so that we avoid touching unrelated ones
 		// when adjusting the inlined CSS
-		if (stylesheets_to_inline.size && assets_path && eager_assets.size) {
+		if (stylesheets_to_inline.size && eager_assets.size) {
 			vite_assets = new Set(
 				Array.from(eager_assets).map((asset) => {
 					return decodeURIComponent(asset.replace(`${assets_path}/`, ''));

package/src/exports/vite/build/remote.js

@@ -11,22 +11,27 @@ import { posixify } from '../../../utils/os.js';
  * @param {typeof import('vite')} vite
  * @param {string} out
  * @param {Array<{ hash: string, file: string }>} remotes
+ * @param {Map<string, string>} remote_original_by_hash
  * @param {ServerMetadata} metadata
  * @param {string} cwd
- * @param {Rolldown.RolldownOutput} server_bundle
+ * @param {(Rolldown.OutputAsset | Rolldown.OutputChunk)[]} server_chunks
  * @param {NonNullable<import('vitest/config').ViteUserConfig['build']>['sourcemap']} sourcemap
  */
 export async function treeshake_prerendered_remotes(
 	vite,
 	out,
 	remotes,
+	remote_original_by_hash,
 	metadata,
 	cwd,
-	server_bundle,
+	server_chunks,
 	sourcemap
 ) {
 	if (remotes.length === 0) return;
 
+	/** @type {string[]} */
+	const chunk_paths = [];
+
 	for (const remote of remotes) {
 		const exports_map = metadata.remotes.get(remote.hash);
 		if (!exports_map) continue;
@@ -42,11 +47,11 @@ export async function treeshake_prerendered_remotes(
 
 		if (prerendered.length === 0) continue; // nothing to treeshake
 
-		// remove file extension
-		const remote_filename = path.basename(remote.file).split('.').slice(0, -1).join('.');
+		const original_id = remote_original_by_hash.get(remote.hash);
+		if (!original_id) continue;
 
-		const remote_chunk = Object.values(server_bundle).find((chunk) => {
-			return chunk.name === remote_filename;
+		const remote_chunk = server_chunks.find((chunk) => {
+			return chunk.type === 'chunk' && chunk.moduleIds.includes(original_id);
 		});
 
 		if (!remote_chunk) continue;
@@ -88,8 +93,13 @@ export async function treeshake_prerendered_remotes(
 
 		const stubbed = modified_code.toString();
 		fs.writeFileSync(chunk_path, stubbed);
+		chunk_paths.push(chunk_path);
+	}
 
-		const bundle = /** @type {import('vite').Rolldown.RolldownOutput} */ (
+	if (!chunk_paths.length) return;
+
+	for (const chunk_path of chunk_paths) {
+		const bundle = /** @type {Rolldown.RolldownOutput} */ (
 			await vite.build({
 				configFile: false,
 				build: {
@@ -97,7 +107,7 @@ export async function treeshake_prerendered_remotes(
 					ssr: true,
 					target: 'esnext',
 					sourcemap,
-					rollupOptions: {
+					rolldownOptions: {
 						// avoid resolving imports
 						external: (id) => !id.endsWith(chunk_path),
 						input: {
@@ -108,17 +118,12 @@ export async function treeshake_prerendered_remotes(
 			})
 		);
 
-		const chunk = bundle.output.find(
-			(output) => output.type === 'chunk' && output.name === 'treeshaken'
-		);
-		if (chunk && chunk.type === 'chunk') {
-			fs.writeFileSync(chunk_path, chunk.code);
-
-			const chunk_sourcemap = bundle.output.find(
-				(output) => output.type === 'asset' && output.fileName === chunk.fileName + '.map'
-			);
-			if (chunk_sourcemap && chunk_sourcemap.type === 'asset') {
-				fs.writeFileSync(chunk_path + '.map', chunk_sourcemap.source);
+		// the only possible outputs are the treeshaken chunk and, with sourcemaps, its map
+		for (const output of bundle.output) {
+			if (output.type === 'chunk') {
+				fs.writeFileSync(chunk_path, output.code);
+			} else {
+				fs.writeFileSync(chunk_path + '.map', output.source);
 			}
 		}
 	}

package/src/exports/vite/build/utils.js

@@ -124,14 +124,6 @@ export function filter_fonts(assets) {
 	return assets.filter((asset) => /\.(woff2?|ttf|otf)$/.test(asset));
 }
 
-/**
- * @param {import('types').ValidatedKitConfig} config
- * @returns {string}
- */
-export function assets_base(config) {
-	return (config.paths.assets || config.paths.base || '.') + '/';
-}
-
 /**
  * Writes a function with arguments used by a template literal.
  * This helps us store strings in a module and inject values at runtime.