@sveltejs/kit 1.0.0-next.41 → 1.0.0-next.412

package/src/core/sync/write_ambient.js

@@ -0,0 +1,87 @@
+import path from 'path';
+import colors from 'kleur';
+import { get_env } from '../../vite/utils.js';
+import { write_if_changed, reserved, valid_identifier } from './utils.js';
+
+const autogen_comment = '// this file is generated — do not edit it\n';
+const types_reference = '/// <reference types="@sveltejs/kit" />\n\n';
+
+/**
+ * Writes ambient declarations including types reference to @sveltejs/kit,
+ * and the existing environment variables in process.env to
+ * $env/static/private and $env/static/public
+ * @param {import('types').ValidatedKitConfig} config
+ * @param {string} mode The Vite mode
+ */
+export function write_ambient(config, mode) {
+	const env = get_env(mode, config.env.publicPrefix);
+
+	// TODO when testing src, `$app` points at `src/runtime/app`... will
+	// probably need to fiddle with aliases
+	write_if_changed(
+		path.join(config.outDir, 'runtime/env/static/public.js'),
+		create_env_module('$env/static/public', env.public)
+	);
+
+	write_if_changed(
+		path.join(config.outDir, 'runtime/env/static/private.js'),
+		create_env_module('$env/static/private', env.private)
+	);
+
+	write_if_changed(
+		path.join(config.outDir, 'ambient.d.ts'),
+		autogen_comment +
+			types_reference +
+			create_env_types('$env/static/public', env.public) +
+			'\n\n' +
+			create_env_types('$env/static/private', env.private)
+	);
+}
+
+/**
+ * @param {string} id
+ * @param {Record<string, string>} env
+ * @returns {string}
+ */
+function create_env_module(id, env) {
+	/** @type {string[]} */
+	const declarations = [];
+
+	for (const key in env) {
+		const warning = !valid_identifier.test(key)
+			? 'not a valid identifier'
+			: reserved.has(key)
+			? 'a reserved word'
+			: null;
+
+		if (warning) {
+			console.error(
+				colors
+					.bold()
+					.yellow(`Omitting environment variable "${key}" from ${id} as it is ${warning}`)
+			);
+			continue;
+		}
+
+		const comment = `/** @type {import('${id}').${key}} */`;
+		const declaration = `export const ${key} = ${JSON.stringify(env[key])};`;
+
+		declarations.push(`${comment}\n${declaration}`);
+	}
+
+	return autogen_comment + declarations.join('\n\n');
+}
+
+/**
+ * @param {string} id
+ * @param {Record<string, string>} env
+ * @returns {string}
+ */
+function create_env_types(id, env) {
+	const declarations = Object.keys(env)
+		.filter((k) => valid_identifier.test(k))
+		.map((k) => `\texport const ${k}: string;`)
+		.join('\n');
+
+	return `declare module '${id}' {\n${declarations}\n}`;
+}

package/src/core/sync/write_client_manifest.js

@@ -0,0 +1,82 @@
+import { relative } from 'path';
+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').ManifestData} manifest_data
+ * @param {string} output
+ */
+export function write_client_manifest(manifest_data, output) {
+	/** @type {Map<import('types').PageNode, number>} */
+	const node_indexes = new Map();
+
+	/**
+	 * 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) => {
+			node_indexes.set(node, i);
+			write_if_changed(`${output}/nodes/${i}.js`, generate_node(node));
+			return `() => import('./nodes/${i}')`;
+		})
+		.join(',\n\t');
+
+	const dictionary = `{
+		${manifest_data.routes
+			.map((route) => {
+				if (route.type === 'page') {
+					const errors = route.errors.map((node) => (node ? node_indexes.get(node) : '')).join(',');
+					const layouts = route.layouts
+						.map((node) => (node ? node_indexes.get(node) : ''))
+						.join(',');
+					const leaf = route.leaf ? node_indexes.get(route.leaf) : '';
+
+					const uses_server_data = [...route.layouts, route.leaf].some((node) => node?.server);
+					const suffix = uses_server_data ? ', 1' : '';
+
+					return `${s(route.id)}: [[${errors}], [${layouts}], ${leaf}${suffix}]`;
+				}
+			})
+			.filter(Boolean)
+			.join(',\n\t\t')}
+	}`.replace(/^\t/gm, '');
+
+	write_if_changed(
+		`${output}/client-manifest.js`,
+		trim(`
+			export { matchers } from './client-matchers.js';
+
+			export const nodes = [
+				${nodes}
+			];
+
+			export const dictionary = ${dictionary};
+		`)
+	);
+}

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,88 @@
+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.type === 'page' ? route.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}}/>`;
+
+	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}} {errors} />
+			{/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';
+
+				// stores
+				export let stores;
+				export let page;
+
+				export let components;
+				${levels.map((l) => `export let data_${l} = null;`).join('\n\t\t\t\t')}
+				export let errors;
+
+				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,189 @@
+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'];
+	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`));
+	}
+
+	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-kit 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;
+}