@sveltejs/kit 1.0.0-next.46 → 1.0.0-next.462

package/README.md

@@ -1,15 +1,18 @@
-# @sveltejs/kit
+# The fastest way to build Svelte apps
 
-Here be dragons, etc etc.
+This is the [SvelteKit](https://kit.svelte.dev) framework and CLI.
 
-This project aims to replicate Sapper's functionality in its entirety, minus building for deployment (which can be handled by 'adapters' that do various opinionated things with the output of `snowpack build`).
+The quickest way to get started is via the [create-svelte](https://github.com/sveltejs/kit/tree/master/packages/create-svelte) package:
 
-It's currently missing a ton of stuff but I figured I'd throw it up on GitHub anyway partly for the sake of 'working in the open' but mostly because I need an issue tracker to organise my thoughts.
+```bash
+npm create svelte@latest my-app
+cd my-app
+npm install
+npm run dev
+```
 
-There are no tests yet or anything like that. Some of the code has just been straight copied over from the existing Sapper repo, but a pleasing amount of it can safely be left behind.
+See the [documentation](https://kit.svelte.dev/docs) to learn more.
 
-## Trying it out
+## Changelog
 
-Clone this repo, `npm install`, and `npm link`. That will create a global link to the `svelte` bin. You can then either `npm run build` or `npm run dev`, if you intend to make changes and see them immediately reflected.
-
-Then, clone the corresponding [svelte-app-demo](https://github.com/sveltejs/svelte-app-demo) repo and follow the instructions therein.
+[The Changelog for this package is available on GitHub](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).

package/package.json

@@ -1,66 +1,94 @@
 {
-	"name": "@sveltejs/kit",
-	"version": "1.0.0-next.46",
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.3",
-		"@svitejs/vite-plugin-svelte": "^0.10.0",
-		"cheap-watch": "^1.0.3",
-		"sade": "^1.7.4"
-	},
-	"devDependencies": {
-		"@rollup/plugin-replace": "^2.4.1",
-		"@sveltejs/app-utils": "1.0.0-next.3",
-		"@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.0.5"
-	},
-	"peerDependencies": {
-		"svelte": "^3.32.1",
-		"vite": "^2.0.4"
-	},
-	"bin": {
-		"svelte-kit": "svelte-kit.js"
-	},
-	"files": [
-		"assets",
-		"dist",
-		"client"
-	],
-	"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.all.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"
-		}
-	},
-	"types": "types.d.ts"
-}
+  "name": "@sveltejs/kit",
+  "version": "1.0.0-next.462",
+  "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": "^1.0.3",
+    "cookie": "^0.5.0",
+    "devalue": "^3.1.2",
+    "kleur": "^4.1.4",
+    "magic-string": "^0.26.2",
+    "mime": "^3.0.0",
+    "node-fetch": "^3.2.4",
+    "sade": "^1.8.1",
+    "set-cookie-parser": "^2.4.8",
+    "sirv": "^2.0.2",
+    "tiny-glob": "^0.2.9",
+    "undici": "^5.8.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.25.0",
+    "@types/connect": "^3.4.35",
+    "@types/cookie": "^0.5.1",
+    "@types/marked": "^4.0.3",
+    "@types/mime": "^3.0.0",
+    "@types/node": "^16.11.36",
+    "@types/sade": "^1.7.4",
+    "@types/set-cookie-parser": "^2.4.2",
+    "marked": "^4.0.16",
+    "rollup": "^2.78.1",
+    "svelte": "^3.48.0",
+    "svelte-preprocess": "^4.10.6",
+    "typescript": "^4.8.2",
+    "uvu": "^0.5.3",
+    "vite": "^3.1.0-beta.1"
+  },
+  "peerDependencies": {
+    "svelte": "^3.44.0",
+    "vite": "^3.1.0-beta.1"
+  },
+  "bin": {
+    "svelte-kit": "svelte-kit.js"
+  },
+  "files": [
+    "src",
+    "!src/**/*.spec.js",
+    "!src/core/**/fixtures",
+    "!src/core/**/test",
+    "types",
+    "svelte-kit.js",
+    "scripts/special-types"
+  ],
+  "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": {
+    "build": "npm run types",
+    "lint": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
+    "check": "tsc",
+    "check:all": "tsc && pnpm -r --filter=\"./**\" check",
+    "format": "npm run lint -- --write",
+    "test": "npm run test:unit && npm run test:integration",
+    "test:integration": "pnpm run -r --workspace-concurrency 1 --filter=\"./test/**\" test",
+    "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\"",
+    "types": "node scripts/extract-types.js",
+    "postinstall": "node svelte-kit.js sync"
+  }
+}

package/scripts/special-types/$env+dynamic+private.md

@@ -0,0 +1,8 @@
+This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix).
+
+This module cannot be imported into client-side code.
+
+```ts
+import { env } from '$env/dynamic/private';
+console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+```

package/scripts/special-types/$env+dynamic+public.md

@@ -0,0 +1,8 @@
+Similar to [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+
+Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.
+
+```ts
+import { env } from '$env/dynamic/public';
+console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+```

package/scripts/special-types/$env+static+private.md

@@ -0,0 +1,19 @@
+Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix).
+
+_Unlike_ [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+
+```ts
+import { API_KEY } from '$env/static/private';
+```
+
+Note that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+
+```
+MY_FEATURE_FLAG=""
+```
+
+You can override `.env` values from the command line like so:
+
+```bash
+MY_FEATURE_FLAG="enabled" npm run dev
+```

package/scripts/special-types/$env+static+public.md

@@ -0,0 +1,7 @@
+Similar to [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#kit-env-publicprefix) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+
+Values are replaced statically at build time.
+
+```ts
+import { PUBLIC_BASE_URL } from '$env/static/public';
+```

package/scripts/special-types/$lib.md

@@ -0,0 +1 @@
+This is a simple alias to `src/lib`, or whatever directory is specified as [`config.kit.files.lib`](https://kit.svelte.dev/docs/configuration#files). It allows you to access common components and utility modules without `../../../../` nonsense.

package/src/cli.js

@@ -0,0 +1,112 @@
+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 (event === 'postinstall' && process.env.INIT_CWD) {
+			process.chdir(process.env.INIT_CWD);
+		}
+
+		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,7 @@
+// 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';
+
+export const DATA_SUFFIX = '/__data.js';

package/src/core/adapt/builder.js

@@ -0,0 +1,207 @@
+import glob from 'tiny-glob';
+import zlib from 'zlib';
+import { existsSync, statSync, createReadStream, createWriteStream } from 'fs';
+import { pipeline } from 'stream';
+import { promisify } from 'util';
+import { copy, rimraf, mkdirp } from '../../utils/filesystem.js';
+import { generate_manifest } from '../generate_manifest/index.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) => {
+				const methods = new Set();
+
+				if (route.page) {
+					methods.add('SET');
+				}
+
+				if (route.endpoint) {
+					for (const method of build_data.server.methods[route.endpoint.file]) {
+						methods.add(method);
+					}
+				}
+
+				return {
+					id: route.id,
+					type: route.page ? 'page' : 'endpoint', // TODO change this if support pages+endpoints
+					segments: route.id.split('/').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, format }) =>
+							generate_manifest({
+								build_data,
+								relative_path: relativePath,
+								routes: Array.from(filtered),
+								format
+							})
+					});
+				}
+			}
+		},
+
+		generateManifest: ({ relativePath, format }) => {
+			return generate_manifest({
+				build_data,
+				relative_path: relativePath,
+				routes,
+				format
+			});
+		},
+
+		getBuildDirectory(name) {
+			return `${config.kit.outDir}/${name}`;
+		},
+
+		getClientDirectory() {
+			return `${config.kit.outDir}/output/client`;
+		},
+
+		getServerDirectory() {
+			return `${config.kit.outDir}/output/server`;
+		},
+
+		getStaticDirectory() {
+			return config.kit.files.assets;
+		},
+
+		writeClient(dest) {
+			return [...copy(`${config.kit.outDir}/output/client`, dest)];
+		},
+
+		writePrerendered(dest, { fallback } = {}) {
+			const source = `${config.kit.outDir}/output/prerendered`;
+			const files = [...copy(`${source}/pages`, dest), ...copy(`${source}/dependencies`, dest)];
+
+			if (fallback) {
+				files.push(fallback);
+				copy(`${source}/fallback.html`, `${dest}/${fallback}`);
+			}
+
+			return files;
+		},
+
+		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.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.message%</h1>
+			</div>
+		</div>
+	</body>
+</html>