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] 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 94c1146ac1..2c54b0e48b 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 d9077c520a..7b95008712 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 bbd6ad6f53..d047d10637 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 9fb559a754..f99f21494c 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 74b72e84c2..426e5044a7 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 f86e5c3af1..ac6da48d3d 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 887d09a29d..db506ada3b 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 8ab25db193..f43f5f899b 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 26758a52c1..b54c36ee5b 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 074683431f..84062a1cfa 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 dfc47de58a..7cbec56e17 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 7a2530386c..6c804b03ac 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 4b28870b54..f45b2e0416 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>