svelte 4.1.2 → 4.2.1

package/src/compiler/compile/nodes/Element.js

@@ -1,5 +1,6 @@
 import { is_html, is_svg, is_void } from '../../../shared/utils/names.js';
 import Node from './shared/Node.js';
+import { walk } from 'estree-walker';
 import Attribute from './Attribute.js';
 import Binding from './Binding.js';
 import EventHandler from './EventHandler.js';
@@ -430,7 +431,7 @@ export default class Element extends Node {
 			}
 			if (this.name === 'textarea') {
 				if (info.children.length > 0) {
-					const value_attribute = info.attributes.find((node) => node.name === 'value');
+					const value_attribute = get_value_attribute(info.attributes);
 					if (value_attribute) {
 						component.error(value_attribute, compiler_errors.textarea_duplicate_value);
 						return;
@@ -449,7 +450,7 @@ export default class Element extends Node {
 				// Special case — treat these the same way:
 				//   <option>{foo}</option>
 				//   <option value={foo}>{foo}</option>
-				const value_attribute = info.attributes.find((attribute) => attribute.name === 'value');
+				const value_attribute = get_value_attribute(info.attributes);
 				if (!value_attribute) {
 					info.attributes.push({
 						type: 'Attribute',
@@ -875,7 +876,7 @@ export default class Element extends Node {
 		) {
 			const interactive_handlers = handlers
 				.map((handler) => handler.name)
-				.filter((handlerName) => a11y_interactive_handlers.has(handlerName));
+				.filter((handler_name) => a11y_interactive_handlers.has(handler_name));
 			if (interactive_handlers.length > 0) {
 				component.warn(
 					this,
@@ -1420,3 +1421,30 @@ function within_custom_element(parent) {
 	}
 	return false;
 }
+
+/**
+ * @param {any[]} attributes
+ */
+function get_value_attribute(attributes) {
+	let node_value;
+	attributes.forEach((node) => {
+		if (node.type !== 'Spread' && node.name.toLowerCase() === 'value') {
+			node_value = node;
+		}
+		if (node.type === 'Spread') {
+			walk(/** @type {any} */ (node.expression), {
+				enter(/** @type {import('estree').Node} */ node) {
+					if (node_value) {
+						this.skip();
+					}
+					if (node.type === 'Identifier') {
+						if (/** @type {import('estree').Identifier} */ (node).name.toLowerCase() === 'value') {
+							node_value = node;
+						}
+					}
+				}
+			});
+		}
+	});
+	return node_value;
+}

package/src/compiler/compile/nodes/shared/get_const_tags.js

@@ -73,8 +73,8 @@ function sort_consts_nodes(consts_nodes, component) {
 		}, [])
 	);
 	if (cycle && cycle.length) {
-		const nodeList = lookup.get(cycle[0]);
-		const node = nodeList[0];
+		const node_list = lookup.get(cycle[0]);
+		const node = node_list[0];
 		component.error(node.node, compiler_errors.cyclical_const_tags(cycle));
 	}
 

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

@@ -990,7 +990,8 @@ export default class ElementWrapper extends Wrapper {
 		const static_attributes = [];
 		this.attributes.forEach((attr) => {
 			if (attr instanceof SpreadAttributeWrapper) {
-				static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node });
+				const snippet = { type: 'SpreadElement', argument: attr.node.expression.manipulate(block) };
+				static_attributes.push(snippet);
 			} else {
 				const name = attr.property_name || attr.name;
 				static_attributes.push(p`${name}: ${attr.get_value(block)}`);
@@ -1240,11 +1241,7 @@ export default class ElementWrapper extends Wrapper {
 				}
 				if (this.dynamic_style_dependencies.size > 0) {
 					maybe_create_style_changed_var();
-					// If all dependencies are same as the style attribute dependencies, then we can skip the dirty check
-					condition =
-						all_deps.size === this.dynamic_style_dependencies.size
-							? style_changed_var
-							: x`${style_changed_var} || ${condition}`;
+					condition = x`${condition} || ${style_changed_var}`;
 				}
 				block.chunks.update.push(b`
 					if (${condition}) {

package/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js

@@ -105,14 +105,19 @@ export default class InlineComponentWrapper extends Wrapper {
 		this.slots.set(name, slot_definition);
 	}
 	warn_if_reactive() {
-		const { name } = this.node;
-		const variable = this.renderer.component.var_lookup.get(name);
+		let { name } = this.node;
+		const top = name.split('.')[0]; // <T.foo/> etc. should check for T instead of "T.foo"
+		const variable = this.renderer.component.var_lookup.get(top);
 		if (!variable) {
 			return;
 		}
 		const ignores = extract_ignores_above_node(this.node);
 		this.renderer.component.push_ignores(ignores);
-		if (variable.reassigned || variable.export_name || variable.is_reactive_dependency) {
+		if (
+			variable.reassigned ||
+			variable.export_name || // or a prop
+			variable.mutated
+		) {
 			this.renderer.component.warn(this.node, compiler_warnings.reactive_component(name));
 		}
 		this.renderer.component.pop_ignores();

package/src/compiler/compile/render_dom/wrappers/Window.js

@@ -94,14 +94,14 @@ export default class WindowWrapper extends Wrapper {
 					bindings.scrollX && bindings.scrollY
 						? x`"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
 						: x`"${bindings.scrollX || bindings.scrollY}" in this._state`;
-				const scrollX = bindings.scrollX && x`this._state.${bindings.scrollX}`;
-				const scrollY = bindings.scrollY && x`this._state.${bindings.scrollY}`;
+				const scroll_x = bindings.scrollX && x`this._state.${bindings.scrollX}`;
+				const scroll_y = bindings.scrollY && x`this._state.${bindings.scrollY}`;
 				renderer.meta_bindings.push(b`
 					if (${condition}) {
-						@_scrollTo(${scrollX || '@_window.pageXOffset'}, ${scrollY || '@_window.pageYOffset'});
+						@_scrollTo(${scroll_x || '@_window.pageXOffset'}, ${scroll_y || '@_window.pageYOffset'});
 					}
-					${scrollX && `${scrollX} = @_window.pageXOffset;`}
-					${scrollY && `${scrollY} = @_window.pageYOffset;`}
+					${scroll_x && `${scroll_x} = @_window.pageXOffset;`}
+					${scroll_y && `${scroll_y} = @_window.pageYOffset;`}
 				`);
 				block.event_listeners.push(x`
 					@listen(@_window, "${event}", () => {
@@ -132,17 +132,17 @@ export default class WindowWrapper extends Wrapper {
 		// special case... might need to abstract this out if we add more special cases
 		if (bindings.scrollX || bindings.scrollY) {
 			const condition = renderer.dirty([bindings.scrollX, bindings.scrollY].filter(Boolean));
-			const scrollX = bindings.scrollX
+			const scroll_x = bindings.scrollX
 				? renderer.reference(bindings.scrollX)
 				: x`@_window.pageXOffset`;
-			const scrollY = bindings.scrollY
+			const scroll_y = bindings.scrollY
 				? renderer.reference(bindings.scrollY)
 				: x`@_window.pageYOffset`;
 			block.chunks.update.push(b`
 				if (${condition} && !${scrolling}) {
 					${scrolling} = true;
 					@_clearTimeout(${scrolling_timeout});
-					@_scrollTo(${scrollX}, ${scrollY});
+					@_scrollTo(${scroll_x}, ${scroll_y});
 					${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100);
 				}
 			`);

package/src/compiler/compile/render_dom/wrappers/shared/is_dynamic.js

@@ -3,8 +3,11 @@ import { is_reserved_keyword } from '../../../utils/reserved_keywords.js';
 /** @param {import('../../../../interfaces.js').Var} variable */
 export default function is_dynamic(variable) {
 	if (variable) {
-		if (variable.mutated || variable.reassigned) return true; // dynamic internal state
-		if (!variable.module && variable.writable && variable.export_name) return true; // writable props
+		// Only variables declared in the instance script tags should be considered dynamic
+		const is_declared_in_reactive_context = !variable.module && !variable.global;
+
+		if (is_declared_in_reactive_context && (variable.mutated || variable.reassigned)) return true; // dynamic internal state
+		if (is_declared_in_reactive_context && variable.writable && variable.export_name) return true; // writable props
 		if (is_reserved_keyword(variable.name)) return true;
 	}
 	return false;

package/src/compiler/compile/render_ssr/index.js

@@ -144,9 +144,13 @@ export default function ssr(component, options) {
 		? b`
 			let $$settled;
 			let $$rendered;
+			let #previous_head = $$result.head;
 
 			do {
 				$$settled = true;
+				// $$result.head is mutated by the literal expression
+				// need to reset it if we're looping back to prevent duplication
+				$$result.head = #previous_head;
 
 				${reactive_declarations}
 

package/src/compiler/parse/read/css-tree-cq/css_tree_parse.js

@@ -8,7 +8,7 @@ import * as node from './node/index.js';
  *
  * The new nodes are located in `./node`.
  */
-const cqSyntax = fork({
+const cq_syntax = fork({
 	atrule: {
 		// extend or override at-rule dictionary
 		container: {
@@ -16,8 +16,8 @@ const cqSyntax = fork({
 				prelude() {
 					return this.createSingleNodeList(this.ContainerQuery());
 				},
-				block(isStyleBlock = false) {
-					return this.Block(isStyleBlock);
+				block(is_style_block = false) {
+					return this.Block(is_style_block);
 				}
 			}
 		}
@@ -25,4 +25,4 @@ const cqSyntax = fork({
 	node
 });
 
-export const parse = cqSyntax.parse;
+export const parse = cq_syntax.parse;

package/src/compiler/parse/read/css-tree-cq/node/query_feature_range.js

@@ -16,7 +16,7 @@ export const structure = {
 	value: ['Identifier', 'Number', 'Comparison', 'Dimension', 'QueryCSSFunction', 'Ratio', null]
 };
 
-function lookup_non_WS_type_and_value(offset, type, referenceStr) {
+function lookup_non_ws_type_and_value(offset, type, reference_str) {
 	let current_type;
 
 	do {
@@ -26,7 +26,7 @@ function lookup_non_WS_type_and_value(offset, type, referenceStr) {
 		}
 	} while (current_type !== 0); // NULL -> 0
 
-	return current_type === type ? this.lookupValue(offset - 1, referenceStr) : false;
+	return current_type === type ? this.lookupValue(offset - 1, reference_str) : false;
 }
 
 export function parse() {
@@ -40,7 +40,7 @@ export function parse() {
 	while (!this.eof && this.tokenType !== RightParenthesis) {
 		switch (this.tokenType) {
 			case Number:
-				if (lookup_non_WS_type_and_value.call(this, 1, Delim, '/')) {
+				if (lookup_non_ws_type_and_value.call(this, 1, Delim, '/')) {
 					child = this.Ratio();
 				} else {
 					child = this.Number();

package/src/compiler/utils/fuzzymatch.js

@@ -26,11 +26,7 @@ function _distance(str1, str2) {
 	str1 = String(str1);
 	str2 = String(str2);
 	const distance = levenshtein(str1, str2);
-	if (str1.length > str2.length) {
-		return 1 - distance / str1.length;
-	} else {
-		return 1 - distance / str2.length;
-	}
+	return 1 - distance / Math.max(str1.length, str2.length);
 }
 
 // helper functions

package/src/compiler/utils/globals.js

@@ -1,6 +1,6 @@
 /** ----------------------------------------------------------------------
 This file is automatically generated by `scripts/globals-extractor.js`.
-Generated At: 2023-05-24T13:16:20.777Z
+Generated At: 2023-08-11T04:11:50.562Z
 ---------------------------------------------------------------------- */
 
 export default new Set([

package/src/compiler/utils/mapped_code.js

@@ -292,7 +292,18 @@ export function apply_preprocessor_sourcemap(filename, svelte_map, preprocessor_
 		toUrl: {
 			enumerable: false,
 			value: function toUrl() {
-				return 'data:application/json;charset=utf-8;base64,' + btoa(this.toString());
+				let b64 = '';
+				if (typeof window !== 'undefined' && window.btoa) {
+					// btoa doesn't support multi-byte characters
+					b64 = window.btoa(unescape(encodeURIComponent(this.toString())));
+				} else if (typeof Buffer !== 'undefined') {
+					b64 = Buffer.from(this.toString(), 'utf8').toString('base64');
+				} else {
+					throw new Error(
+						'Unsupported environment: `window.btoa` or `Buffer` should be present to use toUrl.'
+					);
+				}
+				return 'data:application/json;charset=utf-8;base64,' + b64;
 			}
 		}
 	});

package/src/runtime/internal/Component.js

@@ -84,7 +84,17 @@ function make_dirty(component, i) {
 	component.$$.dirty[(i / 31) | 0] |= 1 << i % 31;
 }
 
-/** @returns {void} */
+// TODO: Document the other params
+/**
+ * @param {SvelteComponent} component
+ * @param {import('./public.js').ComponentConstructorOptions} options
+ *
+ * @param {import('./utils.js')['not_equal']} not_equal Used to compare props and state values.
+ * @param {(target: Element | ShadowRoot) => void} [append_styles] Function that appends styles to the DOM when the component is first initialised.
+ * This will be the `add_css` function from the compiled component.
+ *
+ * @returns {void}
+ */
 export function init(
 	component,
 	options,
@@ -92,7 +102,7 @@ export function init(
 	create_fragment,
 	not_equal,
 	props,
-	append_styles,
+	append_styles = null,
 	dirty = [-1]
 ) {
 	const parent_component = current_component;
@@ -139,8 +149,9 @@ export function init(
 	if (options.target) {
 		if (options.hydrate) {
 			start_hydrating();
+			// TODO: what is the correct type here?
+			// @ts-expect-error
 			const nodes = children(options.target);
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			$$.fragment && $$.fragment.l(nodes);
 			nodes.forEach(detach);
 		} else {
@@ -283,7 +294,7 @@ if (typeof HTMLElement === 'function') {
 								'toAttribute'
 							);
 							if (attribute_value == null) {
-								this.removeAttribute(key);
+								this.removeAttribute(this.$$p_d[key].attribute || key);
 							} else {
 								this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
 							}

package/src/runtime/internal/dom.js

@@ -1,5 +1,7 @@
-import { ResizeObserverSingleton } from './ResizeObserverSingleton.js';
 import { contenteditable_truthy_values, has_prop } from './utils.js';
+
+import { ResizeObserverSingleton } from './ResizeObserverSingleton.js';
+
 // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
 // at the end of hydration without touching the remaining nodes.
 let is_hydrating = false;
@@ -50,14 +52,14 @@ function init_hydrate(target) {
 	let children = /** @type {ArrayLike<NodeEx2>} */ (target.childNodes);
 	// If target is <head>, there may be children without claim_order
 	if (target.nodeName === 'HEAD') {
-		const myChildren = [];
+		const my_children = [];
 		for (let i = 0; i < children.length; i++) {
 			const node = children[i];
 			if (node.claim_order !== undefined) {
-				myChildren.push(node);
+				my_children.push(node);
 			}
 		}
-		children = myChildren;
+		children = my_children;
 	}
 	/*
 	 * Reorder claimed children optimally.
@@ -87,15 +89,15 @@ function init_hydrate(target) {
 		// Find the largest subsequence length such that it ends in a value less than our current value
 		// upper_bound returns first greater value, so we subtract one
 		// with fast path for when we are on the current longest subsequence
-		const seqLen =
+		const seq_len =
 			(longest > 0 && children[m[longest]].claim_order <= current
 				? longest + 1
 				: upper_bound(1, longest, (idx) => children[m[idx]].claim_order, current)) - 1;
-		p[i] = m[seqLen] + 1;
-		const newLen = seqLen + 1;
+		p[i] = m[seq_len] + 1;
+		const new_len = seq_len + 1;
 		// We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence.
-		m[newLen] = i;
-		longest = Math.max(newLen, longest);
+		m[new_len] = i;
+		longest = Math.max(new_len, longest);
 	}
 	// The longest increasing subsequence of nodes (initially reversed)
 
@@ -108,28 +110,28 @@ function init_hydrate(target) {
 	/**
 	 * @type {NodeEx2[]}
 	 */
-	const toMove = [];
+	const to_move = [];
 	let last = children.length - 1;
 	for (let cur = m[longest] + 1; cur != 0; cur = p[cur - 1]) {
 		lis.push(children[cur - 1]);
 		for (; last >= cur; last--) {
-			toMove.push(children[last]);
+			to_move.push(children[last]);
 		}
 		last--;
 	}
 	for (; last >= 0; last--) {
-		toMove.push(children[last]);
+		to_move.push(children[last]);
 	}
 	lis.reverse();
 	// We sort the nodes being moved to guarantee that their insertion order matches the claim order
-	toMove.sort((a, b) => a.claim_order - b.claim_order);
+	to_move.sort((a, b) => a.claim_order - b.claim_order);
 	// Finally, we move the nodes
-	for (let i = 0, j = 0; i < toMove.length; i++) {
-		while (j < lis.length && toMove[i].claim_order >= lis[j].claim_order) {
+	for (let i = 0, j = 0; i < to_move.length; i++) {
+		while (j < lis.length && to_move[i].claim_order >= lis[j].claim_order) {
 			j++;
 		}
 		const anchor = j < lis.length ? lis[j] : null;
-		target.insertBefore(toMove[i], anchor);
+		target.insertBefore(to_move[i], anchor);
 	}
 }
 
@@ -624,26 +626,26 @@ function init_claim_info(nodes) {
  * @template {ChildNodeEx} R
  * @param {ChildNodeArray} nodes
  * @param {(node: ChildNodeEx) => node is R} predicate
- * @param {(node: ChildNodeEx) => ChildNodeEx | undefined} processNode
- * @param {() => R} createNode
- * @param {boolean} dontUpdateLastIndex
+ * @param {(node: ChildNodeEx) => ChildNodeEx | undefined} process_node
+ * @param {() => R} create_node
+ * @param {boolean} dont_update_last_index
  * @returns {R}
  */
-function claim_node(nodes, predicate, processNode, createNode, dontUpdateLastIndex = false) {
+function claim_node(nodes, predicate, process_node, create_node, dont_update_last_index = false) {
 	// Try to find nodes in an order such that we lengthen the longest increasing subsequence
 	init_claim_info(nodes);
-	const resultNode = (() => {
+	const result_node = (() => {
 		// We first try to find an element after the previous one
 		for (let i = nodes.claim_info.last_index; i < nodes.length; i++) {
 			const node = nodes[i];
 			if (predicate(node)) {
-				const replacement = processNode(node);
+				const replacement = process_node(node);
 				if (replacement === undefined) {
 					nodes.splice(i, 1);
 				} else {
 					nodes[i] = replacement;
 				}
-				if (!dontUpdateLastIndex) {
+				if (!dont_update_last_index) {
 					nodes.claim_info.last_index = i;
 				}
 				return node;
@@ -654,13 +656,13 @@ function claim_node(nodes, predicate, processNode, createNode, dontUpdateLastInd
 		for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) {
 			const node = nodes[i];
 			if (predicate(node)) {
-				const replacement = processNode(node);
+				const replacement = process_node(node);
 				if (replacement === undefined) {
 					nodes.splice(i, 1);
 				} else {
 					nodes[i] = replacement;
 				}
-				if (!dontUpdateLastIndex) {
+				if (!dont_update_last_index) {
 					nodes.claim_info.last_index = i;
 				} else if (replacement === undefined) {
 					// Since we spliced before the last_index, we decrease it
@@ -670,11 +672,11 @@ function claim_node(nodes, predicate, processNode, createNode, dontUpdateLastInd
 			}
 		}
 		// If we can't find any matching node, we create a new one
-		return createNode();
+		return create_node();
 	})();
-	resultNode.claim_order = nodes.claim_info.total_claimed;
+	result_node.claim_order = nodes.claim_info.total_claimed;
 	nodes.claim_info.total_claimed += 1;
-	return resultNode;
+	return result_node;
 }
 
 /**
@@ -736,13 +738,13 @@ export function claim_text(nodes, data) {
 		(node) => node.nodeType === 3,
 		/** @param {Text} node */
 		(node) => {
-			const dataStr = '' + data;
-			if (node.data.startsWith(dataStr)) {
-				if (node.data.length !== dataStr.length) {
-					return node.splitText(dataStr.length);
+			const data_str = '' + data;
+			if (node.data.startsWith(data_str)) {
+				if (node.data.length !== data_str.length) {
+					return node.splitText(data_str.length);
 				}
 			} else {
-				node.data = dataStr;
+				node.data = data_str;
 			}
 		},
 		() => text(data),

package/src/shared/version.js

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