Merge branch 'main' into each-without-as

Author: dummdidumm

.changeset/unlucky-icons-sit.md

@@ -4,6 +4,7 @@
 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
 - [ ] This message body should clearly illustrate what problems it solves.
 - [ ] Ideally, include a test that fails without this PR but passes with it.
+- [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`).
 
 ### Tests and linting
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -142,7 +142,7 @@ In case you're writing a component that wraps a native element, you may want to
 </script>
 
 <button {...rest}>
-	{@render children()}
+	{@render children?.()}
 </button>
 ```
 
@@ -156,7 +156,7 @@ Not all elements have a dedicated type definition. For those without one, use `S
 </script>
 
 <div {...rest}>
-	{@render children()}
+	{@render children?.()}
 </div>
 ```
 

documentation/docs/07-misc/03-typescript.md

@@ -1,5 +1,29 @@
 # svelte
 
+## 5.2.7
+
+### Patch Changes
+
+- fix: always use set for private identifiers ([#14378](https://github.com/sveltejs/svelte/pull/14378))
+
+## 5.2.6
+
+### Patch Changes
+
+- fix: remove template expression inlining ([#14374](https://github.com/sveltejs/svelte/pull/14374))
+
+## 5.2.5
+
+### Patch Changes
+
+- fix: correctly handle srcObject attribute on video elements ([#14369](https://github.com/sveltejs/svelte/pull/14369))
+
+- add `contentvisibilityautostatechange` event to element definitions ([#14373](https://github.com/sveltejs/svelte/pull/14373))
+
+- fix: tighten up `export default` validation ([#14368](https://github.com/sveltejs/svelte/pull/14368))
+
+- fix: include method definitions in class private fields ([#14365](https://github.com/sveltejs/svelte/pull/14365))
+
 ## 5.2.4
 
 ### Patch Changes

packages/svelte/CHANGELOG.md

@@ -60,6 +60,10 @@ export type AnimationEventHandler<T extends EventTarget> = EventHandler<Animatio
 export type TransitionEventHandler<T extends EventTarget> = EventHandler<TransitionEvent, T>;
 export type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEvent, T>;
 export type ToggleEventHandler<T extends EventTarget> = EventHandler<ToggleEvent, T>;
+export type ContentVisibilityAutoStateChangeEventHandler<T extends EventTarget> = EventHandler<
+	ContentVisibilityAutoStateChangeEvent,
+	T
+>;
 
 export type FullAutoFill =
 	| AutoFill
@@ -157,6 +161,20 @@ export interface DOMAttributes<T extends EventTarget> {
 	ontoggle?: ToggleEventHandler<T> | undefined | null;
 	ontogglecapture?: ToggleEventHandler<T> | undefined | null;
 
+	// Content visibility Events
+	'on:contentvisibilityautostatechange'?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+	oncontentvisibilityautostatechange?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+	oncontentvisibilityautostatechangecapture?:
+		| ContentVisibilityAutoStateChangeEventHandler<T>
+		| undefined
+		| null;
+
 	// Keyboard Events
 	'on:keydown'?: KeyboardEventHandler<T> | undefined | null;
 	onkeydown?: KeyboardEventHandler<T> | undefined | null;

packages/svelte/elements.d.ts

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.2.4",
+  "version": "5.2.7",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/package.json

@@ -1,7 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { AST, DelegatedEvent, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_boolean_attribute, is_capture_event, is_delegated } from '../../../../utils.js';
+import { cannot_be_set_statically, is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -30,12 +30,12 @@ export function Attribute(node, context) {
 		}
 	}
 
-	if (node.name.startsWith('on')) {
+	if (is_event_attribute(node)) {
 		mark_subtree_dynamic(context.path);
 	}
 
-	if (parent.type === 'RegularElement' && is_boolean_attribute(node.name.toLowerCase())) {
-		node.metadata.expression.can_inline = false;
+	if (cannot_be_set_statically(node.name)) {
+		mark_subtree_dynamic(context.path);
 	}
 
 	if (node.value !== true) {
@@ -51,7 +51,6 @@ export function Attribute(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-			node.metadata.expression.can_inline &&= chunk.metadata.expression.can_inline;
 		}
 
 		if (is_event_attribute(node)) {

packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js

@@ -179,8 +179,6 @@ export function CallExpression(node, context) {
 		if (!is_pure(node.callee, context) || context.state.expression.dependencies.size > 0) {
 			context.state.expression.has_call = true;
 			context.state.expression.has_state = true;
-			context.state.expression.can_inline = false;
-			mark_subtree_dynamic(context.path);
 		}
 	}
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -1,13 +1,18 @@
-/** @import { ExportDefaultDeclaration, Node } from 'estree' */
+/** @import { ExportDefaultDeclaration } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { validate_export } from './shared/utils.js';
 
 /**
  * @param {ExportDefaultDeclaration} node
  * @param {Context} context
  */
 export function ExportDefaultDeclaration(node, context) {
-	if (context.state.ast_type === 'instance') {
+	if (!context.state.ast_type /* .svelte.js module */) {
+		if (node.declaration.type === 'Identifier') {
+			validate_export(node, context.state.scope, node.declaration.name);
+		}
+	} else {
 		e.module_illegal_default_export(node);
 	}
 

packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js

@@ -1,8 +1,6 @@
-/** @import { ExportSpecifier, Node } from 'estree' */
-/** @import { Binding } from '#compiler' */
+/** @import { ExportSpecifier } from 'estree' */
 /** @import { Context } from '../types' */
-/** @import { Scope } from '../../scope' */
-import * as e from '../../../errors.js';
+import { validate_export } from './shared/utils.js';
 
 /**
  * @param {ExportSpecifier} node
@@ -30,22 +28,3 @@ export function ExportSpecifier(node, context) {
 		validate_export(node, context.state.scope, local_name);
 	}
 }
-
-/**
- *
- * @param {Node} node
- * @param {Scope} scope
- * @param {string} name
- */
-function validate_export(node, scope, name) {
-	const binding = scope.get(name);
-	if (!binding) return;
-
-	if (binding.kind === 'derived') {
-		e.derived_invalid_export(node);
-	}
-
-	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
-		e.state_invalid_export(node);
-	}
-}

packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js

@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AST.ExpressionTag} node
@@ -14,5 +15,9 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
+	// TODO ideally we wouldn't do this here, we'd just do it on encountering
+	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js

@@ -1,4 +1,5 @@
 /** @import { Expression, Identifier } from 'estree' */
+/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -19,6 +20,8 @@ export function Identifier(node, context) {
 		return;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -84,12 +87,6 @@ export function Identifier(node, context) {
 		}
 	}
 
-	// no binding means global, and we can't inline e.g. `<span>{location}</span>`
-	// because it could change between component renders. if there _is_ a
-	// binding and it is outside module scope, the expression cannot
-	// be inlined (TODO allow inlining in more cases - e.g. primitive consts)
-	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
-
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
@@ -125,12 +122,4 @@ export function Identifier(node, context) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
 	}
-
-	if (!can_inline) {
-		if (context.state.expression) {
-			context.state.expression.can_inline = false;
-		}
-
-		mark_subtree_dynamic(context.path);
-	}
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js

@@ -20,9 +20,6 @@ export function MemberExpression(node, context) {
 
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
-
-		mark_subtree_dynamic(context.path);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {

packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js

@@ -75,16 +75,6 @@ export function RegularElement(node, context) {
 		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
 	}
 
-	if (
-		node.attributes.some(
-			(attribute) =>
-				attribute.type === 'Attribute' &&
-				(attribute.name === 'autofocus' || attribute.name === 'muted')
-		)
-	) {
-		mark_subtree_dynamic(context.path);
-	}
-
 	const binding = context.state.scope.get(node.name);
 	if (
 		binding !== null &&

packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -10,7 +10,6 @@ export function TaggedTemplateExpression(node, context) {
 	if (context.state.expression && !is_pure(node.tag, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
 	}
 
 	if (node.tag.type === 'Identifier') {

packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js

@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, Expression, Literal, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, Expression, Literal, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
@@ -263,3 +263,22 @@ export function validate_identifier_name(binding, function_depth) {
 		}
 	}
 }
+
+/**
+ * Checks that the exported name is not a derived or reassigned state variable.
+ * @param {Node} node
+ * @param {Scope} scope
+ * @param {string} name
+ */
+export function validate_export(node, scope, name) {
+	const binding = scope.get(name);
+	if (!binding) return;
+
+	if (binding.kind === 'derived') {
+		e.derived_invalid_export(node);
+	}
+
+	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
+		e.state_invalid_export(node);
+	}
+}

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js

@@ -3,16 +3,16 @@
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
+import * as b from '../../../utils/builders.js';
+import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
-	PROPS_IS_BINDABLE,
-	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
+	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
-import * as b from '../../../utils/builders.js';
 import { get_value } from './visitors/shared/declarations.js';
 
 /**

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

@@ -32,31 +32,26 @@ function build_assignment(operator, left, right, context) {
 	if (
 		context.state.analysis.runes &&
 		left.type === 'MemberExpression' &&
-		left.object.type === 'ThisExpression'
+		left.property.type === 'PrivateIdentifier'
 	) {
-		if (left.property.type === 'PrivateIdentifier') {
-			const private_state = context.state.private_state.get(left.property.name);
-
-			if (private_state !== undefined) {
-				let transformed = false;
-				let value = /** @type {Expression} */ (
-					context.visit(build_assignment_value(operator, left, right))
-				);
-
-				if (should_proxy(value, context.state.scope)) {
-					transformed = true;
-					value =
-						private_state.kind === 'raw_state'
-							? value
-							: build_proxy_reassignment(value, b.member(b.this, private_state.id));
-				}
-
-				if (!context.state.in_constructor) {
-					return b.call('$.set', left, value);
-				} else if (transformed) {
-					return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
-				}
+		const private_state = context.state.private_state.get(left.property.name);
+
+		if (private_state !== undefined) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+
+			if (private_state.kind !== 'raw_state' && should_proxy(value, context.state.scope)) {
+				value = build_proxy_reassignment(value, b.member(b.this, private_state.id));
 			}
+
+			if (context.state.in_constructor) {
+				// inside the constructor, we can assign to `this.#foo.v` rather than using `$.set`,
+				// since nothing is tracking the signal at this point
+				return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
+			}
+
+			return b.call('$.set', left, value);
 		}
 	}