fix: prevent error with bind:this={get, set} (#2781)

This transform bind:this={get, set} with a similar method as bind:this={ele}, but by invoking the set function. The get function is ignored.

Author: jasonlyu123

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Binding.ts

@@ -60,6 +60,22 @@ export function handleBinding(
     isSvelte5Plus: boolean
 ): void {
     const isGetSetBinding = attr.expression.type === 'SequenceExpression';
+    const [get, set] = isGetSetBinding ? (attr.expression as SequenceExpression).expressions : [];
+
+    // bind this
+    if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
+        // bind:this is effectively only works bottom up - the variable is updated by the element, not
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
+        // the value becomes null, but we don't add it to the clause because it would introduce
+        // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
+        if (isGetSetBinding) {
+            element.appendToStartEnd(['(', [set.start, getEnd(set)], `)(${element.name});`]);
+        } else {
+            appendOneWayBinding(attr, ` = ${element.name}`, element);
+        }
+        return;
+    }
 
     if (!isGetSetBinding) {
         // bind group on input
@@ -69,17 +85,6 @@ export function handleBinding(
             return;
         }
 
-        // bind this
-        if (attr.name === 'this' && supportsBindThis.includes(parent.type)) {
-            // bind:this is effectively only works bottom up - the variable is updated by the element, not
-            // the other way round. So we check if the instance is assignable to the variable.
-            // Note: If the component unmounts (it's inside an if block, or svelte:component this={null},
-            // the value becomes null, but we don't add it to the clause because it would introduce
-            // worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
-            appendOneWayBinding(attr, ` = ${element.name}`, element);
-            return;
-        }
-
         // one way binding
         if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
             appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
@@ -125,7 +130,6 @@ export function handleBinding(
                     ]
                 ];
 
-    const [get, set] = isGetSetBinding ? (attr.expression as SequenceExpression).expressions : [];
     const value: TransformationArray | undefined = isShorthand
         ? preserveBind && element instanceof Element
             ? [rangeWithTrailingPropertyAccess(str.original, attr.expression)]

packages/svelte2tsx/test/htmlx2jsx/samples/.binding-get-set.v5/expectedv2.js renamed to packages/svelte2tsx/test/htmlx2jsx/samples/binding-get-set.v5/expectedv2.js

@@ -0,0 +1,5 @@
+ { const $$_div0 = svelteHTML.createElement("div", { });(set)($$_div0); }
+ { const $$_div0 = svelteHTML.createElement("div", { });(new_v => v = new_v)($$_div0); }
+
+ { const $$_tupnI0C = __sveltets_2_ensureComponent(Input); const $$_tupnI0 = new $$_tupnI0C({ target: __sveltets_2_any(), props: { }});(set)($$_tupnI0); Input}
+ { const $$_tupnI0C = __sveltets_2_ensureComponent(Input); const $$_tupnI0 = new $$_tupnI0C({ target: __sveltets_2_any(), props: { }});(new_v => v = new_v)($$_tupnI0); Input}

packages/svelte2tsx/test/htmlx2jsx/samples/.binding-get-set.v5/input.svelte renamed to packages/svelte2tsx/test/htmlx2jsx/samples/binding-get-set.v5/input.svelte

@@ -0,0 +1,5 @@
+<div bind:this={null, set}></div>
+<div bind:this={null, new_v => v = new_v}></div>
+
+<Input bind:this={null, set}></Input>
+<Input bind:this={null, new_v => v = new_v}></Input>