Repository: sveltejs/svelte (JavaScript)
Date: 2019-10-19 05:45:46+00:00
Task type: Bug Fix

Issue:
bind:this fails with store
**Describe the bug**
Using `bind:this` and a writable store together doesn't provide expected behavior.

**Logs**
No error log.

**To Reproduce**
Can be reproduced in REPL:

```
<script>
import { writable } from 'svelte/store'
let ref = writable(null)
</script>

<h1 bind:this={$ref}>HELLO</h1>
<i>{$ref ? $ref.innerHTML : ''}</i>
```

**Expected behavior**
Expect to see two lines of "HELLO". The second "HELLO" inside `<i>` didn't show up as expected.

**Severity**
Can be worked around.

**Work around**
```
<script>
import { writable } from 'svelte/store'
let ref = writable({})
</script>

<h1 bind:this={$ref.el}>HELLO</h1>
<i>{$ref.el ? $ref.el.innerHTML : ''}</i>
```



Issue discussion:
This looks to be fixed by

```diff
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index ee24fc70..042a755f 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -777,7 +777,7 @@ export default class Component {
 		}
 
 		if (name[0] === '$' && name[1] !== '$') {
-			return x`${name.slice(1)}.set(${name})`;
+			return x`${name.slice(1)}.set(${value || name})`;
 		}
 
 		if (
```

but I'm now wondering what else with stores might be fixed by this, as this change isn't specific to `bind:this` at all.

Solution patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Allow exiting a reactive block early with `break $` ([#2828](https://github.com/sveltejs/svelte/issues/2828))
 * Check attributes have changed before setting them to avoid image flicker ([#3579](https://github.com/sveltejs/svelte/pull/3579))
 * Fix generating malformed code for `{@debug}` tags with no dependencies ([#3588](https://github.com/sveltejs/svelte/issue/3588))
+* Fix `bind:this` binding to a store ([#3591](https://github.com/sveltejs/svelte/issue/3591))
 * Use safer `HTMLElement` check before extending class ([#3608](https://github.com/sveltejs/svelte/issue/3608))
 * Add `location` as a known global ([#3619](https://github.com/sveltejs/svelte/pull/3619))
 * Fix tracking of dependencies of compound assignments in reactive statements ([#3634](https://github.com/sveltejs/svelte/issues/3634))
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -764,7 +764,7 @@ export default class Component {
 		}
 
 		if (name[0] === '$' && name[1] !== '$') {
-			return x`${name.slice(1)}.set(${name})`;
+			return x`${name.slice(1)}.set(${value || name})`;
 		}
 
 		if (


Test patch:
diff --git a/test/runtime/samples/binding-this-store/_config.js b/test/runtime/samples/binding-this-store/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-this-store/_config.js
@@ -0,0 +1,4 @@
+export default {
+	skip_if_ssr: true,
+	html: `<div>object</div>`
+};
diff --git a/test/runtime/samples/binding-this-store/main.svelte b/test/runtime/samples/binding-this-store/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-this-store/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable();
+</script>
+
+<div bind:this={$foo}>{typeof $foo}</div>