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

package/assets/app/env.js

@@ -12,9 +12,5 @@ const dev = !!import.meta.env.DEV;
  * @type {import('$app/env').mode}
  */
 const mode = import.meta.env.MODE;
-/**
- * @type {import('$app/env').amp}
- */
-const amp = !!import.meta.env.VITE_SVELTEKIT_AMP;
 
-export { amp, browser, dev, mode };
+export { browser, dev, mode };

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;
@@ -914,7 +941,18 @@ function create_client({ target, session, base, trailing_slash }) {
 				props: props || {},
 				get url() {
 					node.uses.url = true;
-					return url;
+
+					return new Proxy(url, {
+						get: (target, property) => {
+							if (property === 'hash') {
+								throw new Error(
+									'url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.'
+								);
+							}
+
+							return Reflect.get(target, property, target);
+						}
+					});
 				},
 				get session() {
 					node.uses.session = true;
@@ -924,11 +962,44 @@ function create_client({ target, session, base, trailing_slash }) {
 					node.uses.stuff = true;
 					return { ...stuff };
 				},
-				fetch(resource, info) {
-					const requested = typeof resource === 'string' ? resource : resource.url;
-					add_dependency(requested);
+				async fetch(resource, init) {
+					let requested;
+
+					if (typeof resource === 'string') {
+						requested = resource;
+					} else {
+						requested = resource.url;
+
+						// we're not allowed to modify the received `Request` object, so in order
+						// to fixup relative urls we create a new equivalent `init` object instead
+						init = {
+							// the request body must be consumed in memory until browsers
+							// implement streaming request bodies and/or the body getter
+							body:
+								resource.method === 'GET' || resource.method === 'HEAD'
+									? undefined
+									: await resource.blob(),
+							cache: resource.cache,
+							credentials: resource.credentials,
+							headers: resource.headers,
+							integrity: resource.integrity,
+							keepalive: resource.keepalive,
+							method: resource.method,
+							mode: resource.mode,
+							redirect: resource.redirect,
+							referrer: resource.referrer,
+							referrerPolicy: resource.referrerPolicy,
+							signal: resource.signal,
+							...init
+						};
+					}
+
+					// we must fixup relative urls so they are resolved from the target page
+					const normalized = new URL(requested, url).href;
+					add_dependency(normalized);
 
-					return started ? fetch(resource, info) : initial_fetch(resource, info);
+					// prerendered pages may be served from any origin, so `initial_fetch` urls shouldn't be normalized
+					return started ? fetch$1(normalized, init) : initial_fetch(requested, init);
 				},
 				status: status ?? null,
 				error: error ?? null
@@ -943,7 +1014,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 +1109,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

@@ -1130,7 +1130,7 @@ async function render_response({
 		}
 
 		if (options.template_contains_nonce) {
-			throw new Error('Cannot use prerendering if page template contains %svelte.nonce%');
+			throw new Error('Cannot use prerendering if page template contains %sveltekit.nonce%');
 		}
 	}
 
@@ -1272,95 +1272,76 @@ async function render_response({
 		}
 	`;
 
-	if (options.amp) {
-		// inline_style contains CSS files (i.e. `import './styles.css'`)
-		// rendered.css contains the CSS from `<style>` tags in Svelte components
-		const styles = `${inlined_style}\n${rendered.css.code}`;
-		head += `
-		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
-		<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-		<script async src="https://cdn.ampproject.org/v0.js"></script>
-
-		<style amp-custom>${styles}</style>`;
-
-		if (options.service_worker) {
-			head +=
-				'<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>';
+	if (inlined_style) {
+		const attributes = [];
+		if (options.dev) attributes.push(' data-sveltekit');
+		if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
 
-			body += `<amp-install-serviceworker src="${options.service_worker}" layout="nodisplay"></amp-install-serviceworker>`;
-		}
-	} else {
-		if (inlined_style) {
-			const attributes = [];
-			if (options.dev) attributes.push(' data-sveltekit');
-			if (csp.style_needs_nonce) attributes.push(` nonce="${csp.nonce}"`);
+		csp.add_style(inlined_style);
 
-			csp.add_style(inlined_style);
+		head += `\n\t<style${attributes.join('')}>${inlined_style}</style>`;
+	}
 
-			head += `\n\t<style${attributes.join('')}>${inlined_style}</style>`;
-		}
+	// prettier-ignore
+	head += Array.from(stylesheets)
+		.map((dep) => {
+			const attributes = [
+				'rel="stylesheet"',
+				`href="${options.prefix + dep}"`
+			];
 
-		// prettier-ignore
-		head += Array.from(stylesheets)
-			.map((dep) => {
-				const attributes = [
-					'rel="stylesheet"',
-					`href="${options.prefix + dep}"`
-				];
+			if (csp.style_needs_nonce) {
+				attributes.push(`nonce="${csp.nonce}"`);
+			}
 
-				if (csp.style_needs_nonce) {
-					attributes.push(`nonce="${csp.nonce}"`);
-				}
+			if (styles.has(dep)) {
+				// don't load stylesheets that are already inlined
+				// include them in disabled state so that Vite can detect them and doesn't try to add them
+				attributes.push('disabled', 'media="(max-width: 0)"');
+			}
 
-				if (styles.has(dep)) {
-					// don't load stylesheets that are already inlined
-					// include them in disabled state so that Vite can detect them and doesn't try to add them
-					attributes.push('disabled', 'media="(max-width: 0)"');
-				}
+			return `\n\t<link ${attributes.join(' ')}>`;
+		})
+		.join('');
 
-				return `\n\t<link ${attributes.join(' ')}>`;
-			})
+	if (page_config.router || page_config.hydrate) {
+		head += Array.from(modulepreloads)
+			.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
 			.join('');
 
-		if (page_config.router || page_config.hydrate) {
-			head += Array.from(modulepreloads)
-				.map((dep) => `\n\t<link rel="modulepreload" href="${options.prefix + dep}">`)
-				.join('');
+		const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
 
-			const attributes = ['type="module"', `data-sveltekit-hydrate="${target}"`];
+		csp.add_script(init_app);
 
-			csp.add_script(init_app);
-
-			if (csp.script_needs_nonce) {
-				attributes.push(`nonce="${csp.nonce}"`);
-			}
+		if (csp.script_needs_nonce) {
+			attributes.push(`nonce="${csp.nonce}"`);
+		}
 
-			body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
+		body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
 
-			body += serialized_data
-				.map(({ url, body, response }) =>
-					render_json_payload_script(
-						{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
-						response
-					)
+		body += serialized_data
+			.map(({ url, body, response }) =>
+				render_json_payload_script(
+					{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
+					response
 				)
-				.join('\n\t');
+			)
+			.join('\n\t');
 
-			if (shadow_props) {
-				body += render_json_payload_script({ type: 'props' }, shadow_props);
-			}
+		if (shadow_props) {
+			body += render_json_payload_script({ type: 'props' }, shadow_props);
 		}
+	}
 
-		if (options.service_worker) {
-			// always include service worker unless it's turned off explicitly
-			csp.add_script(init_service_worker);
+	if (options.service_worker) {
+		// always include service worker unless it's turned off explicitly
+		csp.add_script(init_service_worker);
 
-			head += `
-				<script${csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''}>${init_service_worker}</script>`;
-		}
+		head += `
+			<script${csp.script_needs_nonce ? ` nonce="${csp.nonce}"` : ''}>${init_service_worker}</script>`;
 	}
 
-	if (state.prerender && !options.amp) {
+	if (state.prerender) {
 		const http_equiv = [];
 
 		const csp_headers = csp.get_meta();

package/dist/chunks/filesystem.js

@@ -13,7 +13,7 @@ function mkdirp(dir) {
 
 /** @param {string} path */
 function rimraf(path) {
-	(fs__default.rmSync || fs__default.rmdirSync)(path, { recursive: true, force: true });
+	fs__default.rmSync(path, { force: true, recursive: true });
 }
 
 /**

package/dist/chunks/index.js

@@ -9,7 +9,6 @@ import { S as SVELTE_KIT_ASSETS, s as sirv } from './constants.js';
 import { installFetch } from '../install-fetch.js';
 import { update, init } from './sync.js';
 import { getRequest, setResponse } from '../node.js';
-import { sequence } from '../hooks.js';
 import { p as posixify } from './filesystem.js';
 import { p as parse_route_id } from './misc.js';
 import 'sade';
@@ -39,14 +38,6 @@ const style_pattern = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/;
 async function create_plugin(config, cwd) {
 	const runtime = get_runtime_path(config);
 
-	/** @type {import('types').Handle} */
-	let amp;
-
-	if (config.kit.amp) {
-		process.env.VITE_SVELTEKIT_AMP = 'true';
-		amp = (await import('./amp_hook.js')).handle;
-	}
-
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = '0';
 
 	/** @type {import('types').Respond} */
@@ -194,6 +185,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) => {
@@ -233,7 +229,7 @@ async function create_plugin(config, cwd) {
 						/** @type {import('types').Hooks} */
 						const hooks = {
 							getSession: user_hooks.getSession || (() => ({})),
-							handle: amp ? sequence(amp, handle) : handle,
+							handle,
 							handleError:
 								user_hooks.handleError ||
 								(({ /** @type {Error & { frame?: string }} */ error }) => {
@@ -295,7 +291,6 @@ async function create_plugin(config, cwd) {
 						const rendered = await respond(
 							request,
 							{
-								amp: config.kit.amp,
 								csp: config.kit.csp,
 								dev: true,
 								floc: config.kit.floc,
@@ -340,14 +335,14 @@ async function create_plugin(config, cwd) {
 								template: ({ head, body, assets, nonce }) => {
 									return (
 										template
-											.replace(/%svelte\.assets%/g, assets)
-											.replace(/%svelte\.nonce%/g, nonce)
-											// head and body must be replaced last, in case someone tries to sneak in %svelte.assets% etc
-											.replace('%svelte.head%', () => head)
-											.replace('%svelte.body%', () => body)
+											.replace(/%sveltekit\.assets%/g, assets)
+											.replace(/%sveltekit\.nonce%/g, nonce)
+											// head and body must be replaced last, in case someone tries to sneak in %sveltekit.assets% etc
+											.replace('%sveltekit.head%', () => head)
+											.replace('%sveltekit.body%', () => body)
 									);
 								},
-								template_contains_nonce: template.includes('%svelte.nonce%'),
+								template_contains_nonce: template.includes('%sveltekit.nonce%'),
 								trailing_slash: config.kit.trailingSlash
 							},
 							{
@@ -359,10 +354,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);
@@ -389,7 +387,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
@@ -469,7 +468,10 @@ async function dev({ cwd, port, host, https, config }) {
 					]
 				},
 				port: 3000,
-				strictPort: true
+				strictPort: true,
+				watch: {
+					ignored: [`${config.kit.outDir}/**`, `!${config.kit.outDir}/generated/**`]
+				}
 			}
 		},
 		await config.kit.vite()
@@ -492,12 +494,7 @@ async function dev({ cwd, port, host, https, config }) {
 		plugins: [
 			svelte({
 				...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.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				emitCss: true,
 				compilerOptions: {
 					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate

package/dist/chunks/index2.js

@@ -238,8 +238,6 @@ async function build_client({
 	process.env.VITE_SVELTEKIT_APP_VERSION_FILE = `${config.kit.appDir}/version.json`;
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = `${config.kit.version.pollInterval}`;
 
-	process.env.VITE_SVELTEKIT_AMP = config.kit.amp ? 'true' : '';
-
 	const client_out_dir = `${output_dir}/client/${config.kit.appDir}`;
 
 	/** @type {Record<string, string>} */
@@ -286,12 +284,7 @@ async function build_client({
 		plugins: [
 			svelte({
 				...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.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				emitCss: true,
 				compilerOptions: {
 					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate
@@ -349,10 +342,10 @@ import { set_paths, assets, base } from '${runtime}/paths.js';
 import { set_prerendering } from '${runtime}/env.js';
 
 const template = ({ head, body, assets, nonce }) => ${s(template)
-	.replace('%svelte.head%', '" + head + "')
-	.replace('%svelte.body%', '" + body + "')
-	.replace(/%svelte\.assets%/g, '" + assets + "')
-	.replace(/%svelte\.nonce%/g, '" + nonce + "')};
+	.replace('%sveltekit.head%', '" + head + "')
+	.replace('%sveltekit.body%', '" + body + "')
+	.replace(/%sveltekit\.assets%/g, '" + assets + "')
+	.replace(/%sveltekit\.nonce%/g, '" + nonce + "')};
 
 let read = null;
 
@@ -372,7 +365,6 @@ export function override(settings) {
 export class Server {
 	constructor(manifest) {
 		this.options = {
-			amp: ${config.kit.amp},
 			csp: ${s(config.kit.csp)},
 			dev: false,
 			floc: ${config.kit.floc},
@@ -402,7 +394,7 @@ export class Server {
 			service_worker: ${has_service_worker ? "base + '/service-worker.js'" : 'null'},
 			router: ${s(config.kit.browser.router)},
 			template,
-			template_contains_nonce: ${template.includes('%svelte.nonce%')},
+			template_contains_nonce: ${template.includes('%sveltekit.nonce%')},
 			trailing_slash: ${s(config.kit.trailingSlash)}
 		};
 	}
@@ -581,7 +573,7 @@ async function build_server(
 
 	client.assets.forEach((asset) => {
 		if (asset.fileName.endsWith('.css')) {
-			if (config.kit.amp || asset.source.length < config.kit.inlineStyleThreshold) {
+			if (asset.source.length < config.kit.inlineStyleThreshold) {
 				const index = stylesheet_lookup.size;
 				const file = `${output_dir}/server/stylesheets/${index}.js`;
 

package/dist/chunks/index6.js

@@ -5950,14 +5950,14 @@ const flatten_properties = (array, target) => {
  * @param {any[]} nodes
  * @param {any[]} target
  */
-const flatten = (nodes, target) => {
+const flatten$1 = (nodes, target) => {
 	for (let i = 0; i < nodes.length; i += 1) {
 		const node = nodes[i];
 
 		if (node === EMPTY) continue;
 
 		if (Array.isArray(node)) {
-			flatten(node, target);
+			flatten$1(node, target);
 			continue;
 		}
 
@@ -6076,7 +6076,7 @@ const inject = (raw, node, values, comments) => {
 			}
 
 			if (node.type === 'ArrayExpression' || node.type === 'ArrayPattern') {
-				node.elements = flatten(node.elements, []);
+				node.elements = flatten$1(node.elements, []);
 			}
 
 			if (
@@ -6084,18 +6084,18 @@ const inject = (raw, node, values, comments) => {
 				node.type === 'FunctionDeclaration' ||
 				node.type === 'ArrowFunctionExpression'
 			) {
-				node.params = flatten(node.params, []);
+				node.params = flatten$1(node.params, []);
 			}
 
 			if (node.type === 'CallExpression' || node.type === 'NewExpression') {
-				node.arguments = flatten(node.arguments, []);
+				node.arguments = flatten$1(node.arguments, []);
 			}
 
 			if (
 				node.type === 'ImportDeclaration' ||
 				node.type === 'ExportNamedDeclaration'
 			) {
-				node.specifiers = flatten(node.specifiers, []);
+				node.specifiers = flatten$1(node.specifiers, []);
 			}
 
 			if (node.type === 'ForStatement') {
@@ -13813,7 +13813,7 @@ const meta_tags = new Map([
     ['svelte:window', 'Window'],
     ['svelte:body', 'Body']
 ]);
-Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:fragment');
+Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:fragment', 'svelte:element');
 
 function getLocator(source, options) {
     if (options === void 0) { options = {}; }
@@ -13850,6 +13850,19 @@ function getLocator(source, options) {
     return locate;
 }
 
+/**
+ * Pushes all `items` into `array` using `push`, therefore mutating the array.
+ * We do this for memory and perf reasons, and because `array.push(...items)` would
+ * run into a "max call stack size exceeded" error with too many items (~65k).
+ * @param array
+ * @param items
+ */
+function push_array$1(array, items) {
+    for (let i = 0; i < items.length; i++) {
+        array.push(items[i]);
+    }
+}
+
 x `true`;
 x `false`;
 
@@ -14744,13 +14757,6 @@ function merge_tables(this_table, other_table) {
     }
     return [new_table, idx_map, val_changed, idx_changed];
 }
-function pushArray(_this, other) {
-    // We use push to mutate in place for memory and perf reasons
-    // We use the for loop instead of _this.push(...other) to avoid the JS engine's function argument limit (65,535 in JavascriptCore)
-    for (let i = 0; i < other.length; i++) {
-        _this.push(other[i]);
-    }
-}
 class MappedCode {
     constructor(string = '', map = null) {
         this.string = string;
@@ -14838,9 +14844,9 @@ class MappedCode {
             }
         }
         // combine last line + first line
-        pushArray(m1.mappings[m1.mappings.length - 1], m2.mappings.shift());
+        push_array$1(m1.mappings[m1.mappings.length - 1], m2.mappings.shift());
         // append other lines
-        pushArray(m1.mappings, m2.mappings);
+        push_array$1(m1.mappings, m2.mappings);
         return this;
     }
     static from_processed(string, map) {
@@ -15549,7 +15555,7 @@ async function build(config, cwd = process.cwd()) {
 	mkdirp(dir);
 
 	// Make sure generated tsconfig is up-to-date
-	write_tsconfig(config);
+	write_tsconfig(config, cwd);
 
 	const files = scan(config);