fix: correctly handle HTML between implicit snippet props (#2450)

The transformation util was wrong: It did not stop moving content between transformations that were after the end marker #2441
sveltejs · Jul 30, 2024 · 88d7832 · 88d7832
1 parent d9c48ab
commit 88d7832
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/utils/node-utils.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/utils/node-utils.ts
@@ -83,12 +83,14 @@ export function transform(
 
     let removeStart = start;
     const sortedMoves = [...moves].sort((t1, t2) => t1[0] - t2[0]);
+    // Remove everything between the transformations up until the end position
     for (const transformation of sortedMoves) {
         if (removeStart < transformation[0]) {
             if (
                 deletePos !== moves.length &&
                 removeStart > deleteDest &&
-                !(removeStart < end && transformation[0] >= end)
+                removeStart < end &&
+                transformation[0] < end
             ) {
                 str.move(removeStart, transformation[0], end);
             }

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/expectedv2.js
@@ -25,19 +25,29 @@
 
  Component}
 
- { const $$_tsiL0C = __sveltets_2_ensureComponent(List); const $$_tsiL0 = new $$_tsiL0C({ target: __sveltets_2_any(), props: { 
-	"data":[1, 2, 3],row:(item) => { async ()/*Ωignore_positionΩ*/ => {
+ { const $$_tsiL0C = __sveltets_2_ensureComponent(List); const $$_tsiL0 = new $$_tsiL0C({ target: __sveltets_2_any(), props: { "data":[1, 2, 3],row:(item) => { async ()/*Ωignore_positionΩ*/ => {
 		item;
 	};return __sveltets_2_any(0)},await_inside:() => { async ()/*Ωignore_positionΩ*/ => {
 		   { const $$_value = await (foo);{ const bar = $$_value; bar;}}
 	};return __sveltets_2_any(0)},}});/*Ωignore_startΩ*/const {row, await_inside} = $$_tsiL0.$$prop_def;/*Ωignore_endΩ*/
 
+
  List}
 
  { const $$_tsiL0C = __sveltets_2_ensureComponent(List); new $$_tsiL0C({ target: __sveltets_2_any(), props: {children:() => { return __sveltets_2_any(0); },}});
 
  List}
 
+ { const $$_tsiL0C = __sveltets_2_ensureComponent(List); const $$_tsiL0 = new $$_tsiL0C({ target: __sveltets_2_any(), props: { children:() => { return __sveltets_2_any(0); },"data":[1, 2, 3],row1:(item) => { async ()/*Ωignore_positionΩ*/ => {
+		item;
+	};return __sveltets_2_any(0)},row2:(item) => { async ()/*Ωignore_positionΩ*/ => {
+		item;
+	};return __sveltets_2_any(0)},}});/*Ωignore_startΩ*/const {row1, row2} = $$_tsiL0.$$prop_def;/*Ωignore_endΩ*/
+
+	 { svelteHTML.createElement("p", {});   }
+
+ List}
+
 ;__sveltets_2_ensureSnippet(children());
 
  const jsDoc/*Ωignore_positionΩ*/ = (/**@type {number}*/a)/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/input.svelte
@@ -38,6 +38,16 @@
 	implicit children
 </List>
 
+<List data={[1, 2, 3]}>
+	{#snippet row1(item)}
+		{item}
+	{/snippet}
+	<p>html between snippets</p>
+	{#snippet row2(item)}
+		{item}
+	{/snippet}
+</List>
+
 {@render children()}
 
 {#snippet jsDoc(/**@type {number}*/a)}