svelte - npm Package Compare versions

Comparing version 5.0.0-next.165 to 5.0.0-next.166

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.165",
+  "version": "5.0.0-next.166",
   "type": "module",
@@ -116,3 +116,2 @@ "types": "./types/index.d.ts",
     "esbuild": "^0.19.11",
-    "knip": "^4.2.1",
     "rollup": "^4.9.5",
@@ -157,4 +156,4 @@ "source-map": "^0.7.4",
     "lint": "prettier --check . && eslint",
-    "knip": "knip"
+    "knip": "pnpm dlx knip"
   }
 }

src/compiler/legacy.js

@@ -0,1 +1,4 @@
+/** @import { Expression } from 'estree' */
+/** @import { BaseNode, ConstTag, Root, SvelteNode, TemplateNode, Text } from '#compiler' */
+/** @import * as Legacy from './types/legacy-nodes.js' */
 import { walk } from 'zimmerframe';
@@ -11,3 +14,3 @@ import {
  * Some of the legacy Svelte AST nodes remove whitespace from the start and end of their children.
- * @param {import('./types/template.js').TemplateNode[]} nodes
+ * @param {TemplateNode[]} nodes
  */
@@ -37,12 +40,9 @@ function remove_surrounding_whitespace_nodes(nodes) {
  * @param {string} source
- * @param {import('#compiler').Root} ast
- * @returns {import('./types/legacy-nodes.js').LegacyRoot}
+ * @param {Root} ast
+ * @returns {Legacy.LegacyRoot}
  */
 export function convert(source, ast) {
-	const root =
-		/** @type {import('./types/template.js').SvelteNode | import('./types/legacy-nodes.js').LegacySvelteNode} */ (
-			ast
-		);
+	const root = /** @type {SvelteNode | Legacy.LegacySvelteNode} */ (ast);
 
-	return /** @type {import('./types/legacy-nodes.js').LegacyRoot} */ (
+	return /** @type {Legacy.LegacyRoot} */ (
 		walk(root, null, {
@@ -79,4 +79,4 @@ _(node, { next }) {
 				if (node.fragment.nodes.length > 0) {
-					const first = /** @type {import('#compiler').BaseNode} */ (node.fragment.nodes.at(0));
-					const last = /** @type {import('#compiler').BaseNode} */ (node.fragment.nodes.at(-1));
+					const first = /** @type {BaseNode} */ (node.fragment.nodes.at(0));
+					const last = /** @type {BaseNode} */ (node.fragment.nodes.at(-1));
 
@@ -235,8 +235,6 @@ start = first.start;
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -247,10 +245,7 @@ };
 			ConstTag(node) {
-				if (
-					/** @type {import('./types/legacy-nodes.js').LegacyConstTag} */ (node).expression !==
-					undefined
-				) {
+				if (/** @type {Legacy.LegacyConstTag} */ (node).expression !== undefined) {
 					return node;
 				}
 
-				const modern_node = /** @type {import('#compiler').ConstTag} */ (node);
+				const modern_node = /** @type {ConstTag} */ (node);
 				const { id: left } = { ...modern_node.declaration.declarations[0] };
@@ -282,4 +277,3 @@ // @ts-ignore
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -363,4 +357,3 @@ };
 						children: node.alternate.nodes.map(
-							(child) =>
-								/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+							(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 						)
@@ -378,4 +371,3 @@ };
 					children: node.consequent.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					),
@@ -418,8 +410,6 @@ else: elseblock,
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -445,8 +435,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -463,8 +451,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -480,8 +466,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -491,3 +475,3 @@ };
 			SvelteElement(node, { visit }) {
-				/** @type {import('estree').Expression | string} */
+				/** @type {Expression | string} */
 				let tag = node.tag;
@@ -519,7 +503,6 @@ if (
 					attributes: node.attributes.map(
-						(a) => /** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(a))
+						(a) => /** @type {Legacy.LegacyAttributeLike} */ (visit(a))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -535,8 +518,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -552,4 +533,3 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					)
@@ -565,8 +545,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -582,8 +560,6 @@ };
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -596,3 +572,3 @@ };
 					// these text nodes are missing `raw` for some dumb reason
-					return /** @type {import('./types/template.js').Text} */ ({
+					return /** @type {Text} */ ({
 						type: 'Text',
@@ -612,8 +588,6 @@ start: node.start,
 					attributes: node.attributes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyAttributeLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyAttributeLike} */ (visit(child))
 					),
 					children: node.fragment.nodes.map(
-						(child) =>
-							/** @type {import('./types/legacy-nodes.js').LegacyElementLike} */ (visit(child))
+						(child) => /** @type {Legacy.LegacyElementLike} */ (visit(child))
 					)
@@ -620,0 +594,0 @@ };

src/compiler/migrate/index.js

@@ -325,3 +325,6 @@ import MagicString from 'magic-string';
 			} else {
-				state.str.prependLeft(/** @type {number} */ (declarator.id.end), ' = $state()');
+				state.str.prependLeft(
+					/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
+					' = $state()'
+				);
 			}
@@ -591,9 +594,9 @@ }
 /**
- * @param {import('#compiler').RegularElement | import('#compiler').SvelteElement | import('#compiler').SvelteWindow | import('#compiler').SvelteDocument | import('#compiler').SvelteBody} node
+ * @param {import('#compiler').RegularElement | import('#compiler').SvelteElement | import('#compiler').SvelteWindow | import('#compiler').SvelteDocument | import('#compiler').SvelteBody} element
  * @param {State} state
  */
-function handle_events(node, state) {
+function handle_events(element, state) {
 	/** @type {Map<string, import('#compiler').OnDirective[]>} */
 	const handlers = new Map();
-	for (const attribute of node.attributes) {
+	for (const attribute of element.attributes) {
 		if (attribute.type !== 'OnDirective') continue;
@@ -630,2 +633,3 @@
 			const node = nodes[i];
+			const indent = get_indent(state, node, element);
 			if (node.expression) {
@@ -644,15 +648,16 @@ let body = '';
 				}
-				// TODO check how many indents needed
+
 				for (const modifier of node.modifiers) {
 					if (modifier === 'stopPropagation') {
-						body = `\n${state.indent}${payload_name}.stopPropagation();\n${body}`;
+						body = `\n${indent}${payload_name}.stopPropagation();\n${body}`;
 					} else if (modifier === 'preventDefault') {
-						body = `\n${state.indent}${payload_name}.preventDefault();\n${body}`;
+						body = `\n${indent}${payload_name}.preventDefault();\n${body}`;
 					} else if (modifier === 'stopImmediatePropagation') {
-						body = `\n${state.indent}${payload_name}.stopImmediatePropagation();\n${body}`;
+						body = `\n${indent}${payload_name}.stopImmediatePropagation();\n${body}`;
 					} else {
-						body = `\n${state.indent}// @migration-task: incorporate ${modifier} modifier\n${body}`;
+						body = `\n${indent}// @migration-task: incorporate ${modifier} modifier\n${body}`;
 					}
 				}
-				prepend += `\n${state.indent}${body}\n`;
+
+				prepend += `\n${indent}${body}\n`;
 			} else {
@@ -670,3 +675,3 @@ if (!local) {
 				}
-				prepend += `\n${state.indent}${local}?.(${payload_name});\n`;
+				prepend += `\n${indent}${local}?.(${payload_name});\n`;
 			}
@@ -691,11 +696,13 @@
 
+			const indent = get_indent(state, last, element);
+
 			for (const modifier of last.modifiers) {
 				if (modifier === 'stopPropagation') {
-					prepend += `\n${state.indent}${payload_name}.stopPropagation();\n`;
+					prepend += `\n${indent}${payload_name}.stopPropagation();\n`;
 				} else if (modifier === 'preventDefault') {
-					prepend += `\n${state.indent}${payload_name}.preventDefault();\n`;
+					prepend += `\n${indent}${payload_name}.preventDefault();\n`;
 				} else if (modifier === 'stopImmediatePropagation') {
-					prepend += `\n${state.indent}${payload_name}.stopImmediatePropagation();\n`;
+					prepend += `\n${indent}${payload_name}.stopImmediatePropagation();\n`;
 				} else if (modifier !== 'capture') {
-					prepend += `\n${state.indent}// @migration-task: incorporate ${modifier} modifier\n`;
+					prepend += `\n${indent}// @migration-task: incorporate ${modifier} modifier\n`;
 				}
@@ -732,7 +739,10 @@ }
 						// Prettier does something like on:click={() => (foo = true)}, we need to remove the braces in this case
-						state.str.update(pos - 1, pos, `{${prepend}${state.indent}`);
-						state.str.update(end, end + 1, '\n}');
+						state.str.update(pos - 1, pos, `{${prepend}${indent}`);
+						state.str.update(end, end + 1, `\n${indent.slice(state.indent.length)}}`);
 					} else {
-						state.str.prependRight(pos, `${needs_curlies ? '{' : ''}${prepend}${state.indent}`);
-						state.str.appendRight(end, `\n${needs_curlies ? '}' : ''}`);
+						state.str.prependRight(pos, `${needs_curlies ? '{' : ''}${prepend}${indent}`);
+						state.str.appendRight(
+							end,
+							`\n${indent.slice(state.indent.length)}${needs_curlies ? '}' : ''}`
+						);
 					}
@@ -743,3 +753,3 @@ } else {
 						/** @type {number} */ (last.expression.end),
-						`(${payload_name}) => {${prepend}\n${state.indent}${state.str.original.substring(
+						`(${payload_name}) => {${prepend}\n${indent}${state.str.original.substring(
 							/** @type {number} */ (last.expression.start),
@@ -783,2 +793,25 @@ /** @type {number} */ (last.expression.end)
 /**
+ * Returns the next indentation level of the first node that has all-whitespace before it
+ * @param {State} state
+ * @param {Array<{start: number; end: number}>} nodes
+ */
+function get_indent(state, ...nodes) {
+	let indent = state.indent;
+
+	for (const node of nodes) {
+		const line_start = state.str.original.lastIndexOf('\n', node.start);
+		indent = state.str.original.substring(line_start + 1, node.start);
+
+		if (indent.trim() === '') {
+			indent = state.indent + indent;
+			return indent;
+		} else {
+			indent = state.indent;
+		}
+	}
+
+	return indent;
+}
+
+/**
  * @param {import('#compiler').OnDirective} last
@@ -785,0 +818,0 @@ * @param {State} state

src/compiler/phases/1-parse/acorn.js

@@ -141,3 +141,6 @@ import * as acorn from 'acorn';
 
-			if (/** @type {any} */ (node).typeAnnotation && node.end === undefined) {
+			if (
+				/** @type {any} */ (node).typeAnnotation &&
+				(node.end === undefined || node.end < node.start)
+			) {
 				// i think there might be a bug in acorn-typescript that prevents
@@ -144,0 +147,0 @@ // `end` from being assigned when there's a type annotation

src/compiler/phases/3-transform/client/utils.js

@@ -123,3 +123,3 @@ import * as b from '../../../utils/builders.js';
  * @param {() => any} fallback
- * @param {boolean} prefix
+ * @param {boolean | null} [prefix] - If the assignment is a transformed update expression, set this. Else `null`
  * @param {{skip_proxy_and_freeze?: boolean}} [options]
@@ -423,2 +423,3 @@ * @returns {import('estree').Expression}
 				node.right.type === 'Literal' &&
+				prefix != null &&
 				(node.operator === '+=' || node.operator === '-=')
@@ -425,0 +426,0 @@ ) {

src/compiler/phases/3-transform/client/visitors/global.js

@@ -35,3 +35,3 @@ import is_reference from 'is-reference';
 	AssignmentExpression(node, context) {
-		return serialize_set_binding(node, context, context.next, false);
+		return serialize_set_binding(node, context, context.next);
 	},
@@ -38,0 +38,0 @@ UpdateExpression(node, context) {

src/index.d.ts

@@ -192,11 +192,28 @@ // This should contain all the public interfaces (not all of them are actually importable, check current Svelte for which ones are).
 /**
- * Convenience type to get the props the given component expects. Example:
- * ```html
- * <script lang="ts">
- * 	import type { ComponentProps } from 'svelte';
- * 	import Component from './Component.svelte';
+ * Convenience type to get the props the given component expects.
  *
- * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
- * </script>
+ * Example: Ensure a variable contains the props expected by `MyComponent`:
+ *
+ * ```ts
+ * import type { ComponentProps } from 'svelte';
+ * import MyComponent from './MyComponent.svelte';
+ *
+ * // Errors if these aren't the correct props expected by MyComponent.
+ * const props: ComponentProps<MyComponent> = { foo: 'bar' };
  * ```
+ *
+ * Example: A generic function that accepts some component and infers the type of its props:
+ *
+ * ```ts
+ * import type { Component, ComponentProps } from 'svelte';
+ * import MyComponent from './MyComponent.svelte';
+ *
+ * function withProps<TComponent extends Component<any>>(
+ * 	component: TComponent,
+ * 	props: ComponentProps<TComponent>
+ * ) {};
+ *
+ * // Errors if the second argument is not the correct props expected by the component in the first argument.
+ * withProps(MyComponent, { foo: 'bar' });
+ * ```
  */
@@ -203,0 +220,0 @@ export type ComponentProps<Comp extends SvelteComponent | Component<any>> =

src/internal/client/dom/blocks/await.js

@@ -5,2 +5,3 @@ import { is_promise, noop } from '../../../shared/utils.js';
 	flush_sync,
+	is_runes,
 	set_current_component_context,
@@ -15,3 +16,3 @@ set_current_effect,
 import { hydrating } from '../hydration.js';
-import { set, source } from '../../reactivity/sources.js';
+import { mutable_source, set, source } from '../../reactivity/sources.js';
 
@@ -32,2 +33,3 @@ const PENDING = 0;
 export function await_block(anchor, get_input, pending_fn, then_fn, catch_fn) {
+	var runes = is_runes();
 	var component_context = current_component_context;
@@ -50,4 +52,6 @@
 
-	var input_source = source(/** @type {V} */ (undefined));
-	var error_source = source(undefined);
+	var input_source = runes
+		? source(/** @type {V} */ (undefined))
+		: mutable_source(/** @type {V} */ (undefined));
+	var error_source = runes ? source(undefined) : mutable_source(undefined);
 	var resolved = false;
@@ -54,0 +58,0 @@

src/internal/client/dom/elements/bindings/select.js

@@ -42,6 +42,8 @@ import { effect } from '../../../reactivity/effects.js';
 export function init_select(select, get_value) {
+	let mounting = true;
 	effect(() => {
 		if (get_value) {
-			select_option(select, untrack(get_value));
+			select_option(select, untrack(get_value), mounting);
 		}
+		mounting = false;
 
@@ -48,0 +50,0 @@ var observer = new MutationObserver(() => {

src/internal/client/dom/elements/events.js

@@ -47,3 +47,3 @@ import { teardown } from '../../reactivity/effects.js';
 			// Only call in the bubble phase, else delegated events would be called before the capturing events
-			handle_event_propagation(dom, event);
+			handle_event_propagation.call(dom, event);
 		}
@@ -147,7 +147,8 @@ if (!event.cancelBubble) {
 /**
- * @param {EventTarget} handler_element
+ * @this {EventTarget}
  * @param {Event} event
  * @returns {void}
  */
-export function handle_event_propagation(handler_element, event) {
+export function handle_event_propagation(event) {
+	var handler_element = this;
 	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
@@ -154,0 +155,0 @@ var event_name = event.type;

src/internal/client/render.js

@@ -199,5 +199,2 @@ import { DEV } from 'esm-env';
 
-	const bound_event_listener = handle_event_propagation.bind(null, target);
-	const bound_document_event_listener = handle_event_propagation.bind(null, document);
-
 	/** @param {Array<string>} events */
@@ -207,27 +204,15 @@ const event_handle = (events) => {
 			const event_name = events[i];
+			const passive = PassiveDelegatedEvents.includes(event_name);
+
 			if (!registered_events.has(event_name)) {
 				registered_events.add(event_name);
+
 				// Add the event listener to both the container and the document.
 				// The container listener ensures we catch events from within in case
 				// the outer content stops propagation of the event.
-				target.addEventListener(
-					event_name,
-					bound_event_listener,
-					PassiveDelegatedEvents.includes(event_name)
-						? {
-								passive: true
-							}
-						: undefined
-				);
+				target.addEventListener(event_name, handle_event_propagation, { passive });
+
 				// The document listener ensures we catch events that originate from elements that were
 				// manually moved outside of the container (e.g. via manual portals).
-				document.addEventListener(
-					event_name,
-					bound_document_event_listener,
-					PassiveDelegatedEvents.includes(event_name)
-						? {
-								passive: true
-							}
-						: undefined
-				);
+				document.addEventListener(event_name, handle_event_propagation, { passive });
 			}
@@ -269,5 +254,6 @@ }
 			for (const event_name of registered_events) {
-				target.removeEventListener(event_name, bound_event_listener);
-				document.removeEventListener(event_name, bound_event_listener);
+				target.removeEventListener(event_name, handle_event_propagation);
+				document.removeEventListener(event_name, handle_event_propagation);
 			}
+
 			root_event_handles.delete(event_handle);
@@ -274,0 +260,0 @@ mounted_components.delete(component);

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.165';
+export const VERSION = '5.0.0-next.166';
 export const PUBLIC_VERSION = '5';

No alert changes

Improved metrics

Total package byte prevSize

2113608

increased by0.06%

Dev dependency count

12

decreased by-7.69%

Lines of code

46194

increased by0.06%

Published versions last two months

48

increased by4.35%

Worsened metrics

Published versions last week

2

decreased by-33.33%

Published versions last year

186

decreased by-0.53%

No dependency changes