fix(instrumenter): parse svelte template expressions as TS when file uses lang="ts" (#6024)

Author: jaspervdveen

e2e/test/svelte-ts-vitest/src/App.spec.ts

@@ -33,8 +33,7 @@ describe("App.svelte", () => {
     let result = 0;
     loop(5, (n: any) => (result += n));
     expect(result).toEqual(15);
-  });
-  
+  });  
 })
 
 

e2e/test/svelte-ts-vitest/src/App.svelte

@@ -22,14 +22,16 @@
   }
 </script>
 
-<script>
+<script lang="ts">
+  interface User { name: string; age: number }
   let hits = 0;
+  let user: User | null = { name: 'world', age: 18 };
 </script>
 
 <main>
-  <p>Hello world!</p>
+  <p>Hello {user!.name}!</p>
   <p>1 + 2 = {sum(1, 2)}</p>
-  <p>Over legal drinking age: {isOldEnough(18)}</p>
+  <p>Over legal drinking age: {isOldEnough(user!.age)}</p>
   <button on:click={() => hits++}>Hits {hits}</button>
   <button on:click={() => (hits += 10)}>Add 10 ({hits + 10})</button>
 </main>

e2e/test/svelte-ts-vitest/verify/verify.js.snap

@@ -4,19 +4,19 @@ exports[`Verify stryker has ran correctly should report correct score 1`] = `
 Object {
   "compileErrors": 0,
   "ignored": 0,
-  "killed": 13,
-  "mutationScore": 64,
-  "mutationScoreBasedOnCoveredCode": 84.21052631578947,
+  "killed": 15,
+  "mutationScore": 66.66666666666666,
+  "mutationScoreBasedOnCoveredCode": 85.71428571428571,
   "noCoverage": 6,
   "pending": 0,
   "runtimeErrors": 0,
   "survived": 3,
   "timeout": 3,
-  "totalCovered": 19,
-  "totalDetected": 16,
+  "totalCovered": 21,
+  "totalDetected": 18,
   "totalInvalid": 0,
-  "totalMutants": 25,
+  "totalMutants": 27,
   "totalUndetected": 9,
-  "totalValid": 25,
+  "totalValid": 27,
 }
 `;

packages/instrumenter/src/parsers/svelte-parser.ts

@@ -198,6 +198,11 @@ function remapScriptLocations(
   const scriptRanges = [moduleScriptRange, ...templateRanges]
     .filter(notEmpty)
     .sort((a, b) => a.start - b.start);
+  const expressionFormat = [...scriptMap.values()].some(
+    (s) => s.attributes.lang === 'ts',
+  )
+    ? AstFormat.TS
+    : AstFormat.JS;
   let offset = 0;
   let newModuleScriptRange: TemplateScriptRange | undefined;
   const newScriptRanges: TemplateScriptRange[] = scriptRanges.map((range) => {
@@ -218,12 +223,12 @@ function remapScriptLocations(
       }
       return scriptRange;
     } else {
-      // Template script is always JS
+      // Template expressions use the same format as the file's script lang
       return {
         start,
         end: start + script.length,
         isExpression: range.isExpression,
-        format: AstFormat.JS,
+        format: range.isExpression ? expressionFormat : AstFormat.JS,
       };
     }
   });

packages/instrumenter/test/unit/parsers/svelte-parser.spec.ts

@@ -508,5 +508,25 @@ describe('svelte-parser', () => {
       expect(ast.root.additionalScripts).lengthOf(1);
       expect(ast.root.additionalScripts[0].ast.root).eq(eventHandlerAst.root);
     });
+
+    it('should parse a typescript expression as TS when the svelte file has a lang="ts" script', async () => {
+      // Arrange
+      const tsExpression = '"test" as string';
+      const tsAst = createTSAst({ rawContent: tsExpression });
+      const svelte = `<script lang="ts"></script><div>{${tsExpression}}</div>`;
+      contextStub.parse.resolves(tsAst);
+
+      // Act
+      const ast = await parse(svelte, 'index.svelte', contextStub);
+
+      // Assert
+      sinon.assert.calledWithExactly(
+        contextStub.parse,
+        tsExpression,
+        'index.svelte',
+        AstFormat.TS,
+      );
+      expect(ast.root.additionalScripts[0].ast.root).eq(tsAst.root);
+    });
   });
 });