From 11e4ba017e15a83eb07e611e522a03fa07498e09 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 17:10:09 +0000
Subject: [PATCH 01/23] feat: add support for bind getters/setters

---
 .../2-analyze/visitors/BindDirective.js       |  8 ++
 .../client/visitors/BindDirective.js          | 32 ++++---
 .../client/visitors/RegularElement.js         |  5 ++
 .../client/visitors/shared/component.js       | 88 +++++++++++--------
 .../client/visitors/shared/utils.js           | 15 +++-
 .../server/visitors/shared/component.js       | 46 ++++++----
 .../server/visitors/shared/element.js         | 25 ++++--
 .../src/compiler/types/legacy-nodes.d.ts      |  5 +-
 .../svelte/src/compiler/types/template.d.ts   |  5 +-
 packages/svelte/types/index.d.ts              |  4 +-
 10 files changed, 155 insertions(+), 78 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 5b56d9ddac38..e9796737f029 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -20,6 +20,14 @@ export function BindDirective(node, context) {
 	validate_no_const_assignment(node, node.expression, context.state.scope, true);
 
 	const assignee = node.expression;
+
+	if (assignee.type === 'SequenceExpression') {
+		if (assignee.expressions.length !== 2) {
+			e.bind_invalid_expression(node);
+		}
+		return;
+	}
+
 	const left = object(assignee);
 
 	if (left === null) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 79969240c771..43e0c0029a84 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -36,18 +36,26 @@ export function BindDirective(node, context) {
 		);
 	}
 
-	const get = b.thunk(/** @type {Expression} */ (context.visit(expression)));
-
-	/** @type {Expression | undefined} */
-	let set = b.unthunk(
-		b.arrow(
-			[b.id('$$value')],
-			/** @type {Expression} */ (context.visit(b.assignment('=', expression, b.id('$$value'))))
-		)
-	);
-
-	if (get === set) {
-		set = undefined;
+	let get, set;
+
+	if (expression.type === 'SequenceExpression') {
+		const [get_expression, set_expression] = expression.expressions;
+		get = /** @type {Expression} */ (context.visit(get_expression));
+		set = /** @type {Expression} */ (context.visit(set_expression));
+	} else {
+		get = b.thunk(/** @type {Expression} */ (context.visit(expression)));
+
+		/** @type {Expression | undefined} */
+		set = b.unthunk(
+			b.arrow(
+				[b.id('$$value')],
+				/** @type {Expression} */ (context.visit(b.assignment('=', expression, b.id('$$value'))))
+			)
+		);
+
+		if (get === set) {
+			set = undefined;
+		}
 	}
 
 	/** @type {CallExpression} */
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 4d3cebcee6fe..5e88ca1b98b6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -450,6 +450,11 @@ function setup_select_synchronization(value_binding, context) {
 	if (context.state.analysis.runes) return;
 
 	let bound = value_binding.expression;
+
+	if (bound.type === 'SequenceExpression') {
+		return;
+	}
+
 	while (bound.type === 'MemberExpression') {
 		bound = /** @type {Identifier | MemberExpression} */ (bound.object);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 8e1a53670708..34875a6ba435 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -161,49 +161,63 @@ export function build_component(node, component_name, context, anchor = context.
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
-
-			if (
-				dev &&
-				expression.type === 'MemberExpression' &&
-				context.state.analysis.runes &&
-				!is_ignored(node, 'binding_property_non_reactive')
-			) {
-				validate_binding(context.state, attribute, expression);
-			}
-
-			if (attribute.name === 'this') {
-				bind_this = attribute.expression;
+			if (attribute.expression.type === 'SequenceExpression') {
+				const [get_expression, set_expression] = attribute.expression.expressions;
+				const get = /** @type {Expression} */ (context.visit(get_expression));
+				const set = /** @type {Expression} */ (context.visit(set_expression));
+				const get_id = b.id(context.state.scope.generate('bind_get'));
+				const set_id = b.id(context.state.scope.generate('bind_set'));
+
+				context.state.init.push(b.var(get_id, get));
+				context.state.init.push(b.var(set_id, set));
+
+				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
 			} else {
-				if (dev) {
-					binding_initializers.push(
-						b.stmt(
-							b.call(
-								b.id('$.add_owner_effect'),
-								b.thunk(expression),
-								b.id(component_name),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
-							)
-						)
-					);
+				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+				if (
+					dev &&
+					expression.type === 'MemberExpression' &&
+					context.state.analysis.runes &&
+					!is_ignored(node, 'binding_property_non_reactive')
+				) {
+					validate_binding(context.state, attribute, expression);
 				}
 
-				const is_store_sub =
-					attribute.expression.type === 'Identifier' &&
-					context.state.scope.get(attribute.expression.name)?.kind === 'store_sub';
-
-				if (is_store_sub) {
+				if (attribute.name === 'this') {
+					bind_this = attribute.expression;
+				} else {
+					if (dev) {
+						binding_initializers.push(
+							b.stmt(
+								b.call(
+									b.id('$.add_owner_effect'),
+									b.thunk(expression),
+									b.id(component_name),
+									is_ignored(node, 'ownership_invalid_binding') && b.true
+								)
+							)
+						);
+					}
+
+					const is_store_sub =
+						attribute.expression.type === 'Identifier' &&
+						context.state.scope.get(attribute.expression.name)?.kind === 'store_sub';
+
+					if (is_store_sub) {
+						push_prop(
+							b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)])
+						);
+					} else {
+						push_prop(b.get(attribute.name, [b.return(expression)]));
+					}
+
+					const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
 					push_prop(
-						b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)])
+						b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))])
 					);
-				} else {
-					push_prop(b.get(attribute.name, [b.return(expression)]));
 				}
-
-				const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
-				push_prop(
-					b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))])
-				);
 			}
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 21b902d5c281..d66475e9aab7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, SequenceExpression, Statement, Super } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -157,11 +157,19 @@ export function build_update_assignment(state, id, init, value, update) {
 
 /**
  * Serializes `bind:this` for components and elements.
- * @param {Identifier | MemberExpression} expression
+ * @param {Identifier | MemberExpression | SequenceExpression} expression
  * @param {Expression} value
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
  */
 export function build_bind_this(expression, value, { state, visit }) {
+	if (expression.type === 'SequenceExpression') {
+		const [get_expression, set_expression] = expression.expressions;
+		const get = /** @type {Expression} */ (visit(get_expression));
+		const set = /** @type {Expression} */ (visit(set_expression));
+
+		return b.call('$.bind_this', value, get, set);
+	}
+
 	/** @type {Identifier[]} */
 	const ids = [];
 
@@ -238,6 +246,9 @@ export function build_bind_this(expression, value, { state, visit }) {
  * @param {MemberExpression} expression
  */
 export function validate_binding(state, binding, expression) {
+	if (binding.expression.type === 'SequenceExpression') {
+		return;
+	}
 	// If we are referencing a $store.foo then we don't need to add validation
 	const left = object(binding.expression);
 	const left_binding = left && state.scope.get(left.name);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 79df3cdd04c6..6f73c532848d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -81,22 +81,36 @@ export function build_inline_component(node, expression, context) {
 			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
-			// TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child
-			push_prop(
-				b.get(attribute.name, [
-					b.return(/** @type {Expression} */ (context.visit(attribute.expression)))
-				])
-			);
-			push_prop(
-				b.set(attribute.name, [
-					b.stmt(
-						/** @type {Expression} */ (
-							context.visit(b.assignment('=', attribute.expression, b.id('$$value')))
-						)
-					),
-					b.stmt(b.assignment('=', b.id('$$settled'), b.false))
-				])
-			);
+			if (attribute.expression.type === 'SequenceExpression') {
+				const [get_expression, set_expression] = attribute.expression.expressions;
+				const get = /** @type {Expression} */ (context.visit(get_expression));
+				const set = /** @type {Expression} */ (context.visit(set_expression));
+				const get_id = b.id(context.state.scope.generate('bind_get'));
+				const set_id = b.id(context.state.scope.generate('bind_set'));
+
+				context.state.init.push(b.var(get_id, get));
+				context.state.init.push(b.var(set_id, set));
+
+				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+			} else {
+				// TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child
+				push_prop(
+					b.get(attribute.name, [
+						b.return(/** @type {Expression} */ (context.visit(attribute.expression)))
+					])
+				);
+				push_prop(
+					b.set(attribute.name, [
+						b.stmt(
+							/** @type {Expression} */ (
+								context.visit(b.assignment('=', attribute.expression, b.id('$$value')))
+							)
+						),
+						b.stmt(b.assignment('=', b.id('$$settled'), b.false))
+					])
+				);
+			}
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index c386c4f7c05e..5999f0b0b666 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -110,11 +110,16 @@ export function build_element_attributes(node, context) {
 			if (binding?.omit_in_ssr) continue;
 
 			if (is_content_editable_binding(attribute.name)) {
-				content = /** @type {Expression} */ (context.visit(attribute.expression));
+				content =
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
+						: /** @type {Expression} */ (context.visit(attribute.expression));
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
 				content = b.call(
 					'$.escape',
-					/** @type {Expression} */ (context.visit(attribute.expression))
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
+						: /** @type {Expression} */ (context.visit(attribute.expression))
 				);
 			} else if (attribute.name === 'group') {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
@@ -129,6 +134,11 @@ export function build_element_attributes(node, context) {
 						is_text_attribute(attr) &&
 						attr.value[0].data === 'checkbox'
 				);
+				const attribute_expression =
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(attribute.expression.expressions[0])
+						: attribute.expression;
+
 				attributes.push(
 					create_attribute('checked', -1, -1, [
 						{
@@ -138,12 +148,12 @@ export function build_element_attributes(node, context) {
 							parent: attribute,
 							expression: is_checkbox
 								? b.call(
-										b.member(attribute.expression, 'includes'),
+										b.member(attribute_expression, 'includes'),
 										build_attribute_value(value_attribute.value, context)
 									)
 								: b.binary(
 										'===',
-										attribute.expression,
+										attribute_expression,
 										build_attribute_value(value_attribute.value, context)
 									),
 							metadata: {
@@ -153,6 +163,11 @@ export function build_element_attributes(node, context) {
 					])
 				);
 			} else {
+				const attribute_expression =
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(attribute.expression.expressions[0])
+						: attribute.expression;
+
 				attributes.push(
 					create_attribute(attribute.name, -1, -1, [
 						{
@@ -160,7 +175,7 @@ export function build_element_attributes(node, context) {
 							start: -1,
 							end: -1,
 							parent: attribute,
-							expression: attribute.expression,
+							expression: attribute_expression,
 							metadata: {
 								expression: create_expression_metadata()
 							}
diff --git a/packages/svelte/src/compiler/types/legacy-nodes.d.ts b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
index 2bd5fbbfa6d2..0013f5c17a60 100644
--- a/packages/svelte/src/compiler/types/legacy-nodes.d.ts
+++ b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
@@ -6,7 +6,8 @@ import type {
 	Identifier,
 	MemberExpression,
 	ObjectExpression,
-	Pattern
+	Pattern,
+	SequenceExpression
 } from 'estree';
 
 interface BaseNode {
@@ -49,7 +50,7 @@ export interface LegacyBinding extends BaseNode {
 	/** The 'x' in `bind:x` */
 	name: string;
 	/** The y in `bind:x={y}` */
-	expression: Identifier | MemberExpression;
+	expression: Identifier | MemberExpression | SequenceExpression;
 }
 
 export interface LegacyBody extends BaseElement {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index fd1824d3b3db..cc153b263a28 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -14,7 +14,8 @@ import type {
 	Pattern,
 	Program,
 	ChainExpression,
-	SimpleCallExpression
+	SimpleCallExpression,
+	SequenceExpression
 } from 'estree';
 import type { Scope } from '../phases/scope';
 
@@ -185,7 +186,7 @@ export namespace AST {
 		/** The 'x' in `bind:x` */
 		name: string;
 		/** The y in `bind:x={y}` */
-		expression: Identifier | MemberExpression;
+		expression: Identifier | MemberExpression | SequenceExpression;
 		/** @internal */
 		metadata: {
 			binding_group_name: Identifier;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 00ba2556d9a1..3079071fef40 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -606,7 +606,7 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression } from 'estree';
+	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
 	import type { Location } from 'locate-character';
 	/**
@@ -1047,7 +1047,7 @@ declare module 'svelte/compiler' {
 			/** The 'x' in `bind:x` */
 			name: string;
 			/** The y in `bind:x={y}` */
-			expression: Identifier | MemberExpression;
+			expression: Identifier | MemberExpression | SequenceExpression;
 		}
 
 		/** A `class:` directive */

From fa99fa0985ff7d8c315b5c3b9bb2323c6d31d363 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 18:54:05 +0000
Subject: [PATCH 02/23] different direction

---
 ...023-02-21-streaming-snapshots-sveltekit.md |  2 +-
 .../98-reference/.generated/compile-errors.md |  6 ++
 .../05-bindings/00-text-inputs/App.svelte     |  2 +-
 .../05-bindings/01-numeric-inputs/App.svelte  |  8 +--
 .../05-bindings/02-checkbox-inputs/App.svelte |  2 +-
 .../05-bindings/03-group-inputs/App.svelte    |  8 +--
 .../05-bindings/04-textarea-inputs/App.svelte |  2 +-
 .../05-bindings/06-select-bindings/App.svelte |  4 +-
 .../07-multiple-select-bindings/App.svelte    |  8 +--
 .../08-each-block-bindings/App.svelte         |  4 +-
 .../05-bindings/09-media-elements/App.svelte  |  3 +-
 .../05-bindings/10-dimensions/App.svelte      |  6 +-
 .../05-bindings/11-bind-this/App.svelte       |  2 +-
 .../12-component-bindings/App.svelte          |  2 +-
 .../06-lifecycle/02-update/App.svelte         |  2 +-
 .../examples/08-motion/01-spring/App.svelte   |  4 +-
 .../09-transitions/00-transition/App.svelte   |  2 +-
 .../App.svelte                                |  2 +-
 .../09-transitions/02-in-and-out/App.svelte   |  2 +-
 .../03-custom-css-transitions/App.svelte      |  2 +-
 .../04-custom-js-transitions/App.svelte       |  2 +-
 .../05-transition-events/App.svelte           |  2 +-
 .../10-animations/00-animate/App.svelte       |  4 +-
 .../examples/11-easing/00-easing/App.svelte   |  2 +-
 .../11-easing/00-easing/Controls.svelte       |  6 +-
 .../examples/12-svg/02-bar-chart/App.svelte   |  2 +-
 .../examples/12-svg/03-area-chart/App.svelte  |  2 +-
 .../12-svg/04-scatterplot/Scatterplot.svelte  |  2 +-
 .../12-svg/05-svg-transitions/App.svelte      |  2 +-
 .../App.svelte                                |  2 +-
 .../14-classes/01-class-shorthand/App.svelte  |  2 +-
 .../15-composition/05-modal/Modal.svelte      |  6 +-
 .../16-context/00-context-api/Map.svelte      |  2 +-
 .../01-svelte-component/App.svelte            |  2 +-
 .../02-svelte-element/App.svelte              |  2 +-
 .../04-svelte-window-bindings/App.svelte      |  2 +-
 .../01-module-exports/AudioPlayer.svelte      |  2 +-
 .../examples/19-debugging/00-debug/App.svelte |  4 +-
 .../20-7guis/01-7guis-counter/App.svelte      |  2 +-
 .../03-7guis-flight-booker/App.svelte         |  6 +-
 .../20-7guis/04-7guis-timer/App.svelte        |  2 +-
 .../20-7guis/05-7guis-crud/App.svelte         |  8 +--
 .../02-immutable-data/ImmutableTodo.svelte    |  2 +-
 .../02-immutable-data/MutableTodo.svelte      |  2 +-
 .../20190420-blog-write-less-code/App.svelte  |  4 +-
 .../01-text-inputs/app-b/App.svelte           |  2 +-
 .../06-bindings/01-text-inputs/text.md        |  2 +-
 .../02-numeric-inputs/app-b/App.svelte        |  8 +--
 .../06-bindings/02-numeric-inputs/text.md     |  4 +-
 .../03-checkbox-inputs/app-b/App.svelte       |  2 +-
 .../06-bindings/03-checkbox-inputs/text.md    |  2 +-
 .../04-group-inputs/app-b/App.svelte          |  8 +--
 .../06-bindings/04-group-inputs/text.md       |  4 +-
 .../06-select-bindings/app-a/App.svelte       |  2 +-
 .../06-select-bindings/app-b/App.svelte       |  4 +-
 .../app-a/App.svelte                          |  8 +--
 .../app-b/App.svelte                          |  8 +--
 .../07-multiple-select-bindings/text.md       |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../08-contenteditable-bindings/text.md       |  2 +-
 .../09-each-block-bindings/app-b/App.svelte   |  4 +-
 .../09-each-block-bindings/text.md            |  4 +-
 .../10-media-elements/app-b/App.svelte        |  3 +-
 .../06-bindings/10-media-elements/text.md     |  3 +-
 .../11-dimensions/app-a/App.svelte            |  4 +-
 .../11-dimensions/app-b/App.svelte            |  6 +-
 .../06-bindings/11-dimensions/text.md         |  2 +-
 .../06-bindings/12-bind-this/app-b/App.svelte |  2 +-
 .../tutorial/06-bindings/12-bind-this/text.md |  2 +-
 .../13-component-bindings/app-b/App.svelte    |  2 +-
 .../06-bindings/13-component-bindings/text.md |  2 +-
 .../14-component-this/app-a/InputField.svelte |  2 +-
 .../14-component-this/app-b/App.svelte        |  2 +-
 .../14-component-this/app-b/InputField.svelte |  2 +-
 .../06-bindings/14-component-this/text.md     |  2 +-
 .../07-lifecycle/03-update/app-a/App.svelte   |  2 +-
 .../07-lifecycle/03-update/app-b/App.svelte   |  2 +-
 .../06-store-bindings/app-b/App.svelte        |  2 +-
 .../08-stores/06-store-bindings/text.md       |  2 +-
 .../09-motion/02-spring/app-a/App.svelte      |  4 +-
 .../09-motion/02-spring/app-b/App.svelte      |  4 +-
 .../01-transition/app-a/App.svelte            |  2 +-
 .../01-transition/app-b/App.svelte            |  2 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../03-in-and-out/app-a/App.svelte            |  2 +-
 .../03-in-and-out/app-b/App.svelte            |  2 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../05-custom-js-transitions/app-a/App.svelte |  2 +-
 .../05-custom-js-transitions/app-b/App.svelte |  2 +-
 .../06-transition-events/app-a/App.svelte     |  2 +-
 .../06-transition-events/app-b/App.svelte     |  2 +-
 .../07-global-transitions/app-a/App.svelte    |  4 +-
 .../07-global-transitions/app-b/App.svelte    |  4 +-
 .../app-a/App.svelte                          |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../02-class-shorthand/app-a/App.svelte       |  2 +-
 .../02-class-shorthand/app-b/App.svelte       |  2 +-
 .../03-inline-styles/app-a/App.svelte         |  2 +-
 .../03-inline-styles/app-b/App.svelte         |  2 +-
 .../04-style-directive/app-a/App.svelte       |  2 +-
 .../04-style-directive/app-b/App.svelte       |  2 +-
 .../01-context-api/app-a/Map.svelte           |  2 +-
 .../01-context-api/app-b/Map.svelte           |  2 +-
 .../02-svelte-component/app-a/App.svelte      |  2 +-
 .../02-svelte-component/app-b/App.svelte      |  2 +-
 .../03-svelte-element/app-a/App.svelte        |  2 +-
 .../03-svelte-element/app-b/App.svelte        |  2 +-
 .../app-b/App.svelte                          |  2 +-
 .../05-svelte-window-bindings/text.md         |  2 +-
 .../09-svelte-options/app-a/Todo.svelte       |  2 +-
 .../09-svelte-options/app-b/Todo.svelte       |  2 +-
 .../01-sharing-code/app-a/AudioPlayer.svelte  |  2 +-
 .../01-sharing-code/app-b/AudioPlayer.svelte  |  2 +-
 .../app-a/AudioPlayer.svelte                  |  2 +-
 .../app-b/AudioPlayer.svelte                  |  2 +-
 .../18-special-tags/01-debug/app-a/App.svelte |  4 +-
 .../18-special-tags/01-debug/app-b/App.svelte |  4 +-
 .../messages/compile-errors/template.md       |  4 ++
 packages/svelte/src/compiler/errors.js        |  9 +++
 .../compiler/phases/1-parse/state/element.js  | 48 ++++++++++++++--
 .../2-analyze/visitors/BindDirective.js       | 11 ++--
 .../client/visitors/BindDirective.js          | 55 ++++++++++++-------
 .../client/visitors/RegularElement.js         |  7 +--
 .../client/visitors/shared/component.js       |  4 +-
 .../client/visitors/shared/utils.js           |  8 +--
 .../server/visitors/shared/component.js       |  4 +-
 .../server/visitors/shared/element.js         | 25 ++++-----
 .../src/compiler/types/legacy-nodes.d.ts      |  2 +-
 .../svelte/src/compiler/types/template.d.ts   |  2 +-
 packages/svelte/types/index.d.ts              |  4 +-
 .../src/lib/Input/ComponentSelector.svelte    |  3 +-
 .../src/lib/Input/ModuleEditor.svelte         |  3 +-
 .../src/lib/Output/AstNode.svelte             |  3 +-
 .../src/lib/Output/CompilerOptions.svelte     | 12 ++--
 .../src/lib/Output/Output.svelte              |  9 +--
 .../src/lib/Output/Viewer.svelte              |  3 +-
 sites/svelte-5-preview/src/lib/Repl.svelte    |  4 +-
 .../svelte-5-preview/src/routes/+page.svelte  |  3 +-
 .../routes/docs/content/01-api/02-runes.md    | 14 ++---
 .../routes/docs/content/01-api/05-imports.md  | 10 ++--
 .../02-examples/02-fine-grained-reactivity.md |  4 +-
 .../03-appendix/02-breaking-changes.md        |  2 +-
 144 files changed, 335 insertions(+), 267 deletions(-)

diff --git a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
index a030e8fc410d..c70f946e48f7 100644
--- a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
@@ -147,7 +147,7 @@ For example, here is how you would capture and restore the value of a textarea:
 
 <form method="POST">
 	<label for="comment">Comment</label>
-	<textarea id="comment" bind:value={comment} />
+	<textarea id="comment" bind:value comment} />
 	<button>Post comment</button>
 </form>
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index b32bc6b89c02..1e8c7ed3a8a1 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -424,6 +424,12 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
+### invalid_bind_directive
+
+```
+Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+```
+
 ### js_parse_error
 
 ```
diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
index 9ec139df2127..414c5af82787 100644
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ b/documentation/examples/05-bindings/00-text-inputs/App.svelte
@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value={name} placeholder="enter your name" />
+<input bind:value name} placeholder="enter your name" />
 <p>Hello {name || 'stranger'}!</p>
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
index 15ef23c46626..0f8a0b6a268c 100644
--- a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
+++ b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
+	<input type="number" bind:value a} min="0" max="10" />
+	<input type="range" bind:value a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value={b} min="0" max="10" />
-	<input type="range" bind:value={b} min="0" max="10" />
+	<input type="number" bind:value b} min="0" max="10" />
+	<input type="range" bind:value b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
index b3373593178f..c4b3467d335f 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={yes} />
+	<input type="checkbox" bind:checked yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
index 0ab215d51943..30121e661ab7 100644
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/examples/05-bindings/03-group-inputs/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
index ecb809095d3a..160be172ff46 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -3,7 +3,7 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<textarea bind:value={text} />
+<textarea bind:value text} />
 
 {@html marked(text)}
 
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
index 7785258fe2f1..517ff9b0a5ab 100644
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/06-select-bindings/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
+	<select bind:value selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
index 2fd19c28ad58..4583f9cd0194 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
index a8118093d337..1193ac80e7a8 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
+		<input placeholder="What needs to be done?" bind:value todo.text} disabled={todo.done} />
 	</div>
 {/each}
 
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
index 836804f8bc7f..60a71891b6a1 100644
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ b/documentation/examples/05-bindings/09-media-elements/App.svelte
@@ -60,7 +60,8 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime={time}
+		bind:currentTime
+		time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
index 4d4a8b2cf2c5..39b3d75c6143 100644
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ b/documentation/examples/05-bindings/10-dimensions/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<input type="range" bind:value size} />
+<input bind:value text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth={w} bind:clientHeight={h}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/examples/05-bindings/11-bind-this/App.svelte b/documentation/examples/05-bindings/11-bind-this/App.svelte
index fe0fbe1b018c..20ff5967bb86 100644
--- a/documentation/examples/05-bindings/11-bind-this/App.svelte
+++ b/documentation/examples/05-bindings/11-bind-this/App.svelte
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index 254ced9464d8..f815841f6202 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -11,7 +11,7 @@
 
 <h1 class:pin>{view}</h1>
 
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
 
 <style>
 	h1 {
diff --git a/documentation/examples/06-lifecycle/02-update/App.svelte b/documentation/examples/06-lifecycle/02-update/App.svelte
index afc1b29ea8d9..b951a6aacca4 100644
--- a/documentation/examples/06-lifecycle/02-update/App.svelte
+++ b/documentation/examples/06-lifecycle/02-update/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index e5b59901aa12..9a20d4719dfa 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
index 29e9254d1409..998ed5665d57 100644
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ b/documentation/examples/09-transitions/00-transition/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index 318739f1d0fc..e426b53cf60d 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
index bb44e5ca9f43..8fe8cab57f65 100644
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ b/documentation/examples/09-transitions/02-in-and-out/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
index c85fe7ef8996..1704eb23d05a 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
index 9ccd18a0f7b6..19c50850d2c6 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
index 31ef18c930cb..5850ea003ee3 100644
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ b/documentation/examples/09-transitions/05-transition-events/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
index 7209a25f1567..95c8d833e875 100644
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ b/documentation/examples/10-animations/00-animate/App.svelte
@@ -57,7 +57,7 @@
 		<h2>todo</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
+				<input type="checkbox" bind:checked todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
@@ -68,7 +68,7 @@
 		<h2>done</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked={todo.done} />
+				<input type="checkbox" bind:checked todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
diff --git a/documentation/examples/11-easing/00-easing/App.svelte b/documentation/examples/11-easing/00-easing/App.svelte
index c3814bb8bd40..9f0a5d76ca98 100644
--- a/documentation/examples/11-easing/00-easing/App.svelte
+++ b/documentation/examples/11-easing/00-easing/App.svelte
@@ -37,7 +37,7 @@
 	$: current && runAnimations();
 </script>
 
-<div bind:offsetWidth={width} class="easing-vis">
+<div bind:offsetWidth width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
 			<Grid x={$time} y={$value} />
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index a938ee235ba8..559bd2168552 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -18,7 +18,7 @@
 	<div class="easing-types">
 		<h3>Ease</h3>
 		{#if mobile}
-			<select bind:value={current_ease}>
+			<select bind:value current_ease}>
 				{#each [...eases] as [name]}
 					<option value={name} class:selected={name === current_ease}>
 						{name}
@@ -36,7 +36,7 @@
 		{/if}
 		<h3>Type</h3>
 		{#if mobile}
-			<select bind:value={current_type}>
+			<select bind:value current_type}>
 				{#each types as [name, type]}
 					<option value={type}>
 						{name}
@@ -56,7 +56,7 @@
 	<h4>Duration</h4>
 	<div class="duration">
 		<span>
-			<input type="number" bind:value={duration} min="0" step="100" />
+			<input type="number" bind:value duration} min="0" step="100" />
 			<button class="number" on:click={() => (duration -= 100)}>-</button>
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
index 283b109ac062..040a4ac55086 100644
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ b/documentation/examples/12-svg/02-bar-chart/App.svelte
@@ -35,7 +35,7 @@
 
 <h2>US birthrate by year</h2>
 
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+<div class="chart" bind:clientWidth width} bind:clientHeight height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis">
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
index fb79b04878eb..6c5d964be134 100644
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ b/documentation/examples/12-svg/03-area-chart/App.svelte
@@ -29,7 +29,7 @@
 
 <h2>Arctic sea ice minimum</h2>
 
-<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+<div class="chart" bind:clientWidth width} bind:clientHeight height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
index 9c0a96efc534..b5fa4c2d0238 100644
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -31,7 +31,7 @@
 
 <svelte:window on:resize={resize} />
 
-<svg bind:this={svg}>
+<svg bind:this svg}>
 	<!-- y axis -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
index 3a4b1710c8a3..26a9ae5a54be 100644
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ b/documentation/examples/12-svg/05-svg-transitions/App.svelte
@@ -27,7 +27,7 @@
 {/if}
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	toggle me
 </label>
 
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index 23cc9f2f9ece..2f70cf0606a1 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
index ad39916ce57b..2ecd346acd7a 100644
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ b/documentation/examples/14-classes/01-class-shorthand/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index 3b832030fe4b..2a24c7959ab5 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -7,11 +7,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-	bind:this={dialog}
-	on:close={() => (showModal = false)}
-	on:click|self={() => dialog.close()}
->
+<dialog bind:this dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()}>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
diff --git a/documentation/examples/16-context/00-context-api/Map.svelte b/documentation/examples/16-context/00-context-api/Map.svelte
index a69d18c7fd12..b701b2fa86d4 100644
--- a/documentation/examples/16-context/00-context-api/Map.svelte
+++ b/documentation/examples/16-context/00-context-api/Map.svelte
@@ -31,7 +31,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/examples/17-special-elements/01-svelte-component/App.svelte b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
index 69e51253fcbc..e361a7020649 100644
--- a/documentation/examples/17-special-elements/01-svelte-component/App.svelte
+++ b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
index 068f7b3c4f56..d7a65469b442 100644
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index 7e85600abeb9..ee173a137938 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index b76601e025b5..bbfa0b82b72b 100644
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
index 30bffc896cb5..d3f7b26a2e43 100644
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/examples/19-debugging/00-debug/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {@debug user}
 
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
index 26c8c5147739..57f24356d802 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
@@ -3,5 +3,5 @@
 	let count = 0;
 </script>
 
-<input type="number" bind:value={count} />
+<input type="number" bind:value count} />
 <button on:click={() => (count += 1)}>count</button>
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 42caebe50667..9a2b2617d7c7 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -37,13 +37,13 @@
 	}
 </script>
 
-<select bind:value={isReturn}>
+<select bind:value isReturn}>
 	<option value={false}>one-way flight</option>
 	<option value={true}>return flight</option>
 </select>
 
-<input type="date" bind:value={start} />
-<input type="date" bind:value={end} disabled={!isReturn} />
+<input type="date" bind:value start} />
+<input type="date" bind:value end} disabled={!isReturn} />
 
 <button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
 
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index 14103e424bd7..51bc0d388d45 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -31,7 +31,7 @@
 
 <label>
 	duration:
-	<input type="range" bind:value={duration} min="1" max="20000" />
+	<input type="range" bind:value duration} min="1" max="20000" />
 </label>
 
 <button on:click={() => (elapsed = 0)}>reset</button>
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
index fbae236b9fd4..6f3b0c153ec7 100644
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
@@ -50,16 +50,16 @@
 	}
 </script>
 
-<input placeholder="filter prefix" bind:value={prefix} />
+<input placeholder="filter prefix" bind:value prefix} />
 
-<select bind:value={i} size={5}>
+<select bind:value i} size={5}>
 	{#each filteredPeople as person, i}
 		<option value={i}>{person.last}, {person.first}</option>
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
+<label><input bind:value first} placeholder="first" /></label>
+<label><input bind:value last} placeholder="last" /></label>
 
 <div class="buttons">
 	<button on:click={create} disabled={!first || !last}>create</button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 72d3d83e6b2a..a1ec3056b6ca 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<button bind:this btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index d2ad294728af..58027f51fd52 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<button bind:this btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
index 89b10d2a1798..530f44ec024a 100644
--- a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
+++ b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
@@ -3,7 +3,7 @@
 	let b = 2;
 </script>
 
-<input type="number" bind:value={a} />
-<input type="number" bind:value={b} />
+<input type="number" bind:value a} />
+<input type="number" bind:value b} />
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
index 94061c0df250..5b560e78ceb2 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -2,6 +2,6 @@
 	let name = 'world';
 </script>
 
-<input bind:value={name} />
+<input bind:value name} />
 
 <h1>Hello {name}!</h1>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/text.md b/documentation/tutorial/06-bindings/01-text-inputs/text.md
index 68e0c2ff9c65..24069fce75c5 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/text.md
+++ b/documentation/tutorial/06-bindings/01-text-inputs/text.md
@@ -9,7 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
 Instead, we can use the `bind:value` directive:
 
 ```svelte
-<input bind:value={name} />
+<input bind:value name} />
 ```
 
 This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
index 0598d99ee09c..8275c018eb2f 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value={a} min="0" max="10" />
-	<input type="range" bind:value={a} min="0" max="10" />
+	<input type="number" bind:value a} min="0" max="10" />
+	<input type="range" bind:value a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value={b} min="0" max="10" />
-	<input type="range" bind:value={b} min="0" max="10" />
+	<input type="number" bind:value b} min="0" max="10" />
+	<input type="range" bind:value b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
index a9b539e6035d..7a0ee71b97a1 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -7,6 +7,6 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
 With `bind:value`, Svelte takes care of it for you:
 
 ```svelte
-<input type="number" bind:value={a} min="0" max="10" />
-<input type="range" bind:value={a} min="0" max="10" />
+<input type="number" bind:value a} min="0" max="10" />
+<input type="range" bind:value a} min="0" max="10" />
 ```
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index b3373593178f..c4b3467d335f 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={yes} />
+	<input type="checkbox" bind:checked yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
index f2dd2e3c01b1..b7c8f2a41113 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -5,5 +5,5 @@ title: Checkbox inputs
 Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
 
 ```svelte
-<input type="checkbox" bind:checked={yes} />
+<input type="checkbox" bind:checked yes} />
 ```
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index ce0565ab8e38..f36b5a58cbe4 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={1} />
+	<input type="radio" bind:group scoops} name="scoops" value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={2} />
+	<input type="radio" bind:group scoops} name="scoops" value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} name="scoops" value={3} />
+	<input type="radio" bind:group scoops} name="scoops" value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/text.md b/documentation/tutorial/06-bindings/04-group-inputs/text.md
index 790e95ea830c..12c8271e2e35 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/text.md
+++ b/documentation/tutorial/06-bindings/04-group-inputs/text.md
@@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```svelte
-<input type="radio" bind:group={scoops} name="scoops" value={1} />
+<input type="radio" bind:group scoops} name="scoops" value={1} />
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index eaaa0aeabe57..60670ac59526 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index 7785258fe2f1..517ff9b0a5ab 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change={() => (answer = '')}>
+	<select bind:value selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value={answer} />
+	<input bind:value answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
index 0ab215d51943..30121e661ab7 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
index 2fd19c28ad58..4583f9cd0194 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
+	<input type="radio" bind:group scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
+	<input type="radio" bind:group scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
+	<input type="radio" bind:group scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
index 1107d74b5487..0003dc1fdd06 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -9,7 +9,7 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 ```svelte
 <h2>Flavours</h2>
 
-<select multiple bind:value={flavours}>
+<select multiple bind:value flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
index b7c0ad8c31e0..ca40d101d283 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML html} />
 
 <pre>{html}</pre>
 
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
index 7ba124e38a83..c03129e67fa7 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
@@ -11,5 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
 There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```svelte
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML html} />
 ```
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
index 3ddb1a4fb449..7f63e85c8751 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
+		<input placeholder="What needs to be done?" bind:value todo.text} />
 	</div>
 {/each}
 
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
index cbba3d97f375..67750dcd5959 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
@@ -7,9 +7,9 @@ You can even bind to properties inside an `each` block.
 ```svelte
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked={todo.done} />
+		<input type="checkbox" bind:checked todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} />
+		<input placeholder="What needs to be done?" bind:value todo.text} />
 	</div>
 {/each}
 ```
diff --git a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index 836804f8bc7f..60a71891b6a1 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -60,7 +60,8 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime={time}
+		bind:currentTime
+		time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/tutorial/06-bindings/10-media-elements/text.md b/documentation/tutorial/06-bindings/10-media-elements/text.md
index 5ee2d4ac53bb..cd4e066f9406 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/text.md
+++ b/documentation/tutorial/06-bindings/10-media-elements/text.md
@@ -14,7 +14,8 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 	on:touchmove|preventDefault={handleMove}
 	on:mousedown={handleMousedown}
 	on:mouseup={handleMouseup}
-	bind:currentTime={time}
+	bind:currentTime
+	time}
 	bind:duration
 	bind:paused
 >
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
index 96fb6d247714..97e1bb6a51da 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -5,8 +5,8 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<input type="range" bind:value size} />
+<input bind:value text} />
 
 <p>size: {w}px x {h}px</p>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
index 699664748a1c..872559da59eb 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value={size} />
-<input bind:value={text} />
+<input type="range" bind:value size} />
+<input bind:value text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth={w} bind:clientHeight={h}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/text.md b/documentation/tutorial/06-bindings/11-dimensions/text.md
index 7b12a0827edb..ba39d8f55f29 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/text.md
+++ b/documentation/tutorial/06-bindings/11-dimensions/text.md
@@ -5,7 +5,7 @@ title: Dimensions
 Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
 
 ```svelte
-<div bind:clientWidth={w} bind:clientHeight={h}>
+<div bind:clientWidth w} bind:clientHeight h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```
diff --git a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index b73e800947af..c410bef88439 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -36,7 +36,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/tutorial/06-bindings/12-bind-this/text.md b/documentation/tutorial/06-bindings/12-bind-this/text.md
index 16d398293406..e43d02ca0498 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/text.md
+++ b/documentation/tutorial/06-bindings/12-bind-this/text.md
@@ -5,7 +5,7 @@ title: This
 The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
 
 ```svelte
-<canvas bind:this={canvas} width={32} height={32} />
+<canvas bind:this canvas} width={32} height={32} />
 ```
 
 Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
index b3666f891da9..6133e68cf086 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
@@ -11,4 +11,4 @@
 
 <h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
 
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/text.md b/documentation/tutorial/06-bindings/13-component-bindings/text.md
index a5426fa8686b..2cb5d9073006 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/text.md
+++ b/documentation/tutorial/06-bindings/13-component-bindings/text.md
@@ -5,7 +5,7 @@ title: Component bindings
 Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
 
 ```svelte
-<Keypad bind:value={pin} on:submit={handleSubmit} />
+<Keypad bind:value pin} on:submit={handleSubmit} />
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
index caf9c2c9e34c..70ec258edf42 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this={input} />
+<input bind:this input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
index b5bd3d2e7d03..359097340c82 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
@@ -4,6 +4,6 @@
 	let field;
 </script>
 
-<InputField bind:this={field} />
+<InputField bind:this field} />
 
 <button on:click={() => field.focus()}>Focus field</button>
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
index caf9c2c9e34c..70ec258edf42 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this={input} />
+<input bind:this input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/text.md b/documentation/tutorial/06-bindings/14-component-this/text.md
index e87f3382342e..212fb0d7ba6f 100644
--- a/documentation/tutorial/06-bindings/14-component-this/text.md
+++ b/documentation/tutorial/06-bindings/14-component-this/text.md
@@ -9,7 +9,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 	let field;
 </script>
 
-<InputField bind:this={field} />
+<InputField bind:this field} />
 ```
 
 Now we can programmatically interact with this component using `field`.
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
index 235b53889f29..beb2db6ced4a 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
index 7afb5eb42776..04cedbcc13b6 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this={div}>
+	<div class="scrollable" bind:this div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
index 84331e1e7b35..bab7ff152419 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
+++ b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <h1>{$greeting}</h1>
-<input bind:value={$name} />
+<input bind:value $name} />
 
 <button on:click={() => ($name += '!')}> Add exclamation mark! </button>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/text.md b/documentation/tutorial/08-stores/06-store-bindings/text.md
index 054140e8d75b..64a8a42d5b63 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/text.md
+++ b/documentation/tutorial/08-stores/06-store-bindings/text.md
@@ -7,7 +7,7 @@ If a store is writable — i.e. it has a `set` method — you can bind to its va
 In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
 
 ```svelte
-<input bind:value={$name} />
+<input bind:value $name} />
 ```
 
 Changing the input value will now update `name` and all its dependents.
diff --git a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
index 39afc6c1a770..f3e4c41e2181 100644
--- a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -8,12 +8,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
index 59346dcb3b3b..7bf85c1c9617 100644
--- a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
index 5ba3e7fb7b24..70774e8c4787 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
index 29e9254d1409..998ed5665d57 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
index 29e9254d1409..998ed5665d57 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
index 318739f1d0fc..e426b53cf60d 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
index 318739f1d0fc..e426b53cf60d 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
index bb44e5ca9f43..8fe8cab57f65 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
index 621a58134294..a677d1d91f54 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index df055bd8f935..fa2e4c009ee3 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
index d5d029f223a4..fe7defe38381 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 21536e868302..900c303aa29a 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
index 59458e9c2fa9..1481a3fdd297 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
index 31ef18c930cb..5850ea003ee3 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked={visible} />
+	<input type="checkbox" bind:checked visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
index 9700f945b4ff..d5a8ea04bbb5 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={showItems} />
+	<input type="checkbox" bind:checked showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value={i} max="10" />
+	<input type="range" bind:value i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
index 93de6a0cdce6..4751a9dc5e31 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={showItems} />
+	<input type="checkbox" bind:checked showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value={i} max="10" />
+	<input type="range" bind:value i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
index 4428fa1f4f4e..858d3c6b3dfb 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
index 23cc9f2f9ece..2f70cf0606a1 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value={duration} max={2000} step={100} />
+	<input type="range" bind:value duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
index ad39916ce57b..2ecd346acd7a 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
index ad39916ce57b..2ecd346acd7a 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked={big} />
+	<input type="checkbox" bind:checked big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
index 7a806717ef52..97ee50669039 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
index 758db1c5677e..cae8df3b654c 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
index 758db1c5677e..cae8df3b654c 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
index d75db22ad4b4..973026161307 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
 
 <p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
index 495aae6a0ddb..e9ce39db1293 100644
--- a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -30,7 +30,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
index ddc3ebe7cc49..a7355ab18feb 100644
--- a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
@@ -32,7 +32,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this={container}>
+<div bind:this container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
index 79aad72bdf26..098c7a9d68a1 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
index 69e51253fcbc..e361a7020649 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
index 0718efd94943..870bc25f93bd 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
index 068f7b3c4f56..d7a65469b442 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value={selected}>
+<select bind:value selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
index 7e85600abeb9..ee173a137938 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
index 6885c2974eb5..a002a088e6da 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
@@ -5,7 +5,7 @@ title: <svelte:window> bindings
 We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
 
 ```svelte
-<svelte:window bind:scrollY={y} />
+<svelte:window bind:scrollY y} />
 ```
 
 The list of properties you can bind to is as follows:
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
index 14083c0ba450..9eb30da7f1be 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
+<button bind:this button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
index 6104f1649337..ca510157bec0 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this={button} type="button" on:click>
+<button bind:this button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
index 0533ec087685..6abbb1e6a71d 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -16,7 +16,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 6e2e60502635..9373dcd41806 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -21,7 +21,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 2b229e50dddc..386a36dfafea 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -29,7 +29,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index b76601e025b5..bbfa0b82b72b 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
index 78a0b817418a..9bee2c224de4 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {(console.log(user), '')}
 
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
index 30bffc896cb5..d3f7b26a2e43 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value={user.firstname} />
-<input bind:value={user.lastname} />
+<input bind:value user.firstname} />
+<input bind:value user.lastname} />
 
 {@debug user}
 
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index cddca87d9c45..d18cbfba86a0 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -172,6 +172,10 @@
 
 > Expected whitespace
 
+## invalid_bind_directive
+
+> Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+
 ## js_parse_error
 
 > %message%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 00e2246ccf29..c08ff1860b5a 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -984,6 +984,15 @@ export function expected_whitespace(node) {
 	e(node, "expected_whitespace", "Expected whitespace");
 }
 
+/**
+ * Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function invalid_bind_directive(node) {
+	e(node, "invalid_bind_directive", "Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces");
+}
+
 /**
  * %message%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 9082b76c4972..4b7dd49b0cec 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -13,6 +13,7 @@ import { create_attribute, create_expression_metadata } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 import { list } from '../../../utils/string.js';
+import { parse_expression_at } from '../acorn.js';
 
 const regex_invalid_unquoted_attribute_value = /^(\/>|[\s"'=<>`])/;
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
@@ -506,11 +507,53 @@ function read_attribute(parser) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
+	/** @type {Expression | [Expression, Expression] | null} */
+	let expression = null;
+
 	/** @type {true | AST.ExpressionTag | Array<AST.Text | AST.ExpressionTag>} */
 	let value = true;
 	if (parser.eat('=')) {
 		parser.allow_whitespace();
+		let value_start = 0;
+
+		// Validate the bind: value doesn't start with a paren
+		if (name.startsWith('bind:')) {
+			const start = parser.index;
+			parser.eat('{');
+			parser.allow_whitespace();
+			value_start = parser.index;
+			parser.index = start;
+		}
+
 		value = read_attribute_value(parser);
+
+		// bind can use a getter/setter pair {a, b}, so the attribute parsing above will capture
+		// a SequenceExpression. To ensure this is handled correctly, we use wrap the expression
+		// again in square brackets and parse it again. This should ensure it's an ArrayExpression
+		// with two elements and if not we can throw an appropiate error
+		if (
+			name.startsWith('bind:') &&
+			!Array.isArray(value) &&
+			value.expression.type === 'SequenceExpression'
+		) {
+			try {
+				const bind_getter_setter = parse_expression_at(
+					`[${parser.template.slice(value_start, value.expression.end)}]`,
+					parser.ts,
+					0
+				);
+
+				if (
+					bind_getter_setter.type !== 'ArrayExpression' ||
+					bind_getter_setter.elements.length !== 2
+				) {
+					e.invalid_bind_directive(value_start);
+				}
+				expression = /** @type {[Expression, Expression]} */ (bind_getter_setter.elements);
+			} catch {
+				e.invalid_bind_directive(value_start);
+			}
+		}
 		end = parser.index;
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {
 		e.expected_token(parser.index, '=');
@@ -540,15 +583,12 @@ function read_attribute(parser) {
 
 		const first_value = value === true ? undefined : Array.isArray(value) ? value[0] : value;
 
-		/** @type {Expression | null} */
-		let expression = null;
-
 		if (first_value) {
 			const attribute_contains_text =
 				/** @type {any[]} */ (value).length > 1 || first_value.type === 'Text';
 			if (attribute_contains_text) {
 				e.directive_invalid_value(/** @type {number} */ (first_value.start));
-			} else {
+			} else if (expression === null) {
 				// TODO throw a parser error in a future version here if this `[ExpressionTag]` instead of `ExpressionTag`,
 				// which means stringified value, which isn't allowed for some directives?
 				expression = first_value.expression;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index e9796737f029..94c1146ac19f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -17,17 +17,14 @@ import { is_content_editable_binding, is_svg } from '../../../../utils.js';
  * @param {Context} context
  */
 export function BindDirective(node, context) {
+	if (Array.isArray(node.expression)) {
+		return;
+	}
+
 	validate_no_const_assignment(node, node.expression, context.state.scope, true);
 
 	const assignee = node.expression;
 
-	if (assignee.type === 'SequenceExpression') {
-		if (assignee.expressions.length !== 2) {
-			e.bind_invalid_expression(node);
-		}
-		return;
-	}
-
 	const left = object(assignee);
 
 	if (left === null) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 43e0c0029a84..63e8eb99b749 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -18,31 +18,34 @@ export function BindDirective(node, context) {
 
 	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
 
-	if (
-		dev &&
-		context.state.analysis.runes &&
-		expression.type === 'MemberExpression' &&
-		(node.name !== 'this' ||
-			context.path.some(
-				({ type }) =>
-					type === 'IfBlock' || type === 'EachBlock' || type === 'AwaitBlock' || type === 'KeyBlock'
-			)) &&
-		!is_ignored(node, 'binding_property_non_reactive')
-	) {
-		validate_binding(
-			context.state,
-			node,
-			/**@type {MemberExpression} */ (context.visit(expression))
-		);
-	}
-
 	let get, set;
 
-	if (expression.type === 'SequenceExpression') {
-		const [get_expression, set_expression] = expression.expressions;
+	if (Array.isArray(expression)) {
+		const [get_expression, set_expression] = expression;
 		get = /** @type {Expression} */ (context.visit(get_expression));
 		set = /** @type {Expression} */ (context.visit(set_expression));
 	} else {
+		if (
+			dev &&
+			context.state.analysis.runes &&
+			expression.type === 'MemberExpression' &&
+			(node.name !== 'this' ||
+				context.path.some(
+					({ type }) =>
+						type === 'IfBlock' ||
+						type === 'EachBlock' ||
+						type === 'AwaitBlock' ||
+						type === 'KeyBlock'
+				)) &&
+			!is_ignored(node, 'binding_property_non_reactive')
+		) {
+			validate_binding(
+				context.state,
+				node,
+				/**@type {MemberExpression} */ (context.visit(expression))
+			);
+		}
+
 		get = b.thunk(/** @type {Expression} */ (context.visit(expression)));
 
 		/** @type {Expression | undefined} */
@@ -220,10 +223,20 @@ export function BindDirective(node, context) {
 					);
 
 					if (value !== undefined) {
+						let group_expression;
+						if (Array.isArray(expression)) {
+							const get_id = b.id(context.state.scope.generate('bind_get'));
+
+							context.state.init.push(b.var(get_id, get));
+							group_expression = b.call(get_id);
+						} else {
+							group_expression = /** @type {Expression} */ (context.visit(expression));
+						}
+
 						group_getter = b.thunk(
 							b.block([
 								b.stmt(build_attribute_value(value, context).value),
-								b.return(/** @type {Expression} */ (context.visit(expression)))
+								b.return(group_expression)
 							])
 						);
 					}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 5e88ca1b98b6..8e7891dadee0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -451,7 +451,7 @@ function setup_select_synchronization(value_binding, context) {
 
 	let bound = value_binding.expression;
 
-	if (bound.type === 'SequenceExpression') {
+	if (Array.isArray(bound)) {
 		return;
 	}
 
@@ -489,10 +489,7 @@ function setup_select_synchronization(value_binding, context) {
 			b.call(
 				'$.template_effect',
 				b.thunk(
-					b.block([
-						b.stmt(/** @type {Expression} */ (context.visit(value_binding.expression))),
-						b.stmt(invalidator)
-					])
+					b.block([b.stmt(/** @type {Expression} */ (context.visit(bound))), b.stmt(invalidator)])
 				)
 			)
 		)
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 34875a6ba435..9babedc46da0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -161,8 +161,8 @@ export function build_component(node, component_name, context, anchor = context.
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			if (attribute.expression.type === 'SequenceExpression') {
-				const [get_expression, set_expression] = attribute.expression.expressions;
+			if (Array.isArray(attribute.expression)) {
+				const [get_expression, set_expression] = attribute.expression;
 				const get = /** @type {Expression} */ (context.visit(get_expression));
 				const set = /** @type {Expression} */ (context.visit(set_expression));
 				const get_id = b.id(context.state.scope.generate('bind_get'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index d66475e9aab7..53ba2a45f608 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -157,13 +157,13 @@ export function build_update_assignment(state, id, init, value, update) {
 
 /**
  * Serializes `bind:this` for components and elements.
- * @param {Identifier | MemberExpression | SequenceExpression} expression
+ * @param {Identifier | MemberExpression | [Expression, Expression]} expression
  * @param {Expression} value
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
  */
 export function build_bind_this(expression, value, { state, visit }) {
-	if (expression.type === 'SequenceExpression') {
-		const [get_expression, set_expression] = expression.expressions;
+	if (Array.isArray(expression)) {
+		const [get_expression, set_expression] = expression;
 		const get = /** @type {Expression} */ (visit(get_expression));
 		const set = /** @type {Expression} */ (visit(set_expression));
 
@@ -246,7 +246,7 @@ export function build_bind_this(expression, value, { state, visit }) {
  * @param {MemberExpression} expression
  */
 export function validate_binding(state, binding, expression) {
-	if (binding.expression.type === 'SequenceExpression') {
+	if (Array.isArray(binding.expression)) {
 		return;
 	}
 	// If we are referencing a $store.foo then we don't need to add validation
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 6f73c532848d..260e2f4e5f7c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -81,8 +81,8 @@ export function build_inline_component(node, expression, context) {
 			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
-			if (attribute.expression.type === 'SequenceExpression') {
-				const [get_expression, set_expression] = attribute.expression.expressions;
+			if (Array.isArray(attribute.expression)) {
+				const [get_expression, set_expression] = attribute.expression;
 				const get = /** @type {Expression} */ (context.visit(get_expression));
 				const set = /** @type {Expression} */ (context.visit(set_expression));
 				const get_id = b.id(context.state.scope.generate('bind_get'));
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 5999f0b0b666..8cfea95cc63e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -110,15 +110,14 @@ export function build_element_attributes(node, context) {
 			if (binding?.omit_in_ssr) continue;
 
 			if (is_content_editable_binding(attribute.name)) {
-				content =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
-						: /** @type {Expression} */ (context.visit(attribute.expression));
+				content = Array.isArray(attribute.expression)
+					? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
+					: /** @type {Expression} */ (context.visit(attribute.expression));
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
 				content = b.call(
 					'$.escape',
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
+					Array.isArray(attribute.expression)
+						? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
 						: /** @type {Expression} */ (context.visit(attribute.expression))
 				);
 			} else if (attribute.name === 'group') {
@@ -134,10 +133,9 @@ export function build_element_attributes(node, context) {
 						is_text_attribute(attr) &&
 						attr.value[0].data === 'checkbox'
 				);
-				const attribute_expression =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: attribute.expression;
+				const attribute_expression = Array.isArray(attribute.expression)
+					? b.call(attribute.expression[0])
+					: attribute.expression;
 
 				attributes.push(
 					create_attribute('checked', -1, -1, [
@@ -163,10 +161,9 @@ export function build_element_attributes(node, context) {
 					])
 				);
 			} else {
-				const attribute_expression =
-					attribute.expression.type === 'SequenceExpression'
-						? b.call(attribute.expression.expressions[0])
-						: attribute.expression;
+				const attribute_expression = Array.isArray(attribute.expression)
+					? b.call(attribute.expression[0])
+					: attribute.expression;
 
 				attributes.push(
 					create_attribute(attribute.name, -1, -1, [
diff --git a/packages/svelte/src/compiler/types/legacy-nodes.d.ts b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
index 0013f5c17a60..47c4dfdce6f2 100644
--- a/packages/svelte/src/compiler/types/legacy-nodes.d.ts
+++ b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
@@ -50,7 +50,7 @@ export interface LegacyBinding extends BaseNode {
 	/** The 'x' in `bind:x` */
 	name: string;
 	/** The y in `bind:x={y}` */
-	expression: Identifier | MemberExpression | SequenceExpression;
+	expression: Identifier | MemberExpression | [Expression, Expression];
 }
 
 export interface LegacyBody extends BaseElement {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index cc153b263a28..073ac4d84c68 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -186,7 +186,7 @@ export namespace AST {
 		/** The 'x' in `bind:x` */
 		name: string;
 		/** The y in `bind:x={y}` */
-		expression: Identifier | MemberExpression | SequenceExpression;
+		expression: Identifier | MemberExpression | [Expression, Expression];
 		/** @internal */
 		metadata: {
 			binding_group_name: Identifier;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 3079071fef40..70b4ac57c2fe 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -606,7 +606,7 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
+	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
 	import type { Location } from 'locate-character';
 	/**
@@ -1047,7 +1047,7 @@ declare module 'svelte/compiler' {
 			/** The 'x' in `bind:x` */
 			name: string;
 			/** The y in `bind:x={y}` */
-			expression: Identifier | MemberExpression | SequenceExpression;
+			expression: Identifier | MemberExpression | [Expression, Expression];
 		}
 
 		/** A `class:` directive */
diff --git a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
index 7b95008712b0..d9077c520a4f 100644
--- a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
@@ -248,7 +248,8 @@
 						<input
 							autofocus
 							spellcheck={false}
-							bind:value={input_value}
+							bind:value
+							input_value}
 							on:focus={select_input}
 							on:blur={close_edit}
 							on:keydown={(e) => {
diff --git a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
index d047d106371d..bbd6ad6f530c 100644
--- a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
@@ -21,7 +21,8 @@
 <div class="editor-wrapper">
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
-			bind:this={$module_editor}
+			bind:this
+			$module_editor}
 			diagnostics={() => {
 				if (error) {
 					return [
diff --git a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
index f99f21494c80..9fb559a75470 100644
--- a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
@@ -77,7 +77,8 @@
 </script>
 
 <li
-	bind:this={list_item_el}
+	bind:this
+	list_item_el}
 	class:marked={!is_root && is_leaf}
 	on:mouseover={handle_mark_text}
 	on:focus={handle_mark_text}
diff --git a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
index 426e5044a7d2..74b72e84c258 100644
--- a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
@@ -11,32 +11,32 @@
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input id="client" type="radio" bind:group={$compile_options.generate} value="client" />
+		<input id="client" type="radio" bind:group $compile_options.generate} value="client" />
 		<label for="client"><span class="string">"client"</span></label>
 
-		<input id="server" type="radio" bind:group={$compile_options.generate} value="server" />
+		<input id="server" type="radio" bind:group $compile_options.generate} value="server" />
 		<label for="server"><span class="string">"server"</span>,</label>
 	</div>
 
 	<div class="option">
 		<span class="key">css:</span>
 
-		<input id="injected" type="radio" bind:group={$compile_options.css} value="injected" />
+		<input id="injected" type="radio" bind:group $compile_options.css} value="injected" />
 		<label for="injected"><span class="string">"injected"</span></label>
 
-		<input id="external" type="radio" bind:group={$compile_options.css} value="external" />
+		<input id="external" type="radio" bind:group $compile_options.css} value="external" />
 		<label for="external"><span class="string">"external"</span>,</label>
 	</div>
 
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox bind:checked={$compile_options.dev} />
+		<Checkbox bind:checked $compile_options.dev} />
 		<span class="boolean">{$compile_options.dev}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">hmr:</span>
-		<Checkbox bind:checked={$compile_options.hmr} />
+		<Checkbox bind:checked $compile_options.hmr} />
 		<span class="boolean">{$compile_options.hmr}</span>,
 	</label>
 	});
diff --git a/sites/svelte-5-preview/src/lib/Output/Output.svelte b/sites/svelte-5-preview/src/lib/Output/Output.svelte
index ac6da48d3d17..f86e5c3af1e9 100644
--- a/sites/svelte-5-preview/src/lib/Output/Output.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Output.svelte
@@ -77,7 +77,8 @@
 <!-- component viewer -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'result'}>
 	<Viewer
-		bind:error={runtimeError}
+		bind:error
+		runtimeError}
 		{status}
 		{relaxed}
 		{injectedJS}
@@ -89,11 +90,11 @@
 <!-- js output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'js'}>
 	{#if embedded}
-		<CodeMirror bind:this={js_editor} readonly />
+		<CodeMirror bind:this js_editor} readonly />
 	{:else}
 		<PaneWithPanel pos="50%" panel="Compiler options">
 			<div slot="main">
-				<CodeMirror bind:this={js_editor} readonly />
+				<CodeMirror bind:this js_editor} readonly />
 			</div>
 
 			<div slot="panel-body">
@@ -105,7 +106,7 @@
 
 <!-- css output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'css'}>
-	<CodeMirror bind:this={css_editor} readonly />
+	<CodeMirror bind:this css_editor} readonly />
 </div>
 
 <!-- ast output -->
diff --git a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
index db506ada3bfd..887d09a29de3 100644
--- a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
@@ -254,7 +254,8 @@
 			<iframe
 				title="Result"
 				class:inited
-				bind:this={iframe}
+				bind:this
+				iframe}
 				sandbox={[
 					'allow-popups-to-escape-sandbox',
 					'allow-scripts',
diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index f43f5f899b84..8ab25db19301 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -338,7 +338,7 @@
 
 <svelte:window on:beforeunload={before_unload} />
 
-<div class="container" class:toggleable={$toggleable} bind:clientWidth={width}>
+<div class="container" class:toggleable={$toggleable} bind:clientWidth width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			--color="var(--sk-text-4)"
@@ -374,7 +374,7 @@
 	</div>
 
 	{#if $toggleable}
-		<InputOutputToggle bind:checked={show_output} />
+		<InputOutputToggle bind:checked show_output} />
 	{/if}
 </div>
 
diff --git a/sites/svelte-5-preview/src/routes/+page.svelte b/sites/svelte-5-preview/src/routes/+page.svelte
index b54c36ee5b58..26758a52c198 100644
--- a/sites/svelte-5-preview/src/routes/+page.svelte
+++ b/sites/svelte-5-preview/src/routes/+page.svelte
@@ -88,7 +88,8 @@
 />
 
 <Repl
-	bind:this={repl}
+	bind:this
+	repl}
 	autocomplete={true}
 	on:add={change_from_editor}
 	on:change={change_from_editor}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 84062a1cfaee..074683431f5b 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -193,7 +193,7 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
 	});
 </script>
 
-<canvas bind:this={canvas} width="100" height="100" />
+<canvas bind:this canvas} width="100" height="100" />
 ```
 
 The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
@@ -346,12 +346,12 @@ You might be tempted to do something convoluted with effects to link one value t
 </script>
 
 <label>
-	<input type="range" bind:value={spent} max={total} />
+	<input type="range" bind:value spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={left} max={total} />
+	<input type="range" bind:value left} max={total} />
 	{left}/{total} left
 </label>
 ```
@@ -414,12 +414,12 @@ If you need to use bindings, for whatever reason (for example when you want some
 </script>
 
 <label>
-	<input type="range" bind:value={spent} max={total} />
+	<input type="range" bind:value spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value={left.value} max={total} />
+	<input type="range" bind:value left.value} max={total} />
 	{left.value}/{total} left
 </label>
 ```
@@ -467,7 +467,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 	});
 </script>
 
-<div bind:this={div}>
+<div bind:this div}>
 	{#each messages as message}
 		<p>{message}</p>
 	{/each}
@@ -627,7 +627,7 @@ or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cau
 </script>
 
 <button onclick={() => count++}>Increment</button>
-<input bind:value={message} />
+<input bind:value message} />
 ```
 
 `$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`, all following arguments are the values passed to `$inspect`. [Demo:](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
index 7cbec56e17ac..dfc47de58afa 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
@@ -25,7 +25,7 @@ Forces any pending effects (including DOM updates) to be applied immediately, ra
 	}
 </script>
 
-<span bind:this={element}>{count}</span>
+<span bind:this element}>{count}</span>
 <button {onclick}>update</button>
 ```
 
@@ -140,14 +140,14 @@ Svelte provides reactive `SvelteMap`, `SvelteSet`, `SvelteDate` and `SvelteURL`
 </script>
 
 <!-- changes to these... -->
-<input bind:value={url.protocol} />
-<input bind:value={url.hostname} />
-<input bind:value={url.pathname} />
+<input bind:value url.protocol} />
+<input bind:value url.hostname} />
+<input bind:value url.pathname} />
 
 <hr />
 
 <!-- will update `href` and vice versa -->
-<input bind:value={url.href} />
+<input bind:value url.href} />
 ```
 
 ## `svelte/events`
diff --git a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
index 6c804b03ac57..7a2530386c05 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
@@ -32,8 +32,8 @@ In Svelte 4, reactivity centres on the _component_ and the top-level state decla
 
 {#each todos as todo}
 	<div>
-		<input bind:value={todo.text} />
-		<input type="checkbox" bind:checked={todo.done} />
+		<input bind:value todo.text} />
+		<input type="checkbox" bind:checked todo.done} />
 	</div>
 {/each}
 
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index f45b2e041692..4b28870b5429 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -228,7 +228,7 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
 	let Thing = $state();
 </script>
 
-<select bind:value={Thing}>
+<select bind:value Thing}>
 	<option value={A}>A</option>
 	<option value={B}>B</option>
 </select>

From a42ba71f461eb5d8c59e6b938c1487052955cca2 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 18:58:42 +0000
Subject: [PATCH 03/23] oops

---
 .../blog/2023-02-21-streaming-snapshots-sveltekit.md      | 2 +-
 .../docs/98-reference/.generated/compile-errors.md        | 6 ------
 .../examples/05-bindings/00-text-inputs/App.svelte        | 2 +-
 .../examples/05-bindings/01-numeric-inputs/App.svelte     | 8 ++++----
 .../examples/05-bindings/02-checkbox-inputs/App.svelte    | 2 +-
 .../examples/05-bindings/03-group-inputs/App.svelte       | 8 ++++----
 .../examples/05-bindings/04-textarea-inputs/App.svelte    | 2 +-
 .../examples/05-bindings/06-select-bindings/App.svelte    | 4 ++--
 .../05-bindings/07-multiple-select-bindings/App.svelte    | 8 ++++----
 .../05-bindings/08-each-block-bindings/App.svelte         | 4 ++--
 .../examples/05-bindings/09-media-elements/App.svelte     | 3 +--
 .../examples/05-bindings/10-dimensions/App.svelte         | 6 +++---
 .../examples/05-bindings/11-bind-this/App.svelte          | 2 +-
 .../examples/05-bindings/12-component-bindings/App.svelte | 2 +-
 documentation/examples/06-lifecycle/02-update/App.svelte  | 2 +-
 documentation/examples/08-motion/01-spring/App.svelte     | 4 ++--
 .../examples/09-transitions/00-transition/App.svelte      | 2 +-
 .../01-adding-parameters-to-transitions/App.svelte        | 2 +-
 .../examples/09-transitions/02-in-and-out/App.svelte      | 2 +-
 .../09-transitions/03-custom-css-transitions/App.svelte   | 2 +-
 .../09-transitions/04-custom-js-transitions/App.svelte    | 2 +-
 .../09-transitions/05-transition-events/App.svelte        | 2 +-
 .../examples/10-animations/00-animate/App.svelte          | 4 ++--
 documentation/examples/11-easing/00-easing/App.svelte     | 2 +-
 .../examples/11-easing/00-easing/Controls.svelte          | 6 +++---
 documentation/examples/12-svg/02-bar-chart/App.svelte     | 2 +-
 documentation/examples/12-svg/03-area-chart/App.svelte    | 2 +-
 .../examples/12-svg/04-scatterplot/Scatterplot.svelte     | 2 +-
 .../examples/12-svg/05-svg-transitions/App.svelte         | 2 +-
 .../13-actions/01-adding-parameters-to-actions/App.svelte | 2 +-
 .../examples/14-classes/01-class-shorthand/App.svelte     | 2 +-
 .../examples/15-composition/05-modal/Modal.svelte         | 6 +++++-
 .../examples/16-context/00-context-api/Map.svelte         | 2 +-
 .../17-special-elements/01-svelte-component/App.svelte    | 2 +-
 .../17-special-elements/02-svelte-element/App.svelte      | 2 +-
 .../04-svelte-window-bindings/App.svelte                  | 2 +-
 .../01-module-exports/AudioPlayer.svelte                  | 2 +-
 documentation/examples/19-debugging/00-debug/App.svelte   | 4 ++--
 .../examples/20-7guis/01-7guis-counter/App.svelte         | 2 +-
 .../examples/20-7guis/03-7guis-flight-booker/App.svelte   | 6 +++---
 documentation/examples/20-7guis/04-7guis-timer/App.svelte | 2 +-
 documentation/examples/20-7guis/05-7guis-crud/App.svelte  | 8 ++++----
 .../02-immutable-data/ImmutableTodo.svelte                | 2 +-
 .../21-miscellaneous/02-immutable-data/MutableTodo.svelte | 2 +-
 .../99-embeds/20190420-blog-write-less-code/App.svelte    | 4 ++--
 .../tutorial/06-bindings/01-text-inputs/app-b/App.svelte  | 2 +-
 documentation/tutorial/06-bindings/01-text-inputs/text.md | 2 +-
 .../06-bindings/02-numeric-inputs/app-b/App.svelte        | 8 ++++----
 .../tutorial/06-bindings/02-numeric-inputs/text.md        | 4 ++--
 .../06-bindings/03-checkbox-inputs/app-b/App.svelte       | 2 +-
 .../tutorial/06-bindings/03-checkbox-inputs/text.md       | 2 +-
 .../tutorial/06-bindings/04-group-inputs/app-b/App.svelte | 8 ++++----
 .../tutorial/06-bindings/04-group-inputs/text.md          | 4 ++--
 .../06-bindings/06-select-bindings/app-a/App.svelte       | 2 +-
 .../06-bindings/06-select-bindings/app-b/App.svelte       | 4 ++--
 .../07-multiple-select-bindings/app-a/App.svelte          | 8 ++++----
 .../07-multiple-select-bindings/app-b/App.svelte          | 8 ++++----
 .../06-bindings/07-multiple-select-bindings/text.md       | 2 +-
 .../08-contenteditable-bindings/app-b/App.svelte          | 2 +-
 .../06-bindings/08-contenteditable-bindings/text.md       | 2 +-
 .../06-bindings/09-each-block-bindings/app-b/App.svelte   | 4 ++--
 .../tutorial/06-bindings/09-each-block-bindings/text.md   | 4 ++--
 .../06-bindings/10-media-elements/app-b/App.svelte        | 3 +--
 .../tutorial/06-bindings/10-media-elements/text.md        | 3 +--
 .../tutorial/06-bindings/11-dimensions/app-a/App.svelte   | 4 ++--
 .../tutorial/06-bindings/11-dimensions/app-b/App.svelte   | 6 +++---
 documentation/tutorial/06-bindings/11-dimensions/text.md  | 2 +-
 .../tutorial/06-bindings/12-bind-this/app-b/App.svelte    | 2 +-
 documentation/tutorial/06-bindings/12-bind-this/text.md   | 2 +-
 .../06-bindings/13-component-bindings/app-b/App.svelte    | 2 +-
 .../tutorial/06-bindings/13-component-bindings/text.md    | 2 +-
 .../06-bindings/14-component-this/app-a/InputField.svelte | 2 +-
 .../06-bindings/14-component-this/app-b/App.svelte        | 2 +-
 .../06-bindings/14-component-this/app-b/InputField.svelte | 2 +-
 .../tutorial/06-bindings/14-component-this/text.md        | 2 +-
 .../tutorial/07-lifecycle/03-update/app-a/App.svelte      | 2 +-
 .../tutorial/07-lifecycle/03-update/app-b/App.svelte      | 2 +-
 .../tutorial/08-stores/06-store-bindings/app-b/App.svelte | 2 +-
 .../tutorial/08-stores/06-store-bindings/text.md          | 2 +-
 .../tutorial/09-motion/02-spring/app-a/App.svelte         | 4 ++--
 .../tutorial/09-motion/02-spring/app-b/App.svelte         | 4 ++--
 .../10-transitions/01-transition/app-a/App.svelte         | 2 +-
 .../10-transitions/01-transition/app-b/App.svelte         | 2 +-
 .../02-adding-parameters-to-transitions/app-a/App.svelte  | 2 +-
 .../02-adding-parameters-to-transitions/app-b/App.svelte  | 2 +-
 .../10-transitions/03-in-and-out/app-a/App.svelte         | 2 +-
 .../10-transitions/03-in-and-out/app-b/App.svelte         | 2 +-
 .../04-custom-css-transitions/app-a/App.svelte            | 2 +-
 .../04-custom-css-transitions/app-b/App.svelte            | 2 +-
 .../05-custom-js-transitions/app-a/App.svelte             | 2 +-
 .../05-custom-js-transitions/app-b/App.svelte             | 2 +-
 .../10-transitions/06-transition-events/app-a/App.svelte  | 2 +-
 .../10-transitions/06-transition-events/app-b/App.svelte  | 2 +-
 .../10-transitions/07-global-transitions/app-a/App.svelte | 4 ++--
 .../10-transitions/07-global-transitions/app-b/App.svelte | 4 ++--
 .../02-adding-parameters-to-actions/app-a/App.svelte      | 2 +-
 .../02-adding-parameters-to-actions/app-b/App.svelte      | 2 +-
 .../02-class-shorthand/app-a/App.svelte                   | 2 +-
 .../02-class-shorthand/app-b/App.svelte                   | 2 +-
 .../13-advanced-styling/03-inline-styles/app-a/App.svelte | 2 +-
 .../13-advanced-styling/03-inline-styles/app-b/App.svelte | 2 +-
 .../04-style-directive/app-a/App.svelte                   | 2 +-
 .../04-style-directive/app-b/App.svelte                   | 2 +-
 .../tutorial/15-context/01-context-api/app-a/Map.svelte   | 2 +-
 .../tutorial/15-context/01-context-api/app-b/Map.svelte   | 2 +-
 .../02-svelte-component/app-a/App.svelte                  | 2 +-
 .../02-svelte-component/app-b/App.svelte                  | 2 +-
 .../03-svelte-element/app-a/App.svelte                    | 2 +-
 .../03-svelte-element/app-b/App.svelte                    | 2 +-
 .../05-svelte-window-bindings/app-b/App.svelte            | 2 +-
 .../16-special-elements/05-svelte-window-bindings/text.md | 2 +-
 .../09-svelte-options/app-a/Todo.svelte                   | 2 +-
 .../09-svelte-options/app-b/Todo.svelte                   | 2 +-
 .../01-sharing-code/app-a/AudioPlayer.svelte              | 2 +-
 .../01-sharing-code/app-b/AudioPlayer.svelte              | 2 +-
 .../02-module-exports/app-a/AudioPlayer.svelte            | 2 +-
 .../02-module-exports/app-b/AudioPlayer.svelte            | 2 +-
 .../tutorial/18-special-tags/01-debug/app-a/App.svelte    | 4 ++--
 .../tutorial/18-special-tags/01-debug/app-b/App.svelte    | 4 ++--
 119 files changed, 172 insertions(+), 177 deletions(-)

diff --git a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
index c70f946e48f7..a030e8fc410d 100644
--- a/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
+++ b/documentation/blog/2023-02-21-streaming-snapshots-sveltekit.md
@@ -147,7 +147,7 @@ For example, here is how you would capture and restore the value of a textarea:
 
 <form method="POST">
 	<label for="comment">Comment</label>
-	<textarea id="comment" bind:value comment} />
+	<textarea id="comment" bind:value={comment} />
 	<button>Post comment</button>
 </form>
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 1e8c7ed3a8a1..b32bc6b89c02 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -424,12 +424,6 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
-### invalid_bind_directive
-
-```
-Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
-```
-
 ### js_parse_error
 
 ```
diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
index 414c5af82787..9ec139df2127 100644
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ b/documentation/examples/05-bindings/00-text-inputs/App.svelte
@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value name} placeholder="enter your name" />
+<input bind:value={name} placeholder="enter your name" />
 <p>Hello {name || 'stranger'}!</p>
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
index 0f8a0b6a268c..15ef23c46626 100644
--- a/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
+++ b/documentation/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value a} min="0" max="10" />
-	<input type="range" bind:value a} min="0" max="10" />
+	<input type="number" bind:value={a} min="0" max="10" />
+	<input type="range" bind:value={a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value b} min="0" max="10" />
-	<input type="range" bind:value b} min="0" max="10" />
+	<input type="number" bind:value={b} min="0" max="10" />
+	<input type="range" bind:value={b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
index c4b3467d335f..b3373593178f 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked yes} />
+	<input type="checkbox" bind:checked={yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
index 30121e661ab7..0ab215d51943 100644
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/examples/05-bindings/03-group-inputs/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
index 160be172ff46..ecb809095d3a 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -3,7 +3,7 @@
 	let text = `Some words are *italic*, some are **bold**`;
 </script>
 
-<textarea bind:value text} />
+<textarea bind:value={text} />
 
 {@html marked(text)}
 
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
index 517ff9b0a5ab..7785258fe2f1 100644
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/06-select-bindings/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value selected} on:change={() => (answer = '')}>
+	<select bind:value={selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
index 4583f9cd0194..2fd19c28ad58 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
index 1193ac80e7a8..a8118093d337 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} disabled={todo.done} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
 	</div>
 {/each}
 
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
index 60a71891b6a1..836804f8bc7f 100644
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ b/documentation/examples/05-bindings/09-media-elements/App.svelte
@@ -60,8 +60,7 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime
-		time}
+		bind:currentTime={time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
index 39b3d75c6143..4d4a8b2cf2c5 100644
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ b/documentation/examples/05-bindings/10-dimensions/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/examples/05-bindings/11-bind-this/App.svelte b/documentation/examples/05-bindings/11-bind-this/App.svelte
index 20ff5967bb86..fe0fbe1b018c 100644
--- a/documentation/examples/05-bindings/11-bind-this/App.svelte
+++ b/documentation/examples/05-bindings/11-bind-this/App.svelte
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index f815841f6202..254ced9464d8 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -11,7 +11,7 @@
 
 <h1 class:pin>{view}</h1>
 
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />
 
 <style>
 	h1 {
diff --git a/documentation/examples/06-lifecycle/02-update/App.svelte b/documentation/examples/06-lifecycle/02-update/App.svelte
index b951a6aacca4..afc1b29ea8d9 100644
--- a/documentation/examples/06-lifecycle/02-update/App.svelte
+++ b/documentation/examples/06-lifecycle/02-update/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index 9a20d4719dfa..e5b59901aa12 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
index 998ed5665d57..29e9254d1409 100644
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ b/documentation/examples/09-transitions/00-transition/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index e426b53cf60d..318739f1d0fc 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
index 8fe8cab57f65..bb44e5ca9f43 100644
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ b/documentation/examples/09-transitions/02-in-and-out/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
index 1704eb23d05a..c85fe7ef8996 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
index 19c50850d2c6..9ccd18a0f7b6 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
index 5850ea003ee3..31ef18c930cb 100644
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ b/documentation/examples/09-transitions/05-transition-events/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
index 95c8d833e875..7209a25f1567 100644
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ b/documentation/examples/10-animations/00-animate/App.svelte
@@ -57,7 +57,7 @@
 		<h2>todo</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked todo.done} />
+				<input type="checkbox" bind:checked={todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
@@ -68,7 +68,7 @@
 		<h2>done</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
-				<input type="checkbox" bind:checked todo.done} />
+				<input type="checkbox" bind:checked={todo.done} />
 				{todo.description}
 				<button on:click={() => remove(todo)}>x</button>
 			</label>
diff --git a/documentation/examples/11-easing/00-easing/App.svelte b/documentation/examples/11-easing/00-easing/App.svelte
index 9f0a5d76ca98..c3814bb8bd40 100644
--- a/documentation/examples/11-easing/00-easing/App.svelte
+++ b/documentation/examples/11-easing/00-easing/App.svelte
@@ -37,7 +37,7 @@
 	$: current && runAnimations();
 </script>
 
-<div bind:offsetWidth width} class="easing-vis">
+<div bind:offsetWidth={width} class="easing-vis">
 	<svg viewBox="0 0 1400 1802">
 		<g class="canvas">
 			<Grid x={$time} y={$value} />
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index 559bd2168552..a938ee235ba8 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -18,7 +18,7 @@
 	<div class="easing-types">
 		<h3>Ease</h3>
 		{#if mobile}
-			<select bind:value current_ease}>
+			<select bind:value={current_ease}>
 				{#each [...eases] as [name]}
 					<option value={name} class:selected={name === current_ease}>
 						{name}
@@ -36,7 +36,7 @@
 		{/if}
 		<h3>Type</h3>
 		{#if mobile}
-			<select bind:value current_type}>
+			<select bind:value={current_type}>
 				{#each types as [name, type]}
 					<option value={type}>
 						{name}
@@ -56,7 +56,7 @@
 	<h4>Duration</h4>
 	<div class="duration">
 		<span>
-			<input type="number" bind:value duration} min="0" step="100" />
+			<input type="number" bind:value={duration} min="0" step="100" />
 			<button class="number" on:click={() => (duration -= 100)}>-</button>
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
index 040a4ac55086..283b109ac062 100644
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ b/documentation/examples/12-svg/02-bar-chart/App.svelte
@@ -35,7 +35,7 @@
 
 <h2>US birthrate by year</h2>
 
-<div class="chart" bind:clientWidth width} bind:clientHeight height}>
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis">
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
index 6c5d964be134..fb79b04878eb 100644
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ b/documentation/examples/12-svg/03-area-chart/App.svelte
@@ -29,7 +29,7 @@
 
 <h2>Arctic sea ice minimum</h2>
 
-<div class="chart" bind:clientWidth width} bind:clientHeight height}>
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
 		<!-- y axis -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
index b5fa4c2d0238..9c0a96efc534 100644
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -31,7 +31,7 @@
 
 <svelte:window on:resize={resize} />
 
-<svg bind:this svg}>
+<svg bind:this={svg}>
 	<!-- y axis -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
index 26a9ae5a54be..3a4b1710c8a3 100644
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ b/documentation/examples/12-svg/05-svg-transitions/App.svelte
@@ -27,7 +27,7 @@
 {/if}
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	toggle me
 </label>
 
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index 2f70cf0606a1..23cc9f2f9ece 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
index 2ecd346acd7a..ad39916ce57b 100644
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ b/documentation/examples/14-classes/01-class-shorthand/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index 2a24c7959ab5..3b832030fe4b 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -7,7 +7,11 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog bind:this dialog} on:close={() => (showModal = false)} on:click|self={() => dialog.close()}>
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
diff --git a/documentation/examples/16-context/00-context-api/Map.svelte b/documentation/examples/16-context/00-context-api/Map.svelte
index b701b2fa86d4..a69d18c7fd12 100644
--- a/documentation/examples/16-context/00-context-api/Map.svelte
+++ b/documentation/examples/16-context/00-context-api/Map.svelte
@@ -31,7 +31,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this container}>
+<div bind:this={container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/examples/17-special-elements/01-svelte-component/App.svelte b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
index e361a7020649..69e51253fcbc 100644
--- a/documentation/examples/17-special-elements/01-svelte-component/App.svelte
+++ b/documentation/examples/17-special-elements/01-svelte-component/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
index d7a65469b442..068f7b3c4f56 100644
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index ee173a137938..7e85600abeb9 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY y} />
+<svelte:window bind:scrollY={y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index bbfa0b82b72b..b76601e025b5 100644
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
index d3f7b26a2e43..30bffc896cb5 100644
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/examples/19-debugging/00-debug/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value user.firstname} />
-<input bind:value user.lastname} />
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
 
 {@debug user}
 
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
index 57f24356d802..26c8c5147739 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
@@ -3,5 +3,5 @@
 	let count = 0;
 </script>
 
-<input type="number" bind:value count} />
+<input type="number" bind:value={count} />
 <button on:click={() => (count += 1)}>count</button>
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 9a2b2617d7c7..42caebe50667 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -37,13 +37,13 @@
 	}
 </script>
 
-<select bind:value isReturn}>
+<select bind:value={isReturn}>
 	<option value={false}>one-way flight</option>
 	<option value={true}>return flight</option>
 </select>
 
-<input type="date" bind:value start} />
-<input type="date" bind:value end} disabled={!isReturn} />
+<input type="date" bind:value={start} />
+<input type="date" bind:value={end} disabled={!isReturn} />
 
 <button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
 
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index 51bc0d388d45..14103e424bd7 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -31,7 +31,7 @@
 
 <label>
 	duration:
-	<input type="range" bind:value duration} min="1" max="20000" />
+	<input type="range" bind:value={duration} min="1" max="20000" />
 </label>
 
 <button on:click={() => (elapsed = 0)}>reset</button>
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
index 6f3b0c153ec7..fbae236b9fd4 100644
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
@@ -50,16 +50,16 @@
 	}
 </script>
 
-<input placeholder="filter prefix" bind:value prefix} />
+<input placeholder="filter prefix" bind:value={prefix} />
 
-<select bind:value i} size={5}>
+<select bind:value={i} size={5}>
 	{#each filteredPeople as person, i}
 		<option value={i}>{person.last}, {person.first}</option>
 	{/each}
 </select>
 
-<label><input bind:value first} placeholder="first" /></label>
-<label><input bind:value last} placeholder="last" /></label>
+<label><input bind:value={first} placeholder="first" /></label>
+<label><input bind:value={last} placeholder="last" /></label>
 
 <div class="buttons">
 	<button on:click={create} disabled={!first || !last}>create</button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index a1ec3056b6ca..72d3d83e6b2a 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this btn} on:click>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index 58027f51fd52..d2ad294728af 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<button bind:this btn} on:click>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
index 530f44ec024a..89b10d2a1798 100644
--- a/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
+++ b/documentation/examples/99-embeds/20190420-blog-write-less-code/App.svelte
@@ -3,7 +3,7 @@
 	let b = 2;
 </script>
 
-<input type="number" bind:value a} />
-<input type="number" bind:value b} />
+<input type="number" bind:value={a} />
+<input type="number" bind:value={b} />
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
index 5b560e78ceb2..94061c0df250 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -2,6 +2,6 @@
 	let name = 'world';
 </script>
 
-<input bind:value name} />
+<input bind:value={name} />
 
 <h1>Hello {name}!</h1>
diff --git a/documentation/tutorial/06-bindings/01-text-inputs/text.md b/documentation/tutorial/06-bindings/01-text-inputs/text.md
index 24069fce75c5..68e0c2ff9c65 100644
--- a/documentation/tutorial/06-bindings/01-text-inputs/text.md
+++ b/documentation/tutorial/06-bindings/01-text-inputs/text.md
@@ -9,7 +9,7 @@ Sometimes it's useful to break that rule. Take the case of the `<input>` element
 Instead, we can use the `bind:value` directive:
 
 ```svelte
-<input bind:value name} />
+<input bind:value={name} />
 ```
 
 This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
index 8275c018eb2f..0598d99ee09c 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -4,13 +4,13 @@
 </script>
 
 <label>
-	<input type="number" bind:value a} min="0" max="10" />
-	<input type="range" bind:value a} min="0" max="10" />
+	<input type="number" bind:value={a} min="0" max="10" />
+	<input type="range" bind:value={a} min="0" max="10" />
 </label>
 
 <label>
-	<input type="number" bind:value b} min="0" max="10" />
-	<input type="range" bind:value b} min="0" max="10" />
+	<input type="number" bind:value={b} min="0" max="10" />
+	<input type="range" bind:value={b} min="0" max="10" />
 </label>
 
 <p>{a} + {b} = {a + b}</p>
diff --git a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
index 7a0ee71b97a1..a9b539e6035d 100644
--- a/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
+++ b/documentation/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -7,6 +7,6 @@ In the DOM, everything is a string. That's unhelpful when you're dealing with nu
 With `bind:value`, Svelte takes care of it for you:
 
 ```svelte
-<input type="number" bind:value a} min="0" max="10" />
-<input type="range" bind:value a} min="0" max="10" />
+<input type="number" bind:value={a} min="0" max="10" />
+<input type="range" bind:value={a} min="0" max="10" />
 ```
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
index c4b3467d335f..b3373593178f 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked yes} />
+	<input type="checkbox" bind:checked={yes} />
 	Yes! Send me regular email spam
 </label>
 
diff --git a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
index b7c8f2a41113..f2dd2e3c01b1 100644
--- a/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
+++ b/documentation/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -5,5 +5,5 @@ title: Checkbox inputs
 Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
 
 ```svelte
-<input type="checkbox" bind:checked yes} />
+<input type="checkbox" bind:checked={yes} />
 ```
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
index f36b5a58cbe4..ce0565ab8e38 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={1} />
+	<input type="radio" bind:group={scoops} name="scoops" value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={2} />
+	<input type="radio" bind:group={scoops} name="scoops" value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} name="scoops" value={3} />
+	<input type="radio" bind:group={scoops} name="scoops" value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/04-group-inputs/text.md b/documentation/tutorial/06-bindings/04-group-inputs/text.md
index 12c8271e2e35..790e95ea830c 100644
--- a/documentation/tutorial/06-bindings/04-group-inputs/text.md
+++ b/documentation/tutorial/06-bindings/04-group-inputs/text.md
@@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```svelte
-<input type="radio" bind:group scoops} name="scoops" value={1} />
+<input type="radio" bind:group={scoops} name="scoops" value={1} />
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@@ -23,7 +23,7 @@ let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} name="flavours" value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index 60670ac59526..eaaa0aeabe57 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index 517ff9b0a5ab..7785258fe2f1 100644
--- a/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -17,7 +17,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value selected} on:change={() => (answer = '')}>
+	<select bind:value={selected} on:change={() => (answer = '')}>
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
@@ -25,7 +25,7 @@
 		{/each}
 	</select>
 
-	<input bind:value answer} />
+	<input bind:value={answer} />
 
 	<button disabled={!answer} type="submit"> Submit </button>
 </form>
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
index 30121e661ab7..0ab215d51943 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -13,17 +13,17 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
@@ -31,7 +31,7 @@
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} value={flavour} />
 		{flavour}
 	</label>
 {/each}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
index 4583f9cd0194..2fd19c28ad58 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -13,23 +13,23 @@
 <h2>Size</h2>
 
 <label>
-	<input type="radio" bind:group scoops} value={1} />
+	<input type="radio" bind:group={scoops} value={1} />
 	One scoop
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={2} />
+	<input type="radio" bind:group={scoops} value={2} />
 	Two scoops
 </label>
 
 <label>
-	<input type="radio" bind:group scoops} value={3} />
+	<input type="radio" bind:group={scoops} value={3} />
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
index 0003dc1fdd06..1107d74b5487 100644
--- a/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
+++ b/documentation/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -9,7 +9,7 @@ Returning to our [earlier ice cream example](/tutorial/group-inputs), we can rep
 ```svelte
 <h2>Flavours</h2>
 
-<select multiple bind:value flavours}>
+<select multiple bind:value={flavours}>
 	{#each menu as flavour}
 		<option value={flavour}>
 			{flavour}
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
index ca40d101d283..b7c0ad8c31e0 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
@@ -2,7 +2,7 @@
 	let html = '<p>Write some text!</p>';
 </script>
 
-<div contenteditable="true" bind:innerHTML html} />
+<div contenteditable="true" bind:innerHTML={html} />
 
 <pre>{html}</pre>
 
diff --git a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
index c03129e67fa7..7ba124e38a83 100644
--- a/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
+++ b/documentation/tutorial/06-bindings/08-contenteditable-bindings/text.md
@@ -11,5 +11,5 @@ Elements with the `contenteditable` attribute support the following bindings:
 There are slight differences between each of these, read more about them [here](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText).
 
 ```svelte
-<div contenteditable="true" bind:innerHTML html} />
+<div contenteditable="true" bind:innerHTML={html} />
 ```
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
index 7f63e85c8751..3ddb1a4fb449 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -20,9 +20,9 @@
 
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} />
 	</div>
 {/each}
 
diff --git a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
index 67750dcd5959..cbba3d97f375 100644
--- a/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
+++ b/documentation/tutorial/06-bindings/09-each-block-bindings/text.md
@@ -7,9 +7,9 @@ You can even bind to properties inside an `each` block.
 ```svelte
 {#each todos as todo}
 	<div class:done={todo.done}>
-		<input type="checkbox" bind:checked todo.done} />
+		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value todo.text} />
+		<input placeholder="What needs to be done?" bind:value={todo.text} />
 	</div>
 {/each}
 ```
diff --git a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
index 60a71891b6a1..836804f8bc7f 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -60,8 +60,7 @@
 		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
 		on:mouseup={handleMouseup}
-		bind:currentTime
-		time}
+		bind:currentTime={time}
 		bind:duration
 		bind:paused
 	>
diff --git a/documentation/tutorial/06-bindings/10-media-elements/text.md b/documentation/tutorial/06-bindings/10-media-elements/text.md
index cd4e066f9406..5ee2d4ac53bb 100644
--- a/documentation/tutorial/06-bindings/10-media-elements/text.md
+++ b/documentation/tutorial/06-bindings/10-media-elements/text.md
@@ -14,8 +14,7 @@ On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
 	on:touchmove|preventDefault={handleMove}
 	on:mousedown={handleMousedown}
 	on:mouseup={handleMouseup}
-	bind:currentTime
-	time}
+	bind:currentTime={time}
 	bind:duration
 	bind:paused
 >
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
index 97e1bb6a51da..96fb6d247714 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -5,8 +5,8 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
index 872559da59eb..699664748a1c 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -5,12 +5,12 @@
 	let text = 'edit me';
 </script>
 
-<input type="range" bind:value size} />
-<input bind:value text} />
+<input type="range" bind:value={size} />
+<input bind:value={text} />
 
 <p>size: {w}px x {h}px</p>
 
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 
diff --git a/documentation/tutorial/06-bindings/11-dimensions/text.md b/documentation/tutorial/06-bindings/11-dimensions/text.md
index ba39d8f55f29..7b12a0827edb 100644
--- a/documentation/tutorial/06-bindings/11-dimensions/text.md
+++ b/documentation/tutorial/06-bindings/11-dimensions/text.md
@@ -5,7 +5,7 @@ title: Dimensions
 Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
 
 ```svelte
-<div bind:clientWidth w} bind:clientHeight h}>
+<div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
 </div>
 ```
diff --git a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index c410bef88439..b73e800947af 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -36,7 +36,7 @@
 	});
 </script>
 
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 
 <style>
 	canvas {
diff --git a/documentation/tutorial/06-bindings/12-bind-this/text.md b/documentation/tutorial/06-bindings/12-bind-this/text.md
index e43d02ca0498..16d398293406 100644
--- a/documentation/tutorial/06-bindings/12-bind-this/text.md
+++ b/documentation/tutorial/06-bindings/12-bind-this/text.md
@@ -5,7 +5,7 @@ title: This
 The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
 
 ```svelte
-<canvas bind:this canvas} width={32} height={32} />
+<canvas bind:this={canvas} width={32} height={32} />
 ```
 
 Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
index 6133e68cf086..b3666f891da9 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
@@ -11,4 +11,4 @@
 
 <h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
 
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />
diff --git a/documentation/tutorial/06-bindings/13-component-bindings/text.md b/documentation/tutorial/06-bindings/13-component-bindings/text.md
index 2cb5d9073006..a5426fa8686b 100644
--- a/documentation/tutorial/06-bindings/13-component-bindings/text.md
+++ b/documentation/tutorial/06-bindings/13-component-bindings/text.md
@@ -5,7 +5,7 @@ title: Component bindings
 Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
 
 ```svelte
-<Keypad bind:value pin} on:submit={handleSubmit} />
+<Keypad bind:value={pin} on:submit={handleSubmit} />
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
index 70ec258edf42..caf9c2c9e34c 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this input} />
+<input bind:this={input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
index 359097340c82..b5bd3d2e7d03 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/App.svelte
@@ -4,6 +4,6 @@
 	let field;
 </script>
 
-<InputField bind:this field} />
+<InputField bind:this={field} />
 
 <button on:click={() => field.focus()}>Focus field</button>
diff --git a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
index 70ec258edf42..caf9c2c9e34c 100644
--- a/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
+++ b/documentation/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<input bind:this input} />
+<input bind:this={input} />
diff --git a/documentation/tutorial/06-bindings/14-component-this/text.md b/documentation/tutorial/06-bindings/14-component-this/text.md
index 212fb0d7ba6f..e87f3382342e 100644
--- a/documentation/tutorial/06-bindings/14-component-this/text.md
+++ b/documentation/tutorial/06-bindings/14-component-this/text.md
@@ -9,7 +9,7 @@ Just as you can bind to DOM elements, you can bind to component instances themse
 	let field;
 </script>
 
-<InputField bind:this field} />
+<InputField bind:this={field} />
 ```
 
 Now we can programmatically interact with this component using `field`.
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
index beb2db6ced4a..235b53889f29 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
index 04cedbcc13b6..7afb5eb42776 100644
--- a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
+++ b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte
@@ -60,7 +60,7 @@
 <div class="chat">
 	<h1>Eliza</h1>
 
-	<div class="scrollable" bind:this div}>
+	<div class="scrollable" bind:this={div}>
 		{#each comments as comment}
 			<article class={comment.author}>
 				<span>{comment.text}</span>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
index bab7ff152419..84331e1e7b35 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
+++ b/documentation/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <h1>{$greeting}</h1>
-<input bind:value $name} />
+<input bind:value={$name} />
 
 <button on:click={() => ($name += '!')}> Add exclamation mark! </button>
diff --git a/documentation/tutorial/08-stores/06-store-bindings/text.md b/documentation/tutorial/08-stores/06-store-bindings/text.md
index 64a8a42d5b63..054140e8d75b 100644
--- a/documentation/tutorial/08-stores/06-store-bindings/text.md
+++ b/documentation/tutorial/08-stores/06-store-bindings/text.md
@@ -7,7 +7,7 @@ If a store is writable — i.e. it has a `set` method — you can bind to its va
 In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
 
 ```svelte
-<input bind:value $name} />
+<input bind:value={$name} />
 ```
 
 Changing the input value will now update `name` and all its dependents.
diff --git a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
index f3e4c41e2181..39afc6c1a770 100644
--- a/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -8,12 +8,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
index 7bf85c1c9617..59346dcb3b3b 100644
--- a/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
+++ b/documentation/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -15,12 +15,12 @@
 <div style="position: absolute; right: 1em;">
 	<label>
 		<h3>stiffness ({coords.stiffness})</h3>
-		<input bind:value coords.stiffness} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
 		<h3>damping ({coords.damping})</h3>
-		<input bind:value coords.damping} type="range" min="0" max="1" step="0.01" />
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
index 70774e8c4787..5ba3e7fb7b24 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
index 998ed5665d57..29e9254d1409 100644
--- a/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/01-transition/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
index 998ed5665d57..29e9254d1409 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
index e426b53cf60d..318739f1d0fc 100644
--- a/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
index e426b53cf60d..318739f1d0fc 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
index 8fe8cab57f65..bb44e5ca9f43 100644
--- a/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
index a677d1d91f54..621a58134294 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
index fa2e4c009ee3..df055bd8f935 100644
--- a/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
index fe7defe38381..d5d029f223a4 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
index 900c303aa29a..21536e868302 100644
--- a/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
index 1481a3fdd297..59458e9c2fa9 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-a/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
index 5850ea003ee3..31ef18c930cb 100644
--- a/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/06-transition-events/app-b/App.svelte
@@ -8,7 +8,7 @@
 <p>status: {status}</p>
 
 <label>
-	<input type="checkbox" bind:checked visible} />
+	<input type="checkbox" bind:checked={visible} />
 	visible
 </label>
 
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
index d5a8ea04bbb5..9700f945b4ff 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked showItems} />
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value i} max="10" />
+	<input type="range" bind:value={i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
index 4751a9dc5e31..93de6a0cdce6 100644
--- a/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked showItems} />
+	<input type="checkbox" bind:checked={showItems} />
 	show list
 </label>
 
 <label>
-	<input type="range" bind:value i} max="10" />
+	<input type="range" bind:value={i} max="10" />
 </label>
 
 {#if showItems}
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
index 858d3c6b3dfb..4428fa1f4f4e 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
index 2f70cf0606a1..23cc9f2f9ece 100644
--- a/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ b/documentation/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <label>
-	<input type="range" bind:value duration} max={2000} step={100} />
+	<input type="range" bind:value={duration} max={2000} step={100} />
 	{duration}ms
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
index 2ecd346acd7a..ad39916ce57b 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
index 2ecd346acd7a..ad39916ce57b 100644
--- a/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <label>
-	<input type="checkbox" bind:checked big} />
+	<input type="checkbox" bind:checked={big} />
 	big
 </label>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
index 97ee50669039..7a806717ef52 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
 
 <p>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
index cae8df3b654c..758db1c5677e 100644
--- a/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
index cae8df3b654c..758db1c5677e 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
 
 <p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
 
diff --git a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
index 973026161307..d75db22ad4b4 100644
--- a/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
+++ b/documentation/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -3,7 +3,7 @@
 	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
 </script>
 
-<input type="range" min="0" max="1" step="0.1" bind:value bgOpacity} />
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
 
 <p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
 
diff --git a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
index e9ce39db1293..495aae6a0ddb 100644
--- a/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -30,7 +30,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this container}>
+<div bind:this={container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
index a7355ab18feb..ddc3ebe7cc49 100644
--- a/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
+++ b/documentation/tutorial/15-context/01-context-api/app-b/Map.svelte
@@ -32,7 +32,7 @@
 	<link rel="stylesheet" href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css" on:load={load} />
 </svelte:head>
 
-<div bind:this container}>
+<div bind:this={container}>
 	{#if map}
 		<slot />
 	{/if}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
index 098c7a9d68a1..79aad72bdf26 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
index e361a7020649..69e51253fcbc 100644
--- a/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -12,7 +12,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option.color}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
index 870bc25f93bd..0718efd94943 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
index d7a65469b442..068f7b3c4f56 100644
--- a/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
@@ -3,7 +3,7 @@
 	let selected = options[0];
 </script>
 
-<select bind:value selected}>
+<select bind:value={selected}>
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
index ee173a137938..7e85600abeb9 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
@@ -4,7 +4,7 @@
 	let y;
 </script>
 
-<svelte:window bind:scrollY y} />
+<svelte:window bind:scrollY={y} />
 
 <a class="parallax-container" href="https://www.firewatchgame.com">
 	{#each layers as layer}
diff --git a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
index a002a088e6da..6885c2974eb5 100644
--- a/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
+++ b/documentation/tutorial/16-special-elements/05-svelte-window-bindings/text.md
@@ -5,7 +5,7 @@ title: <svelte:window> bindings
 We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
 
 ```svelte
-<svelte:window bind:scrollY y} />
+<svelte:window bind:scrollY={y} />
 ```
 
 The list of properties you can bind to is as follows:
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
index 9eb30da7f1be..14083c0ba450 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
@@ -13,7 +13,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this button} type="button" on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
index ca510157bec0..6104f1649337 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
@@ -15,7 +15,7 @@
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<button bind:this button} type="button" on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </button>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
index 6abbb1e6a71d..0533ec087685 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -16,7 +16,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
index 9373dcd41806..6e2e60502635 100644
--- a/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -21,7 +21,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
index 386a36dfafea..2b229e50dddc 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -29,7 +29,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
index bbfa0b82b72b..b76601e025b5 100644
--- a/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
+++ b/documentation/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
@@ -35,7 +35,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio bind:this audio} bind:paused on:play={stopOthers} controls {src} />
+	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
 
 <style>
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
index 9bee2c224de4..78a0b817418a 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-a/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value user.firstname} />
-<input bind:value user.lastname} />
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
 
 {(console.log(user), '')}
 
diff --git a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
index d3f7b26a2e43..30bffc896cb5 100644
--- a/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
+++ b/documentation/tutorial/18-special-tags/01-debug/app-b/App.svelte
@@ -5,8 +5,8 @@
 	};
 </script>
 
-<input bind:value user.firstname} />
-<input bind:value user.lastname} />
+<input bind:value={user.firstname} />
+<input bind:value={user.lastname} />
 
 {@debug user}
 

From 5d76cddc05930a98f9169d78808bf36eaaabd1bc Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 18:59:31 +0000
Subject: [PATCH 04/23] oops

---
 .../phases/2-analyze/visitors/BindDirective.js     |  1 -
 .../src/lib/Input/ComponentSelector.svelte         |  3 +--
 .../src/lib/Input/ModuleEditor.svelte              |  3 +--
 .../svelte-5-preview/src/lib/Output/AstNode.svelte |  3 +--
 .../src/lib/Output/CompilerOptions.svelte          | 12 ++++++------
 .../svelte-5-preview/src/lib/Output/Output.svelte  |  9 ++++-----
 .../svelte-5-preview/src/lib/Output/Viewer.svelte  |  3 +--
 sites/svelte-5-preview/src/lib/Repl.svelte         |  4 ++--
 sites/svelte-5-preview/src/routes/+page.svelte     |  3 +--
 .../src/routes/docs/content/01-api/02-runes.md     | 14 +++++++-------
 .../src/routes/docs/content/01-api/05-imports.md   | 10 +++++-----
 .../02-examples/02-fine-grained-reactivity.md      |  4 ++--
 .../content/03-appendix/02-breaking-changes.md     |  2 +-
 13 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 94c1146ac19f..2c54b0e48b77 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -24,7 +24,6 @@ export function BindDirective(node, context) {
 	validate_no_const_assignment(node, node.expression, context.state.scope, true);
 
 	const assignee = node.expression;
-
 	const left = object(assignee);
 
 	if (left === null) {
diff --git a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
index d9077c520a4f..7b95008712b0 100644
--- a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
@@ -248,8 +248,7 @@
 						<input
 							autofocus
 							spellcheck={false}
-							bind:value
-							input_value}
+							bind:value={input_value}
 							on:focus={select_input}
 							on:blur={close_edit}
 							on:keydown={(e) => {
diff --git a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
index bbd6ad6f530c..d047d106371d 100644
--- a/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
@@ -21,8 +21,7 @@
 <div class="editor-wrapper">
 	<div class="editor notranslate" translate="no">
 		<CodeMirror
-			bind:this
-			$module_editor}
+			bind:this={$module_editor}
 			diagnostics={() => {
 				if (error) {
 					return [
diff --git a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
index 9fb559a75470..f99f21494c80 100644
--- a/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/AstNode.svelte
@@ -77,8 +77,7 @@
 </script>
 
 <li
-	bind:this
-	list_item_el}
+	bind:this={list_item_el}
 	class:marked={!is_root && is_leaf}
 	on:mouseover={handle_mark_text}
 	on:focus={handle_mark_text}
diff --git a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
index 74b72e84c258..426e5044a7d2 100644
--- a/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
@@ -11,32 +11,32 @@
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input id="client" type="radio" bind:group $compile_options.generate} value="client" />
+		<input id="client" type="radio" bind:group={$compile_options.generate} value="client" />
 		<label for="client"><span class="string">"client"</span></label>
 
-		<input id="server" type="radio" bind:group $compile_options.generate} value="server" />
+		<input id="server" type="radio" bind:group={$compile_options.generate} value="server" />
 		<label for="server"><span class="string">"server"</span>,</label>
 	</div>
 
 	<div class="option">
 		<span class="key">css:</span>
 
-		<input id="injected" type="radio" bind:group $compile_options.css} value="injected" />
+		<input id="injected" type="radio" bind:group={$compile_options.css} value="injected" />
 		<label for="injected"><span class="string">"injected"</span></label>
 
-		<input id="external" type="radio" bind:group $compile_options.css} value="external" />
+		<input id="external" type="radio" bind:group={$compile_options.css} value="external" />
 		<label for="external"><span class="string">"external"</span>,</label>
 	</div>
 
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox bind:checked $compile_options.dev} />
+		<Checkbox bind:checked={$compile_options.dev} />
 		<span class="boolean">{$compile_options.dev}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">hmr:</span>
-		<Checkbox bind:checked $compile_options.hmr} />
+		<Checkbox bind:checked={$compile_options.hmr} />
 		<span class="boolean">{$compile_options.hmr}</span>,
 	</label>
 	});
diff --git a/sites/svelte-5-preview/src/lib/Output/Output.svelte b/sites/svelte-5-preview/src/lib/Output/Output.svelte
index f86e5c3af1e9..ac6da48d3d17 100644
--- a/sites/svelte-5-preview/src/lib/Output/Output.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Output.svelte
@@ -77,8 +77,7 @@
 <!-- component viewer -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'result'}>
 	<Viewer
-		bind:error
-		runtimeError}
+		bind:error={runtimeError}
 		{status}
 		{relaxed}
 		{injectedJS}
@@ -90,11 +89,11 @@
 <!-- js output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'js'}>
 	{#if embedded}
-		<CodeMirror bind:this js_editor} readonly />
+		<CodeMirror bind:this={js_editor} readonly />
 	{:else}
 		<PaneWithPanel pos="50%" panel="Compiler options">
 			<div slot="main">
-				<CodeMirror bind:this js_editor} readonly />
+				<CodeMirror bind:this={js_editor} readonly />
 			</div>
 
 			<div slot="panel-body">
@@ -106,7 +105,7 @@
 
 <!-- css output -->
 <div class="tab-content" class:visible={selected?.type !== 'md' && view === 'css'}>
-	<CodeMirror bind:this css_editor} readonly />
+	<CodeMirror bind:this={css_editor} readonly />
 </div>
 
 <!-- ast output -->
diff --git a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
index 887d09a29de3..db506ada3bfd 100644
--- a/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
+++ b/sites/svelte-5-preview/src/lib/Output/Viewer.svelte
@@ -254,8 +254,7 @@
 			<iframe
 				title="Result"
 				class:inited
-				bind:this
-				iframe}
+				bind:this={iframe}
 				sandbox={[
 					'allow-popups-to-escape-sandbox',
 					'allow-scripts',
diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index 8ab25db19301..f43f5f899b84 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -338,7 +338,7 @@
 
 <svelte:window on:beforeunload={before_unload} />
 
-<div class="container" class:toggleable={$toggleable} bind:clientWidth width}>
+<div class="container" class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
 			--color="var(--sk-text-4)"
@@ -374,7 +374,7 @@
 	</div>
 
 	{#if $toggleable}
-		<InputOutputToggle bind:checked show_output} />
+		<InputOutputToggle bind:checked={show_output} />
 	{/if}
 </div>
 
diff --git a/sites/svelte-5-preview/src/routes/+page.svelte b/sites/svelte-5-preview/src/routes/+page.svelte
index 26758a52c198..b54c36ee5b58 100644
--- a/sites/svelte-5-preview/src/routes/+page.svelte
+++ b/sites/svelte-5-preview/src/routes/+page.svelte
@@ -88,8 +88,7 @@
 />
 
 <Repl
-	bind:this
-	repl}
+	bind:this={repl}
 	autocomplete={true}
 	on:add={change_from_editor}
 	on:change={change_from_editor}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 074683431f5b..84062a1cfaee 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -193,7 +193,7 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
 	});
 </script>
 
-<canvas bind:this canvas} width="100" height="100" />
+<canvas bind:this={canvas} width="100" height="100" />
 ```
 
 The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
@@ -346,12 +346,12 @@ You might be tempted to do something convoluted with effects to link one value t
 </script>
 
 <label>
-	<input type="range" bind:value spent} max={total} />
+	<input type="range" bind:value={spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value left} max={total} />
+	<input type="range" bind:value={left} max={total} />
 	{left}/{total} left
 </label>
 ```
@@ -414,12 +414,12 @@ If you need to use bindings, for whatever reason (for example when you want some
 </script>
 
 <label>
-	<input type="range" bind:value spent} max={total} />
+	<input type="range" bind:value={spent} max={total} />
 	{spent}/{total} spent
 </label>
 
 <label>
-	<input type="range" bind:value left.value} max={total} />
+	<input type="range" bind:value={left.value} max={total} />
 	{left.value}/{total} left
 </label>
 ```
@@ -467,7 +467,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 	});
 </script>
 
-<div bind:this div}>
+<div bind:this={div}>
 	{#each messages as message}
 		<p>{message}</p>
 	{/each}
@@ -627,7 +627,7 @@ or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cau
 </script>
 
 <button onclick={() => count++}>Increment</button>
-<input bind:value message} />
+<input bind:value={message} />
 ```
 
 `$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`, all following arguments are the values passed to `$inspect`. [Demo:](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
index dfc47de58afa..7cbec56e17ac 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
@@ -25,7 +25,7 @@ Forces any pending effects (including DOM updates) to be applied immediately, ra
 	}
 </script>
 
-<span bind:this element}>{count}</span>
+<span bind:this={element}>{count}</span>
 <button {onclick}>update</button>
 ```
 
@@ -140,14 +140,14 @@ Svelte provides reactive `SvelteMap`, `SvelteSet`, `SvelteDate` and `SvelteURL`
 </script>
 
 <!-- changes to these... -->
-<input bind:value url.protocol} />
-<input bind:value url.hostname} />
-<input bind:value url.pathname} />
+<input bind:value={url.protocol} />
+<input bind:value={url.hostname} />
+<input bind:value={url.pathname} />
 
 <hr />
 
 <!-- will update `href` and vice versa -->
-<input bind:value url.href} />
+<input bind:value={url.href} />
 ```
 
 ## `svelte/events`
diff --git a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
index 7a2530386c05..6c804b03ac57 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
@@ -32,8 +32,8 @@ In Svelte 4, reactivity centres on the _component_ and the top-level state decla
 
 {#each todos as todo}
 	<div>
-		<input bind:value todo.text} />
-		<input type="checkbox" bind:checked todo.done} />
+		<input bind:value={todo.text} />
+		<input type="checkbox" bind:checked={todo.done} />
 	</div>
 {/each}
 
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 4b28870b5429..f45b2e041692 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -228,7 +228,7 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
 	let Thing = $state();
 </script>
 
-<select bind:value Thing}>
+<select bind:value={Thing}>
 	<option value={A}>A</option>
 	<option value={B}>B</option>
 </select>

From f75a781a64896671837afe0dc81684e81a97513d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 19:09:57 +0000
Subject: [PATCH 05/23] build

---
 .../docs/98-reference/.generated/compile-errors.md          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index b32bc6b89c02..1e8c7ed3a8a1 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -424,6 +424,12 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
+### invalid_bind_directive
+
+```
+Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+```
+
 ### js_parse_error
 
 ```

From d5638844e7a50a06974ba6e89db67579adfc9969 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 19:58:57 +0000
Subject: [PATCH 06/23] add changeset and tests

---
 .changeset/slimy-donkeys-hang.md              |  5 ++++
 .../client/visitors/shared/component.js       | 24 +++++++++++--------
 .../client/visitors/shared/utils.js           |  2 +-
 .../samples/bind-getter-setter-2/Child.svelte | 11 +++++++++
 .../samples/bind-getter-setter-2/_config.js   |  9 +++++++
 .../samples/bind-getter-setter-2/main.svelte  | 11 +++++++++
 .../samples/bind-getter-setter/Child.svelte   | 12 ++++++++++
 .../samples/bind-getter-setter/_config.js     | 20 ++++++++++++++++
 .../samples/bind-getter-setter/main.svelte    | 16 +++++++++++++
 9 files changed, 99 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/slimy-donkeys-hang.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/bind-getter-setter/main.svelte

diff --git a/.changeset/slimy-donkeys-hang.md b/.changeset/slimy-donkeys-hang.md
new file mode 100644
index 000000000000..d63141660eed
--- /dev/null
+++ b/.changeset/slimy-donkeys-hang.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add support for bind getters/setters
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 9babedc46da0..f0afeb4dd7ad 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -42,7 +42,7 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
-	/** @type {Identifier | MemberExpression | null} */
+	/** @type {Identifier | MemberExpression | [Expression, Expression] | null} */
 	let bind_this = null;
 
 	/** @type {ExpressionStatement[]} */
@@ -162,17 +162,21 @@ export function build_component(node, component_name, context, anchor = context.
 			}
 		} else if (attribute.type === 'BindDirective') {
 			if (Array.isArray(attribute.expression)) {
-				const [get_expression, set_expression] = attribute.expression;
-				const get = /** @type {Expression} */ (context.visit(get_expression));
-				const set = /** @type {Expression} */ (context.visit(set_expression));
-				const get_id = b.id(context.state.scope.generate('bind_get'));
-				const set_id = b.id(context.state.scope.generate('bind_set'));
+				if (attribute.name === 'this') {
+					bind_this = attribute.expression;
+				} else {
+					const [get_expression, set_expression] = attribute.expression;
+					const get = /** @type {Expression} */ (context.visit(get_expression));
+					const set = /** @type {Expression} */ (context.visit(set_expression));
+					const get_id = b.id(context.state.scope.generate('bind_get'));
+					const set_id = b.id(context.state.scope.generate('bind_set'));
 
-				context.state.init.push(b.var(get_id, get));
-				context.state.init.push(b.var(set_id, set));
+					context.state.init.push(b.var(get_id, get));
+					context.state.init.push(b.var(set_id, set));
 
-				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
-				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+					push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+					push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+				}
 			} else {
 				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 575ff5dd695a..400be7a08d9b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -171,7 +171,7 @@ export function build_bind_this(expression, value, { state, visit }) {
 		const get = /** @type {Expression} */ (visit(get_expression));
 		const set = /** @type {Expression} */ (visit(set_expression));
 
-		return b.call('$.bind_this', value, get, set);
+		return b.call('$.bind_this', value, set, get);
 	}
 
 	/** @type {Identifier[]} */
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/Child.svelte
new file mode 100644
index 000000000000..0026309d449f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let div = $state();
+
+	$effect(() => {
+		console.log(div?.textContent);
+	})
+
+	export const someData = '123';
+</script>
+
+<div bind:this={() => div, v => div = v}>123</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/_config.js
new file mode 100644
index 000000000000..1d51c8eead1e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		assert.htmlEqual(target.innerHTML, `<div>123</div>`);
+
+		assert.deepEqual(logs, ['123', '123']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/main.svelte
new file mode 100644
index 000000000000..21646e745a4e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+
+	let child = $state();
+
+	$effect(() => {
+		console.log(child.someData);
+	});
+</script>
+
+<Child bind:this={() => child, v => child = v} />
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/Child.svelte b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/Child.svelte
new file mode 100644
index 000000000000..bea5849ec76b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/Child.svelte
@@ -0,0 +1,12 @@
+<script>
+	let { a = $bindable() } = $props();
+</script>
+
+<input
+	type="value"
+	bind:value={() => a,
+	(v) => {
+		console.log('b', v);
+		a = v;
+	}}
+/>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/_config.js
new file mode 100644
index 000000000000..158d1e6f63e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { assert_ok } from '../../../suite';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const input = target.querySelector('input');
+
+		assert_ok(input);
+
+		input.value = '2';
+		input.dispatchEvent(new window.Event('input'));
+
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>a: 2</button><input type="value">`);
+
+		assert.deepEqual(logs, ['b', '2', 'a', '2']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/main.svelte
new file mode 100644
index 000000000000..191a4234764d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Child from './Child.svelte';
+
+	let a = $state(0);
+</script>
+
+<button onclick={() => a++}>a: {a}</button>
+
+<Child
+	bind:a={() => a,
+	(v) => {
+		console.log('a', v);
+		a = v;
+	}}
+/>
+

From 989ff2facfc3cd3fcc02c6887d16cb08de65dda5 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 20:41:15 +0000
Subject: [PATCH 07/23] move validation

---
 .../2-analyze/visitors/BindDirective.js       | 200 +++++++++---------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 2c54b0e48b77..e3c66292515d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -17,106 +17,6 @@ import { is_content_editable_binding, is_svg } from '../../../../utils.js';
  * @param {Context} context
  */
 export function BindDirective(node, context) {
-	if (Array.isArray(node.expression)) {
-		return;
-	}
-
-	validate_no_const_assignment(node, node.expression, context.state.scope, true);
-
-	const assignee = node.expression;
-	const left = object(assignee);
-
-	if (left === null) {
-		e.bind_invalid_expression(node);
-	}
-
-	const binding = context.state.scope.get(left.name);
-
-	if (assignee.type === 'Identifier') {
-		// reassignment
-		if (
-			node.name !== 'this' && // bind:this also works for regular variables
-			(!binding ||
-				(binding.kind !== 'state' &&
-					binding.kind !== 'raw_state' &&
-					binding.kind !== 'prop' &&
-					binding.kind !== 'bindable_prop' &&
-					binding.kind !== 'each' &&
-					binding.kind !== 'store_sub' &&
-					!binding.updated)) // TODO wut?
-		) {
-			e.bind_invalid_value(node.expression);
-		}
-
-		if (context.state.analysis.runes && binding?.kind === 'each') {
-			e.each_item_invalid_assignment(node);
-		}
-
-		if (binding?.kind === 'snippet') {
-			e.snippet_parameter_assignment(node);
-		}
-	}
-
-	if (node.name === 'group') {
-		if (!binding) {
-			throw new Error('Cannot find declaration for bind:group');
-		}
-
-		// Traverse the path upwards and find all EachBlocks who are (indirectly) contributing to bind:group,
-		// i.e. one of their declarations is referenced in the binding. This allows group bindings to work
-		// correctly when referencing a variable declared in an EachBlock by using the index of the each block
-		// entries as keys.
-		const each_blocks = [];
-		const [keypath, expression_ids] = extract_all_identifiers_from_expression(node.expression);
-		let ids = expression_ids;
-
-		let i = context.path.length;
-		while (i--) {
-			const parent = context.path[i];
-
-			if (parent.type === 'EachBlock') {
-				const references = ids.filter((id) => parent.metadata.declarations.has(id.name));
-
-				if (references.length > 0) {
-					parent.metadata.contains_group_binding = true;
-
-					each_blocks.push(parent);
-					ids = ids.filter((id) => !references.includes(id));
-					ids.push(...extract_all_identifiers_from_expression(parent.expression)[1]);
-				}
-			}
-		}
-
-		// The identifiers that make up the binding expression form they key for the binding group.
-		// If the same identifiers in the same order are used in another bind:group, they will be in the same group.
-		// (there's an edge case where `bind:group={a[i]}` will be in a different group than `bind:group={a[j]}` even when i == j,
-		//  but this is a limitation of the current static analysis we do; it also never worked in Svelte 4)
-		const bindings = expression_ids.map((id) => context.state.scope.get(id.name));
-		let group_name;
-
-		outer: for (const [[key, b], group] of context.state.analysis.binding_groups) {
-			if (b.length !== bindings.length || key !== keypath) continue;
-			for (let i = 0; i < bindings.length; i++) {
-				if (bindings[i] !== b[i]) continue outer;
-			}
-			group_name = group;
-		}
-
-		if (!group_name) {
-			group_name = context.state.scope.root.unique('binding_group');
-			context.state.analysis.binding_groups.set([keypath, bindings], group_name);
-		}
-
-		node.metadata = {
-			binding_group_name: group_name,
-			parent_each_blocks: each_blocks
-		};
-	}
-
-	if (binding?.kind === 'each' && binding.metadata?.inside_rest) {
-		w.bind_invalid_each_rest(binding.node, binding.node.name);
-	}
-
 	const parent = context.path.at(-1);
 
 	if (
@@ -222,5 +122,105 @@ export function BindDirective(node, context) {
 		}
 	}
 
+	if (Array.isArray(node.expression)) {
+		return;
+	}
+
+	validate_no_const_assignment(node, node.expression, context.state.scope, true);
+
+	const assignee = node.expression;
+	const left = object(assignee);
+
+	if (left === null) {
+		e.bind_invalid_expression(node);
+	}
+
+	const binding = context.state.scope.get(left.name);
+
+	if (assignee.type === 'Identifier') {
+		// reassignment
+		if (
+			node.name !== 'this' && // bind:this also works for regular variables
+			(!binding ||
+				(binding.kind !== 'state' &&
+					binding.kind !== 'raw_state' &&
+					binding.kind !== 'prop' &&
+					binding.kind !== 'bindable_prop' &&
+					binding.kind !== 'each' &&
+					binding.kind !== 'store_sub' &&
+					!binding.updated)) // TODO wut?
+		) {
+			e.bind_invalid_value(node.expression);
+		}
+
+		if (context.state.analysis.runes && binding?.kind === 'each') {
+			e.each_item_invalid_assignment(node);
+		}
+
+		if (binding?.kind === 'snippet') {
+			e.snippet_parameter_assignment(node);
+		}
+	}
+
+	if (node.name === 'group') {
+		if (!binding) {
+			throw new Error('Cannot find declaration for bind:group');
+		}
+
+		// Traverse the path upwards and find all EachBlocks who are (indirectly) contributing to bind:group,
+		// i.e. one of their declarations is referenced in the binding. This allows group bindings to work
+		// correctly when referencing a variable declared in an EachBlock by using the index of the each block
+		// entries as keys.
+		const each_blocks = [];
+		const [keypath, expression_ids] = extract_all_identifiers_from_expression(node.expression);
+		let ids = expression_ids;
+
+		let i = context.path.length;
+		while (i--) {
+			const parent = context.path[i];
+
+			if (parent.type === 'EachBlock') {
+				const references = ids.filter((id) => parent.metadata.declarations.has(id.name));
+
+				if (references.length > 0) {
+					parent.metadata.contains_group_binding = true;
+
+					each_blocks.push(parent);
+					ids = ids.filter((id) => !references.includes(id));
+					ids.push(...extract_all_identifiers_from_expression(parent.expression)[1]);
+				}
+			}
+		}
+
+		// The identifiers that make up the binding expression form they key for the binding group.
+		// If the same identifiers in the same order are used in another bind:group, they will be in the same group.
+		// (there's an edge case where `bind:group={a[i]}` will be in a different group than `bind:group={a[j]}` even when i == j,
+		//  but this is a limitation of the current static analysis we do; it also never worked in Svelte 4)
+		const bindings = expression_ids.map((id) => context.state.scope.get(id.name));
+		let group_name;
+
+		outer: for (const [[key, b], group] of context.state.analysis.binding_groups) {
+			if (b.length !== bindings.length || key !== keypath) continue;
+			for (let i = 0; i < bindings.length; i++) {
+				if (bindings[i] !== b[i]) continue outer;
+			}
+			group_name = group;
+		}
+
+		if (!group_name) {
+			group_name = context.state.scope.root.unique('binding_group');
+			context.state.analysis.binding_groups.set([keypath, bindings], group_name);
+		}
+
+		node.metadata = {
+			binding_group_name: group_name,
+			parent_each_blocks: each_blocks
+		};
+	}
+
+	if (binding?.kind === 'each' && binding.metadata?.inside_rest) {
+		w.bind_invalid_each_rest(binding.node, binding.node.name);
+	}
+
 	context.next();
 }

From 285f77e8a8a95f1e023d04480f7caf153ba441ec Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Thu, 14 Nov 2024 20:42:24 +0000
Subject: [PATCH 08/23] add comment

---
 .../src/compiler/phases/2-analyze/visitors/BindDirective.js      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index e3c66292515d..0af6e509cf81 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -122,6 +122,7 @@ export function BindDirective(node, context) {
 		}
 	}
 
+	// When dealing with bind getters/setters skip the specific binding validation
 	if (Array.isArray(node.expression)) {
 		return;
 	}

From d9332531d6d778ce4ccb7335a0f07d48952db13f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 15 Nov 2024 12:34:54 +0000
Subject: [PATCH 09/23] build

---
 packages/svelte/src/compiler/errors.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 2d1c9d891853..e2a60fe162dd 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -985,22 +985,22 @@ export function expected_whitespace(node) {
 }
 
 /**
- * Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
+ * `<%name%>` does not support non-event attributes or spread attributes
  * @param {null | number | NodeLike} node
+ * @param {string} name
  * @returns {never}
  */
-export function invalid_bind_directive(node) {
-	e(node, "invalid_bind_directive", "Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces");
+export function illegal_element_attribute(node, name) {
+	e(node, "illegal_element_attribute", `\`<${name}>\` does not support non-event attributes or spread attributes`);
 }
 
 /**
- * `<%name%>` does not support non-event attributes or spread attributes
+ * Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
  * @param {null | number | NodeLike} node
- * @param {string} name
  * @returns {never}
  */
-export function illegal_element_attribute(node, name) {
-	e(node, "illegal_element_attribute", `\`<${name}>\` does not support non-event attributes or spread attributes`);
+export function invalid_bind_directive(node) {
+	e(node, "invalid_bind_directive", "Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces");
 }
 
 /**

From 8f925b9e608ea954b036be806c7e7ccf892724bc Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 15 Nov 2024 13:11:13 +0000
Subject: [PATCH 10/23] bind:group error

---
 .../docs/98-reference/.generated/compile-errors.md |  6 ++++++
 .../svelte/messages/compile-errors/template.md     |  4 ++++
 packages/svelte/src/compiler/errors.js             |  9 +++++++++
 .../phases/2-analyze/visitors/BindDirective.js     |  5 +++++
 .../3-transform/server/visitors/shared/element.js  |  9 +++------
 packages/svelte/src/compiler/types/template.d.ts   |  3 +--
 .../bind_group_invalid_expression/errors.json      | 14 ++++++++++++++
 .../bind_group_invalid_expression/input.svelte     | 12 ++++++++++++
 8 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 packages/svelte/tests/validator/samples/bind_group_invalid_expression/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/bind_group_invalid_expression/input.svelte

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 5c6b96326a45..12403cf4ec1c 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -78,6 +78,12 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
 Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 ```
 
+### bind_group_invalid_expression
+
+```
+`bind:group` can only bind to an Identifier or MemberExpression
+```
+
 ### bind_invalid_expression
 
 ```
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 143bcc4c507f..3264e89e4051 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -50,6 +50,10 @@
 
 > Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 
+## bind_group_invalid_expression
+
+> `bind:group` can only bind to an Identifier or MemberExpression
+
 ## bind_invalid_expression
 
 > Can only bind to an Identifier or MemberExpression
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index e2a60fe162dd..0ca944822d03 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -696,6 +696,15 @@ export function attribute_unquoted_sequence(node) {
 	e(node, "attribute_unquoted_sequence", "Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression");
 }
 
+/**
+ * `bind:group` can only bind to an Identifier or MemberExpression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function bind_group_invalid_expression(node) {
+	e(node, "bind_group_invalid_expression", "`bind:group` can only bind to an Identifier or MemberExpression");
+}
+
 /**
  * Can only bind to an Identifier or MemberExpression
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 0af6e509cf81..c389ca64ff72 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -123,7 +123,12 @@ export function BindDirective(node, context) {
 	}
 
 	// When dealing with bind getters/setters skip the specific binding validation
+	// Group bindings aren't supported for getter/setters so we don't need to handle
+	// the metadata
 	if (Array.isArray(node.expression)) {
+		if (node.name === 'group') {
+			e.bind_group_invalid_expression(node);
+		}
 		return;
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 8cfea95cc63e..833b24e66abf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -120,7 +120,7 @@ export function build_element_attributes(node, context) {
 						? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
 						: /** @type {Expression} */ (context.visit(attribute.expression))
 				);
-			} else if (attribute.name === 'group') {
+			} else if (attribute.name === 'group' && !Array.isArray(attribute.expression)) {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
 					node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value')
 				);
@@ -133,9 +133,6 @@ export function build_element_attributes(node, context) {
 						is_text_attribute(attr) &&
 						attr.value[0].data === 'checkbox'
 				);
-				const attribute_expression = Array.isArray(attribute.expression)
-					? b.call(attribute.expression[0])
-					: attribute.expression;
 
 				attributes.push(
 					create_attribute('checked', -1, -1, [
@@ -146,12 +143,12 @@ export function build_element_attributes(node, context) {
 							parent: attribute,
 							expression: is_checkbox
 								? b.call(
-										b.member(attribute_expression, 'includes'),
+										b.member(attribute.expression, 'includes'),
 										build_attribute_value(value_attribute.value, context)
 									)
 								: b.binary(
 										'===',
-										attribute_expression,
+										attribute.expression,
 										build_attribute_value(value_attribute.value, context)
 									),
 							metadata: {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 073ac4d84c68..893f126e730f 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -14,8 +14,7 @@ import type {
 	Pattern,
 	Program,
 	ChainExpression,
-	SimpleCallExpression,
-	SequenceExpression
+	SimpleCallExpression
 } from 'estree';
 import type { Scope } from '../phases/scope';
 
diff --git a/packages/svelte/tests/validator/samples/bind_group_invalid_expression/errors.json b/packages/svelte/tests/validator/samples/bind_group_invalid_expression/errors.json
new file mode 100644
index 000000000000..f85363106b01
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bind_group_invalid_expression/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "bind_group_invalid_expression",
+		"message": "`bind:group` can only bind to an Identifier or MemberExpression",
+		"start": {
+			"line": 8,
+			"column": 38
+		},
+		"end": {
+			"line": 8,
+			"column": 84
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/bind_group_invalid_expression/input.svelte b/packages/svelte/tests/validator/samples/bind_group_invalid_expression/input.svelte
new file mode 100644
index 000000000000..3f8afe76550f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bind_group_invalid_expression/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	let values = $state([{ name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }]);
+	let selected = $state(values[1]);
+</script>
+
+{#each values as value}
+	<label>
+		<input type="radio" value="{value}" bind:group={() => selected, v => selected = v} /> {value.name}
+	</label>
+{/each}
+
+<p>{selected.name}</p>

From 9f71f660dcf65ef9cedcc499a92b7044548e58fc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 17:27:55 -0500
Subject: [PATCH 11/23] simpler to just keep it as a SequenceExpression

---
 .../compiler/phases/1-parse/state/element.js  | 21 ++--------
 .../2-analyze/visitors/BindDirective.js       |  2 +-
 .../client/visitors/BindDirective.js          |  8 ++--
 .../client/visitors/shared/component.js       | 40 +++++++++----------
 .../client/visitors/shared/utils.js           | 11 ++---
 .../server/visitors/shared/component.js       |  9 ++---
 .../server/visitors/shared/element.js         | 24 +++++------
 .../src/compiler/types/legacy-nodes.d.ts      |  2 +-
 .../svelte/src/compiler/types/template.d.ts   |  5 ++-
 packages/svelte/types/index.d.ts              |  4 +-
 10 files changed, 50 insertions(+), 76 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 4b7dd49b0cec..c017dca7d53b 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -507,7 +507,7 @@ function read_attribute(parser) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
-	/** @type {Expression | [Expression, Expression] | null} */
+	/** @type {Expression | null} */
 	let expression = null;
 
 	/** @type {true | AST.ExpressionTag | Array<AST.Text | AST.ExpressionTag>} */
@@ -536,24 +536,11 @@ function read_attribute(parser) {
 			!Array.isArray(value) &&
 			value.expression.type === 'SequenceExpression'
 		) {
-			try {
-				const bind_getter_setter = parse_expression_at(
-					`[${parser.template.slice(value_start, value.expression.end)}]`,
-					parser.ts,
-					0
-				);
-
-				if (
-					bind_getter_setter.type !== 'ArrayExpression' ||
-					bind_getter_setter.elements.length !== 2
-				) {
-					e.invalid_bind_directive(value_start);
-				}
-				expression = /** @type {[Expression, Expression]} */ (bind_getter_setter.elements);
-			} catch {
-				e.invalid_bind_directive(value_start);
+			if (value.expression.expressions.length !== 2) {
+				e.invalid_bind_directive(value);
 			}
 		}
+
 		end = parser.index;
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {
 		e.expected_token(parser.index, '=');
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index c389ca64ff72..32d7490dc924 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -125,7 +125,7 @@ export function BindDirective(node, context) {
 	// When dealing with bind getters/setters skip the specific binding validation
 	// Group bindings aren't supported for getter/setters so we don't need to handle
 	// the metadata
-	if (Array.isArray(node.expression)) {
+	if (node.expression.type === 'SequenceExpression') {
 		if (node.name === 'group') {
 			e.bind_group_invalid_expression(node);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 63e8eb99b749..3c7f1a2ecb5f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -1,4 +1,4 @@
-/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression, SequenceExpression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
@@ -20,10 +20,8 @@ export function BindDirective(node, context) {
 
 	let get, set;
 
-	if (Array.isArray(expression)) {
-		const [get_expression, set_expression] = expression;
-		get = /** @type {Expression} */ (context.visit(get_expression));
-		set = /** @type {Expression} */ (context.visit(set_expression));
+	if (expression.type === 'SequenceExpression') {
+		[get, set] = /** @type {SequenceExpression} */ (context.visit(expression)).expressions;
 	} else {
 		if (
 			dev &&
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index f0afeb4dd7ad..25b433e2ca93 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST, TemplateNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
@@ -42,7 +42,7 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
-	/** @type {Identifier | MemberExpression | [Expression, Expression] | null} */
+	/** @type {Identifier | MemberExpression | SequenceExpression | null} */
 	let bind_this = null;
 
 	/** @type {ExpressionStatement[]} */
@@ -161,13 +161,26 @@ export function build_component(node, component_name, context, anchor = context.
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			if (Array.isArray(attribute.expression)) {
+			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (dev && attribute.name !== 'this') {
+				binding_initializers.push(
+					b.stmt(
+						b.call(
+							b.id('$.add_owner_effect'),
+							b.thunk(expression),
+							b.id(component_name),
+							is_ignored(node, 'ownership_invalid_binding') && b.true
+						)
+					)
+				);
+			}
+
+			if (expression.type === 'SequenceExpression') {
 				if (attribute.name === 'this') {
 					bind_this = attribute.expression;
 				} else {
-					const [get_expression, set_expression] = attribute.expression;
-					const get = /** @type {Expression} */ (context.visit(get_expression));
-					const set = /** @type {Expression} */ (context.visit(set_expression));
+					const [get, set] = expression.expressions;
 					const get_id = b.id(context.state.scope.generate('bind_get'));
 					const set_id = b.id(context.state.scope.generate('bind_set'));
 
@@ -178,8 +191,6 @@ export function build_component(node, component_name, context, anchor = context.
 					push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
 				}
 			} else {
-				const expression = /** @type {Expression} */ (context.visit(attribute.expression));
-
 				if (
 					dev &&
 					expression.type === 'MemberExpression' &&
@@ -192,19 +203,6 @@ export function build_component(node, component_name, context, anchor = context.
 				if (attribute.name === 'this') {
 					bind_this = attribute.expression;
 				} else {
-					if (dev) {
-						binding_initializers.push(
-							b.stmt(
-								b.call(
-									b.id('$.add_owner_effect'),
-									b.thunk(expression),
-									b.id(component_name),
-									is_ignored(node, 'ownership_invalid_binding') && b.true
-								)
-							)
-						);
-					}
-
 					const is_store_sub =
 						attribute.expression.type === 'Identifier' &&
 						context.state.scope.get(attribute.expression.name)?.kind === 'store_sub';
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 400be7a08d9b..e29c54230e0c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -161,16 +161,13 @@ export function build_update_assignment(state, id, init, value, update) {
 
 /**
  * Serializes `bind:this` for components and elements.
- * @param {Identifier | MemberExpression | [Expression, Expression]} expression
+ * @param {Identifier | MemberExpression | SequenceExpression} expression
  * @param {Expression} value
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
  */
 export function build_bind_this(expression, value, { state, visit }) {
-	if (Array.isArray(expression)) {
-		const [get_expression, set_expression] = expression;
-		const get = /** @type {Expression} */ (visit(get_expression));
-		const set = /** @type {Expression} */ (visit(set_expression));
-
+	if (expression.type === 'SequenceExpression') {
+		const [get, set] = /** @type {SequenceExpression} */ (visit(expression)).expressions;
 		return b.call('$.bind_this', value, set, get);
 	}
 
@@ -250,7 +247,7 @@ export function build_bind_this(expression, value, { state, visit }) {
  * @param {MemberExpression} expression
  */
 export function validate_binding(state, binding, expression) {
-	if (Array.isArray(binding.expression)) {
+	if (binding.expression.type === 'SequenceExpression') {
 		return;
 	}
 	// If we are referencing a $store.foo then we don't need to add validation
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 260e2f4e5f7c..f9c3292d1efb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, Pattern, Property, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST, TemplateNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { empty_comment, build_attribute_value } from './utils.js';
@@ -81,10 +81,9 @@ export function build_inline_component(node, expression, context) {
 			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
-			if (Array.isArray(attribute.expression)) {
-				const [get_expression, set_expression] = attribute.expression;
-				const get = /** @type {Expression} */ (context.visit(get_expression));
-				const set = /** @type {Expression} */ (context.visit(set_expression));
+			if (attribute.expression.type === 'SequenceExpression') {
+				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
+					.expressions;
 				const get_id = b.id(context.state.scope.generate('bind_get'));
 				const set_id = b.id(context.state.scope.generate('bind_set'));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 833b24e66abf..6ecfc55e43b7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -109,18 +109,16 @@ export function build_element_attributes(node, context) {
 			const binding = binding_properties[attribute.name];
 			if (binding?.omit_in_ssr) continue;
 
-			if (is_content_editable_binding(attribute.name)) {
-				content = Array.isArray(attribute.expression)
-					? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
+			const get =
+				attribute.expression.type === 'SequenceExpression'
+					? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
 					: /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (is_content_editable_binding(attribute.name)) {
+				content = get;
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
-				content = b.call(
-					'$.escape',
-					Array.isArray(attribute.expression)
-						? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
-						: /** @type {Expression} */ (context.visit(attribute.expression))
-				);
-			} else if (attribute.name === 'group' && !Array.isArray(attribute.expression)) {
+				content = b.call('$.escape', get);
+			} else if (attribute.name === 'group' && attribute.expression.type !== 'SequenceExpression') {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
 					node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value')
 				);
@@ -158,10 +156,6 @@ export function build_element_attributes(node, context) {
 					])
 				);
 			} else {
-				const attribute_expression = Array.isArray(attribute.expression)
-					? b.call(attribute.expression[0])
-					: attribute.expression;
-
 				attributes.push(
 					create_attribute(attribute.name, -1, -1, [
 						{
@@ -169,7 +163,7 @@ export function build_element_attributes(node, context) {
 							start: -1,
 							end: -1,
 							parent: attribute,
-							expression: attribute_expression,
+							expression: get,
 							metadata: {
 								expression: create_expression_metadata()
 							}
diff --git a/packages/svelte/src/compiler/types/legacy-nodes.d.ts b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
index 47c4dfdce6f2..0013f5c17a60 100644
--- a/packages/svelte/src/compiler/types/legacy-nodes.d.ts
+++ b/packages/svelte/src/compiler/types/legacy-nodes.d.ts
@@ -50,7 +50,7 @@ export interface LegacyBinding extends BaseNode {
 	/** The 'x' in `bind:x` */
 	name: string;
 	/** The y in `bind:x={y}` */
-	expression: Identifier | MemberExpression | [Expression, Expression];
+	expression: Identifier | MemberExpression | SequenceExpression;
 }
 
 export interface LegacyBody extends BaseElement {
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 893f126e730f..cc153b263a28 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -14,7 +14,8 @@ import type {
 	Pattern,
 	Program,
 	ChainExpression,
-	SimpleCallExpression
+	SimpleCallExpression,
+	SequenceExpression
 } from 'estree';
 import type { Scope } from '../phases/scope';
 
@@ -185,7 +186,7 @@ export namespace AST {
 		/** The 'x' in `bind:x` */
 		name: string;
 		/** The y in `bind:x={y}` */
-		expression: Identifier | MemberExpression | [Expression, Expression];
+		expression: Identifier | MemberExpression | SequenceExpression;
 		/** @internal */
 		metadata: {
 			binding_group_name: Identifier;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 70b4ac57c2fe..3079071fef40 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -606,7 +606,7 @@ declare module 'svelte/animate' {
 }
 
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression } from 'estree';
+	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
 	import type { Location } from 'locate-character';
 	/**
@@ -1047,7 +1047,7 @@ declare module 'svelte/compiler' {
 			/** The 'x' in `bind:x` */
 			name: string;
 			/** The y in `bind:x={y}` */
-			expression: Identifier | MemberExpression | [Expression, Expression];
+			expression: Identifier | MemberExpression | SequenceExpression;
 		}
 
 		/** A `class:` directive */

From 5f6b826acd7228cca578cb5a968b5e101eb472ba Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 17:34:17 -0500
Subject: [PATCH 12/23] fix

---
 .../phases/3-transform/client/visitors/shared/component.js    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 25b433e2ca93..78a24af44f87 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -168,7 +168,9 @@ export function build_component(node, component_name, context, anchor = context.
 					b.stmt(
 						b.call(
 							b.id('$.add_owner_effect'),
-							b.thunk(expression),
+							expression.type === 'SequenceExpression'
+								? expression.expressions[0]
+								: b.thunk(expression),
 							b.id(component_name),
 							is_ignored(node, 'ownership_invalid_binding') && b.true
 						)

From 0e62ec29872d5f94f0ee9ec86bfa51dbeb2165d2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 17:42:45 -0500
Subject: [PATCH 13/23] lint

---
 .../phases/3-transform/client/visitors/RegularElement.js  | 2 +-
 .../3-transform/client/visitors/shared/component.js       | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 088bca9e4a3b..40115564e6c7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -445,7 +445,7 @@ function setup_select_synchronization(value_binding, context) {
 
 	let bound = value_binding.expression;
 
-	if (Array.isArray(bound)) {
+	if (bound.type === 'SequenceExpression') {
 		return;
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 78a24af44f87..821f6638bb82 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST, TemplateNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
@@ -217,7 +217,11 @@ export function build_component(node, component_name, context, anchor = context.
 						push_prop(b.get(attribute.name, [b.return(expression)]));
 					}
 
-					const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
+					const assignment = b.assignment(
+						'=',
+						/** @type {Pattern} */ (expression),
+						b.id('$$value')
+					);
 					push_prop(
 						b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))])
 					);

From 68a3dfd4ee6e62260b424021e47a92b293faf8e9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 17:52:40 -0500
Subject: [PATCH 14/23] fix

---
 .../phases/3-transform/client/visitors/shared/component.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 821f6638bb82..78a66cd59adc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -219,7 +219,7 @@ export function build_component(node, component_name, context, anchor = context.
 
 					const assignment = b.assignment(
 						'=',
-						/** @type {Pattern} */ (expression),
+						/** @type {Pattern} */ (attribute.expression),
 						b.id('$$value')
 					);
 					push_prop(

From 1b0fd52b17d81d5cb791134112e0b0a18f253bdd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 17:56:12 -0500
Subject: [PATCH 15/23] move validation to visitor

---
 .../src/compiler/phases/1-parse/state/element.js | 16 ----------------
 .../phases/2-analyze/visitors/BindDirective.js   |  5 +++++
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index c017dca7d53b..cc146c3a8aaf 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -13,7 +13,6 @@ import { create_attribute, create_expression_metadata } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 import { list } from '../../../utils/string.js';
-import { parse_expression_at } from '../acorn.js';
 
 const regex_invalid_unquoted_attribute_value = /^(\/>|[\s"'=<>`])/;
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
@@ -526,21 +525,6 @@ function read_attribute(parser) {
 		}
 
 		value = read_attribute_value(parser);
-
-		// bind can use a getter/setter pair {a, b}, so the attribute parsing above will capture
-		// a SequenceExpression. To ensure this is handled correctly, we use wrap the expression
-		// again in square brackets and parse it again. This should ensure it's an ArrayExpression
-		// with two elements and if not we can throw an appropiate error
-		if (
-			name.startsWith('bind:') &&
-			!Array.isArray(value) &&
-			value.expression.type === 'SequenceExpression'
-		) {
-			if (value.expression.expressions.length !== 2) {
-				e.invalid_bind_directive(value);
-			}
-		}
-
 		end = parser.index;
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {
 		e.expected_token(parser.index, '=');
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 32d7490dc924..a95a0394c7b4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -129,6 +129,11 @@ export function BindDirective(node, context) {
 		if (node.name === 'group') {
 			e.bind_group_invalid_expression(node);
 		}
+
+		if (node.expression.expressions.length !== 2) {
+			e.invalid_bind_directive(node);
+		}
+
 		return;
 	}
 

From 7415cea592340580d721954166eae0c188611167 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:02:06 -0500
Subject: [PATCH 16/23] fix

---
 .../compiler/phases/2-analyze/visitors/BindDirective.js    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index a95a0394c7b4..9cb5a201792a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -130,6 +130,13 @@ export function BindDirective(node, context) {
 			e.bind_group_invalid_expression(node);
 		}
 
+		let i = node.start;
+		while (context.state.analysis.source[--i] !== '{') {
+			if (context.state.analysis.source[i] === '(') {
+				e.invalid_bind_directive(node);
+			}
+		}
+
 		if (node.expression.expressions.length !== 2) {
 			e.invalid_bind_directive(node);
 		}

From e10a28ccce209c03aa039632216ab232c5cbf122 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:03:06 -0500
Subject: [PATCH 17/23] no longer needed

---
 .../src/compiler/phases/1-parse/state/element.js      | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index cc146c3a8aaf..1a3a2c715401 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -513,17 +513,6 @@ function read_attribute(parser) {
 	let value = true;
 	if (parser.eat('=')) {
 		parser.allow_whitespace();
-		let value_start = 0;
-
-		// Validate the bind: value doesn't start with a paren
-		if (name.startsWith('bind:')) {
-			const start = parser.index;
-			parser.eat('{');
-			parser.allow_whitespace();
-			value_start = parser.index;
-			parser.index = start;
-		}
-
 		value = read_attribute_value(parser);
 		end = parser.index;
 	} else if (parser.match_regex(regex_starts_with_quote_characters)) {

From afee1d67f7721e4ce42a570fe464ead88f1c8489 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:08:58 -0500
Subject: [PATCH 18/23] fix

---
 .../src/compiler/phases/2-analyze/visitors/BindDirective.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 9cb5a201792a..37959c428141 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -130,7 +130,7 @@ export function BindDirective(node, context) {
 			e.bind_group_invalid_expression(node);
 		}
 
-		let i = node.start;
+		let i = /** @type {number} */ (node.expression.start);
 		while (context.state.analysis.source[--i] !== '{') {
 			if (context.state.analysis.source[i] === '(') {
 				e.invalid_bind_directive(node);

From acbd5cf538f8c26b842c40ea202675e31dc33495 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:11:17 -0500
Subject: [PATCH 19/23] parser changes are no longer needed

---
 .../svelte/src/compiler/phases/1-parse/state/element.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 1a3a2c715401..9082b76c4972 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -506,9 +506,6 @@ function read_attribute(parser) {
 	const colon_index = name.indexOf(':');
 	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
 
-	/** @type {Expression | null} */
-	let expression = null;
-
 	/** @type {true | AST.ExpressionTag | Array<AST.Text | AST.ExpressionTag>} */
 	let value = true;
 	if (parser.eat('=')) {
@@ -543,12 +540,15 @@ function read_attribute(parser) {
 
 		const first_value = value === true ? undefined : Array.isArray(value) ? value[0] : value;
 
+		/** @type {Expression | null} */
+		let expression = null;
+
 		if (first_value) {
 			const attribute_contains_text =
 				/** @type {any[]} */ (value).length > 1 || first_value.type === 'Text';
 			if (attribute_contains_text) {
 				e.directive_invalid_value(/** @type {number} */ (first_value.start));
-			} else if (expression === null) {
+			} else {
 				// TODO throw a parser error in a future version here if this `[ExpressionTag]` instead of `ExpressionTag`,
 				// which means stringified value, which isn't allowed for some directives?
 				expression = first_value.expression;

From e5a500ab0c952fa492a103becddf9e3459e04a9d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:22:07 -0500
Subject: [PATCH 20/23] simplify

---
 .../client/visitors/BindDirective.js          | 37 ++++++-------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 3c7f1a2ecb5f..1e528965113b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -1,4 +1,4 @@
-/** @import { CallExpression, Expression, MemberExpression, SequenceExpression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression, Pattern, SequenceExpression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
@@ -13,7 +13,7 @@ import { build_bind_this, validate_binding } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function BindDirective(node, context) {
-	const expression = node.expression;
+	const expression = /** @type {Expression} */ (context.visit(node.expression));
 	const property = binding_properties[node.name];
 
 	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
@@ -21,7 +21,7 @@ export function BindDirective(node, context) {
 	let get, set;
 
 	if (expression.type === 'SequenceExpression') {
-		[get, set] = /** @type {SequenceExpression} */ (context.visit(expression)).expressions;
+		[get, set] = expression.expressions;
 	} else {
 		if (
 			dev &&
@@ -37,20 +37,20 @@ export function BindDirective(node, context) {
 				)) &&
 			!is_ignored(node, 'binding_property_non_reactive')
 		) {
-			validate_binding(
-				context.state,
-				node,
-				/**@type {MemberExpression} */ (context.visit(expression))
-			);
+			validate_binding(context.state, node, expression);
 		}
 
-		get = b.thunk(/** @type {Expression} */ (context.visit(expression)));
+		get = b.thunk(expression);
 
 		/** @type {Expression | undefined} */
 		set = b.unthunk(
 			b.arrow(
 				[b.id('$$value')],
-				/** @type {Expression} */ (context.visit(b.assignment('=', expression, b.id('$$value'))))
+				/** @type {Expression} */ (
+					context.visit(
+						b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
+					)
+				)
 			)
 		);
 
@@ -171,7 +171,7 @@ export function BindDirective(node, context) {
 				break;
 
 			case 'this':
-				call = build_bind_this(expression, context.state.node, context);
+				call = build_bind_this(node.expression, context.state.node, context);
 				break;
 
 			case 'textContent':
@@ -221,21 +221,8 @@ export function BindDirective(node, context) {
 					);
 
 					if (value !== undefined) {
-						let group_expression;
-						if (Array.isArray(expression)) {
-							const get_id = b.id(context.state.scope.generate('bind_get'));
-
-							context.state.init.push(b.var(get_id, get));
-							group_expression = b.call(get_id);
-						} else {
-							group_expression = /** @type {Expression} */ (context.visit(expression));
-						}
-
 						group_getter = b.thunk(
-							b.block([
-								b.stmt(build_attribute_value(value, context).value),
-								b.return(group_expression)
-							])
+							b.block([b.stmt(build_attribute_value(value, context).value), b.return(expression)])
 						);
 					}
 				}

From f00a403cb1a5deb710e10a5e70b8c9bac2ebc8fd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:29:22 -0500
Subject: [PATCH 21/23] simplify

---
 .../3-transform/client/visitors/BindDirective.js  |  2 +-
 .../3-transform/server/visitors/shared/element.js | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 1e528965113b..f129e059f2a7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -1,4 +1,4 @@
-/** @import { CallExpression, Expression, MemberExpression, Pattern, SequenceExpression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression, Pattern } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 6ecfc55e43b7..93eda02fcf22 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -109,15 +109,16 @@ export function build_element_attributes(node, context) {
 			const binding = binding_properties[attribute.name];
 			if (binding?.omit_in_ssr) continue;
 
-			const get =
-				attribute.expression.type === 'SequenceExpression'
-					? b.call(/** @type {Expression} */ (context.visit(attribute.expression.expressions[0])))
-					: /** @type {Expression} */ (context.visit(attribute.expression));
+			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (expression.type === 'SequenceExpression') {
+				expression = b.call(expression.expressions[0]);
+			}
 
 			if (is_content_editable_binding(attribute.name)) {
-				content = get;
+				content = expression;
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
-				content = b.call('$.escape', get);
+				content = b.call('$.escape', expression);
 			} else if (attribute.name === 'group' && attribute.expression.type !== 'SequenceExpression') {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
 					node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value')
@@ -163,7 +164,7 @@ export function build_element_attributes(node, context) {
 							start: -1,
 							end: -1,
 							parent: attribute,
-							expression: get,
+							expression,
 							metadata: {
 								expression: create_expression_metadata()
 							}

From cda50c4ff3de5b2a3f1161681b35aa8db39b0597 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 19 Nov 2024 18:36:28 -0500
Subject: [PATCH 22/23] update messages

---
 .../98-reference/.generated/compile-errors.md | 14 +++++------
 .../messages/compile-errors/template.md       | 10 ++++----
 packages/svelte/src/compiler/errors.js        | 23 ++++++++++---------
 .../2-analyze/visitors/BindDirective.js       |  4 ++--
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 12403cf4ec1c..a363b053beae 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -87,7 +87,7 @@ Attribute values containing `{...}` must be enclosed in quote marks, unless the
 ### bind_invalid_expression
 
 ```
-Can only bind to an Identifier or MemberExpression
+Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
 ```
 
 ### bind_invalid_name
@@ -100,6 +100,12 @@ Can only bind to an Identifier or MemberExpression
 `bind:%name%` is not a valid binding. %explanation%
 ```
 
+### bind_invalid_parens
+
+```
+`bind:%name%={get, set}` must not have surrounding parentheses
+```
+
 ### bind_invalid_target
 
 ```
@@ -436,12 +442,6 @@ Imports of `svelte/internal/*` are forbidden. It contains private runtime code w
 The arguments keyword cannot be used within the template or at the top level of a component
 ```
 
-### invalid_bind_directive
-
-```
-Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
-```
-
 ### js_parse_error
 
 ```
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 3264e89e4051..a49918450b35 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -56,7 +56,7 @@
 
 ## bind_invalid_expression
 
-> Can only bind to an Identifier or MemberExpression
+> Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
 
 ## bind_invalid_name
 
@@ -64,6 +64,10 @@
 
 > `bind:%name%` is not a valid binding. %explanation%
 
+## bind_invalid_parens
+
+> `bind:%name%={get, set}` must not have surrounding parentheses
+
 ## bind_invalid_target
 
 > `bind:%name%` can only be used with %elements%
@@ -180,10 +184,6 @@
 
 > `<%name%>` does not support non-event attributes or spread attributes
 
-## invalid_bind_directive
-
-> Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
-
 ## js_parse_error
 
 > %message%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 0ca944822d03..8acd7e1d929d 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -706,12 +706,12 @@ export function bind_group_invalid_expression(node) {
 }
 
 /**
- * Can only bind to an Identifier or MemberExpression
+ * Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function bind_invalid_expression(node) {
-	e(node, "bind_invalid_expression", "Can only bind to an Identifier or MemberExpression");
+	e(node, "bind_invalid_expression", "Can only bind to an Identifier or MemberExpression or a `{get, set}` pair");
 }
 
 /**
@@ -725,6 +725,16 @@ export function bind_invalid_name(node, name, explanation) {
 	e(node, "bind_invalid_name", explanation ? `\`bind:${name}\` is not a valid binding. ${explanation}` : `\`bind:${name}\` is not a valid binding`);
 }
 
+/**
+ * `bind:%name%={get, set}` must not have surrounding parentheses
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function bind_invalid_parens(node, name) {
+	e(node, "bind_invalid_parens", `\`bind:${name}={get, set}\` must not have surrounding parentheses`);
+}
+
 /**
  * `bind:%name%` can only be used with %elements%
  * @param {null | number | NodeLike} node
@@ -1003,15 +1013,6 @@ export function illegal_element_attribute(node, name) {
 	e(node, "illegal_element_attribute", `\`<${name}>\` does not support non-event attributes or spread attributes`);
 }
 
-/**
- * Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces
- * @param {null | number | NodeLike} node
- * @returns {never}
- */
-export function invalid_bind_directive(node) {
-	e(node, "invalid_bind_directive", "Bind directive getter/setter values (`bind:thing={ getter, setter }`) must be two JavaScript expressions separated by a single comma and enclosed in curly braces");
-}
-
 /**
  * %message%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 37959c428141..b06236538008 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -133,12 +133,12 @@ export function BindDirective(node, context) {
 		let i = /** @type {number} */ (node.expression.start);
 		while (context.state.analysis.source[--i] !== '{') {
 			if (context.state.analysis.source[i] === '(') {
-				e.invalid_bind_directive(node);
+				e.bind_invalid_parens(node, node.name);
 			}
 		}
 
 		if (node.expression.expressions.length !== 2) {
-			e.invalid_bind_directive(node);
+			e.bind_invalid_expression(node);
 		}
 
 		return;

From 0a7608ef77e1f2c6ce9db65ea0338c481ecd036f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 8 Dec 2024 06:58:16 -0500
Subject: [PATCH 23/23] docs

---
 .../docs/03-template-syntax/11-bind.md        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
index fe3cf727e285..90046c8c456d 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/11-bind.md
@@ -12,10 +12,34 @@ The general syntax is `bind:property={expression}`, where `expression` is an _lv
 <input bind:value />
 ```
 
+
 Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.
 
 Most bindings are _two-way_, meaning that changes to the value will affect the element and vice versa. A few bindings are _readonly_, meaning that changing their value will have no effect on the element.
 
+## Function bindings
+
+You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
+
+```svelte
+<input bind:value={
+	() => value,
+	(v) => value = v.toLowerCase()}
+/>
+```
+
+In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
+
+```svelte
+<div
+	bind:clientWidth={null, redraw}
+	bind:clientHeight={null, redraw}
+>...</div>
+```
+
+> [!NOTE]
+> Function bindings are available in Svelte 5.9.0 and newer.
+
 ## `<input bind:value>`
 
 A `bind:value` directive on an `<input>` element binds the input's `value` property: