feat: allow typescript to know used variables in template

Author: SomaticIT

src/transformers/typescript.ts

@@ -1,6 +1,7 @@
 import { dirname, isAbsolute, join } from 'path';
 
 import ts from 'typescript';
+import { compile } from 'svelte/compiler';
 
 import { throwTypescriptError } from '../modules/errors';
 import type { Transformer, Options } from '../types';
@@ -53,6 +54,45 @@ const importTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
   return (node) => ts.visitNode(node, visit);
 };
 
+function stripTags(markup: string): string {
+  return markup
+    .replace(/<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi, '')
+    .replace(/<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi, '');
+}
+
+function appendVarsToCode({
+  content,
+  markup,
+  filename,
+}: {
+  content: string;
+  markup?: string;
+  filename?: string;
+}): string {
+  if (!markup) return content;
+
+  const { vars } = compile(stripTags(markup), {
+    generate: false,
+    varsReport: 'full',
+    errorMode: 'warn',
+    filename,
+  });
+
+  return `${content}\nlet $$$$$$$$ = [${vars.map((v) => v.name).join(',')}];`;
+}
+
+function stripVarsFromCode({
+  compiledCode,
+  markup,
+}: {
+  compiledCode: string;
+  markup?: string;
+}): string {
+  return markup
+    ? compiledCode.slice(0, compiledCode.indexOf('let $$$$$$$$'))
+    : compiledCode;
+}
+
 export function loadTsconfig(
   compilerOptionsJSON: any,
   filename: string,
@@ -103,6 +143,7 @@ export function loadTsconfig(
 const transformer: Transformer<Options.Typescript> = ({
   content,
   filename,
+  markup,
   options = {},
 }) => {
   // default options
@@ -140,16 +181,14 @@ const transformer: Transformer<Options.Typescript> = ({
   }
 
   const {
-    outputText: code,
+    outputText: compiledCode,
     sourceMapText: map,
     diagnostics,
-  } = ts.transpileModule(content, {
+  } = ts.transpileModule(appendVarsToCode({ content, markup, filename }), {
     fileName: filename,
     compilerOptions,
     reportDiagnostics: options.reportDiagnostics !== false,
-    transformers: {
-      before: [importTransformer],
-    },
+    transformers: markup ? {} : { before: [importTransformer] },
   });
 
   if (diagnostics.length > 0) {
@@ -167,6 +206,8 @@ const transformer: Transformer<Options.Typescript> = ({
     }
   }
 
+  const code = stripVarsFromCode({ compiledCode, markup });
+
   return {
     code,
     map,

test/fixtures/TypeScriptImports.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+    import { flip } from "svelte/animate";
+    import Nested from "./Nested.svelte";
+    import { hello } from "./script";
+    import { AValue, AType } from "./types";
+    const ui = { MyNested: Nested };
+    const val: AType = "test1";
+    const prom: Promise<AType> = Promise.resolve("test2");
+    const arr: AType[] = ["test1", "test2"];
+    const isTest1 = (v: AType) => v === "test1";
+    const obj = {
+        fn: () => "test",
+        val: "test1" as const
+    };
+    let inputVal: string;
+    const action = (node: Element, options: { id: string; }) => { node.id = options.id; };
+    const action2 = (node: Element) => { node.classList.add("test"); };
+    let nested: Nested;
+    
+    let scrollY = 500;
+    let innerWidth = 500;
+    
+    const duration = 200;
+    function onKeyDown(e: KeyboardEvent): void {
+        e.preventDefault();
+    }
+</script>
+
+<style>
+    .value { color: #ccc; }
+</style>
+
+<svelte:window on:keydown={onKeyDown} {scrollY} bind:innerWidth />
+<svelte:body on:keydown={onKeyDown} />
+
+<svelte:head>
+    <title>Title: {val}</title>
+</svelte:head>
+
+<div>
+    <Nested let:var1 let:var2={var3}>
+        <Nested bind:this={nested} />
+        <Nested {...obj} />
+        <Nested {...{ var1, var3 }} />
+
+        <svelte:fragment slot="slot1" let:var4={var5}>
+            <Nested {...{ var5 }} />
+        </svelte:fragment>
+
+        <div slot="slot2" let:var6={var7}>
+            <Nested {...{ var7 }} />
+        </div>
+
+        <div slot="slot3">
+            <Nested {...{ val }} />
+        </div>
+    </Nested>
+
+    <svelte:component this={ui.MyNested} {val} on:keydown={onKeyDown} bind:inputVal />
+
+    <p class:value={!!inputVal}>{hello}</p>
+    <input bind:value={inputVal} use:action={{ id: val }} use:action2 />
+
+    {#if AValue && val}
+        <p class="value" transition:fly={{ duration }}>There is a value: {AValue}</p>
+    {/if}
+
+    {#if val && isTest1(val) && AValue && true && "test"}
+        <p class="value">There is a value: {AValue}</p>
+    {:else if obj.val && obj.fn() && isTest1(obj.val)}
+        <p class="value">There is a value: {AValue}</p>
+    {:else}
+        Else
+    {/if}
+
+    {#each arr as item (item)}
+        <p animate:flip={{ duration }}>{item}</p>
+    {/each}
+
+    {#each arr as item}
+        <p>{item}</p>
+    {:else}
+        <p>No items</p>
+    {/each}
+
+    {#await prom}
+        Loading...
+    {:then value} 
+        <input type={val} {value} on:input={e => inputVal = e.currentTarget.value} />
+    {:catch err}
+        <p>Error: {err}</p>
+    {/await}
+
+    {#await prom then value}
+        <p>{value}</p>
+    {/await}
+
+    {#key val}
+        <p>Keyed {val}</p>
+    {/key}
+
+    <slot name="slot0" {inputVal}>
+        <p>{inputVal}</p>
+    </slot>
+
+    {@html val}
+    {@debug val, inputVal}
+</div>

test/fixtures/TypeScriptImportsModule.svelte

@@ -0,0 +1,9 @@
+<script lang="ts" context="module">
+    import { AValue, AType } from "./types";
+</script>
+
+<script lang="ts">
+    const val: AType = "test1";
+</script>
+
+{val} {AValue}

test/transformers/typescript.test.ts

@@ -111,6 +111,24 @@ describe('transformer - typescript', () => {
       return expect(code).toContain(getFixtureContent('script.js'));
     });
 
+    it('should strip unused and type imports', async () => {
+      const tpl = getFixtureContent('TypeScriptImports.svelte');
+
+      const opts = sveltePreprocess({ typescript: { tsconfigFile: false } });
+      const { code } = await preprocess(tpl, opts);
+
+      return expect(code).toContain(`import { AValue } from "./types";`);
+    });
+
+    it('should strip unused and type imports in context="module" tags', async () => {
+      const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
+
+      const opts = sveltePreprocess({ typescript: { tsconfigFile: false } });
+      const { code } = await preprocess(tpl, opts);
+
+      return expect(code).toContain(`import { AValue } from "./types";`);
+    });
+
     it('supports extends field', () => {
       const { options } = loadTsconfig({}, getTestAppFilename(), {
         tsconfigFile: './test/fixtures/tsconfig.extends1.json',