@sveltejs/kit 1.0.0-next.333 → 1.0.0-next.336

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';
@@ -85,7 +86,7 @@ async function create_plugin(config, cwd) {
 								if (!node) throw new Error(`Could not find node for ${url}`);
 
 								const deps = new Set();
-								find_deps(node, deps);
+								await find_deps(vite, node, deps);
 
 								/** @type {Record<string, string>} */
 								const styles = {};
@@ -399,16 +400,42 @@ function remove_html_middlewares(server) {
 }
 
 /**
+ * @param {import('vite').ViteDevServer} vite
  * @param {import('vite').ModuleNode} node
  * @param {Set<import('vite').ModuleNode>} deps
  */
-function find_deps(node, deps) {
-	for (const dep of node.importedModules) {
-		if (!deps.has(dep)) {
-			deps.add(dep);
-			find_deps(dep, 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 */
+	async function add(node) {
+		if (!deps.has(node)) {
+			deps.add(node);
+			await find_deps(vite, node, deps);
 		}
 	}
+
+	/** @param {string} url */
+	async function add_by_url(url) {
+		const node = await vite.moduleGraph.getModuleByUrl(url);
+
+		if (node) {
+			await add(node);
+		}
+	}
+
+	if (node.ssrTransformResult) {
+		if (node.ssrTransformResult.deps) {
+			node.ssrTransformResult.deps.forEach((url) => branches.push(add_by_url(url)));
+		}
+	} else {
+		node.importedModules.forEach((node) => branches.push(add(node)));
+	}
+
+	await Promise.all(branches);
 }
 
 /**
@@ -439,9 +466,9 @@ async function dev({ cwd, port, host, https, config }) {
 							path__default.resolve(cwd, 'node_modules'),
 							path__default.resolve(vite.searchForWorkspaceRoot(cwd), 'node_modules')
 						])
-					],
-					port: 3000
+					]
 				},
+				port: 3000,
 				strictPort: true
 			}
 		},
@@ -464,7 +491,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.
@@ -472,8 +499,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.333');
+const prog = sade('svelte-kit').version('1.0.0-next.336');
 
 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.333'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.336'}\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.333",
+  "version": "1.0.0-next.336",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -10,7 +10,7 @@
   "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"
@@ -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[]>;