svelte 4.2.1 → 4.2.3

package/compiler.cjs

@@ -15558,7 +15558,7 @@ var compiler_warnings = {
 	a11y_click_events_have_key_events: {
 		code: 'a11y-click-events-have-key-events',
 		message:
-			'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
+			'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.'
 	},
 	a11y_missing_content: /** @param {string} name */ (name) => ({
 		code: 'a11y-missing-content',
@@ -15707,7 +15707,7 @@ function is_dynamic$1(variable) {
 	return false;
 }
 
-function nodes_match(a, b) {
+function nodes_match(a, b, ignoreKeys = []) {
 	if (!!a !== !!b) return false;
 	if (Array.isArray(a) !== Array.isArray(b)) return false;
 
@@ -15717,8 +15717,12 @@ function nodes_match(a, b) {
 			return a.every((child, i) => nodes_match(child, b[i]));
 		}
 
-		const a_keys = Object.keys(a).sort();
-		const b_keys = Object.keys(b).sort();
+		const a_keys = Object.keys(a)
+			.sort()
+			.filter((key) => !ignoreKeys.includes(key));
+		const b_keys = Object.keys(b)
+			.sort()
+			.filter((key) => !ignoreKeys.includes(key));
 
 		if (a_keys.length !== b_keys.length) return false;
 
@@ -15789,7 +15793,7 @@ function invalidate(renderer, scope, node, names, main_execution_context = false
 	if (
 		node.type === 'AssignmentExpression' &&
 		node.operator === '=' &&
-		nodes_match(node.left, node.right) &&
+		nodes_match(node.left, node.right, ['trailingComments', 'leadingComments']) &&
 		tail.length === 0
 	) {
 		return get_invalidated(head, node);
@@ -31491,8 +31495,8 @@ class AttributeWrapper extends BaseAttributeWrapper {
 				this.parent.has_dynamic_value = true;
 			}
 		}
-		if (this.parent.node.namespace == namespaces.foreign) {
-			// leave attribute case alone for elements in the "foreign" namespace
+		if (this.parent.node.namespace == namespaces.foreign || this.parent.node.name.includes('-')) {
+			// leave attribute case alone for elements in the "foreign" namespace and for custom elements
 			this.name = this.node.name;
 			this.metadata = this.get_metadata();
 			this.is_indirectly_bound_value = false;
@@ -41029,6 +41033,13 @@ class Chunk {
 		this.end = index;
 
 		if (this.edited) {
+			// after split we should save the edit content record into the correct chunk
+			// to make sure sourcemap correct
+			// For example:
+			// '  test'.trim()
+			//     split   -> '  ' + 'test'
+			//   ✔️ edit    -> '' + 'test'
+			//   ✖️ edit    -> 'test' + '' 
 			// TODO is this block necessary?...
 			newChunk.edit('', false);
 			this.content = '';
@@ -41057,6 +41068,10 @@ class Chunk {
 		if (trimmed.length) {
 			if (trimmed !== this.content) {
 				this.split(this.start + trimmed.length).edit('', undefined, true);
+				if (this.edited) {
+					// save the change, if it has been edited
+					this.edit(trimmed, this.storeName, true);
+				}
 			}
 			return true;
 		} else {
@@ -41075,7 +41090,11 @@ class Chunk {
 
 		if (trimmed.length) {
 			if (trimmed !== this.content) {
-				this.split(this.end - trimmed.length);
+				const newChunk = this.split(this.end - trimmed.length);
+				if (this.edited) {
+					// save the change, if it has been edited
+					newChunk.edit(trimmed, this.storeName, true);
+				}
 				this.edit('', undefined, true);
 			}
 			return true;
@@ -41088,7 +41107,7 @@ class Chunk {
 	}
 }
 
-function getBtoa () {
+function getBtoa() {
 	if (typeof window !== 'undefined' && typeof window.btoa === 'function') {
 		return (str) => window.btoa(unescape(encodeURIComponent(str)));
 	} else if (typeof Buffer === 'function') {
@@ -41201,6 +41220,8 @@ function getLocator(source) {
 	};
 }
 
+const wordRegex = /\w/;
+
 class Mappings {
 	constructor(hires) {
 		this.hires = hires;
@@ -41213,26 +41234,64 @@ class Mappings {
 
 	addEdit(sourceIndex, content, loc, nameIndex) {
 		if (content.length) {
+			let contentLineEnd = content.indexOf('\n', 0);
+			let previousContentLineEnd = -1;
+			while (contentLineEnd >= 0) {
+				const segment = [this.generatedCodeColumn, sourceIndex, loc.line, loc.column];
+				if (nameIndex >= 0) {
+					segment.push(nameIndex);
+				}
+				this.rawSegments.push(segment);
+
+				this.generatedCodeLine += 1;
+				this.raw[this.generatedCodeLine] = this.rawSegments = [];
+				this.generatedCodeColumn = 0;
+
+				previousContentLineEnd = contentLineEnd;
+				contentLineEnd = content.indexOf('\n', contentLineEnd + 1);
+			}
+
 			const segment = [this.generatedCodeColumn, sourceIndex, loc.line, loc.column];
 			if (nameIndex >= 0) {
 				segment.push(nameIndex);
 			}
 			this.rawSegments.push(segment);
+
+			this.advance(content.slice(previousContentLineEnd + 1));
 		} else if (this.pending) {
 			this.rawSegments.push(this.pending);
+			this.advance(content);
 		}
 
-		this.advance(content);
 		this.pending = null;
 	}
 
 	addUneditedChunk(sourceIndex, chunk, original, loc, sourcemapLocations) {
 		let originalCharIndex = chunk.start;
 		let first = true;
+		// when iterating each char, check if it's in a word boundary
+		let charInHiresBoundary = false;
 
 		while (originalCharIndex < chunk.end) {
 			if (this.hires || first || sourcemapLocations.has(originalCharIndex)) {
-				this.rawSegments.push([this.generatedCodeColumn, sourceIndex, loc.line, loc.column]);
+				const segment = [this.generatedCodeColumn, sourceIndex, loc.line, loc.column];
+
+				if (this.hires === 'boundary') {
+					// in hires "boundary", group segments per word boundary than per char
+					if (wordRegex.test(original[originalCharIndex])) {
+						// for first char in the boundary found, start the boundary by pushing a segment
+						if (!charInHiresBoundary) {
+							this.rawSegments.push(segment);
+							charInHiresBoundary = true;
+						}
+					} else {
+						// for non-word char, end the boundary by pushing a segment
+						this.rawSegments.push(segment);
+						charInHiresBoundary = false;
+					}
+				} else {
+					this.rawSegments.push(segment);
+				}
 			}
 
 			if (original[originalCharIndex] === '\n') {
@@ -41405,7 +41464,7 @@ class MagicString {
 					sourceIndex,
 					chunk.content,
 					loc,
-					chunk.storeName ? names.indexOf(chunk.original) : -1
+					chunk.storeName ? names.indexOf(chunk.original) : -1,
 				);
 			} else {
 				mappings.addUneditedChunk(sourceIndex, chunk, this.original, loc, this.sourcemapLocations);
@@ -41416,11 +41475,13 @@ class MagicString {
 
 		return {
 			file: options.file ? options.file.split(/[/\\]/).pop() : undefined,
-			sources: [options.source ? getRelativePath(options.file || '', options.source) : (options.file || '')],
+			sources: [
+				options.source ? getRelativePath(options.file || '', options.source) : options.file || '',
+			],
 			sourcesContent: options.includeContent ? [this.original] : undefined,
 			names,
 			mappings: mappings.raw,
-			x_google_ignoreList: this.ignoreList ? [sourceIndex] : undefined
+			x_google_ignoreList: this.ignoreList ? [sourceIndex] : undefined,
 		};
 	}
 
@@ -41534,14 +41595,14 @@ class MagicString {
 
 	insert() {
 		throw new Error(
-			'magicString.insert(...) is deprecated. Use prependRight(...) or appendLeft(...)'
+			'magicString.insert(...) is deprecated. Use prependRight(...) or appendLeft(...)',
 		);
 	}
 
 	insertLeft(index, content) {
 		if (!warned.insertLeft) {
 			console.warn(
-				'magicString.insertLeft(...) is deprecated. Use magicString.appendLeft(...) instead'
+				'magicString.insertLeft(...) is deprecated. Use magicString.appendLeft(...) instead',
 			); // eslint-disable-line no-console
 			warned.insertLeft = true;
 		}
@@ -41552,7 +41613,7 @@ class MagicString {
 	insertRight(index, content) {
 		if (!warned.insertRight) {
 			console.warn(
-				'magicString.insertRight(...) is deprecated. Use magicString.prependRight(...) instead'
+				'magicString.insertRight(...) is deprecated. Use magicString.prependRight(...) instead',
 			); // eslint-disable-line no-console
 			warned.insertRight = true;
 		}
@@ -41611,7 +41672,7 @@ class MagicString {
 		if (end > this.original.length) throw new Error('end is out of bounds');
 		if (start === end)
 			throw new Error(
-				'Cannot overwrite a zero-length range – use appendLeft or prependRight instead'
+				'Cannot overwrite a zero-length range – use appendLeft or prependRight instead',
 			);
 
 		this._split(start);
@@ -41620,7 +41681,7 @@ class MagicString {
 		if (options === true) {
 			if (!warned.storeName) {
 				console.warn(
-					'The final argument to magicString.overwrite(...) should be an options object. See https://github.com/rich-harris/magic-string'
+					'The final argument to magicString.overwrite(...) should be an options object. See https://github.com/rich-harris/magic-string',
 				); // eslint-disable-line no-console
 				warned.storeName = true;
 			}
@@ -41842,7 +41903,7 @@ class MagicString {
 			// zero-length edited chunks are a special case (overlapping replacements)
 			const loc = getLocator(this.original)(index);
 			throw new Error(
-				`Cannot split a chunk that has already been edited (${loc.line}:${loc.column} – "${chunk.original}")`
+				`Cannot split a chunk that has already been edited (${loc.line}:${loc.column} – "${chunk.original}")`,
 			);
 		}
 
@@ -42001,7 +42062,7 @@ class MagicString {
 					this.overwrite(
 						match.index,
 						match.index + match[0].length,
-						getReplacement(match, this.original)
+						getReplacement(match, this.original),
 					);
 			});
 		} else {
@@ -42010,7 +42071,7 @@ class MagicString {
 				this.overwrite(
 					match.index,
 					match.index + match[0].length,
-					getReplacement(match, this.original)
+					getReplacement(match, this.original),
 				);
 		}
 		return this;
@@ -42056,7 +42117,7 @@ class MagicString {
 
 		if (!searchValue.global) {
 			throw new TypeError(
-				'MagicString.prototype.replaceAll called with a non-global RegExp argument'
+				'MagicString.prototype.replaceAll called with a non-global RegExp argument',
 			);
 		}
 
@@ -43575,7 +43636,7 @@ function is_used_as_reference(node, parent) {
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-const VERSION = '4.2.1';
+const VERSION = '4.2.3';
 
 const regex_leading_directory_separator = /^[/\\]/;
 const regex_starts_with_term_export = /^Export/;

package/elements.d.ts

@@ -486,7 +486,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	accesskey?: string | undefined | null;
 	autofocus?: boolean | undefined | null;
 	class?: string | undefined | null;
-	contenteditable?: Booleanish | 'inherit' | undefined | null;
+	contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null;
 	contextmenu?: string | undefined | null;
 	dir?: string | undefined | null;
 	draggable?: Booleanish | undefined | null;
@@ -1405,6 +1405,7 @@ export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DO
 	'text-rendering'?: number | string | undefined | null;
 	to?: number | string | undefined | null;
 	transform?: string | undefined | null;
+	'transform-origin'?: string | undefined | null;
 	u1?: number | string | undefined | null;
 	u2?: number | string | undefined | null;
 	'underline-position'?: number | string | undefined | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "Cybernetically enhanced web apps",
   "type": "module",
   "module": "src/runtime/index.js",
@@ -102,7 +102,7 @@
     "estree-walker": "^3.0.3",
     "is-reference": "^3.0.1",
     "locate-character": "^3.0.0",
-    "magic-string": "^0.30.0",
+    "magic-string": "^0.30.4",
     "periscopic": "^3.1.0"
   },
   "devDependencies": {
@@ -119,7 +119,7 @@
     "esbuild": "^0.18.11",
     "eslint-plugin-lube": "^0.1.7",
     "happy-dom": "^9.20.3",
-    "jsdom": "^21.1.2",
+    "jsdom": "22.0.0",
     "kleur": "^4.1.5",
     "rollup": "^3.26.2",
     "source-map": "^0.7.4",

package/src/compiler/compile/compiler_warnings.js

@@ -271,7 +271,7 @@ export default {
 	a11y_click_events_have_key_events: {
 		code: 'a11y-click-events-have-key-events',
 		message:
-			'A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.'
+			'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.'
 	},
 	a11y_missing_content: /** @param {string} name */ (name) => ({
 		code: 'a11y-missing-content',

package/src/compiler/compile/render_dom/invalidate.js

@@ -50,7 +50,7 @@ export function invalidate(renderer, scope, node, names, main_execution_context
 	if (
 		node.type === 'AssignmentExpression' &&
 		node.operator === '=' &&
-		nodes_match(node.left, node.right) &&
+		nodes_match(node.left, node.right, ['trailingComments', 'leadingComments']) &&
 		tail.length === 0
 	) {
 		return get_invalidated(head, node);

package/src/compiler/compile/render_dom/wrappers/Element/Attribute.js

@@ -103,8 +103,8 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 				this.parent.has_dynamic_value = true;
 			}
 		}
-		if (this.parent.node.namespace == namespaces.foreign) {
-			// leave attribute case alone for elements in the "foreign" namespace
+		if (this.parent.node.namespace == namespaces.foreign || this.parent.node.name.includes('-')) {
+			// leave attribute case alone for elements in the "foreign" namespace and for custom elements
 			this.name = this.node.name;
 			this.metadata = this.get_metadata();
 			this.is_indirectly_bound_value = false;

package/src/compiler/utils/nodes_match.js

@@ -1,4 +1,4 @@
-export function nodes_match(a, b) {
+export function nodes_match(a, b, ignoreKeys = []) {
 	if (!!a !== !!b) return false;
 	if (Array.isArray(a) !== Array.isArray(b)) return false;
 
@@ -8,8 +8,12 @@ export function nodes_match(a, b) {
 			return a.every((child, i) => nodes_match(child, b[i]));
 		}
 
-		const a_keys = Object.keys(a).sort();
-		const b_keys = Object.keys(b).sort();
+		const a_keys = Object.keys(a)
+			.sort()
+			.filter((key) => !ignoreKeys.includes(key));
+		const b_keys = Object.keys(b)
+			.sort()
+			.filter((key) => !ignoreKeys.includes(key));
 
 		if (a_keys.length !== b_keys.length) return false;
 

package/src/runtime/action/public.d.ts

@@ -50,7 +50,7 @@ export interface ActionReturn<
  *   // ...
  * }
  * ```
- * `Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` both signal that the action accepts no parameters.
+ * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
  *
  * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
  * See interface `ActionReturn` for more details.

package/src/runtime/internal/dom.js

@@ -480,7 +480,10 @@ export function set_custom_element_data_map(node, data_map) {
 /**
  * @returns {void} */
 export function set_custom_element_data(node, prop, value) {
-	if (prop in node) {
+	const lower = prop.toLowerCase(); // for backwards compatibility with existing behavior we do lowercase first
+	if (lower in node) {
+		node[lower] = typeof node[lower] === 'boolean' && value === '' ? true : value;
+	} else if (prop in node) {
 		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
 	} else {
 		attr(node, prop, value);
@@ -804,6 +807,9 @@ export function claim_html_tag(nodes, is_svg) {
 	detach(html_tag_nodes[0]);
 	detach(html_tag_nodes[html_tag_nodes.length - 1]);
 	const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1);
+	if (claimed_nodes.length === 0) {
+		return new HtmlTagHydration(is_svg);
+	}
 	for (const n of claimed_nodes) {
 		n.claim_order = nodes.claim_info.total_claimed;
 		nodes.claim_info.total_claimed += 1;

package/src/shared/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '4.2.1';
+export const VERSION = '4.2.3';
 export const PUBLIC_VERSION = '4';

package/types/index.d.ts

@@ -1348,7 +1348,7 @@ declare module 'svelte/action' {
 	 *   // ...
 	 * }
 	 * ```
-	 * `Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` both signal that the action accepts no parameters.
+	 * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
 	 *
 	 * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
 	 * See interface `ActionReturn` for more details.