@sveltejs/kit 1.0.0-next.45 → 1.0.0-next.450

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,64 +1,93 @@
 {
-	"name": "@sveltejs/kit",
-	"version": "1.0.0-next.45",
-	"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",
-		"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": {
-		"./ssr": {
-			"import": "./dist/ssr.js"
-		}
-	},
-	"types": "types.d.ts"
-}
+  "name": "@sveltejs/kit",
+  "version": "1.0.0-next.450",
+  "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.1",
+    "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.7.4",
+    "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"
+  ],
+  "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/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,223 @@
+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';
+import { get_path } from '../../utils/routing.js';
+
+/**
+ * Creates the Builder which is passed to adapters for building the application.
+ * @param {{
+ *   config: import('types').ValidatedConfig;
+ *   build_data: import('types').BuildData;
+ *   prerendered: import('types').Prerendered;
+ *   log: import('types').Logger;
+ * }} opts
+ * @returns {import('types').Builder}
+ */
+export function create_builder({ config, build_data, prerendered, log }) {
+	/** @type {Set<string>} */
+	const prerendered_paths = new Set(prerendered.paths);
+
+	/** @param {import('types').RouteData} route */
+	// TODO routes should come pre-filtered
+	function not_prerendered(route) {
+		const path = route.page && get_path(route.id);
+		if (path) {
+			return !prerendered_paths.has(path) && !prerendered_paths.has(path + '/');
+		}
+
+		return true;
+	}
+
+	const pipe = promisify(pipeline);
+
+	/**
+	 * @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);
+	}
+
+	return {
+		log,
+		rimraf,
+		mkdirp,
+		copy,
+
+		config,
+		prerendered,
+
+		async createEntries(fn) {
+			const { routes } = build_data.manifest_data;
+
+			/** @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.filter(not_prerendered));
+
+				// 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: build_data.manifest_data.routes.filter(not_prerendered),
+				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'
+			);
+		}
+	};
+}

package/src/core/adapt/index.js

@@ -0,0 +1,19 @@
+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 {{ log: import('types').Logger }} opts
+ */
+export async function adapt(config, build_data, prerendered, { log }) {
+	const { name, adapt } = config.kit.adapter;
+
+	console.log(colors.bold().cyan(`\n> Using ${name}`));
+
+	const builder = create_builder({ config, build_data, prerendered, log });
+	await adapt(builder);
+
+	log.success('done');
+}

package/src/core/config/index.js

@@ -0,0 +1,86 @@
+import fs from 'fs';
+import path from 'path';
+import * as url from 'url';
+import options from './options.js';
+
+/**
+ * Loads the template (src/app.html by default) and validates that it has the
+ * required content.
+ * @param {string} cwd
+ * @param {import('types').ValidatedConfig} config
+ */
+export function load_template(cwd, config) {
+	const { template } = config.kit.files;
+	const relative = path.relative(cwd, template);
+
+	if (fs.existsSync(template)) {
+		const contents = fs.readFileSync(template, 'utf8');
+
+		// TODO remove this for 1.0
+		const match = /%svelte\.([a-z]+)%/.exec(contents);
+		if (match) {
+			throw new Error(
+				`%svelte.${match[1]}% in ${relative} should be replaced with %sveltekit.${match[1]}%`
+			);
+		}
+
+		const expected_tags = ['%sveltekit.head%', '%sveltekit.body%'];
+		expected_tags.forEach((tag) => {
+			if (contents.indexOf(tag) === -1) {
+				throw new Error(`${relative} is missing ${tag}`);
+			}
+		});
+	} else {
+		throw new Error(`${relative} does not exist`);
+	}
+
+	return fs.readFileSync(template, 'utf-8');
+}
+
+/**
+ * Loads and validates svelte.config.js
+ * @param {{ cwd?: string }} options
+ * @returns {Promise<import('types').ValidatedConfig>}
+ */
+export async function load_config({ cwd = process.cwd() } = {}) {
+	const config_file = path.join(cwd, 'svelte.config.js');
+
+	if (!fs.existsSync(config_file)) {
+		return process_config({}, { cwd });
+	}
+
+	const config = await import(`${url.pathToFileURL(config_file).href}?ts=${Date.now()}`);
+
+	return process_config(config.default, { cwd });
+}
+
+/**
+ * @param {import('types').Config} config
+ * @returns {import('types').ValidatedConfig}
+ */
+function process_config(config, { cwd = process.cwd() } = {}) {
+	const validated = validate_config(config);
+
+	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
+
+	for (const key in validated.kit.files) {
+		// @ts-expect-error this is typescript at its stupidest
+		validated.kit.files[key] = path.resolve(cwd, validated.kit.files[key]);
+	}
+
+	return validated;
+}
+
+/**
+ * @param {import('types').Config} config
+ * @returns {import('types').ValidatedConfig}
+ */
+export function validate_config(config) {
+	if (typeof config !== 'object') {
+		throw new Error(
+			'svelte.config.js must have a configuration object as its default export. See https://kit.svelte.dev/docs/configuration'
+		);
+	}
+
+	return options(config, 'config');
+}