@sveltejs/kit 1.0.0-next.58 → 1.0.0-next.581

package/README.md

@@ -5,11 +5,14 @@ This is the [SvelteKit](https://kit.svelte.dev) framework and CLI.
 The quickest way to get started is via the [create-svelte](https://github.com/sveltejs/kit/tree/master/packages/create-svelte) package:
 
 ```bash
-mkdir my-app
+npm create svelte@latest my-app
 cd my-app
-npm init svelte@next
 npm install
 npm run dev
 ```
 
 See the [documentation](https://kit.svelte.dev/docs) to learn more.
+
+## Changelog
+
+[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).

package/package.json

@@ -1,74 +1,92 @@
 {
-	"name": "@sveltejs/kit",
-	"version": "1.0.0-next.58",
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-		"cheap-watch": "^1.0.3",
-		"sade": "^1.7.4"
-	},
-	"devDependencies": {
-		"@rollup/plugin-replace": "^2.4.1",
-		"@types/amphtml-validator": "^1.0.1",
-		"@types/mime": "^2.0.3",
-		"@types/node": "^14.14.33",
-		"@types/rimraf": "^3.0.0",
-		"@types/sade": "^1.7.2",
-		"amphtml-validator": "^1.0.34",
-		"devalue": "^2.0.1",
-		"eslint": "^7.21.0",
-		"kleur": "^4.1.4",
-		"node-fetch": "^3.0.0-beta.9",
-		"port-authority": "^1.1.2",
-		"rimraf": "^3.0.2",
-		"rollup": "^2.41.1",
-		"sirv": "^1.0.11",
-		"svelte": "^3.35.0",
-		"tiny-glob": "^0.2.8",
-		"typescript": "^4.2.3",
-		"uvu": "^0.5.1",
-		"vite": "^2.1.0"
-	},
-	"peerDependencies": {
-		"svelte": "^3.32.1",
-		"vite": "^2.1.0"
-	},
-	"bin": {
-		"svelte-kit": "svelte-kit.js"
-	},
-	"files": [
-		"assets",
-		"dist",
-		"types.d.ts",
-		"types.internal.d.ts",
-		"svelte-kit.js"
-	],
-	"scripts": {
-		"dev": "rm -rf assets/runtime && rollup -cw",
-		"build": "rm -rf assets/runtime && rollup -c",
-		"lint": "eslint --ignore-path .gitignore \"src/**/*.{ts,mjs,js,svelte}\" && npm run check-format",
-		"check": "npx tsc -p tsconfig.enforced.json",
-		"check-all": "npx tsc -p tsconfig.json",
-		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
-		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
-		"prepublishOnly": "npm run build",
-		"test": "npm run test:unit && npm run test:integration",
-		"test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\"",
-		"test:integration": "uvu test test.js"
-	},
-	"exports": {
-		"./package.json": "./package.json",
-		"./ssr": {
-			"import": "./dist/ssr.js"
-		},
-		"./http": {
-			"import": "./dist/http.js"
-		},
-		"./filesystem": {
-			"import": "./dist/filesystem.js",
-			"require": "./dist/filesystem.cjs"
-		},
-		"./types.d.ts": "./types.d.ts"
-	},
-	"types": "types.d.ts"
-}
+  "name": "@sveltejs/kit",
+  "version": "1.0.0-next.581",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sveltejs/kit",
+    "directory": "packages/kit"
+  },
+  "license": "MIT",
+  "homepage": "https://kit.svelte.dev",
+  "type": "module",
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.0.0",
+    "@types/cookie": "^0.5.1",
+    "cookie": "^0.5.0",
+    "devalue": "^4.2.0",
+    "esm-env": "^1.0.0",
+    "kleur": "^4.1.5",
+    "magic-string": "^0.27.0",
+    "mime": "^3.0.0",
+    "sade": "^1.8.1",
+    "set-cookie-parser": "^2.5.1",
+    "sirv": "^2.0.2",
+    "tiny-glob": "^0.2.9",
+    "undici": "5.14.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@types/connect": "^3.4.35",
+    "@types/marked": "^4.0.7",
+    "@types/mime": "^3.0.1",
+    "@types/node": "^16.18.6",
+    "@types/sade": "^1.7.4",
+    "@types/set-cookie-parser": "^2.4.2",
+    "marked": "^4.2.3",
+    "rollup": "^3.7.0",
+    "svelte": "^3.54.0",
+    "svelte-preprocess": "^4.10.7",
+    "typescript": "^4.9.3",
+    "uvu": "^0.5.6",
+    "vite": "^4.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^3.54.0",
+    "vite": "^4.0.0"
+  },
+  "bin": {
+    "svelte-kit": "svelte-kit.js"
+  },
+  "files": [
+    "src",
+    "!src/**/*.spec.js",
+    "!src/core/**/fixtures",
+    "!src/core/**/test",
+    "types",
+    "svelte-kit.js",
+    "postinstall.js"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./src/exports/index.js"
+    },
+    "./node": {
+      "import": "./src/exports/node/index.js"
+    },
+    "./node/polyfills": {
+      "import": "./src/exports/node/polyfills.js"
+    },
+    "./hooks": {
+      "import": "./src/exports/hooks/index.js"
+    },
+    "./vite": {
+      "import": "./src/exports/vite/index.js"
+    }
+  },
+  "types": "types/index.d.ts",
+  "engines": {
+    "node": ">=16.14"
+  },
+  "scripts": {
+    "lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+    "check": "tsc",
+    "check:all": "tsc && pnpm -r --filter=\"./**\" check",
+    "format": "pnpm lint --write",
+    "test": "pnpm test:unit && pnpm test:integration",
+    "test:integration": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test",
+    "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\"",
+    "postinstall": "node postinstall.js"
+  }
+}

package/postinstall.js

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import path from 'path';
+import glob from 'tiny-glob/sync.js';
+import { load_config } from './src/core/config/index.js';
+import * as sync from './src/core/sync/sync.js';
+
+try {
+	const cwd = process.env.INIT_CWD ?? process.cwd();
+	process.chdir(cwd);
+
+	if (fs.existsSync('package.json')) {
+		const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+
+		const directories = [];
+
+		if (pkg.workspaces) {
+			// we have to do this because of https://classic.yarnpkg.com/blog/2018/02/15/nohoist/
+			const packages = Array.isArray(pkg.workspaces) ? pkg.workspaces : pkg.workspaces.packages;
+
+			for (const directory of packages) {
+				directories.push(...glob(directory, { cwd }).map((dir) => path.resolve(cwd, dir)));
+			}
+		} else {
+			directories.push(cwd);
+		}
+
+		for (const cwd of directories) {
+			process.chdir(cwd);
+
+			if (!fs.existsSync('package.json')) continue;
+			if (!fs.existsSync('svelte.config.js')) continue;
+
+			const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+			if (!pkg.dependencies?.['@sveltejs/kit'] && !pkg.devDependencies?.['@sveltejs/kit']) continue;
+
+			try {
+				const config = await load_config();
+				await sync.all(config, 'development');
+			} catch (error) {
+				console.log('Error while trying to sync SvelteKit config');
+				console.log(error.stack);
+			}
+		}
+	}
+} catch (error) {
+	console.error(error.stack);
+}

package/src/cli.js

@@ -0,0 +1,108 @@
+import fs from 'fs';
+import path from 'path';
+import colors from 'kleur';
+import sade from 'sade';
+import { load_config } from './core/config/index.js';
+import { coalesce_to_error } from './utils/error.js';
+
+/** @param {unknown} e */
+function handle_error(e) {
+	const error = coalesce_to_error(e);
+
+	if (error.name === 'SyntaxError') throw error;
+
+	console.error(colors.bold().red(`> ${error.message}`));
+	if (error.stack) {
+		console.error(colors.gray(error.stack.split('\n').slice(1).join('\n')));
+	}
+
+	process.exit(1);
+}
+
+const pkg = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8'));
+const prog = sade('svelte-kit').version(pkg.version);
+
+prog
+	.command('sync')
+	.describe('Synchronise generated files')
+	.option('--mode', 'Specify a mode for loading environment variables', 'development')
+	.action(async ({ mode }) => {
+		const event = process.env.npm_lifecycle_event;
+
+		// TODO remove for 1.0
+		if (event === 'prepare') {
+			const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+			const message =
+				pkg.scripts.prepare === 'svelte-kit sync'
+					? `\`svelte-kit sync\` now runs on "postinstall" — please remove the "prepare" script from your package.json\n`
+					: `\`svelte-kit sync\` now runs on "postinstall" — please remove it from your "prepare" script\n`;
+
+			console.error(colors.bold().red(message));
+			return;
+		}
+
+		if (!fs.existsSync('svelte.config.js')) {
+			console.warn(`Missing ${path.resolve('svelte.config.js')} — skipping`);
+			return;
+		}
+
+		try {
+			const config = await load_config();
+			const sync = await import('./core/sync/sync.js');
+			await sync.all(config, mode);
+		} catch (error) {
+			handle_error(error);
+		}
+	});
+
+// TODO remove for 1.0
+replace('dev');
+replace('build');
+replace('preview');
+prog
+	.command('package')
+	.describe('No longer available - use @sveltejs/package instead')
+	.action(() => {
+		console.error(
+			'svelte-kit package has been removed. It now lives in its own npm package. See the PR on how to migrate: https://github.com/sveltejs/kit/pull/5730'
+		);
+	});
+
+prog.parse(process.argv, { unknown: (arg) => `Unknown option: ${arg}` });
+
+/** @param {string} command */
+function replace(command) {
+	prog
+		.command(command)
+		.describe(`No longer available — use vite ${command} instead`)
+		.action(async () => {
+			const message = `\n> svelte-kit ${command} is no longer available — use vite ${command} instead`;
+			console.error(colors.bold().red(message));
+
+			const steps = [
+				'Install vite as a devDependency with npm/pnpm/etc',
+				'Create a vite.config.js with the @sveltejs/kit/vite plugin (see below)',
+				`Update your package.json scripts to reference \`vite ${command}\` instead of \`svelte-kit ${command}\``
+			];
+
+			steps.forEach((step, i) => {
+				console.error(`  ${i + 1}. ${colors.cyan(step)}`);
+			});
+
+			console.error(
+				`
+				${colors.grey('// vite.config.js')}
+				import { sveltekit } from '@sveltejs/kit/vite';
+
+				/** @type {import('vite').UserConfig} */
+				const config = {
+					plugins: [sveltekit()]
+				};
+
+				export default config;
+
+				`.replace(/^\t{4}/gm, '')
+			);
+			process.exit(1);
+		});
+}

package/src/constants.js

@@ -0,0 +1,5 @@
+// in `vite dev` and `vite preview`, we use a fake asset path so that we can
+// serve local assets while verifying that requests are correctly prefixed
+export const SVELTE_KIT_ASSETS = '/_svelte_kit_assets';
+
+export const GENERATED_COMMENT = '// this file is generated — do not edit it\n';

package/src/core/adapt/builder.js

@@ -0,0 +1,237 @@
+import { existsSync, statSync, createReadStream, createWriteStream } from 'node:fs';
+import { pipeline } from 'node:stream';
+import { promisify } from 'node:util';
+import { fork } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import glob from 'tiny-glob';
+import zlib from 'zlib';
+import { copy, rimraf, mkdirp } from '../../utils/filesystem.js';
+import { generate_manifest } from '../generate_manifest/index.js';
+import { get_route_segments } from '../../utils/routing.js';
+import { get_env } from '../../exports/vite/utils.js';
+
+const pipe = promisify(pipeline);
+
+/**
+ * Creates the Builder which is passed to adapters for building the application.
+ * @param {{
+ *   config: import('types').ValidatedConfig;
+ *   build_data: import('types').BuildData;
+ *   routes: import('types').RouteData[];
+ *   prerendered: import('types').Prerendered;
+ *   log: import('types').Logger;
+ * }} opts
+ * @returns {import('types').Builder}
+ */
+export function create_builder({ config, build_data, routes, prerendered, log }) {
+	return {
+		log,
+		rimraf,
+		mkdirp,
+		copy,
+
+		config,
+		prerendered,
+
+		async createEntries(fn) {
+			/** @type {import('types').RouteDefinition[]} */
+			const facades = routes.map((route) => {
+				/** @type {Set<import('types').HttpMethod>} */
+				const methods = new Set();
+
+				if (route.page) {
+					methods.add('GET');
+				}
+
+				if (route.endpoint) {
+					for (const method of build_data.server.methods[route.endpoint.file]) {
+						methods.add(method);
+					}
+				}
+
+				return {
+					id: route.id,
+					segments: get_route_segments(route.id).map((segment) => ({
+						dynamic: segment.includes('['),
+						rest: segment.includes('[...'),
+						content: segment
+					})),
+					pattern: route.pattern,
+					methods: Array.from(methods)
+				};
+			});
+
+			const seen = new Set();
+
+			for (let i = 0; i < routes.length; i += 1) {
+				const route = routes[i];
+				const { id, filter, complete } = fn(facades[i]);
+
+				if (seen.has(id)) continue;
+				seen.add(id);
+
+				const group = [route];
+
+				// figure out which lower priority routes should be considered fallbacks
+				for (let j = i + 1; j < routes.length; j += 1) {
+					if (filter(facades[j])) {
+						group.push(routes[j]);
+					}
+				}
+
+				const filtered = new Set(group);
+
+				// heuristic: if /foo/[bar] is included, /foo/[bar].json should
+				// also be included, since the page likely needs the endpoint
+				// TODO is this still necessary, given the new way of doing things?
+				filtered.forEach((route) => {
+					if (route.page) {
+						const endpoint = routes.find((candidate) => candidate.id === route.id + '.json');
+
+						if (endpoint) {
+							filtered.add(endpoint);
+						}
+					}
+				});
+
+				if (filtered.size > 0) {
+					await complete({
+						generateManifest: ({ relativePath }) =>
+							generate_manifest({
+								build_data,
+								relative_path: relativePath,
+								routes: Array.from(filtered)
+							})
+					});
+				}
+			}
+		},
+
+		generateFallback(dest) {
+			// do prerendering in a subprocess so any dangling stuff gets killed upon completion
+			const script = fileURLToPath(new URL('../prerender/fallback.js', import.meta.url));
+
+			const manifest_path = `${config.kit.outDir}/output/server/manifest-full.js`;
+
+			const env = get_env(config.kit.env, 'production');
+
+			return new Promise((fulfil, reject) => {
+				const child = fork(
+					script,
+					[dest, manifest_path, JSON.stringify({ ...env.private, ...env.public })],
+					{
+						stdio: 'inherit'
+					}
+				);
+
+				child.on('exit', (code) => {
+					if (code) {
+						reject(new Error(`Could not create a fallback page — failed with code ${code}`));
+					} else {
+						fulfil(undefined);
+					}
+				});
+			});
+		},
+
+		generateManifest: ({ relativePath }) => {
+			return generate_manifest({
+				build_data,
+				relative_path: relativePath,
+				routes
+			});
+		},
+
+		getBuildDirectory(name) {
+			return `${config.kit.outDir}/${name}`;
+		},
+
+		getClientDirectory() {
+			return `${config.kit.outDir}/output/client`;
+		},
+
+		getServerDirectory() {
+			return `${config.kit.outDir}/output/server`;
+		},
+
+		getAppPath() {
+			return build_data.app_path;
+		},
+
+		writeClient(dest) {
+			return [...copy(`${config.kit.outDir}/output/client`, dest)];
+		},
+
+		// @ts-expect-error
+		writePrerendered(dest, opts) {
+			// TODO remove for 1.0
+			if (opts?.fallback) {
+				throw new Error(
+					'The fallback option no longer exists — use builder.generateFallback(fallback) instead'
+				);
+			}
+
+			const source = `${config.kit.outDir}/output/prerendered`;
+			return [...copy(`${source}/pages`, dest), ...copy(`${source}/dependencies`, dest)];
+		},
+
+		writeServer(dest) {
+			return copy(`${config.kit.outDir}/output/server`, dest);
+		},
+
+		// TODO remove these methods for 1.0
+		// @ts-expect-error
+		writeStatic() {
+			throw new Error(
+				`writeStatic has been removed. Please ensure you are using the latest version of ${
+					config.kit.adapter.name || 'your adapter'
+				}`
+			);
+		},
+
+		async compress(directory) {
+			if (!existsSync(directory)) {
+				return;
+			}
+
+			const files = await glob('**/*.{html,js,json,css,svg,xml,wasm}', {
+				cwd: directory,
+				dot: true,
+				absolute: true,
+				filesOnly: true
+			});
+
+			await Promise.all(
+				files.map((file) => Promise.all([compress_file(file, 'gz'), compress_file(file, 'br')]))
+			);
+		},
+
+		async prerender() {
+			throw new Error(
+				'builder.prerender() has been removed. Prerendering now takes place in the build phase — see builder.prerender and builder.writePrerendered'
+			);
+		}
+	};
+}
+
+/**
+ * @param {string} file
+ * @param {'gz' | 'br'} format
+ */
+async function compress_file(file, format = 'gz') {
+	const compress =
+		format == 'br'
+			? zlib.createBrotliCompress({
+					params: {
+						[zlib.constants.BROTLI_PARAM_MODE]: zlib.constants.BROTLI_MODE_TEXT,
+						[zlib.constants.BROTLI_PARAM_QUALITY]: zlib.constants.BROTLI_MAX_QUALITY,
+						[zlib.constants.BROTLI_PARAM_SIZE_HINT]: statSync(file).size
+					}
+			  })
+			: zlib.createGzip({ level: zlib.constants.Z_BEST_COMPRESSION });
+
+	const source = createReadStream(file);
+	const destination = createWriteStream(`${file}.${format}`);
+
+	await pipe(source, compress, destination);
+}

package/src/core/adapt/index.js

@@ -0,0 +1,31 @@
+import colors from 'kleur';
+import { create_builder } from './builder.js';
+
+/**
+ * @param {import('types').ValidatedConfig} config
+ * @param {import('types').BuildData} build_data
+ * @param {import('types').Prerendered} prerendered
+ * @param {import('types').PrerenderMap} prerender_map
+ * @param {{ log: import('types').Logger }} opts
+ */
+export async function adapt(config, build_data, prerendered, prerender_map, { log }) {
+	const { name, adapt } = config.kit.adapter;
+
+	console.log(colors.bold().cyan(`\n> Using ${name}`));
+
+	const builder = create_builder({
+		config,
+		build_data,
+		routes: build_data.manifest_data.routes.filter((route) => {
+			if (!route.page && !route.endpoint) return false;
+
+			const prerender = prerender_map.get(route.id);
+			return prerender === false || prerender === undefined || prerender === 'auto';
+		}),
+		prerendered,
+		log
+	});
+	await adapt(builder);
+
+	log.success('done');
+}

package/src/core/config/default-error.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>%sveltekit.error.message%</title>
+
+		<style>
+			body {
+				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+					Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100vh;
+			}
+
+			.error {
+				display: flex;
+				align-items: center;
+				max-width: 32rem;
+				margin: 0 1rem;
+			}
+
+			.status {
+				font-weight: 200;
+				font-size: 3rem;
+				line-height: 1;
+				position: relative;
+				top: -0.05rem;
+			}
+
+			.message {
+				border-left: 1px solid #ccc;
+				padding: 0 0 0 1rem;
+				margin: 0 0 0 1rem;
+				min-height: 2.5rem;
+				display: flex;
+				align-items: center;
+			}
+
+			.message h1 {
+				font-weight: 400;
+				font-size: 1em;
+				margin: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="error">
+			<span class="status">%sveltekit.status%</span>
+			<div class="message">
+				<h1>%sveltekit.error.message%</h1>
+			</div>
+		</div>
+	</body>
+</html>