fix: take type annotations into account when transforming one-way bindings (#2283)

#2277

Author: dummdidumm

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

@@ -1,5 +1,10 @@
 import MagicString from 'magic-string';
-import { rangeWithTrailingPropertyAccess, TransformationArray } from '../utils/node-utils';
+import {
+    getEnd,
+    isTypescriptNode,
+    rangeWithTrailingPropertyAccess,
+    TransformationArray
+} from '../utils/node-utils';
 import { BaseDirective, BaseNode } from '../../interfaces';
 import { Element } from './Element';
 import { InlineComponent } from './InlineComponent';
@@ -67,26 +72,20 @@ export function handleBinding(
         // 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.
-        element.appendToStartEnd([
-            [attr.expression.start, attr.expression.end],
-            ` = ${element.name};`
-        ]);
+        appendOneWayBinding(attr, ` = ${element.name}`, element);
         return;
     }
 
     // one way binding
     if (oneWayBindingAttributes.has(attr.name) && element instanceof Element) {
-        element.appendToStartEnd([
-            [attr.expression.start, attr.expression.end],
-            `= ${element.name}.${attr.name};`
-        ]);
+        appendOneWayBinding(attr, `= ${element.name}.${attr.name}`, element);
         return;
     }
 
     // one way binding whose property is not on the element
     if (oneWayBindingAttributesNotOnElement.has(attr.name) && element instanceof Element) {
         element.appendToStartEnd([
-            [attr.expression.start, attr.expression.end],
+            [attr.expression.start, getEnd(attr.expression)],
             `= ${surroundWithIgnoreComments(
                 `null as ${oneWayBindingAttributesNotOnElement.get(attr.name)}`
             )};`
@@ -127,3 +126,21 @@ export function handleBinding(
         element.addProp(name, value);
     }
 }
+
+function appendOneWayBinding(
+    attr: BaseDirective,
+    assignment: string,
+    element: Element | InlineComponent
+) {
+    const expression = attr.expression;
+    const end = getEnd(expression);
+    const hasTypeAnnotation = expression.typeAnnotation || isTypescriptNode(expression);
+    const array: TransformationArray = [
+        [expression.start, end],
+        assignment + (hasTypeAnnotation ? '' : ';')
+    ];
+    if (hasTypeAnnotation) {
+        array.push([end, expression.end], ';');
+    }
+    element.appendToStartEnd(array);
+}

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

@@ -1,6 +1,6 @@
 import MagicString from 'magic-string';
 import { BaseNode } from '../../interfaces';
-import { transform, TransformationArray } from '../utils/node-utils';
+import { getEnd, transform, TransformationArray } from '../utils/node-utils';
 
 /**
  * Transform #each into a for-of loop
@@ -74,10 +74,3 @@ export function handleEach(str: MagicString, eachBlock: BaseNode): void {
         });
     }
 }
-
-/**
- * Get the end of the node, excluding the type annotation
- */
-function getEnd(node: any) {
-    return node.typeAnnotation?.start ?? node.end;
-}

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

@@ -101,8 +101,13 @@ export function handleSnippet(
             typeAnnotation + ' = ('
         ];
 
+        // context was the first iteration in a .next release, remove at some point
         if (snippetBlock.context) {
             transforms.push([snippetBlock.context.start, snippetBlock.context.end]);
+        } else if (snippetBlock.parameters?.length) {
+            const start = snippetBlock.parameters[0].start;
+            const end = snippetBlock.parameters.at(-1).end;
+            transforms.push([start, end]);
         }
 
         transforms.push(') => {');

packages/svelte2tsx/src/htmlxtojsx_v2/utils/node-utils.ts

@@ -226,3 +226,18 @@ export function rangeWithTrailingPropertyAccess(
 ): [start: number, end: number] {
     return [node.start, withTrailingPropertyAccess(originalText, node.end)];
 }
+
+/**
+ * Get the end of the node, excluding the type annotation
+ */
+export function getEnd(node: any) {
+    return isTypescriptNode(node) ? node.expression.end : node.typeAnnotation?.start ?? node.end;
+}
+
+export function isTypescriptNode(node: any) {
+    return (
+        node.type === 'TSAsExpression' ||
+        node.type === 'TSSatisfiesExpression' ||
+        node.type === 'TSNonNullExpression'
+    );
+}

packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expected-svelte5.js

@@ -16,10 +16,12 @@ try { const $$_value = await (foo as Promise<void>);{ const result: any = $$_val
 
 item as string;  
 
- var foo/*Ωignore_startΩ*/: import('svelte').Snippet<string>/*Ωignore_endΩ*/ = (bar: string) => { return __sveltets_2_any(0)};
+ var foo/*Ωignore_startΩ*/: import('svelte').Snippet<[ string]>/*Ωignore_endΩ*/ = (bar: string) => { return __sveltets_2_any(0)};
 
 ;__sveltets_2_ensureSnippet(foo(bar as string));
 
  { svelteHTML.createElement("button", { "onclick":(e: Event) => {e as any},});  }
  { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  "attr":attr as boolean,}});}
- { svelteHTML.createElement("label", { "id":ok!,}); }
+ { svelteHTML.createElement("label", { "id":ok!,}); }
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  }});x = $$_tnenopmoC0 as any;}
+ { const $$_div0 = svelteHTML.createElement("div", {  });x= $$_div0.clientWidth as any;}

packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/input.svelte

@@ -31,3 +31,5 @@
 <button onclick={(e: Event) => {e as any}}>click</button>
 <Component attr={attr as boolean} />
 <label id={ok!}></label>
+<Component bind:this={x as any} />
+<div bind:clientWidth={x as any} />