@sveltejs/kit 1.0.0-next.334 → 1.0.0-next.337

package/assets/client/start.js

@@ -432,6 +432,33 @@ function update_scroll_positions(index) {
 	scroll_positions[index] = scroll_state();
 }
 
+const fetch$1 = window.fetch;
+let loading = 0;
+
+if (import.meta.env.DEV) {
+	let can_inspect_stack_trace = false;
+
+	const check_stack_trace = async () => {
+		const stack = /** @type {string} */ (new Error().stack);
+		can_inspect_stack_trace = stack.includes('check_stack_trace');
+	};
+
+	check_stack_trace();
+
+	window.fetch = (input, init) => {
+		const url = input instanceof Request ? input.url : input.toString();
+		const stack = /** @type {string} */ (new Error().stack);
+
+		const heuristic = can_inspect_stack_trace ? stack.includes('load_node') : loading;
+		if (heuristic) {
+			console.warn(
+				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://kit.svelte.dev/docs/loading#input-fetch`
+			);
+		}
+		return fetch$1(input, init);
+	};
+}
+
 /**
  * @param {{
  *   target: Element;
@@ -928,7 +955,7 @@ function create_client({ target, session, base, trailing_slash }) {
 					const requested = typeof resource === 'string' ? resource : resource.url;
 					add_dependency(requested);
 
-					return started ? fetch(resource, info) : initial_fetch(resource, info);
+					return started ? fetch$1(resource, info) : initial_fetch(resource, info);
 				},
 				status: status ?? null,
 				error: error ?? null
@@ -943,7 +970,18 @@ function create_client({ target, session, base, trailing_slash }) {
 				});
 			}
 
-			const loaded = await module.load.call(null, load_input);
+			let loaded;
+
+			if (import.meta.env.DEV) {
+				try {
+					loading += 1;
+					loaded = await module.load.call(null, load_input);
+				} finally {
+					loading -= 1;
+				}
+			} else {
+				loaded = await module.load.call(null, load_input);
+			}
 
 			if (!loaded) {
 				throw new Error('load function must return a value');
@@ -1027,7 +1065,7 @@ function create_client({ target, session, base, trailing_slash }) {
 					const is_shadow_page = has_shadow && i === a.length - 1;
 
 					if (is_shadow_page) {
-						const res = await fetch(
+						const res = await fetch$1(
 							`${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}__data.json${url.search}`,
 							{
 								headers: {

package/assets/server/index.js

@@ -1242,7 +1242,7 @@ async function render_response({
 	const init_app = `
 		import { start } from ${s(options.prefix + options.manifest._.entry.file)};
 		start({
-			target: document.querySelector('[data-hydrate="${target}"]').parentNode,
+			target: document.querySelector('[data-sveltekit-hydrate="${target}"]').parentNode,
 			paths: ${s(options.paths)},
 			session: ${try_serialize($session, (error) => {
 				throw new Error(`Failed to serialize session data: ${error.message}`);
@@ -1327,7 +1327,7 @@ async function render_response({
 				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
 				.join('');
 
-			const attributes = ['type="module"', `data-hydrate="${target}"`];
+			const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
 
 			csp.add_script(init_app);
 

package/dist/chunks/index.js

@@ -15,6 +15,7 @@ import { p as parse_route_id } from './misc.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 import 'querystring';
 import 'node:http';
@@ -193,6 +194,11 @@ async function create_plugin(config, cwd) {
 			});
 
 			return () => {
+				const serve_static_middleware = vite.middlewares.stack.find(
+					(middleware) =>
+						/** @type {function} */ (middleware.handle).name === 'viteServeStaticMiddleware'
+				);
+
 				remove_html_middlewares(vite.middlewares);
 
 				vite.middlewares.use(async (req, res) => {
@@ -358,10 +364,13 @@ async function create_plugin(config, cwd) {
 							}
 						);
 
-						if (rendered) {
-							setResponse(res, rendered);
+						if (rendered.status === 404) {
+							// @ts-expect-error
+							serve_static_middleware.handle(req, res, () => {
+								setResponse(res, rendered);
+							});
 						} else {
-							not_found(res);
+							setResponse(res, rendered);
 						}
 					} catch (e) {
 						const error = coalesce_to_error(e);
@@ -388,7 +397,8 @@ function remove_html_middlewares(server) {
 	const html_middlewares = [
 		'viteIndexHtmlMiddleware',
 		'vite404Middleware',
-		'viteSpaFallbackMiddleware'
+		'viteSpaFallbackMiddleware',
+		'viteServeStaticMiddleware'
 	];
 	for (let i = server.stack.length - 1; i > 0; i--) {
 		// @ts-expect-error using internals until https://github.com/vitejs/vite/pull/4640 is merged
@@ -403,34 +413,38 @@ function remove_html_middlewares(server) {
  * @param {import('vite').ModuleNode} node
  * @param {Set<import('vite').ModuleNode>} deps
  */
-function find_deps(vite, node, deps) {
+async function find_deps(vite, node, deps) {
 	// since `ssrTransformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
 	// instead of using `await`, we resolve all branches in parallel.
 	/** @type {Promise<void>[]} */
 	const branches = [];
 
 	/** @param {import('vite').ModuleNode} node */
-	function add(node) {
+	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
-			branches.push(find_deps(vite, node, deps));
+			await find_deps(vite, node, deps);
 		}
 	}
 
 	/** @param {string} url */
 	async function add_by_url(url) {
-		branches.push(vite.moduleGraph.getModuleByUrl(url).then((node) => node && add(node)));
+		const node = await vite.moduleGraph.getModuleByUrl(url);
+
+		if (node) {
+			await add(node);
+		}
 	}
 
 	if (node.ssrTransformResult) {
 		if (node.ssrTransformResult.deps) {
-			node.ssrTransformResult.deps.forEach(add_by_url);
+			node.ssrTransformResult.deps.forEach((url) => branches.push(add_by_url(url)));
 		}
 	} else {
-		node.importedModules.forEach(add);
+		node.importedModules.forEach((node) => branches.push(add(node)));
 	}
 
-	return Promise.all(branches).then(() => {});
+	await Promise.all(branches);
 }
 
 /**
@@ -461,10 +475,13 @@ async function dev({ cwd, port, host, https, config }) {
 							path__default.resolve(cwd, 'node_modules'),
 							path__default.resolve(vite.searchForWorkspaceRoot(cwd), 'node_modules')
 						])
-					],
-					port: 3000
+					]
 				},
-				strictPort: true
+				port: 3000,
+				strictPort: true,
+				watch: {
+					ignored: [`${config.kit.outDir}/**`, `!${config.kit.outDir}/generated/**`]
+				}
 			}
 		},
 		await config.kit.vite()
@@ -486,7 +503,7 @@ async function dev({ cwd, port, host, https, config }) {
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
+				...config,
 				// In AMP mode, we know that there are no conditional component imports. In that case, we
 				// don't need to include CSS for components that are imported but unused, so we can just
 				// include rendered CSS.
@@ -494,8 +511,10 @@ async function dev({ cwd, port, host, https, config }) {
 				// has been enabled at the page level, so we don't do anything there.
 				emitCss: !config.kit.amp,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			}),
 			await create_plugin(config, cwd)
 		],

package/dist/chunks/index2.js

@@ -14,6 +14,7 @@ import './write_tsconfig.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 import 'node:http';
 import 'node:https';
@@ -284,7 +285,7 @@ async function build_client({
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
+				...config,
 				// In AMP mode, we know that there are no conditional component imports. In that case, we
 				// don't need to include CSS for components that are imported but unused, so we can just
 				// include rendered CSS.
@@ -292,8 +293,10 @@ async function build_client({
 				// has been enabled at the page level, so we don't do anything there.
 				emitCss: !config.kit.amp,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			})
 		],
 		// prevent Vite copying the contents of `config.kit.files.assets`,
@@ -549,10 +552,12 @@ async function build_server(
 		},
 		plugins: [
 			svelte({
-				extensions: config.extensions,
+				...config,
 				compilerOptions: {
+					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
-				}
+				},
+				configFile: false
 			})
 		],
 		resolve: {

package/dist/chunks/index4.js

@@ -6,6 +6,7 @@ import 'fs';
 import 'path';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'url';
 import 'os';
 import './misc.js';

package/dist/chunks/sync.js

@@ -1,13 +1,14 @@
 import path__default from 'path';
 import fs__default from 'fs';
 import { g as get_runtime_path } from '../cli.js';
-import { p as posixify, c as copy } from './filesystem.js';
+import { p as posixify, c as copy, r as rimraf } from './filesystem.js';
 import { p as parse_route_id, s } from './misc.js';
 import { fileURLToPath } from 'url';
 import { w as write_if_changed, t as trim, a as write_tsconfig } from './write_tsconfig.js';
 import 'sade';
 import 'child_process';
 import 'net';
+import 'chokidar';
 import 'os';
 
 /**
@@ -763,6 +764,8 @@ export type Load<
  * @param {import('types').ManifestData} manifest_data
  */
 function write_types(config, manifest_data) {
+	rimraf(`${config.kit.outDir}/types`);
+
 	/** @type {Map<string, { params: string[], type: 'page' | 'endpoint' | 'both' }>} */
 	const shadow_types = new Map();
 
@@ -811,8 +814,11 @@ function write_types(config, manifest_data) {
 
 		content.unshift(header(imports.join(', ')));
 
+		const parts = (key || 'index').split('/');
+		parts.push('__types', /** @type {string} */ (parts.pop()));
+
 		write_if_changed(
-			`${config.kit.outDir}/types/${key || 'index'}.d.ts`,
+			`${config.kit.outDir}/types/${parts.join('/')}.d.ts`,
 			content.join('\n').trim()
 		);
 	});

package/dist/cli.js

@@ -3,6 +3,7 @@ import fs__default from 'fs';
 import path__default, { join, relative } from 'path';
 import { exec as exec$1 } from 'child_process';
 import { createConnection, createServer } from 'net';
+import chokidar from 'chokidar';
 import * as url from 'url';
 import { networkInterfaces, release } from 'os';
 
@@ -782,7 +783,7 @@ async function load_config({ cwd = process.cwd() } = {}) {
 		);
 	}
 
-	const config = await import(url.pathToFileURL(config_file).href);
+	const config = await import(`${url.pathToFileURL(config_file).href}?ts=${Date.now()}`);
 
 	const validated = validate_config(config.default);
 
@@ -870,7 +871,7 @@ async function launch(port, https, base) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}${base}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.334');
+const prog = sade('svelte-kit').version('1.0.0-next.337');
 
 prog
 	.command('dev')
@@ -881,17 +882,20 @@ prog
 	.option('--https', 'Use self-signed HTTPS certificate')
 	.option('-H', 'no longer supported, use --https instead') // TODO remove for 1.0
 	.action(async ({ port, host, https, open, H }) => {
-		try {
-			if (H) throw new Error('-H is no longer supported — use --https instead');
+		let first = true;
+		let relaunching = false;
+		let uid = 1;
 
-			process.env.NODE_ENV = process.env.NODE_ENV || 'development';
-			const config = await load_config();
+		/** @type {() => Promise<void>} */
+		let close;
 
+		/** @param {import('types').ValidatedConfig} config */
+		async function start(config) {
 			const { dev } = await import('./chunks/index.js');
 
 			const cwd = process.cwd();
 
-			const { address_info, server_config } = await dev({
+			const { address_info, server_config, close } = await dev({
 				cwd,
 				port,
 				host,
@@ -903,12 +907,52 @@ prog
 				port: address_info.port,
 				host: address_info.address,
 				https: !!(https || server_config.https),
-				open: open || !!server_config.open,
+				open: first && (open || !!server_config.open),
 				base: config.kit.paths.base,
 				loose: server_config.fs.strict === false,
 				allow: server_config.fs.allow,
 				cwd
 			});
+
+			first = false;
+
+			return close;
+		}
+
+		async function relaunch() {
+			const id = uid;
+			relaunching = true;
+
+			try {
+				const updated_config = await load_config();
+				await close();
+				close = await start(updated_config);
+
+				if (id !== uid) relaunch();
+			} catch (e) {
+				const error = /** @type {Error} */ (e);
+
+				console.error($.bold().red(`> ${error.message}`));
+				if (error.stack) {
+					console.error($.gray(error.stack.split('\n').slice(1).join('\n')));
+				}
+			}
+
+			relaunching = false;
+		}
+
+		try {
+			if (H) throw new Error('-H is no longer supported — use --https instead');
+
+			process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+			const config = await load_config();
+			close = await start(config);
+
+			chokidar.watch('svelte.config.js', { ignoreInitial: true }).on('change', () => {
+				if (relaunching) uid += 1;
+				else relaunch();
+			});
 		} catch (error) {
 			handle_error(error);
 		}
@@ -1049,7 +1093,7 @@ async function check_port(port) {
 function welcome({ port, host, https, open, base, loose, allow, cwd }) {
 	if (open) launch(port, https, base);
 
-	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.334'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.337'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.334",
+  "version": "1.0.0-next.337",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -10,10 +10,10 @@
   "homepage": "https://kit.svelte.dev",
   "type": "module",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
     "chokidar": "^3.5.3",
     "sade": "^1.7.4",
-    "vite": "^2.9.0"
+    "vite": "^2.9.9"
   },
   "devDependencies": {
     "@playwright/test": "^1.21.0",
@@ -46,6 +46,7 @@
     "svelte-preprocess": "^4.9.8",
     "svelte2tsx": "~0.5.0",
     "tiny-glob": "^0.2.9",
+    "typescript": "^4.6.4",
     "uvu": "^0.5.2"
   },
   "peerDependencies": {

package/types/ambient.d.ts

@@ -15,7 +15,15 @@
  * }
  * ```
  *
- * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, `session` and `stuff`:
+ * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, `session` and `stuff`.
+ *
+ * Note that since it's an ambient declaration file, you can't use `import` statements — instead, use the `import(...)` function:
+ *
+ * ```ts
+ * interface Locals {
+ * 	user: import('$lib/types').User;
+ * }
+ * ```
  */
 declare namespace App {
 	/**

package/types/index.d.ts

@@ -13,9 +13,7 @@ import {
 	MaybePromise,
 	Prerendered,
 	PrerenderOnErrorValue,
-	RequestEvent,
 	RequestOptions,
-	ResolveOptions,
 	ResponseHeaders,
 	RouteDefinition,
 	TrailingSlash
@@ -235,6 +233,16 @@ export interface ParamMatcher {
 	(param: string): boolean;
 }
 
+export interface RequestEvent<Params extends Record<string, string> = Record<string, string>> {
+	clientAddress: string;
+	locals: App.Locals;
+	params: Params;
+	platform: Readonly<App.Platform>;
+	request: Request;
+	routeId: string | null;
+	url: URL;
+}
+
 /**
  * A `(event: RequestEvent) => RequestHandlerOutput` function exported from an endpoint that corresponds to an HTTP verb (`get`, `put`, `patch`, etc) and handles requests with that method. Note that since 'delete' is a reserved word in JavaScript, delete handles are called `del` instead.
  *
@@ -253,6 +261,11 @@ export interface RequestHandlerOutput<Output = ResponseBody> {
 	body?: Output extends ResponseBody ? Output : BodyValidator<Output>;
 }
 
+export interface ResolveOptions {
+	ssr?: boolean;
+	transformPage?: ({ html }: { html: string }) => MaybePromise<string>;
+}
+
 export type ResponseBody = JSONValue | Uint8Array | ReadableStream | import('stream').Readable;
 
 export class Server {

package/types/internal.d.ts

@@ -6,7 +6,9 @@ import {
 	Handle,
 	HandleError,
 	Load,
+	RequestEvent,
 	RequestHandler,
+	ResolveOptions,
 	Server,
 	SSRManifest
 } from './index';
@@ -14,9 +16,7 @@ import {
 	HttpMethod,
 	JSONObject,
 	MaybePromise,
-	RequestEvent,
 	RequestOptions,
-	ResolveOptions,
 	ResponseHeaders,
 	TrailingSlash
 } from './private';

package/types/private.d.ts

@@ -206,26 +206,11 @@ export interface PrerenderErrorHandler {
 
 export type PrerenderOnErrorValue = 'fail' | 'continue' | PrerenderErrorHandler;
 
-export interface RequestEvent<Params extends Record<string, string> = Record<string, string>> {
-	clientAddress: string;
-	locals: App.Locals;
-	params: Params;
-	platform: Readonly<App.Platform>;
-	request: Request;
-	routeId: string | null;
-	url: URL;
-}
-
 export interface RequestOptions {
 	getClientAddress: () => string;
 	platform?: App.Platform;
 }
 
-export interface ResolveOptions {
-	ssr?: boolean;
-	transformPage?: ({ html }: { html: string }) => MaybePromise<string>;
-}
-
 /** `string[]` is only for set-cookie, everything else must be type of `string` */
 export type ResponseHeaders = Record<string, string | number | string[]>;