@sveltejs/kit 1.0.0-next.285 → 1.0.0-next.288

package/assets/client/start.js

@@ -93,9 +93,6 @@ class Router {
 		this.enabled = true;
 		this.initialized = false;
 
-		// make it possible to reset focus
-		document.body.setAttribute('tabindex', '-1');
-
 		// keeping track of the history index in order to prevent popstate navigation events if needed
 		this.current_history_index = history.state?.['sveltekit:index'] ?? 0;
 
@@ -658,12 +655,12 @@ function create_updated_store() {
  * @param {RequestInit} [opts]
  */
 function initial_fetch(resource, opts) {
-	const url = typeof resource === 'string' ? resource : resource.url;
+	const url = JSON.stringify(typeof resource === 'string' ? resource : resource.url);
 
-	let selector = `script[data-type="svelte-data"][data-url=${JSON.stringify(url)}]`;
+	let selector = `script[sveltekit\\:data-type="data"][sveltekit\\:data-url=${url}]`;
 
 	if (opts && typeof opts.body === 'string') {
-		selector += `[data-body="${hash(opts.body)}"]`;
+		selector += `[sveltekit\\:data-body="${hash(opts.body)}"]`;
 	}
 
 	const script = document.querySelector(selector);
@@ -782,7 +779,7 @@ class Renderer {
 				let props;
 
 				if (is_leaf) {
-					const serialized = document.querySelector('[data-type="svelte-props"]');
+					const serialized = document.querySelector('script[sveltekit\\:data-type="props"]');
 					if (serialized) {
 						props = JSON.parse(/** @type {string} */ (serialized.textContent));
 					}
@@ -932,8 +929,24 @@ class Renderer {
 			const { scroll, keepfocus } = opts;
 
 			if (!keepfocus) {
+				// Reset page selection and focus
+				// We try to mimick browsers' behaviour as closely as possible by targeting the
+				// viewport, but unfortunately it's not a perfect match — e.g. shift-tabbing won't
+				// immediately cycle from the end of the page
+				// See https://html.spec.whatwg.org/multipage/interaction.html#get-the-focusable-area
+				const root = document.documentElement;
+				const tabindex = root.getAttribute('tabindex');
+
 				getSelection()?.removeAllRanges();
-				document.body.focus();
+				root.tabIndex = -1;
+				root.focus();
+
+				// restore `tabindex` as to prevent the document from stealing input from elements
+				if (tabindex !== null) {
+					root.setAttribute('tabindex', tabindex);
+				} else {
+					root.removeAttribute('tabindex');
+				}
 			}
 
 			// need to render the DOM before we can scroll to the rendered elements

package/assets/server/index.js

@@ -498,30 +498,62 @@ function coalesce_to_error(err) {
 		: new Error(JSON.stringify(err));
 }
 
-// dict from https://github.com/yahoo/serialize-javascript/blob/183c18a776e4635a379fdc620f81771f219832bb/index.js#L25
-/** @type {Record<string, string>} */
-const escape_json_in_html_dict = {
+/**
+ * Inside a script element, only `</script` and `<!--` hold special meaning to the HTML parser.
+ *
+ * The first closes the script element, so everything after is treated as raw HTML.
+ * The second disables further parsing until `-->`, so the script element might be unexpectedly
+ * kept open until until an unrelated HTML comment in the page.
+ *
+ * U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are escaped for the sake of pre-2018
+ * browsers.
+ *
+ * @see tests for unsafe parsing examples.
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
+ * @see https://html.spec.whatwg.org/multipage/syntax.html#cdata-rcdata-restrictions
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-state
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-double-escaped-state
+ * @see https://github.com/tc39/proposal-json-superset
+ * @type {Record<string, string>}
+ */
+const render_json_payload_script_dict = {
 	'<': '\\u003C',
-	'>': '\\u003E',
-	'/': '\\u002F',
 	'\u2028': '\\u2028',
 	'\u2029': '\\u2029'
 };
 
-const escape_json_in_html_regex = new RegExp(
-	`[${Object.keys(escape_json_in_html_dict).join('')}]`,
+const render_json_payload_script_regex = new RegExp(
+	`[${Object.keys(render_json_payload_script_dict).join('')}]`,
 	'g'
 );
 
 /**
- * Escape a JSONValue that's going to be embedded in a `<script>` tag
- * @param {import('types').JSONValue} val
+ * Generates a raw HTML string containing a safe script element carrying JSON data and associated attributes.
+ *
+ * It escapes all the special characters needed to guarantee the element is unbroken, but care must
+ * be taken to ensure it is inserted in the document at an acceptable position for a script element,
+ * and that the resulting string isn't further modified.
+ *
+ * Attribute names must be type-checked so we don't need to escape them.
+ *
+ * @param {import('types').PayloadScriptAttributes} attrs A list of attributes to be added to the element.
+ * @param {import('types').JSONValue} payload The data to be carried by the element. Must be serializable to JSON.
+ * @returns {string} The raw HTML of a script element carrying the JSON payload.
+ * @example const html = render_json_payload_script({ type: 'data', url: '/data.json' }, { foo: 'bar' });
  */
-function escape_json_in_html(val) {
-	return JSON.stringify(val).replace(
-		escape_json_in_html_regex,
-		(match) => escape_json_in_html_dict[match]
+function render_json_payload_script(attrs, payload) {
+	const safe_payload = JSON.stringify(payload).replace(
+		render_json_payload_script_regex,
+		(match) => render_json_payload_script_dict[match]
 	);
+
+	let safe_attrs = '';
+	for (const [key, value] of Object.entries(attrs)) {
+		if (value === undefined) continue;
+		safe_attrs += ` sveltekit:data-${key}=${escape_html_attr(value)}`;
+	}
+
+	return `<script type="application/json"${safe_attrs}>${safe_payload}</script>`;
 }
 
 /**
@@ -1084,7 +1116,7 @@ async function render_response({
 	/** @type {Map<string, string>} */
 	const styles = new Map();
 
-	/** @type {Array<{ url: string, body: string, json: string }>} */
+	/** @type {Array<import('./types').Fetched>} */
 	const serialized_data = [];
 
 	let shadow_props;
@@ -1280,19 +1312,17 @@ async function render_response({
 
 			body += `\n\t\t<script ${attributes.join(' ')}>${init_app}</script>`;
 
-			// prettier-ignore
 			body += serialized_data
-				.map(({ url, body, json }) => {
-					let attributes = `type="application/json" data-type="svelte-data" data-url=${escape_html_attr(url)}`;
-					if (body) attributes += ` data-body="${hash(body)}"`;
-
-					return `<script ${attributes}>${json}</script>`;
-				})
+				.map(({ url, body, response }) =>
+					render_json_payload_script(
+						{ type: 'data', url, body: typeof body === 'string' ? hash(body) : undefined },
+						response
+					)
+				)
 				.join('\n\t');
 
 			if (shadow_props) {
-				// prettier-ignore
-				body += `<script type="application/json" data-type="svelte-props">${escape_json_in_html(shadow_props)}</script>`;
+				body += render_json_payload_script({ type: 'props' }, shadow_props);
 			}
 		}
 
@@ -1542,13 +1572,7 @@ async function load_node({
 
 	let uses_credentials = false;
 
-	/**
-	 * @type {Array<{
-	 *   url: string;
-	 *   body: string;
-	 *   json: string;
-	 * }>}
-	 */
+	/** @type {Array<import('./types').Fetched>} */
 	const fetched = [];
 
 	/**
@@ -1748,8 +1772,6 @@ async function load_node({
 							}
 
 							if (!opts.body || typeof opts.body === 'string') {
-								// the json constructed below is later added to the dom in a script tag
-								// make sure the used values are safe
 								const status_number = Number(response.status);
 								if (isNaN(status_number)) {
 									throw new Error(
@@ -1758,11 +1780,16 @@ async function load_node({
 										}" type: ${typeof response.status}`
 									);
 								}
-								// prettier-ignore
+
 								fetched.push({
 									url: requested,
-									body: /** @type {string} */ (opts.body),
-									json: `{"status":${status_number},"statusText":${s(response.statusText)},"headers":${s(headers)},"body":${escape_json_in_html(body)}}`
+									body: opts.body,
+									response: {
+										status: status_number,
+										statusText: response.statusText,
+										headers,
+										body
+									}
 								});
 							}
 

package/dist/chunks/index.js

@@ -6,7 +6,7 @@ import { r as runtime, S as SVELTE_KIT_ASSETS, a as resolve_entry, $, b as SVELT
 import fs__default from 'fs';
 import { URL } from 'url';
 import { s as sirv } from './build.js';
-import { __fetch_polyfill } from '../install-fetch.js';
+import { installFetch } from '../install-fetch.js';
 import { getRequest, setResponse } from '../node.js';
 import { sequence } from '../hooks.js';
 import './misc.js';
@@ -46,7 +46,7 @@ async function create_plugin(config, cwd) {
 		name: 'vite-plugin-svelte-kit',
 
 		configureServer(vite) {
-			__fetch_polyfill();
+			installFetch();
 
 			/** @type {import('types').SSRManifest} */
 			let manifest;
@@ -144,6 +144,24 @@ async function create_plugin(config, cwd) {
 				};
 			}
 
+			/** @param {Error} error */
+			function fix_stack_trace(error) {
+				// TODO https://github.com/vitejs/vite/issues/7045
+
+				// ideally vite would expose ssrRewriteStacktrace, but
+				// in lieu of that, we can implement it ourselves. we
+				// don't want to mutate the error object, because
+				// the stack trace could be 'fixed' multiple times,
+				// and Vite will fix stack traces before we even
+				// see them if they occur during ssrLoadModule
+				const original = error.stack;
+				vite.ssrFixStacktrace(error);
+				const fixed = error.stack;
+				error.stack = original;
+
+				return fixed;
+			}
+
 			update_manifest();
 
 			vite.watcher.on('add', update_manifest);
@@ -248,13 +266,19 @@ async function create_plugin(config, cwd) {
 							dev: true,
 							floc: config.kit.floc,
 							get_stack: (error) => {
-								vite.ssrFixStacktrace(error);
-								return error.stack;
+								return fix_stack_trace(error);
 							},
 							handle_error: (error, event) => {
-								vite.ssrFixStacktrace(error);
 								hooks.handleError({
-									error,
+									error: new Proxy(error, {
+										get: (target, property) => {
+											if (property === 'stack') {
+												return fix_stack_trace(error);
+											}
+
+											return Reflect.get(target, property, target);
+										}
+									}),
 									event,
 
 									// TODO remove for 1.0

package/dist/chunks/index5.js

@@ -2,7 +2,7 @@ import { b as SVELTE_KIT, m as mkdirp, h as rimraf, i as copy, $, j as logger }
 import { readFileSync, writeFileSync } from 'fs';
 import { resolve as resolve$1, join, dirname } from 'path';
 import { pathToFileURL, URL } from 'url';
-import { __fetch_polyfill } from '../install-fetch.js';
+import { installFetch } from '../install-fetch.js';
 import { g as generate_manifest } from './index4.js';
 import 'sade';
 import 'child_process';
@@ -342,18 +342,32 @@ function crawl(html) {
 	return hrefs;
 }
 
-// dict from https://github.com/yahoo/serialize-javascript/blob/183c18a776e4635a379fdc620f81771f219832bb/index.js#L25
-/** @type {Record<string, string>} */
-const escape_json_in_html_dict = {
+/**
+ * Inside a script element, only `</script` and `<!--` hold special meaning to the HTML parser.
+ *
+ * The first closes the script element, so everything after is treated as raw HTML.
+ * The second disables further parsing until `-->`, so the script element might be unexpectedly
+ * kept open until until an unrelated HTML comment in the page.
+ *
+ * U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR are escaped for the sake of pre-2018
+ * browsers.
+ *
+ * @see tests for unsafe parsing examples.
+ * @see https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
+ * @see https://html.spec.whatwg.org/multipage/syntax.html#cdata-rcdata-restrictions
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-state
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#script-data-double-escaped-state
+ * @see https://github.com/tc39/proposal-json-superset
+ * @type {Record<string, string>}
+ */
+const render_json_payload_script_dict = {
 	'<': '\\u003C',
-	'>': '\\u003E',
-	'/': '\\u002F',
 	'\u2028': '\\u2028',
 	'\u2029': '\\u2029'
 };
 
 new RegExp(
-	`[${Object.keys(escape_json_in_html_dict).join('')}]`,
+	`[${Object.keys(render_json_payload_script_dict).join('')}]`,
 	'g'
 );
 
@@ -458,7 +472,7 @@ async function prerender({ cwd, out, log, config, build_data, fallback, all }) {
 		return prerendered;
 	}
 
-	__fetch_polyfill();
+	installFetch();
 
 	const server_root = resolve$1(cwd, `${SVELTE_KIT}/output`);
 

package/dist/chunks/index6.js

@@ -5,7 +5,7 @@ import { resolve, join } from 'path';
 import { s as sirv } from './build.js';
 import { pathToFileURL } from 'url';
 import { getRequest, setResponse } from '../node.js';
-import { __fetch_polyfill } from '../install-fetch.js';
+import { installFetch } from '../install-fetch.js';
 import { b as SVELTE_KIT, S as SVELTE_KIT_ASSETS } from '../cli.js';
 import 'querystring';
 import 'stream';
@@ -43,7 +43,7 @@ async function preview({
 	https: use_https = false,
 	cwd = process.cwd()
 }) {
-	__fetch_polyfill();
+	installFetch();
 
 	const index_file = resolve(cwd, `${SVELTE_KIT}/output/server/index.js`);
 	const manifest_file = resolve(cwd, `${SVELTE_KIT}/output/server/manifest.js`);

package/dist/cli.js

@@ -422,7 +422,7 @@ function get_mime_lookup(manifest_data) {
 	return mime;
 }
 
-/** @param {import('@sveltejs/kit').ValidatedConfig} config */
+/** @param {import('types').ValidatedConfig} config */
 function get_aliases(config) {
 	const alias = {
 		__GENERATED__: path__default.posix.resolve(`${SVELTE_KIT}/generated`),
@@ -998,7 +998,7 @@ async function launch(port, https) {
 	exec(`${cmd} ${https ? 'https' : 'http'}://localhost:${port}`);
 }
 
-const prog = sade('svelte-kit').version('1.0.0-next.285');
+const prog = sade('svelte-kit').version('1.0.0-next.288');
 
 prog
 	.command('dev')
@@ -1156,7 +1156,7 @@ async function check_port(port) {
 function welcome({ port, host, https, open, loose, allow, cwd }) {
 	if (open) launch(port, https);
 
-	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.285'}\n`));
+	console.log($.bold().cyan(`\n  SvelteKit v${'1.0.0-next.288'}\n`));
 
 	const protocol = https ? 'https:' : 'http:';
 	const exposed = typeof host !== 'undefined' && host !== 'localhost' && host !== '127.0.0.1';

package/dist/install-fetch.js

@@ -6490,7 +6490,7 @@ function fixResponseChunkedTransferBadEnding(request, errorCallback) {
 }
 
 // exported for dev/preview and node environments
-function __fetch_polyfill() {
+function installFetch() {
 	Object.defineProperties(globalThis, {
 		fetch: {
 			enumerable: true,
@@ -6515,4 +6515,4 @@ function __fetch_polyfill() {
 	});
 }
 
-export { FormData as F, Headers, Request, Response, __fetch_polyfill, File as a, commonjsGlobal as c, fetch };
+export { FormData as F, File as a, commonjsGlobal as c, installFetch };

package/dist/node.js

@@ -1,6 +1,6 @@
 import { Readable } from 'stream';
 
-/** @type {import('@sveltejs/kit/node').GetRawBody} */
+/** @param {import('http').IncomingMessage} req */
 function get_raw_body(req) {
 	return new Promise((fulfil, reject) => {
 		const h = req.headers;
@@ -50,7 +50,7 @@ function get_raw_body(req) {
 	});
 }
 
-/** @type {import('@sveltejs/kit/node').GetRequest} */
+/** @type {import('@sveltejs/kit/node').getRequest} */
 async function getRequest(base, req) {
 	let headers = /** @type {Record<string, string>} */ (req.headers);
 	if (req.httpVersionMajor === 2) {
@@ -69,9 +69,8 @@ async function getRequest(base, req) {
 	});
 }
 
-/** @type {import('@sveltejs/kit/node').SetResponse} */
+/** @type {import('@sveltejs/kit/node').setResponse} */
 async function setResponse(res, response) {
-	/** @type {import('types').ResponseHeaders} */
 	const headers = Object.fromEntries(response.headers);
 
 	if (response.headers.has('set-cookie')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/kit",
-  "version": "1.0.0-next.285",
+  "version": "1.0.0-next.288",
   "repository": {
     "type": "git",
     "url": "https://github.com/sveltejs/kit",
@@ -15,7 +15,7 @@
     "vite": "^2.8.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.17.1",
+    "@playwright/test": "^1.19.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@types/amphtml-validator": "^1.0.1",
     "@types/cookie": "^0.4.1",
@@ -82,8 +82,9 @@
     "check": "tsc && svelte-check --ignore test/prerendering,src/packaging/test",
     "format": "npm run check-format -- --write",
     "check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
-    "test": "npm run test:unit && npm run test:packaging && npm run test:prerendering && npm run test:integration",
+    "test": "npm run test:unit && npm run test:typings && npm run test:packaging && npm run test:prerendering && npm run test:integration",
     "test:unit": "uvu src \"(spec\\.js|test[\\\\/]index\\.js)\" -i packaging",
+    "test:typings": "tsc --project test/typings",
     "test:prerendering": "pnpm test:prerendering:basics && pnpm test:prerendering:options",
     "test:prerendering:basics": "cd test/prerendering/basics && pnpm test",
     "test:prerendering:options": "cd test/prerendering/options && pnpm test",