@sveltejs/kit 1.0.0-next.50 → 1.0.0-next.501

package/src/core/sync/write_client_manifest.js

@@ -0,0 +1,106 @@
+import { relative } from 'path';
+import { posixify, resolve_entry } from '../../utils/filesystem.js';
+import { s } from '../../utils/misc.js';
+import { trim, write_if_changed } from './utils.js';
+
+/**
+ * Writes the client manifest to disk. The manifest is used to power the router. It contains the
+ * list of routes and corresponding Svelte components (i.e. pages and layouts).
+ * @param {import('types').ValidatedConfig} config
+ * @param {import('types').ManifestData} manifest_data
+ * @param {string} output
+ */
+export function write_client_manifest(config, manifest_data, output) {
+	/**
+	 * Creates a module that exports a `CSRPageNode`
+	 * @param {import('types').PageNode} node
+	 */
+	function generate_node(node) {
+		const declarations = [];
+
+		if (node.shared) {
+			declarations.push(
+				`import * as shared from ${s(relative(`${output}/nodes`, node.shared))};`,
+				`export { shared };`
+			);
+		}
+
+		if (node.component) {
+			declarations.push(
+				`export { default as component } from ${s(relative(`${output}/nodes`, node.component))};`
+			);
+		}
+
+		if (node.server) {
+			declarations.push(`export const server = true;`);
+		}
+
+		return declarations.join('\n');
+	}
+
+	const nodes = manifest_data.nodes
+		.map((node, i) => {
+			write_if_changed(`${output}/nodes/${i}.js`, generate_node(node));
+			return `() => import('./nodes/${i}')`;
+		})
+		.join(',\n\t');
+
+	const layouts_with_server_load = new Set();
+
+	const dictionary = `{
+		${manifest_data.routes
+			.map((route) => {
+				if (route.page) {
+					const errors = route.page.errors.slice(1).map((n) => n ?? '');
+					const layouts = route.page.layouts.slice(1).map((n) => n ?? '');
+
+					while (layouts.at(-1) === '') layouts.pop();
+					while (errors.at(-1) === '') errors.pop();
+
+					// Encode whether or not the route uses server data
+					// using the ones' complement, to save space
+					const array = [`${route.leaf?.server ? '~' : ''}${route.page.leaf}`];
+					// Encode whether or not the layout uses server data.
+					// It's a different method compared to pages because layouts
+					// are reused across pages, so we safe space by doing it this way.
+					route.page.layouts.forEach((layout) => {
+						if (layout != undefined && manifest_data.nodes[layout].server) {
+							layouts_with_server_load.add(layout);
+						}
+					});
+
+					// only include non-root layout/error nodes if they exist
+					if (layouts.length > 0 || errors.length > 0) array.push(`[${layouts.join(',')}]`);
+					if (errors.length > 0) array.push(`[${errors.join(',')}]`);
+
+					return `${s(route.id)}: [${array.join(',')}]`;
+				}
+			})
+			.filter(Boolean)
+			.join(',\n\t\t')}
+	}`.replace(/^\t/gm, '');
+
+	const hooks_file = resolve_entry(config.kit.files.hooks.client);
+
+	// String representation of __GENERATED__/client-manifest.js
+	write_if_changed(
+		`${output}/client-manifest.js`,
+		trim(`
+			${hooks_file ? `import * as client_hooks from '${posixify(relative(output, hooks_file))}';` : ''}
+
+			export { matchers } from './client-matchers.js';
+
+			export const nodes = [${nodes}];
+
+			export const server_loads = [${[...layouts_with_server_load].join(',')}];
+
+			export const dictionary = ${dictionary};
+
+			export const hooks = {
+				handleError: ${
+					hooks_file ? 'client_hooks.handleError || ' : ''
+				}(({ error }) => { console.error(error) }),
+			};
+		`)
+	);
+}

package/src/core/sync/write_matchers.js

@@ -0,0 +1,25 @@
+import path from 'path';
+import { s } from '../../utils/misc.js';
+import { write_if_changed } from './utils.js';
+
+/**
+ * @param {import('types').ManifestData} manifest_data
+ * @param {string} output
+ */
+export function write_matchers(manifest_data, output) {
+	const imports = [];
+	const matchers = [];
+
+	for (const key in manifest_data.matchers) {
+		const src = manifest_data.matchers[key];
+
+		imports.push(`import { match as ${key} } from ${s(path.relative(output, src))};`);
+		matchers.push(key);
+	}
+
+	const module = imports.length
+		? `${imports.join('\n')}\n\nexport const matchers = { ${matchers.join(', ')} };`
+		: 'export const matchers = {};';
+
+	write_if_changed(`${output}/client-matchers.js`, module);
+}

package/src/core/sync/write_root.js

@@ -0,0 +1,91 @@
+import { trim, write_if_changed } from './utils.js';
+
+/**
+ * @param {import('types').ManifestData} manifest_data
+ * @param {string} output
+ */
+export function write_root(manifest_data, output) {
+	// TODO remove default layout altogether
+
+	const max_depth = Math.max(
+		...manifest_data.routes.map((route) =>
+			route.page ? route.page.layouts.filter(Boolean).length + 1 : 0
+		),
+		1
+	);
+
+	const levels = [];
+	for (let i = 0; i <= max_depth; i += 1) {
+		levels.push(i);
+	}
+
+	let l = max_depth;
+
+	let pyramid = `<svelte:component this={components[${l}]} data={data_${l}} {form} />`;
+
+	while (l--) {
+		pyramid = `
+			{#if components[${l + 1}]}
+				<svelte:component this={components[${l}]} data={data_${l}}>
+					${pyramid.replace(/\n/g, '\n\t\t\t\t\t')}
+				</svelte:component>
+			{:else}
+				<svelte:component this={components[${l}]} data={data_${l}} {form} />
+			{/if}
+		`
+			.replace(/^\t\t\t/gm, '')
+			.trim();
+	}
+
+	write_if_changed(
+		`${output}/root.svelte`,
+		trim(`
+			<!-- This file is generated by @sveltejs/kit — do not edit it! -->
+			<script>
+				import { setContext, afterUpdate, onMount } from 'svelte';
+				import { browser } from '$app/environment';
+
+				// stores
+				export let stores;
+				export let page;
+
+				export let components;
+				export let form;
+				${levels.map((l) => `export let data_${l} = null;`).join('\n\t\t\t\t')}
+
+				if (!browser) {
+					setContext('__svelte__', stores);
+				}
+
+				$: stores.page.set(page);
+				afterUpdate(stores.page.notify);
+
+				let mounted = false;
+				let navigated = false;
+				let title = null;
+
+				onMount(() => {
+					const unsubscribe = stores.page.subscribe(() => {
+						if (mounted) {
+							navigated = true;
+							title = document.title || 'untitled page';
+						}
+					});
+
+					mounted = true;
+					return unsubscribe;
+				});
+			</script>
+
+			${pyramid.replace(/\n/g, '\n\t\t\t')}
+
+			{#if mounted}
+				<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">
+					{#if navigated}
+						{title}
+					{/if}
+				</div>
+			{/if}
+		`)
+	);
+}

package/src/core/sync/write_tsconfig.js

@@ -0,0 +1,195 @@
+import fs from 'fs';
+import path from 'path';
+import colors from 'kleur';
+import { posixify } from '../../utils/filesystem.js';
+import { write_if_changed } from './utils.js';
+
+/**
+ * @param {string} cwd
+ * @param {string} file
+ */
+function maybe_file(cwd, file) {
+	const resolved = path.resolve(cwd, file);
+	if (fs.existsSync(resolved)) {
+		return resolved;
+	}
+}
+
+/**
+ * @param {string} file
+ */
+function project_relative(file) {
+	return posixify(path.relative('.', file));
+}
+
+/**
+ * @param {string} file
+ */
+function remove_trailing_slashstar(file) {
+	if (file.endsWith('/*')) {
+		return file.slice(0, -2);
+	} else {
+		return file;
+	}
+}
+
+/**
+ * Writes the tsconfig that the user's tsconfig inherits from.
+ * @param {import('types').ValidatedKitConfig} config
+ */
+export function write_tsconfig(config, cwd = process.cwd()) {
+	const out = path.join(config.outDir, 'tsconfig.json');
+	const user_file = maybe_file(cwd, 'tsconfig.json') || maybe_file(cwd, 'jsconfig.json');
+
+	if (user_file) validate(config, cwd, out, user_file);
+
+	/** @param {string} file */
+	const config_relative = (file) => posixify(path.relative(config.outDir, file));
+
+	const include = ['ambient.d.ts', config_relative('vite.config.ts')];
+	for (const dir of [config.files.routes, config.files.lib]) {
+		const relative = project_relative(path.dirname(dir));
+		include.push(config_relative(`${relative}/**/*.js`));
+		include.push(config_relative(`${relative}/**/*.ts`));
+		include.push(config_relative(`${relative}/**/*.svelte`));
+	}
+	// Test folder is a special case - we advocate putting tests in a top-level test folder
+	// and it's not configurable (should we make it?)
+	const test_folder = project_relative('tests');
+	include.push(config_relative(`${test_folder}/**/*.js`));
+	include.push(config_relative(`${test_folder}/**/*.ts`));
+	include.push(config_relative(`${test_folder}/**/*.svelte`));
+
+	write_if_changed(
+		out,
+		JSON.stringify(
+			{
+				compilerOptions: {
+					// generated options
+					baseUrl: config_relative('.'),
+					paths: get_tsconfig_paths(config),
+					rootDirs: [config_relative('.'), './types'],
+
+					// essential options
+					// svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+					// to enforce using \`import type\` instead of \`import\` for Types.
+					importsNotUsedAsValues: 'error',
+					// Vite compiles modules one at a time
+					isolatedModules: true,
+					// TypeScript doesn't know about import usages in the template because it only sees the
+					// script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
+					preserveValueImports: true,
+
+					// This is required for svelte-package to work as expected
+					// Can be overwritten
+					lib: ['esnext', 'DOM', 'DOM.Iterable'],
+					moduleResolution: 'node',
+					module: 'esnext',
+					target: 'esnext'
+				},
+				include,
+				exclude: [config_relative('node_modules/**'), './[!ambient.d.ts]**']
+			},
+			null,
+			'\t'
+		)
+	);
+}
+
+/**
+ * @param {import('types').ValidatedKitConfig} config
+ * @param {string} cwd
+ * @param {string} out
+ * @param {string} user_file
+ */
+function validate(config, cwd, out, user_file) {
+	// we have to eval the file, since it's not parseable as JSON (contains comments)
+	const user_tsconfig_json = fs.readFileSync(user_file, 'utf-8');
+	const user_tsconfig = (0, eval)(`(${user_tsconfig_json})`);
+
+	// we need to check that the user's tsconfig extends the framework config
+	const extend = user_tsconfig.extends;
+	const extends_framework_config = extend && path.resolve(cwd, extend) === out;
+
+	const kind = path.basename(user_file);
+
+	if (extends_framework_config) {
+		const { paths: user_paths } = user_tsconfig.compilerOptions || {};
+
+		if (user_paths && fs.existsSync(config.files.lib)) {
+			/** @type {string[]} */
+			const lib = user_paths['$lib'] || [];
+			/** @type {string[]} */
+			const lib_ = user_paths['$lib/*'] || [];
+
+			const missing_lib_paths =
+				!lib.some((relative) => path.resolve(cwd, relative) === config.files.lib) ||
+				!lib_.some((relative) => path.resolve(cwd, relative) === path.join(config.files.lib, '/*'));
+
+			if (missing_lib_paths) {
+				console.warn(
+					colors
+						.bold()
+						.yellow(`Your compilerOptions.paths in ${kind} should include the following:`)
+				);
+				const relative = posixify(path.relative('.', config.files.lib));
+				console.warn(`{\n  "$lib":["${relative}"],\n  "$lib/*":["${relative}/*"]\n}`);
+			}
+		}
+	} else {
+		let relative = posixify(path.relative('.', out));
+		if (!relative.startsWith('./')) relative = './' + relative;
+
+		console.warn(
+			colors.bold().yellow(`Your ${kind} should extend the configuration generated by SvelteKit:`)
+		);
+		console.warn(`{\n  "extends": "${relative}"\n}`);
+	}
+}
+
+// <something><optional /*>
+const alias_regex = /^(.+?)(\/\*)?$/;
+// <path><optional /* or .fileending>
+const value_regex = /^(.*?)((\/\*)|(\.\w+))?$/;
+
+/**
+ * Generates tsconfig path aliases from kit's aliases.
+ * Related to vite alias creation.
+ *
+ * @param {import('types').ValidatedKitConfig} config
+ */
+export function get_tsconfig_paths(config) {
+	const alias = {
+		...config.alias
+	};
+	if (fs.existsSync(project_relative(config.files.lib))) {
+		alias['$lib'] = project_relative(config.files.lib);
+	}
+
+	/** @type {Record<string, string[]>} */
+	const paths = {};
+
+	for (const [key, value] of Object.entries(alias)) {
+		const key_match = alias_regex.exec(key);
+		if (!key_match) throw new Error(`Invalid alias key: ${key}`);
+
+		const value_match = value_regex.exec(value);
+		if (!value_match) throw new Error(`Invalid alias value: ${value}`);
+
+		const rel_path = project_relative(remove_trailing_slashstar(value));
+		const slashstar = key_match[2];
+
+		if (slashstar) {
+			paths[key] = [rel_path + '/*'];
+		} else {
+			paths[key] = [rel_path];
+			const fileending = value_match[4];
+
+			if (!fileending && !(key + '/*' in alias)) {
+				paths[key + '/*'] = [rel_path + '/*'];
+			}
+		}
+	}
+
+	return paths;
+}