fix: key block can have its own block scope (#2768)

#2762

Author: jasonlyu123

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

@@ -3,18 +3,18 @@ import { BaseNode } from '../../interfaces';
 import { isImplicitlyClosedBlock, withTrailingPropertyAccess } from '../utils/node-utils';
 
 /**
- * {#key expr}content{/key}   --->   expr; content
+ * {#key expr}content{/key}   --->   expr; {content}
  */
 export function handleKey(str: MagicString, keyBlock: BaseNode): void {
-    // {#key expr}   ->   expr;
+    // {#key expr}   ->   expr;{
     str.overwrite(keyBlock.start, keyBlock.expression.start, '', { contentOnly: true });
     const expressionEnd = withTrailingPropertyAccess(str.original, keyBlock.expression.end);
     const end = str.original.indexOf('}', expressionEnd);
-    str.overwrite(expressionEnd, end + 1, '; ');
+    str.overwrite(expressionEnd, end + 1, '; {');
 
-    // {/key}   ->
+    // {/key}   -> }
     const endKey = str.original.lastIndexOf('{', keyBlock.end - 1);
     if (!isImplicitlyClosedBlock(endKey, keyBlock)) {
-        str.overwrite(endKey, keyBlock.end, '', { contentOnly: true });
+        str.overwrite(endKey, keyBlock.end, '}', { contentOnly: true });
     }
 }

packages/svelte2tsx/test/htmlx2jsx/samples/editing-key/expectedv2.js

@@ -1 +1,3 @@
-''.;
+''.; {
+    
+}

packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expectedv2.js

@@ -1,8 +1,9 @@
-value; 
+value; {
      { svelteHTML.createElement("p", {});  }
-
-$store; 
+}
+$store; {
      { svelteHTML.createElement("p", {});  }
-
-expr.obj; 
-     { svelteHTML.createElement("p", {});  }
+}
+expr.obj; {
+     { svelteHTML.createElement("p", {});  }
+}

packages/svelte2tsx/test/htmlx2jsx/samples/nested-snippet.v5/expectedv2.js

@@ -8,10 +8,10 @@ if(true){
 
 }
 
-key; 
+key; {
       const foo/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {};return __sveltets_2_any(0)};;__sveltets_2_ensureSnippet(foo());
 
-
+}
 
   const snippetBlock/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {
       const foo/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {};return __sveltets_2_any(0)};  const foo2/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {};return __sveltets_2_any(0)};;__sveltets_2_ensureSnippet(foo());

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

@@ -14,7 +14,7 @@ try { const $$_value = await (foo as Promise<void>);{ const result: any = $$_val
 
 }}
 
-item as string;  
+item as string; { }
 
  const foo/*Ωignore_positionΩ*/ = (bar: string)/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => { };return __sveltets_2_any(0)};