From 6afaf75a378d8514c3d5c60716c600bb402d3de5 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Thu, 22 Feb 2024 07:58:33 -0500
Subject: [PATCH] fix: synchronise element bindings (#10512)

fixes #10511
We used the animation frame dance previously where the `$effect` timing was slightly different and did not wait on its children before rerunning. With that changed now everything false into place nicely.

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/quiet-berries-end.md               |  5 ++++
 packages/svelte/src/internal/client/render.js |  8 +++----
 .../_config.js                                | 13 +++++++++++
 .../binding-width-height-this-timing/log.js   |  2 ++
 .../main.svelte                               | 23 +++++++++++++++++++
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/quiet-berries-end.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte

diff --git a/.changeset/quiet-berries-end.md b/.changeset/quiet-berries-end.md
new file mode 100644
index 0000000000..155b7915f8
--- /dev/null
+++ b/.changeset/quiet-berries-end.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: tweak initial `bind:clientWidth/clientHeight/offsetWidth/offsetHeight` update timing
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index b3a048183b..97cb748bae 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -970,11 +970,11 @@ export function bind_resize_observer(dom, type, update) {
  * @param {(size: number) => void} update
  */
 export function bind_element_size(dom, type, update) {
-	// We need to wait a few ticks to be sure that the element has been inserted and rendered
-	// The alternative would be a mutation observer on the document but that's way to expensive
-	requestAnimationFrame(() => requestAnimationFrame(() => update(dom[type])));
 	const unsub = resize_observer_border_box.observe(dom, () => update(dom[type]));
-	render_effect(() => unsub);
+	effect(() => {
+		untrack(() => update(dom[type]));
+		return unsub;
+	});
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js
new file mode 100644
index 0000000000..5df9ca4ba2
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../assert';
+import { log } from './log.js';
+
+export default test({
+	async test({ assert }) {
+		await new Promise((fulfil) => setTimeout(fulfil, 0));
+
+		assert.deepEqual(log, [
+			[false, 0, 0],
+			[true, 100, 100]
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js
new file mode 100644
index 0000000000..d3df521f4d
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/log.js
@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];
diff --git a/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte
new file mode 100644
index 0000000000..7437bbc229
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/binding-width-height-this-timing/main.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { log } from './log.js';
+
+	let w = 0;
+	let h = 0;
+
+  /** @type {HTMLElement} */
+	let div;
+
+	$: {
+		log.push([!!div, w, h]);
+	}
+</script>
+
+<div bind:this={div} bind:clientWidth={w} bind:clientHeight={h} class="box"></div>
+
+<style>
+	.box {
+		width: 100px;
+		height: 100px;
+		background: #ff3e00;
+	}
+</style>