From 12c11573492eefe036109c32a0fbc2fe04a13a37 Mon Sep 17 00:00:00 2001
From: Maxime LUCE <maxime@touchify.co>
Date: Wed, 7 Apr 2021 13:05:48 +0200
Subject: [PATCH 01/22] feat: pass source markup to transformers (if provided)

---
 src/autoProcess.ts                     | 15 ++++++++++++---
 src/modules/markup.ts                  |  9 ++++++++-
 src/modules/tagInfo.ts                 |  2 ++
 src/processors/typescript.ts           |  2 ++
 src/types/index.ts                     |  1 +
 test/autoProcess/externalFiles.test.ts | 10 +++++++---
 test/modules/modules.test.ts           |  1 +
 test/transformers/typescript.test.ts   |  1 +
 8 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/autoProcess.ts b/src/autoProcess.ts
index c1f05dd5..3951ea7c 100644
--- a/src/autoProcess.ts
+++ b/src/autoProcess.ts
@@ -60,7 +60,7 @@ type AutoPreprocessOptions = {
 export const transform = async (
   name: string,
   options: TransformerOptions,
-  { content, map, filename, attributes }: TransformerArgs<any>,
+  { content, markup, map, filename, attributes }: TransformerArgs<any>,
 ): Promise<Processed> => {
   if (options === false) {
     return { code: content };
@@ -75,6 +75,7 @@ export const transform = async (
 
   return transformer({
     content,
+    markup,
     filename,
     map,
     attributes,
@@ -151,6 +152,7 @@ export function sveltePreprocess(
   ): Preprocessor => async (svelteFile) => {
     let {
       content,
+      markup,
       filename,
       lang,
       alias,
@@ -187,6 +189,7 @@ export function sveltePreprocess(
 
     const transformed = await transform(lang, transformerOptions, {
       content,
+      markup,
       filename,
       attributes,
     });
@@ -205,6 +208,7 @@ export function sveltePreprocess(
     if (transformers.replace) {
       const transformed = await transform('replace', transformers.replace, {
         content,
+        markup: content,
         filename,
       });
 
@@ -221,11 +225,13 @@ export function sveltePreprocess(
   const script: PreprocessorGroup['script'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult: Processed = await scriptTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -235,7 +241,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'babel',
         getTransformerOptions('babel'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
@@ -250,11 +256,13 @@ export function sveltePreprocess(
   const style: PreprocessorGroup['style'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult = await cssTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -275,6 +283,7 @@ export function sveltePreprocess(
 
         const transformed = await transform('postcss', postcssOptions, {
           content: code,
+          markup: fullMarkup,
           map,
           filename,
           attributes,
@@ -288,7 +297,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'globalStyle',
         getTransformerOptions('globalStyle'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
diff --git a/src/modules/markup.ts b/src/modules/markup.ts
index 704842fd..21ac30db 100644
--- a/src/modules/markup.ts
+++ b/src/modules/markup.ts
@@ -17,7 +17,13 @@ export async function transformMarkup(
 
   /** If no <template> was found, run the transformer over the whole thing */
   if (!templateMatch) {
-    return transformer({ content, attributes: {}, filename, options });
+    return transformer({
+      content,
+      markup: content,
+      attributes: {},
+      filename,
+      options,
+    });
   }
 
   const [fullMatch, attributesStr = '', templateCode] = templateMatch;
@@ -38,6 +44,7 @@ export async function transformMarkup(
   /** Transform the found template code */
   let { code, map, dependencies } = await transformer({
     content: templateCode,
+    markup: templateCode,
     attributes,
     filename,
     options,
diff --git a/src/modules/tagInfo.ts b/src/modules/tagInfo.ts
index 58fdb617..7df9e5c8 100644
--- a/src/modules/tagInfo.ts
+++ b/src/modules/tagInfo.ts
@@ -27,6 +27,7 @@ export const getTagInfo = async ({
   attributes,
   filename,
   content,
+  markup,
 }: PreprocessorArgs) => {
   const dependencies = [];
   // catches empty content and self-closing tags
@@ -62,5 +63,6 @@ export const getTagInfo = async ({
     lang,
     alias,
     dependencies,
+    markup,
   };
 };
diff --git a/src/processors/typescript.ts b/src/processors/typescript.ts
index 312929eb..455d833c 100644
--- a/src/processors/typescript.ts
+++ b/src/processors/typescript.ts
@@ -8,6 +8,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
     const { transformer } = await import('../transformers/typescript');
     let {
       content,
+      markup,
       filename,
       attributes,
       lang,
@@ -22,6 +23,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
 
     const transformed = await transformer({
       content,
+      markup,
       filename,
       attributes,
       options,
diff --git a/src/types/index.ts b/src/types/index.ts
index c9c74a76..46c557bd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -22,6 +22,7 @@ export type TransformerArgs<T> = {
   filename: string;
   attributes?: Record<string, any>;
   map?: string | object;
+  markup?: string;
   dianostics?: unknown[];
   options?: T;
 };
diff --git a/test/autoProcess/externalFiles.test.ts b/test/autoProcess/externalFiles.test.ts
index c736575d..8c2779f7 100644
--- a/test/autoProcess/externalFiles.test.ts
+++ b/test/autoProcess/externalFiles.test.ts
@@ -26,20 +26,24 @@ describe('external files', () => {
   afterEach(warnSpy.mockClear);
 
   it('should insert external file content and add as deps', async () => {
+    const code = `<template src="./fixtures/template.html"></template>
+    <style src="./fixtures/style.css"></style>
+    <script src="./fixtures/script.js"></script>`;
+
     const [markup, script, style] = [
       await markupProcessor({
-        content: `<template src="./fixtures/template.html"></template>
-        <style src="./fixtures/style.css"></style>
-        <script src="./fixtures/script.js"></script>`,
+        content: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
       }),
       await scriptProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/script.js` },
       }),
       await styleProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/style.css` },
       }),
diff --git a/test/modules/modules.test.ts b/test/modules/modules.test.ts
index 51d4fcb5..5a48e330 100644
--- a/test/modules/modules.test.ts
+++ b/test/modules/modules.test.ts
@@ -59,6 +59,7 @@ describe(`get tag information`, () => {
   it('should only include src files if content is empty', async () => {
     let parsedFile = await getTagInfo({
       content: '',
+      markup: '',
       attributes: { src: './fixtures/style.scss' },
       filename: getTestAppFilename(),
     });
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 95342039..048396da 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -29,6 +29,7 @@ const autoProcessTS = (content: string, compilerOptions?: any) => {
 
   return opts.script({
     content,
+    markup: `<script lang="ts">${content}</script>`,
     attributes: { type: 'text/typescript' },
     filename: resolve(__dirname, '..', 'App.svelte'),
   }) as Processed & { diagnostics: Diagnostic[] };

From e5a73db6a5af29bc585f6210467370992ef45bb9 Mon Sep 17 00:00:00 2001
From: Maxime LUCE <maxime@touchify.co>
Date: Wed, 14 Apr 2021 12:32:01 +0200
Subject: [PATCH 02/22] feat: allow typescript to know used variables in
 template

- inject vars from markup to typescript
- do not use importTransform when markup is available
- inject component script to context=module script
- refactor modules/markup to reuse common functions
- test injection behavior
---
 src/modules/markup.ts                        |  47 +++++---
 src/transformers/typescript.ts               |  83 ++++++++++++--
 test/fixtures/TypeScriptImports.svelte       | 109 +++++++++++++++++++
 test/fixtures/TypeScriptImportsModule.svelte |  10 ++
 test/transformers/typescript.test.ts         |  18 +++
 5 files changed, 244 insertions(+), 23 deletions(-)
 create mode 100644 test/fixtures/TypeScriptImports.svelte
 create mode 100644 test/fixtures/TypeScriptImportsModule.svelte

diff --git a/src/modules/markup.ts b/src/modules/markup.ts
index 21ac30db..fb0fc273 100644
--- a/src/modules/markup.ts
+++ b/src/modules/markup.ts
@@ -1,5 +1,35 @@
 import type { Transformer, Preprocessor } from '../types';
 
+/** Create a tag matching regexp. */
+export function createTagRegex(tagName: string, flags?: string): RegExp {
+  return new RegExp(
+    `<!--[^]*?-->|<${tagName}(\\s[^]*?)?(?:>([^]*?)<\\/${tagName}>|\\/>)`,
+    flags,
+  );
+}
+
+/** Strip script and style tags from markup. */
+export function stripTags(markup: string): string {
+  return markup
+    .replace(createTagRegex('style', 'gi'), '')
+    .replace(createTagRegex('script', 'gi'), '');
+}
+
+/** Transform an attribute string into a key-value object */
+export function parseAttributes(attributesStr: string): Record<string, any> {
+  return attributesStr
+    .split(/\s+/)
+    .filter(Boolean)
+    .reduce((acc: Record<string, string | boolean>, attr) => {
+      const [name, value] = attr.split('=');
+
+      // istanbul ignore next
+      acc[name] = value ? value.replace(/['"]/g, '') : true;
+
+      return acc;
+    }, {});
+}
+
 export async function transformMarkup(
   { content, filename }: { content: string; filename: string },
   transformer: Preprocessor | Transformer<unknown>,
@@ -9,9 +39,7 @@ export async function transformMarkup(
 
   markupTagName = markupTagName.toLocaleLowerCase();
 
-  const markupPattern = new RegExp(
-    `/<!--[^]*?-->|<${markupTagName}(\\s[^]*?)?(?:>([^]*?)<\\/${markupTagName}>|\\/>)`,
-  );
+  const markupPattern = createTagRegex(markupTagName);
 
   const templateMatch = content.match(markupPattern);
 
@@ -28,18 +56,7 @@ export async function transformMarkup(
 
   const [fullMatch, attributesStr = '', templateCode] = templateMatch;
 
-  /** Transform an attribute string into a key-value object */
-  const attributes = attributesStr
-    .split(/\s+/)
-    .filter(Boolean)
-    .reduce((acc: Record<string, string | boolean>, attr) => {
-      const [name, value] = attr.split('=');
-
-      // istanbul ignore next
-      acc[name] = value ? value.replace(/['"]/g, '') : true;
-
-      return acc;
-    }, {});
+  const attributes = parseAttributes(attributesStr);
 
   /** Transform the found template code */
   let { code, map, dependencies } = await transformer({
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index a2fea144..a4d08aa6 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -1,8 +1,10 @@
 import { dirname, isAbsolute, join } from 'path';
 
 import ts from 'typescript';
+import { compile } from 'svelte/compiler';
 
 import { throwTypescriptError } from '../modules/errors';
+import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
 import type { Transformer, Options } from '../types';
 
 type CompilerOptions = Options.Typescript['compilerOptions'];
@@ -53,6 +55,66 @@ const importTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
   return (node) => ts.visitNode(node, visit);
 };
 
+function getComponentScriptContent(markup: string): string {
+  const regex = createTagRegex('script', 'gi');
+  let match: RegExpMatchArray;
+
+  while ((match = regex.exec(markup)) !== null) {
+    const { context } = parseAttributes(match[1]);
+
+    if (context !== 'module') {
+      return match[2];
+    }
+  }
+
+  return '';
+}
+
+function injectVarsToCode({
+  content,
+  markup,
+  filename,
+  attributes,
+}: {
+  content: string;
+  markup?: string;
+  filename?: string;
+  attributes?: Record<string, any>;
+}): string {
+  if (!markup) return content;
+
+  const { vars } = compile(stripTags(markup), {
+    generate: false,
+    varsReport: 'full',
+    errorMode: 'warn',
+    filename,
+  });
+
+  const sep = '\nconst $$$$$$$$ = null;\n';
+  const varsValues = vars.map((v) => v.name).join(',');
+  const injectedVars = `const $$vars$$ = [${varsValues}];`;
+
+  if (attributes?.context === 'module') {
+    const componentScript = getComponentScriptContent(markup);
+
+    return `${content}${sep}${componentScript}\n${injectedVars}`;
+  }
+
+  return `${content}${sep}${injectedVars}`;
+}
+
+function stripInjectedCode({
+  compiledCode,
+  markup,
+}: {
+  compiledCode: string;
+  markup?: string;
+}): string {
+  return markup
+    ? compiledCode.slice(0, compiledCode.indexOf('const $$$$$$$$ = null;'))
+    : compiledCode;
+}
+
 export function loadTsconfig(
   compilerOptionsJSON: any,
   filename: string,
@@ -103,7 +165,9 @@ export function loadTsconfig(
 const transformer: Transformer<Options.Typescript> = ({
   content,
   filename,
+  markup,
   options = {},
+  attributes,
 }) => {
   // default options
   const compilerOptionsJSON = {
@@ -140,17 +204,18 @@ const transformer: Transformer<Options.Typescript> = ({
   }
 
   const {
-    outputText: code,
+    outputText: compiledCode,
     sourceMapText: map,
     diagnostics,
-  } = ts.transpileModule(content, {
-    fileName: filename,
-    compilerOptions,
-    reportDiagnostics: options.reportDiagnostics !== false,
-    transformers: {
-      before: [importTransformer],
+  } = ts.transpileModule(
+    injectVarsToCode({ content, markup, filename, attributes }),
+    {
+      fileName: filename,
+      compilerOptions,
+      reportDiagnostics: options.reportDiagnostics !== false,
+      transformers: markup ? {} : { before: [importTransformer] },
     },
-  });
+  );
 
   if (diagnostics.length > 0) {
     // could this be handled elsewhere?
@@ -167,6 +232,8 @@ const transformer: Transformer<Options.Typescript> = ({
     }
   }
 
+  const code = stripInjectedCode({ compiledCode, markup });
+
   return {
     code,
     map,
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
new file mode 100644
index 00000000..468907ba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/fixtures/TypeScriptImportsModule.svelte b/test/fixtures/TypeScriptImportsModule.svelte
new file mode 100644
index 00000000..b885f8eb
--- /dev/null
+++ b/test/fixtures/TypeScriptImportsModule.svelte
@@ -0,0 +1,10 @@
+<script lang="ts" context="module">
+    import { AValue, AType } from "./types";
+</script>
+
+<script lang="ts">
+    const val: AType = "test1";
+    const aValue = AValue;
+</script>
+
+{val} {aValue}
\ No newline at end of file
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 048396da..d04be77c 100644
--- a/test/transformers/typescript.test.ts
+++ b/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',

From 8c973415357af9529df0eb7235041c5fca355880 Mon Sep 17 00:00:00 2001
From: Maxime LUCE <maxime@touchify.co>
Date: Thu, 15 Apr 2021 16:02:28 +0200
Subject: [PATCH 03/22] fix: handle sourcemaps in typescript transformer

- introduce two deps: magic-string, sorcery
- produce a source map on each step of the process
- store all source maps in a chain
- refactor transformer to increase readability
---
 package.json                         |   2 +
 src/transformers/typescript.ts       | 299 +++++++++++++++++++++------
 test/transformers/typescript.test.ts |  13 ++
 yarn.lock                            |  49 ++++-
 4 files changed, 294 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index f47a600d..ff34d0a4 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,8 @@
     "@types/pug": "^2.0.4",
     "@types/sass": "^1.16.0",
     "detect-indent": "^6.0.0",
+    "magic-string": "^0.25.7",
+    "sorcery": "^0.10.0",
     "strip-indent": "^3.0.0"
   },
   "peerDependencies": {
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index a4d08aa6..6e1fbc39 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -2,16 +2,24 @@ import { dirname, isAbsolute, join } from 'path';
 
 import ts from 'typescript';
 import { compile } from 'svelte/compiler';
+import MagicString from 'magic-string';
+import sorcery from 'sorcery';
 
 import { throwTypescriptError } from '../modules/errors';
 import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
 import type { Transformer, Options } from '../types';
 
-type CompilerOptions = Options.Typescript['compilerOptions'];
+type CompilerOptions = ts.CompilerOptions;
+
+type SourceMapChain = {
+  content: Record<string, string>;
+  sourcemaps: Record<string, object>;
+};
 
 function createFormatDiagnosticsHost(cwd: string): ts.FormatDiagnosticsHost {
   return {
-    getCanonicalFileName: (fileName: string) => fileName,
+    getCanonicalFileName: (fileName: string) =>
+      fileName.replace('.injected.ts', ''),
     getCurrentDirectory: () => cwd,
     getNewLine: () => ts.sys.newLine,
   };
@@ -70,16 +78,37 @@ function getComponentScriptContent(markup: string): string {
   return '';
 }
 
+function createSourceMapChain({
+  filename,
+  content,
+  compilerOptions,
+}: {
+  filename: string;
+  content: string;
+  compilerOptions: CompilerOptions;
+}): SourceMapChain | undefined {
+  if (compilerOptions.sourceMap) {
+    return {
+      content: {
+        [filename]: content,
+      },
+      sourcemaps: {},
+    };
+  }
+}
+
 function injectVarsToCode({
   content,
   markup,
   filename,
   attributes,
+  sourceMapChain,
 }: {
   content: string;
   markup?: string;
-  filename?: string;
+  filename: string;
   attributes?: Record<string, any>;
+  sourceMapChain?: SourceMapChain;
 }): string {
   if (!markup) return content;
 
@@ -93,90 +122,103 @@ function injectVarsToCode({
   const sep = '\nconst $$$$$$$$ = null;\n';
   const varsValues = vars.map((v) => v.name).join(',');
   const injectedVars = `const $$vars$$ = [${varsValues}];`;
+  const injectedCode =
+    attributes?.context === 'module'
+      ? `${sep}${getComponentScriptContent(markup)}\n${injectedVars}`
+      : `${sep}${injectedVars}`;
+
+  if (sourceMapChain) {
+    const s = new MagicString(content);
 
-  if (attributes?.context === 'module') {
-    const componentScript = getComponentScriptContent(markup);
+    s.append(injectedCode);
 
-    return `${content}${sep}${componentScript}\n${injectedVars}`;
+    const fname = `${filename}.injected.ts`;
+    const code = s.toString();
+    const map = s.generateMap({
+      source: filename,
+      file: fname,
+    });
+
+    sourceMapChain.content[fname] = code;
+    sourceMapChain.sourcemaps[fname] = map;
+
+    return code;
   }
 
-  return `${content}${sep}${injectedVars}`;
+  return `${content}${injectedCode}`;
 }
 
 function stripInjectedCode({
-  compiledCode,
+  transpiledCode,
   markup,
+  filename,
+  sourceMapChain,
 }: {
-  compiledCode: string;
+  transpiledCode: string;
   markup?: string;
+  filename: string;
+  sourceMapChain?: SourceMapChain;
 }): string {
-  return markup
-    ? compiledCode.slice(0, compiledCode.indexOf('const $$$$$$$$ = null;'))
-    : compiledCode;
-}
+  if (!markup) return transpiledCode;
 
-export function loadTsconfig(
-  compilerOptionsJSON: any,
-  filename: string,
-  tsOptions: Options.Typescript,
-) {
-  if (typeof tsOptions.tsconfigFile === 'boolean') {
-    return { errors: [], options: compilerOptionsJSON };
-  }
+  const injectedCodeStart = transpiledCode.indexOf('const $$$$$$$$ = null;');
 
-  let basePath = process.cwd();
+  if (sourceMapChain) {
+    const s = new MagicString(transpiledCode);
+    const st = s.snip(0, injectedCodeStart);
 
-  const fileDirectory = (tsOptions.tsconfigDirectory ||
-    dirname(filename)) as string;
+    const source = `${filename}.transpiled.js`;
+    const file = `${filename}.js`;
+    const code = st.toString();
+    const map = st.generateMap({
+      source,
+      file,
+    });
 
-  let tsconfigFile =
-    tsOptions.tsconfigFile ||
-    ts.findConfigFile(fileDirectory, ts.sys.fileExists);
+    sourceMapChain.content[file] = code;
+    sourceMapChain.sourcemaps[file] = map;
 
-  tsconfigFile = isAbsolute(tsconfigFile)
-    ? tsconfigFile
-    : join(basePath, tsconfigFile);
+    return code;
+  }
 
-  basePath = dirname(tsconfigFile);
+  return transpiledCode.slice(0, injectedCodeStart);
+}
 
-  const { error, config } = ts.readConfigFile(tsconfigFile, ts.sys.readFile);
+async function concatSourceMaps({
+  filename,
+  markup,
+  sourceMapChain,
+}: {
+  filename: string;
+  markup?: string;
+  sourceMapChain?: SourceMapChain;
+}): Promise<string | object | undefined> {
+  if (!sourceMapChain) return;
 
-  if (error) {
-    throw new Error(formatDiagnostics(error, basePath));
+  if (!markup) {
+    return sourceMapChain.sourcemaps[`${filename}.js`];
   }
 
-  // Do this so TS will not search for initial files which might take a while
-  config.include = [];
-
-  let { errors, options } = ts.parseJsonConfigFileContent(
-    config,
-    ts.sys,
-    basePath,
-    compilerOptionsJSON,
-    tsconfigFile,
-  );
-
-  // Filter out "no files found error"
-  errors = errors.filter((d) => d.code !== 18003);
+  const chain = await sorcery.load(`${filename}.js`, sourceMapChain);
 
-  return { errors, options };
+  return chain.apply();
 }
 
-const transformer: Transformer<Options.Typescript> = ({
-  content,
+function getCompilerOptions({
   filename,
-  markup,
-  options = {},
-  attributes,
-}) => {
+  options,
+  basePath,
+}: {
+  filename: string;
+  options: Options.Typescript;
+  basePath: string;
+}): CompilerOptions {
   // default options
   const compilerOptionsJSON = {
     moduleResolution: 'node',
     target: 'es6',
   };
 
-  const basePath = process.cwd();
-
   Object.assign(compilerOptionsJSON, options.compilerOptions);
 
   const { errors, options: convertedCompilerOptions } =
@@ -203,19 +245,38 @@ const transformer: Transformer<Options.Typescript> = ({
     );
   }
 
+  return compilerOptions;
+}
+
+function transpileTs({
+  code,
+  markup,
+  filename,
+  basePath,
+  options,
+  compilerOptions,
+  sourceMapChain,
+}: {
+  code: string;
+  markup: string;
+  filename: string;
+  basePath: string;
+  options: Options.Typescript;
+  compilerOptions: CompilerOptions;
+  sourceMapChain: SourceMapChain;
+}): { transpiledCode: string; diagnostics: ts.Diagnostic[] } {
+  const fileName = markup ? `${filename}.injected.ts` : filename;
+
   const {
-    outputText: compiledCode,
-    sourceMapText: map,
+    outputText: transpiledCode,
+    sourceMapText,
     diagnostics,
-  } = ts.transpileModule(
-    injectVarsToCode({ content, markup, filename, attributes }),
-    {
-      fileName: filename,
-      compilerOptions,
-      reportDiagnostics: options.reportDiagnostics !== false,
-      transformers: markup ? {} : { before: [importTransformer] },
-    },
-  );
+  } = ts.transpileModule(code, {
+    fileName,
+    compilerOptions,
+    reportDiagnostics: options.reportDiagnostics !== false,
+    transformers: markup ? {} : { before: [importTransformer] },
+  });
 
   if (diagnostics.length > 0) {
     // could this be handled elsewhere?
@@ -232,7 +293,109 @@ const transformer: Transformer<Options.Typescript> = ({
     }
   }
 
-  const code = stripInjectedCode({ compiledCode, markup });
+  if (sourceMapChain) {
+    const fname = markup ? `${filename}.transpiled.js` : `${filename}.js`;
+
+    sourceMapChain.content[fname] = transpiledCode;
+    sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
+  }
+
+  return { transpiledCode, diagnostics };
+}
+
+export function loadTsconfig(
+  compilerOptionsJSON: any,
+  filename: string,
+  tsOptions: Options.Typescript,
+) {
+  if (typeof tsOptions.tsconfigFile === 'boolean') {
+    return { errors: [], options: compilerOptionsJSON };
+  }
+
+  let basePath = process.cwd();
+
+  const fileDirectory = (tsOptions.tsconfigDirectory ||
+    dirname(filename)) as string;
+
+  let tsconfigFile =
+    tsOptions.tsconfigFile ||
+    ts.findConfigFile(fileDirectory, ts.sys.fileExists);
+
+  tsconfigFile = isAbsolute(tsconfigFile)
+    ? tsconfigFile
+    : join(basePath, tsconfigFile);
+
+  basePath = dirname(tsconfigFile);
+
+  const { error, config } = ts.readConfigFile(tsconfigFile, ts.sys.readFile);
+
+  if (error) {
+    throw new Error(formatDiagnostics(error, basePath));
+  }
+
+  // Do this so TS will not search for initial files which might take a while
+  config.include = [];
+
+  let { errors, options } = ts.parseJsonConfigFileContent(
+    config,
+    ts.sys,
+    basePath,
+    compilerOptionsJSON,
+    tsconfigFile,
+  );
+
+  // Filter out "no files found error"
+  errors = errors.filter((d) => d.code !== 18003);
+
+  return { errors, options };
+}
+
+const transformer: Transformer<Options.Typescript> = async ({
+  content,
+  filename = 'source.svelte',
+  markup,
+  options = {},
+  attributes,
+}) => {
+  const basePath = process.cwd();
+  const compilerOptions = getCompilerOptions({ filename, options, basePath });
+
+  const sourceMapChain = createSourceMapChain({
+    filename,
+    content,
+    compilerOptions,
+  });
+
+  const injectedCode = injectVarsToCode({
+    content,
+    markup,
+    filename,
+    attributes,
+    sourceMapChain,
+  });
+
+  const { transpiledCode, diagnostics } = transpileTs({
+    code: injectedCode,
+    markup,
+    filename,
+    basePath,
+    options,
+    compilerOptions,
+    sourceMapChain,
+  });
+
+  const code = stripInjectedCode({
+    transpiledCode,
+    markup,
+    filename,
+    sourceMapChain,
+  });
+
+  const map = await concatSourceMaps({
+    filename,
+    markup,
+    sourceMapChain,
+  });
 
   return {
     code,
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index d04be77c..ae09a98e 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -129,6 +129,19 @@ describe('transformer - typescript', () => {
       return expect(code).toContain(`import { AValue } from "./types";`);
     });
 
+    it('should produce sourcemap', async () => {
+      const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+        sourceMap: true,
+      });
+
+      const { map } = await preprocess(tpl, opts);
+
+      return expect(map).toHaveProperty('sources', ['App.svelte']);
+    });
+
     it('supports extends field', () => {
       const { options } = loadTsconfig({}, getTestAppFilename(), {
         tsconfigFile: './test/fixtures/tsconfig.extends1.json',
diff --git a/yarn.lock b/yarn.lock
index c30a3bf4..90d0d5a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2008,6 +2008,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-crc32@^0.2.5:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
 buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -2860,6 +2865,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@^3.1.2:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -3594,6 +3604,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+graceful-fs@^4.1.3:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4928,6 +4943,13 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -6355,7 +6377,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@2:
+rimraf@2, rimraf@^2.5.2:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -6408,6 +6430,16 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sander@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
+  integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+  dependencies:
+    es6-promise "^3.1.2"
+    graceful-fs "^4.1.3"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.2"
+
 sane@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
@@ -6622,6 +6654,16 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+sorcery@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
+  integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+  dependencies:
+    buffer-crc32 "^0.2.5"
+    minimist "^1.2.0"
+    sander "^0.5.0"
+    sourcemap-codec "^1.3.0"
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -6668,6 +6710,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"

From 31f6a50c08c5da440143ef497bf4d28009435491 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Sun, 22 Aug 2021 12:09:21 +0200
Subject: [PATCH 04/22] bump svelte for passing tests, handle empty code/map
 case

---
 package.json                             |  2 +-
 src/transformers/typescript.ts           |  7 +++++++
 test/fixtures/TypeScriptTypesOnly.svelte |  5 +++++
 test/transformers/typescript.test.ts     | 12 ++++++++++++
 yarn.lock                                |  8 ++++----
 5 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 test/fixtures/TypeScriptTypesOnly.svelte

diff --git a/package.json b/package.json
index 4c5504df..1a70d6ac 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "sass": "^1.26.8",
     "stylus": "^0.54.7",
     "sugarss": "^2.0.0",
-    "svelte": "^3.23.0",
+    "svelte": "^3.42.0",
     "ts-jest": "^25.1.0",
     "typescript": "^3.9.5"
   },
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 605c7490..efab4c27 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -396,6 +396,13 @@ const transformer: Transformer<Options.Typescript> = async ({
     sourceMapChain,
   });
 
+  // Sorcery tries to load the code/map from disk if it's empty,
+  // prevent that because it would try to load inexistent files
+  // https://github.com/Rich-Harris/sorcery/issues/167
+  if (!code) {
+    return { code, diagnostics };
+  }
+
   const map = await concatSourceMaps({
     filename,
     markup,
diff --git a/test/fixtures/TypeScriptTypesOnly.svelte b/test/fixtures/TypeScriptTypesOnly.svelte
new file mode 100644
index 00000000..950e16fc
--- /dev/null
+++ b/test/fixtures/TypeScriptTypesOnly.svelte
@@ -0,0 +1,5 @@
+<script lang="ts" context="module">
+    interface Hello {
+        foo: boolean;
+    }
+</script>
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index ae09a98e..a4ce2861 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -120,6 +120,18 @@ describe('transformer - typescript', () => {
       return expect(code).toContain(`import { AValue } from "./types";`);
     });
 
+    it('should deal with empty transpilation result', async () => {
+      const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
+
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false },
+        sourceMap: true,
+      });
+      const { code } = await preprocess(tpl, opts);
+
+      return expect(code).toBe(`<script lang="ts" context="module"></script>`);
+    });
+
     it('should strip unused and type imports in context="module" tags', async () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
diff --git a/yarn.lock b/yarn.lock
index 56e7feb2..8676a7a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7030,10 +7030,10 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
-svelte@^3.23.0:
-  version "3.31.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.0.tgz#13966e5f55b975bc86675469bb2c58dd0e558d97"
-  integrity sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==
+svelte@^3.42.0:
+  version "3.42.2"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.2.tgz#0246c175c820c1aeca07300c48573a15aae3c1e4"
+  integrity sha512-FOyNYKXb8wdE0Ot+Ctt2/OyDLsNBP8+V6PUE9ag6ZKeLslIou0LnMu1fhtWUA+HjzKTbAM1yj+4PFLtg/3pMJA==
 
 symbol-tree@^3.2.2:
   version "3.2.4"

From d588307b181019b22155a3b882ec38301c53d081 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Sun, 22 Aug 2021 12:45:21 +0200
Subject: [PATCH 05/22] move new transpilation into a flag for backwards
 compatibility

---
 src/transformers/typescript.ts       | 137 +++++++++++++++++++--------
 src/types/options.ts                 |   1 +
 test/transformers/typescript.test.ts |  12 ++-
 3 files changed, 109 insertions(+), 41 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index efab4c27..e956d6af 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -2,12 +2,10 @@ import { dirname, isAbsolute, join, resolve } from 'path';
 
 import ts from 'typescript';
 import { compile } from 'svelte/compiler';
-import MagicString from 'magic-string';
-import sorcery from 'sorcery';
 
 import { throwTypescriptError } from '../modules/errors';
 import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
-import type { Transformer, Options } from '../types';
+import type { Transformer, Options, TransformerArgs } from '../types';
 
 type CompilerOptions = ts.CompilerOptions;
 
@@ -16,6 +14,11 @@ type SourceMapChain = {
   sourcemaps: Record<string, object>;
 };
 
+type InternalTransformerOptions = TransformerArgs<Options.Typescript> & {
+  basePath: string;
+  compilerOptions: CompilerOptions;
+};
+
 function createFormatDiagnosticsHost(cwd: string): ts.FormatDiagnosticsHost {
   return {
     getCanonicalFileName: (fileName: string) =>
@@ -97,7 +100,7 @@ function createSourceMapChain({
   }
 }
 
-function injectVarsToCode({
+async function injectVarsToCode({
   content,
   markup,
   filename,
@@ -109,7 +112,7 @@ function injectVarsToCode({
   filename: string;
   attributes?: Record<string, any>;
   sourceMapChain?: SourceMapChain;
-}): string {
+}): Promise<string> {
   if (!markup) return content;
 
   const { vars } = compile(stripTags(markup), {
@@ -128,6 +131,7 @@ function injectVarsToCode({
       : `${sep}${injectedVars}`;
 
   if (sourceMapChain) {
+    const MagicString = (await import('magic-string')).default;
     const s = new MagicString(content);
 
     s.append(injectedCode);
@@ -148,7 +152,7 @@ function injectVarsToCode({
   return `${content}${injectedCode}`;
 }
 
-function stripInjectedCode({
+async function stripInjectedCode({
   transpiledCode,
   markup,
   filename,
@@ -158,12 +162,13 @@ function stripInjectedCode({
   markup?: string;
   filename: string;
   sourceMapChain?: SourceMapChain;
-}): string {
+}): Promise<string> {
   if (!markup) return transpiledCode;
 
   const injectedCodeStart = transpiledCode.indexOf('const $$$$$$$$ = null;');
 
   if (sourceMapChain) {
+    const MagicString = (await import('magic-string')).default;
     const s = new MagicString(transpiledCode);
     const st = s.snip(0, injectedCodeStart);
 
@@ -199,6 +204,8 @@ async function concatSourceMaps({
     return sourceMapChain.sourcemaps[`${filename}.js`];
   }
 
+  const sorcery = await import('sorcery');
+
   const chain = await sorcery.load(`${filename}.js`, sourceMapChain);
 
   return chain.apply();
@@ -250,23 +257,23 @@ function getCompilerOptions({
 
 function transpileTs({
   code,
-  markup,
-  filename,
+  fileName,
   basePath,
   options,
   compilerOptions,
-  sourceMapChain,
+  transformers,
 }: {
   code: string;
-  markup: string;
-  filename: string;
+  fileName: string;
   basePath: string;
   options: Options.Typescript;
   compilerOptions: CompilerOptions;
-  sourceMapChain: SourceMapChain;
-}): { transpiledCode: string; diagnostics: ts.Diagnostic[] } {
-  const fileName = markup ? `${filename}.injected.ts` : filename;
-
+  transformers?: ts.CustomTransformers;
+}): {
+  transpiledCode: string;
+  diagnostics: ts.Diagnostic[];
+  sourceMapText: string;
+} {
   const {
     outputText: transpiledCode,
     sourceMapText,
@@ -275,7 +282,7 @@ function transpileTs({
     fileName,
     compilerOptions,
     reportDiagnostics: options.reportDiagnostics !== false,
-    transformers: markup ? {} : { before: [importTransformer] },
+    transformers,
   });
 
   if (diagnostics.length > 0) {
@@ -293,14 +300,7 @@ function transpileTs({
     }
   }
 
-  if (sourceMapChain) {
-    const fname = markup ? `${filename}.transpiled.js` : `${filename}.js`;
-
-    sourceMapChain.content[fname] = transpiledCode;
-    sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
-  }
-
-  return { transpiledCode, diagnostics };
+  return { transpiledCode, sourceMapText, diagnostics };
 }
 
 export function loadTsconfig(
@@ -354,24 +354,22 @@ export function loadTsconfig(
   return { errors, options };
 }
 
-const transformer: Transformer<Options.Typescript> = async ({
+async function advancedImportTranspiler({
   content,
   filename = 'source.svelte',
   markup,
   options = {},
   attributes,
-}) => {
-  const basePath = process.cwd();
-  filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
-  const compilerOptions = getCompilerOptions({ filename, options, basePath });
-
+  compilerOptions,
+  basePath,
+}: InternalTransformerOptions) {
   const sourceMapChain = createSourceMapChain({
     filename,
     content,
     compilerOptions,
   });
 
-  const injectedCode = injectVarsToCode({
+  const injectedCode = await injectVarsToCode({
     content,
     markup,
     filename,
@@ -379,17 +377,23 @@ const transformer: Transformer<Options.Typescript> = async ({
     sourceMapChain,
   });
 
-  const { transpiledCode, diagnostics } = transpileTs({
+  const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
     code: injectedCode,
-    markup,
-    filename,
+    fileName: `${filename}.injected.ts`,
     basePath,
     options,
     compilerOptions,
-    sourceMapChain,
   });
 
-  const code = stripInjectedCode({
+  if (sourceMapChain) {
+    const fname = `${filename}.transpiled.js`;
+
+    sourceMapChain.content[fname] = transpiledCode;
+
+    sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
+  }
+
+  const code = await stripInjectedCode({
     transpiledCode,
     markup,
     filename,
@@ -414,6 +418,65 @@ const transformer: Transformer<Options.Typescript> = async ({
     map,
     diagnostics,
   };
+}
+
+async function simpleTranspiler({
+  content,
+  filename = 'source.svelte',
+  options = {},
+  compilerOptions,
+  basePath,
+}: InternalTransformerOptions) {
+  const { transpiledCode, sourceMapText, diagnostics } = transpileTs({
+    code: content,
+    transformers: { before: [importTransformer] },
+    fileName: filename,
+    basePath,
+    options,
+    compilerOptions,
+  });
+
+  return {
+    code: transpiledCode,
+    map: sourceMapText,
+    diagnostics,
+  };
+}
+
+const transformer: Transformer<Options.Typescript> = async ({
+  content,
+  filename = 'source.svelte',
+  markup,
+  options = {},
+  attributes,
+}) => {
+  const basePath = process.cwd();
+
+  filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
+
+  const compilerOptions = getCompilerOptions({ filename, options, basePath });
+
+  if (options.useAdvancedImportTranspiler) {
+    return advancedImportTranspiler({
+      content,
+      filename,
+      markup,
+      options,
+      attributes,
+      compilerOptions,
+      basePath,
+    });
+  } else {
+    return simpleTranspiler({
+      content,
+      filename,
+      markup,
+      options,
+      attributes,
+      compilerOptions,
+      basePath,
+    });
+  }
 };
 
 export { transformer };
diff --git a/src/types/options.ts b/src/types/options.ts
index 266a6fa3..44bf92c2 100644
--- a/src/types/options.ts
+++ b/src/types/options.ts
@@ -74,6 +74,7 @@ export type Typescript = {
   tsconfigFile?: string | boolean;
   tsconfigDirectory?: string | boolean;
   reportDiagnostics?: boolean;
+  useAdvancedImportTranspiler?: boolean;
 } & ContentModifier;
 
 export interface GlobalStyle {
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index a4ce2861..d969c22c 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -114,7 +114,9 @@ describe('transformer - typescript', () => {
     it('should strip unused and type imports', async () => {
       const tpl = getFixtureContent('TypeScriptImports.svelte');
 
-      const opts = sveltePreprocess({ typescript: { tsconfigFile: false } });
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+      });
       const { code } = await preprocess(tpl, opts);
 
       return expect(code).toContain(`import { AValue } from "./types";`);
@@ -124,7 +126,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false },
+        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
         sourceMap: true,
       });
       const { code } = await preprocess(tpl, opts);
@@ -135,7 +137,9 @@ describe('transformer - typescript', () => {
     it('should strip unused and type imports in context="module" tags', async () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
-      const opts = sveltePreprocess({ typescript: { tsconfigFile: false } });
+      const opts = sveltePreprocess({
+        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+      });
       const { code } = await preprocess(tpl, opts);
 
       return expect(code).toContain(`import { AValue } from "./types";`);
@@ -145,7 +149,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false },
+        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
         sourceMap: true,
       });
 

From 81f9aec465448d5e4cfbbef2a3ac5b1a217c806f Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Sun, 22 Aug 2021 12:59:01 +0200
Subject: [PATCH 06/22] lint, make build work

---
 src/transformers/typescript.ts       | 42 +++++++++++++---------------
 test/transformers/typescript.test.ts |  3 ++
 tsconfig.json                        |  1 +
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index e956d6af..af722b8b 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -387,9 +387,7 @@ async function advancedImportTranspiler({
 
   if (sourceMapChain) {
     const fname = `${filename}.transpiled.js`;
-
     sourceMapChain.content[fname] = transpiledCode;
-
     sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
   }
 
@@ -456,27 +454,25 @@ const transformer: Transformer<Options.Typescript> = async ({
 
   const compilerOptions = getCompilerOptions({ filename, options, basePath });
 
-  if (options.useAdvancedImportTranspiler) {
-    return advancedImportTranspiler({
-      content,
-      filename,
-      markup,
-      options,
-      attributes,
-      compilerOptions,
-      basePath,
-    });
-  } else {
-    return simpleTranspiler({
-      content,
-      filename,
-      markup,
-      options,
-      attributes,
-      compilerOptions,
-      basePath,
-    });
-  }
+  return options.useAdvancedImportTranspiler
+    ? advancedImportTranspiler({
+        content,
+        filename,
+        markup,
+        options,
+        attributes,
+        compilerOptions,
+        basePath,
+      })
+    : simpleTranspiler({
+        content,
+        filename,
+        markup,
+        options,
+        attributes,
+        compilerOptions,
+        basePath,
+      });
 };
 
 export { transformer };
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index d969c22c..d3e08b67 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -117,6 +117,7 @@ describe('transformer - typescript', () => {
       const opts = sveltePreprocess({
         typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
       });
+
       const { code } = await preprocess(tpl, opts);
 
       return expect(code).toContain(`import { AValue } from "./types";`);
@@ -129,6 +130,7 @@ describe('transformer - typescript', () => {
         typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
         sourceMap: true,
       });
+
       const { code } = await preprocess(tpl, opts);
 
       return expect(code).toBe(`<script lang="ts" context="module"></script>`);
@@ -140,6 +142,7 @@ describe('transformer - typescript', () => {
       const opts = sveltePreprocess({
         typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
       });
+
       const { code } = await preprocess(tpl, opts);
 
       return expect(code).toContain(`import { AValue } from "./types";`);
diff --git a/tsconfig.json b/tsconfig.json
index 9d0f8b52..1a536fa4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
     "target": "es2018",
     "lib": ["es2018"],
     "declaration": true,
+    "skipLibCheck": true,
     "types": ["jest", "node"],
     "outDir": "dist"
   },

From e8f1e071cdcdbd2a24046141b8511817920efb11 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 11:18:19 +0200
Subject: [PATCH 07/22] Adjust failing tests

Inline source maps are stripped in recents Svelte preprocess versions, therefore we need to test the source map generation differently
---
 test/transformers/globalStyle.test.ts | 41 +++++++++++++++++++++------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/test/transformers/globalStyle.test.ts b/test/transformers/globalStyle.test.ts
index dd8a4b22..2b1514ea 100644
--- a/test/transformers/globalStyle.test.ts
+++ b/test/transformers/globalStyle.test.ts
@@ -6,15 +6,24 @@ describe('transformer - globalStyle', () => {
     // todo: why it isn't generating a sourcemap?
     it('adds sourceMap with { sourceMap: true }', async () => {
       const template = `<style global>div,span{color:red}.test{}</style>`;
-      const opts = autoProcess({
-        globalStyle: {
-          sourceMap: true,
-        },
-      });
 
-      const preprocessed = await preprocess(template, opts);
+      const preprocessedWithMap: any = await preprocess(
+        template,
+        autoProcess({
+          globalStyle: {
+            sourceMap: true,
+          },
+        }),
+      );
 
-      expect(preprocessed.toString()).toContain(`sourceMappingURL`);
+      const preprocessedWithoutMap: any = await preprocess(
+        template,
+        autoProcess(),
+      );
+
+      expect(preprocessedWithMap.map.mappings).not.toEqual(
+        preprocessedWithoutMap.map?.mappings,
+      );
     });
 
     it('wraps selector in :global(...) modifier', async () => {
@@ -133,9 +142,23 @@ describe('transformer - globalStyle', () => {
         },
       });
 
-      const preprocessed = await preprocess(template, opts);
+      const preprocessedWithMap: any = await preprocess(
+        template,
+        autoProcess({
+          globalStyle: {
+            sourceMap: true,
+          },
+        }),
+      );
 
-      expect(preprocessed.toString()).toContain(`sourceMappingURL`);
+      const preprocessedWithoutMap: any = await preprocess(
+        template,
+        autoProcess(),
+      );
+
+      expect(preprocessedWithMap.map.mappings).not.toEqual(
+        preprocessedWithoutMap.map?.mappings,
+      );
     });
 
     it('wraps selector in :global(...) modifier', async () => {

From e6f7b22f1c1bc814da1668f555f93ff31653346c Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 11:23:03 +0200
Subject: [PATCH 08/22] docs

---
 docs/preprocessing.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/preprocessing.md b/docs/preprocessing.md
index fb92333d..3f358bd0 100644
--- a/docs/preprocessing.md
+++ b/docs/preprocessing.md
@@ -369,11 +369,12 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
 
 ### TypeScript
 
-| Option              | Default     | Description                                                                                                 |
-| ------------------- | ----------- | ----------------------------------------------------------------------------------------------------------- |
-| `tsconfigDirectory` | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`             |
-| `tsconfigFile`      | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                   |
-| `compilerOptions`   | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found. |
+| Option                        | Default     | Description                                                                                                                                                                                                                     |
+| ----------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tsconfigDirectory`           | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                 |
+| `tsconfigFile`                | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                       |
+| `compilerOptions`             | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                     |
+| `useAdvancedImportTranspiler` | `false`     | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. If you use this, you need install the npm packages `sorcery` and `magic-string`. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
@@ -381,7 +382,7 @@ You can check the [`compilerOptions` reference](https://www.typescriptlang.org/d
 
 - Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
 
-- As we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`.
+- In simple transpilation mode, as we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`. You can switch to a more advanced transpiler by setting `useAdvancedImportTranspiler` to `true` which solves this limitation.
 
 - Using TypeScript inside a component's markup is currently **not** supported. See [#318](https://github.com/sveltejs/svelte-preprocess/issues/318) for development updates to this.
 

From 2b0ea9ecb7a23b9ce4616540757e3cb835770da0 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 16:30:30 +0200
Subject: [PATCH 09/22] rename option, more docs

---
 docs/preprocessing.md                | 14 +++++++-------
 src/transformers/typescript.ts       |  2 +-
 src/types/options.ts                 |  2 +-
 test/transformers/typescript.test.ts |  8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/preprocessing.md b/docs/preprocessing.md
index 3f358bd0..5ed19946 100644
--- a/docs/preprocessing.md
+++ b/docs/preprocessing.md
@@ -369,12 +369,12 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
 
 ### TypeScript
 
-| Option                        | Default     | Description                                                                                                                                                                                                                     |
-| ----------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tsconfigDirectory`           | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                 |
-| `tsconfigFile`                | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                       |
-| `compilerOptions`             | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                     |
-| `useAdvancedImportTranspiler` | `false`     | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. If you use this, you need install the npm packages `sorcery` and `magic-string`. |
+| Option               | Default     | Description                                                                                                                                                                                                                                                                       |
+| -------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tsconfigDirectory`  | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                                                                   |
+| `tsconfigFile`       | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                                                                         |
+| `compilerOptions`    | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                                                                       |
+| `handleMixedImports` | `false`     | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. If you use this, you need install the npm packages `sorcery` and `magic-string`, and you need to use at least Svelte version 3.39. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
@@ -382,7 +382,7 @@ You can check the [`compilerOptions` reference](https://www.typescriptlang.org/d
 
 - Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
 
-- In simple transpilation mode, as we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`. You can switch to a more advanced transpiler by setting `useAdvancedImportTranspiler` to `true` which solves this limitation.
+- In simple transpilation mode, as we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`. You can switch to a more advanced transpiler by setting `handleMixedImports` to `true` which solves this limitation. There's also a pending PR in TypeScript to introduce a new compilation mode which would strictly separate type and value imports.
 
 - Using TypeScript inside a component's markup is currently **not** supported. See [#318](https://github.com/sveltejs/svelte-preprocess/issues/318) for development updates to this.
 
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index af722b8b..74e52dba 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -454,7 +454,7 @@ const transformer: Transformer<Options.Typescript> = async ({
 
   const compilerOptions = getCompilerOptions({ filename, options, basePath });
 
-  return options.useAdvancedImportTranspiler
+  return options.handleMixedImports
     ? advancedImportTranspiler({
         content,
         filename,
diff --git a/src/types/options.ts b/src/types/options.ts
index 44bf92c2..99dc4ec4 100644
--- a/src/types/options.ts
+++ b/src/types/options.ts
@@ -74,7 +74,7 @@ export type Typescript = {
   tsconfigFile?: string | boolean;
   tsconfigDirectory?: string | boolean;
   reportDiagnostics?: boolean;
-  useAdvancedImportTranspiler?: boolean;
+  handleMixedImports?: boolean;
 } & ContentModifier;
 
 export interface GlobalStyle {
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index d3e08b67..73d25a1d 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -115,7 +115,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImports.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+        typescript: { tsconfigFile: false, handleMixedImports: true },
       });
 
       const { code } = await preprocess(tpl, opts);
@@ -127,7 +127,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+        typescript: { tsconfigFile: false, handleMixedImports: true },
         sourceMap: true,
       });
 
@@ -140,7 +140,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+        typescript: { tsconfigFile: false, handleMixedImports: true },
       });
 
       const { code } = await preprocess(tpl, opts);
@@ -152,7 +152,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, useAdvancedImportTranspiler: true },
+        typescript: { tsconfigFile: false, handleMixedImports: true },
         sourceMap: true,
       });
 

From ca73a4e2b883ddff6522eebf29e3c16f513f1a1a Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 16:38:40 +0200
Subject: [PATCH 10/22] Remove dynamic imports of source-map and sorcery, make
 them "real" deps

---
 src/transformers/typescript.ts | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 74e52dba..cb7ca545 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -2,6 +2,8 @@ import { dirname, isAbsolute, join, resolve } from 'path';
 
 import ts from 'typescript';
 import { compile } from 'svelte/compiler';
+import MagicString from 'magic-string';
+import sorcery from 'sorcery';
 
 import { throwTypescriptError } from '../modules/errors';
 import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
@@ -100,7 +102,7 @@ function createSourceMapChain({
   }
 }
 
-async function injectVarsToCode({
+function injectVarsToCode({
   content,
   markup,
   filename,
@@ -112,7 +114,7 @@ async function injectVarsToCode({
   filename: string;
   attributes?: Record<string, any>;
   sourceMapChain?: SourceMapChain;
-}): Promise<string> {
+}): string {
   if (!markup) return content;
 
   const { vars } = compile(stripTags(markup), {
@@ -131,9 +133,7 @@ async function injectVarsToCode({
       : `${sep}${injectedVars}`;
 
   if (sourceMapChain) {
-    const MagicString = (await import('magic-string')).default;
     const s = new MagicString(content);
-
     s.append(injectedCode);
 
     const fname = `${filename}.injected.ts`;
@@ -152,7 +152,7 @@ async function injectVarsToCode({
   return `${content}${injectedCode}`;
 }
 
-async function stripInjectedCode({
+function stripInjectedCode({
   transpiledCode,
   markup,
   filename,
@@ -162,13 +162,12 @@ async function stripInjectedCode({
   markup?: string;
   filename: string;
   sourceMapChain?: SourceMapChain;
-}): Promise<string> {
+}): string {
   if (!markup) return transpiledCode;
 
   const injectedCodeStart = transpiledCode.indexOf('const $$$$$$$$ = null;');
 
   if (sourceMapChain) {
-    const MagicString = (await import('magic-string')).default;
     const s = new MagicString(transpiledCode);
     const st = s.snip(0, injectedCodeStart);
 
@@ -204,8 +203,6 @@ async function concatSourceMaps({
     return sourceMapChain.sourcemaps[`${filename}.js`];
   }
 
-  const sorcery = await import('sorcery');
-
   const chain = await sorcery.load(`${filename}.js`, sourceMapChain);
 
   return chain.apply();
@@ -369,7 +366,7 @@ async function advancedImportTranspiler({
     compilerOptions,
   });
 
-  const injectedCode = await injectVarsToCode({
+  const injectedCode = injectVarsToCode({
     content,
     markup,
     filename,
@@ -391,7 +388,7 @@ async function advancedImportTranspiler({
     sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
   }
 
-  const code = await stripInjectedCode({
+  const code = stripInjectedCode({
     transpiledCode,
     markup,
     filename,

From 856a98eef9d3a2c12a3c61db92b57691d7b1cf78 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 16:52:38 +0200
Subject: [PATCH 11/22] make handling mixed imports the default

---
 src/transformers/typescript.ts       | 21 ++++++++++++++++-----
 test/transformers/typescript.test.ts |  8 ++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index cb7ca545..7baa0528 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -2,6 +2,7 @@ import { dirname, isAbsolute, join, resolve } from 'path';
 
 import ts from 'typescript';
 import { compile } from 'svelte/compiler';
+import pkg from 'svelte/package.json';
 import MagicString from 'magic-string';
 import sorcery from 'sorcery';
 
@@ -351,7 +352,7 @@ export function loadTsconfig(
   return { errors, options };
 }
 
-async function advancedImportTranspiler({
+async function mixedImportsTranspiler({
   content,
   filename = 'source.svelte',
   markup,
@@ -446,13 +447,23 @@ const transformer: Transformer<Options.Typescript> = async ({
   attributes,
 }) => {
   const basePath = process.cwd();
-
   filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
-
   const compilerOptions = getCompilerOptions({ filename, options, basePath });
 
-  return options.handleMixedImports
-    ? advancedImportTranspiler({
+  const canUseMixedImportsTranspiler = +pkg.version.split('.')[1] >= 39;
+  if (!canUseMixedImportsTranspiler && options.handleMixedImports) {
+    throw new Error(
+      'You need at least Svelte 3.39 to use the handleMixedImports option',
+    );
+  }
+
+  const handleMixedImports =
+    options.handleMixedImports === false
+      ? false
+      : options.handleMixedImports || canUseMixedImportsTranspiler;
+
+  return handleMixedImports
+    ? mixedImportsTranspiler({
         content,
         filename,
         markup,
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 73d25a1d..1a8ae95f 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -115,7 +115,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImports.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, handleMixedImports: true },
+        typescript: { tsconfigFile: false },
       });
 
       const { code } = await preprocess(tpl, opts);
@@ -127,7 +127,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptTypesOnly.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, handleMixedImports: true },
+        typescript: { tsconfigFile: false },
         sourceMap: true,
       });
 
@@ -140,7 +140,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, handleMixedImports: true },
+        typescript: { tsconfigFile: false },
       });
 
       const { code } = await preprocess(tpl, opts);
@@ -152,7 +152,7 @@ describe('transformer - typescript', () => {
       const tpl = getFixtureContent('TypeScriptImportsModule.svelte');
 
       const opts = sveltePreprocess({
-        typescript: { tsconfigFile: false, handleMixedImports: true },
+        typescript: { tsconfigFile: false },
         sourceMap: true,
       });
 

From 78db9eb4be36fff5550fde228fdfa44ce6acd27b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 23 Aug 2021 17:01:07 +0200
Subject: [PATCH 12/22] adjust docs

---
 docs/preprocessing.md | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/preprocessing.md b/docs/preprocessing.md
index 5ed19946..4ac94027 100644
--- a/docs/preprocessing.md
+++ b/docs/preprocessing.md
@@ -369,12 +369,12 @@ Note: `svelte-preprocess` automatically configures inclusion paths for your root
 
 ### TypeScript
 
-| Option               | Default     | Description                                                                                                                                                                                                                                                                       |
-| -------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tsconfigDirectory`  | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                                                                   |
-| `tsconfigFile`       | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                                                                         |
-| `compilerOptions`    | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                                                                       |
-| `handleMixedImports` | `false`     | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. If you use this, you need install the npm packages `sorcery` and `magic-string`, and you need to use at least Svelte version 3.39. |
+| Option               | Default     | Description                                                                                                                                                                                                                                                                                |
+| -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `tsconfigDirectory`  | `undefined` | optional `string` that specifies from where to load the tsconfig from.<br><br>i.e `'./configs'`                                                                                                                                                                                            |
+| `tsconfigFile`       | `undefined` | optional `string` pointing torwards a `tsconfig` file.<br><br>i.e `'./tsconfig.app.json'`                                                                                                                                                                                                  |
+| `compilerOptions`    | `undefined` | optional compiler options configuration. These will be merged with options from the tsconfig file if found.                                                                                                                                                                                |
+| `handleMixedImports` | inferred    | optional `boolean` that defines the transpilation strategy. If set to `true`, you don't need to strictly separate types and values in imports. You need at least Svelte version 3.39 if you want to use this. `true` by default if you meet the minimum version requirement, else `false`. |
 
 You can check the [`compilerOptions` reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for specific TypeScript options.
 
@@ -382,8 +382,6 @@ You can check the [`compilerOptions` reference](https://www.typescriptlang.org/d
 
 - Since `v4`, `svelte-preprocess` doesn't type-check your component, its only concern is to transpile it into valid JavaScript for the compiler. If you want to have your components type-checked, you can use [svelte-check](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check/README.md).
 
-- In simple transpilation mode, as we're only transpiling, it's not possible to import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule'` otherwise bundlers will complain that the name is not exported by `MyModule`. You can switch to a more advanced transpiler by setting `handleMixedImports` to `true` which solves this limitation. There's also a pending PR in TypeScript to introduce a new compilation mode which would strictly separate type and value imports.
-
 - Using TypeScript inside a component's markup is currently **not** supported. See [#318](https://github.com/sveltejs/svelte-preprocess/issues/318) for development updates to this.
 
 ### `globalStyle`

From d349c64bfce950d9b5705cec0d5bf4fbcc456171 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 24 Aug 2021 12:44:01 +0200
Subject: [PATCH 13/22] Ignore possible errors in $$vars$$

---
 src/transformers/typescript.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 7baa0528..07fadcd0 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -127,7 +127,8 @@ function injectVarsToCode({
 
   const sep = '\nconst $$$$$$$$ = null;\n';
   const varsValues = vars.map((v) => v.name).join(',');
-  const injectedVars = `const $$vars$$ = [${varsValues}];`;
+  const injectedVars = `// @ts-ignore
+const $$vars$$ = [${varsValues}];`;
   const injectedCode =
     attributes?.context === 'module'
       ? `${sep}${getComponentScriptContent(markup)}\n${injectedVars}`

From cec5391dce1493a874cdf7c93653e085888a6a04 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 25 Aug 2021 13:26:57 +0200
Subject: [PATCH 14/22] undo ts-ignore as it's not needed

only syntax errors are reported, not semantic errors
---
 src/transformers/typescript.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 07fadcd0..7baa0528 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -127,8 +127,7 @@ function injectVarsToCode({
 
   const sep = '\nconst $$$$$$$$ = null;\n';
   const varsValues = vars.map((v) => v.name).join(',');
-  const injectedVars = `// @ts-ignore
-const $$vars$$ = [${varsValues}];`;
+  const injectedVars = `const $$vars$$ = [${varsValues}];`;
   const injectedCode =
     attributes?.context === 'module'
       ? `${sep}${getComponentScriptContent(markup)}\n${injectedVars}`

From ee2c11d2ebc9b9e6163f5976c9aa29004638a152 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Tue, 31 Aug 2021 16:37:49 +0200
Subject: [PATCH 15/22] fix: handle store subscription in template

---
 src/transformers/typescript.ts         | 11 +++++++++--
 test/fixtures/TypeScriptImports.svelte |  3 +++
 test/transformers/typescript.test.ts   | 17 +++++++++++------
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 7baa0528..e41ac813 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -126,8 +126,15 @@ function injectVarsToCode({
   });
 
   const sep = '\nconst $$$$$$$$ = null;\n';
-  const varsValues = vars.map((v) => v.name).join(',');
-  const injectedVars = `const $$vars$$ = [${varsValues}];`;
+  const varnames = vars.map((v) => v.name);
+  const varsString = [
+    ...varnames,
+    ...varnames
+      .filter((v) => v.startsWith('$') && !v.startsWith('$$'))
+      .map((v) => v.slice(1)),
+  ].join(',');
+
+  const injectedVars = `const $$vars$$ = [${varsString}];`;
   const injectedCode =
     attributes?.context === 'module'
       ? `${sep}${getComponentScriptContent(markup)}\n${injectedVars}`
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
index 468907ba..427a44b7 100644
--- a/test/fixtures/TypeScriptImports.svelte
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -4,6 +4,7 @@
     import Nested from "./Nested.svelte";
     import { hello } from "./script";
     import { AValue, AType } from "./types";
+    import { storeTemplateOnly } from "./store";
     const ui = { MyNested: Nested };
     const val: AType = "test1";
     const prom: Promise<AType> = Promise.resolve("test2");
@@ -38,6 +39,8 @@
     <title>Title: {val}</title>
 </svelte:head>
 
+{$storeTemplateOnly}
+
 <div>
     <Nested let:var1 let:var2={var3}>
         <Nested bind:this={nested} />
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 1a8ae95f..9e464ee9 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -93,7 +93,7 @@ describe('transformer - typescript', () => {
         },
       });
 
-      return expect(preprocess(template, opts)).rejects.toThrow('TS6046');
+      expect(preprocess(template, opts)).rejects.toThrow('TS6046');
     });
 
     it('should transpile ts to js', async () => {
@@ -108,7 +108,7 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(template, opts);
 
-      return expect(code).toContain(getFixtureContent('script.js'));
+      expect(code).toContain(getFixtureContent('script.js'));
     });
 
     it('should strip unused and type imports', async () => {
@@ -120,7 +120,12 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(tpl, opts);
 
-      return expect(code).toContain(`import { AValue } from "./types";`);
+      expect(code).toContain(`import { fly } from "svelte/transition"`);
+      expect(code).toContain(`import { flip } from "svelte/animate"`);
+      expect(code).toContain(`import Nested from "./Nested.svelte"`);
+      expect(code).toContain(`import { hello } from "./script"`);
+      expect(code).toContain(`import { AValue } from "./types"`);
+      expect(code).toContain(`import { storeTemplateOnly } from "./store"`);
     });
 
     it('should deal with empty transpilation result', async () => {
@@ -133,7 +138,7 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(tpl, opts);
 
-      return expect(code).toBe(`<script lang="ts" context="module"></script>`);
+      expect(code).toBe(`<script lang="ts" context="module"></script>`);
     });
 
     it('should strip unused and type imports in context="module" tags', async () => {
@@ -145,7 +150,7 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(tpl, opts);
 
-      return expect(code).toContain(`import { AValue } from "./types";`);
+      expect(code).toContain(`import { AValue } from "./types";`);
     });
 
     it('should produce sourcemap', async () => {
@@ -158,7 +163,7 @@ describe('transformer - typescript', () => {
 
       const { map } = await preprocess(tpl, opts);
 
-      return expect(map).toHaveProperty('sources', ['App.svelte']);
+      expect(map).toHaveProperty('sources', ['App.svelte']);
     });
 
     it('supports extends field', () => {

From e7201173393fe7eb71f1b1c757381a8ed0023958 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Wed, 1 Sep 2021 13:10:02 +0200
Subject: [PATCH 16/22] handle store subscription in script

---
 src/transformers/typescript.ts         | 20 +++++++++++++-------
 test/fixtures/TypeScriptImports.svelte |  3 ++-
 test/transformers/typescript.test.ts   |  6 ++++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index e41ac813..e14e1df8 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -126,14 +126,20 @@ function injectVarsToCode({
   });
 
   const sep = '\nconst $$$$$$$$ = null;\n';
-  const varnames = vars.map((v) => v.name);
-  const varsString = [
-    ...varnames,
-    ...varnames
-      .filter((v) => v.startsWith('$') && !v.startsWith('$$'))
-      .map((v) => v.slice(1)),
-  ].join(',');
+  const varnames = vars.map((v) =>
+    v.name.startsWith('$') && !v.name.startsWith('$$')
+      ? `${v.name},${v.name.slice(1)}`
+      : v.name,
+  );
+
+  // TODO investigate if it's possible to achieve this with a
+  // TS transformer (previous attemps have failed)
+  const codestores = Array.from(
+    content.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^]+/g) || [],
+    (name) => name.slice(1),
+  );
 
+  const varsString = [...codestores, ...varnames].join(',');
   const injectedVars = `const $$vars$$ = [${varsString}];`;
   const injectedCode =
     attributes?.context === 'module'
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
index 427a44b7..32e5c62a 100644
--- a/test/fixtures/TypeScriptImports.svelte
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -4,7 +4,7 @@
     import Nested from "./Nested.svelte";
     import { hello } from "./script";
     import { AValue, AType } from "./types";
-    import { storeTemplateOnly } from "./store";
+    import { storeTemplateOnly, storeScriptOnly } from "./store";
     const ui = { MyNested: Nested };
     const val: AType = "test1";
     const prom: Promise<AType> = Promise.resolve("test2");
@@ -26,6 +26,7 @@
     function onKeyDown(e: KeyboardEvent): void {
         e.preventDefault();
     }
+    $storeScriptOnly;
 </script>
 
 <style>
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 9e464ee9..299ff231 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -93,7 +93,7 @@ describe('transformer - typescript', () => {
         },
       });
 
-      expect(preprocess(template, opts)).rejects.toThrow('TS6046');
+      return expect(preprocess(template, opts)).rejects.toThrow('TS6046');
     });
 
     it('should transpile ts to js', async () => {
@@ -125,7 +125,9 @@ describe('transformer - typescript', () => {
       expect(code).toContain(`import Nested from "./Nested.svelte"`);
       expect(code).toContain(`import { hello } from "./script"`);
       expect(code).toContain(`import { AValue } from "./types"`);
-      expect(code).toContain(`import { storeTemplateOnly } from "./store"`);
+      expect(code).toContain(
+        `import { storeTemplateOnly, storeScriptOnly } from "./store"`,
+      );
     });
 
     it('should deal with empty transpilation result', async () => {

From ca6681027a7fd51128a480e13a2216ea8cf02d68 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Wed, 1 Sep 2021 13:20:39 +0200
Subject: [PATCH 17/22] handle imports in instance script that are only used in
 module script

---
 src/transformers/typescript.ts         | 8 ++++----
 test/fixtures/TypeScriptImports.svelte | 6 ++++++
 test/transformers/typescript.test.ts   | 3 +++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index e14e1df8..ef95326b 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -69,14 +69,14 @@ const importTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
   return (node) => ts.visitNode(node, visit);
 };
 
-function getComponentScriptContent(markup: string): string {
+function getScriptContent(markup: string, module: boolean): string {
   const regex = createTagRegex('script', 'gi');
   let match: RegExpMatchArray;
 
   while ((match = regex.exec(markup)) !== null) {
     const { context } = parseAttributes(match[1]);
 
-    if (context !== 'module') {
+    if ((context !== 'module' && !module) || (context === 'module' && module)) {
       return match[2];
     }
   }
@@ -143,8 +143,8 @@ function injectVarsToCode({
   const injectedVars = `const $$vars$$ = [${varsString}];`;
   const injectedCode =
     attributes?.context === 'module'
-      ? `${sep}${getComponentScriptContent(markup)}\n${injectedVars}`
-      : `${sep}${injectedVars}`;
+      ? `${sep}${getScriptContent(markup, false)}\n${injectedVars}`
+      : `${sep}${getScriptContent(markup, true)}\n${injectedVars}`;
 
   if (sourceMapChain) {
     const s = new MagicString(content);
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
index 32e5c62a..365e6c4d 100644
--- a/test/fixtures/TypeScriptImports.svelte
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -1,10 +1,16 @@
+<script lang="ts" context="module">
+    onlyUsedInModuleScript;
+</script>
+
 <script lang="ts">
+    // Some of these imports don't exist on disk, but they don't need to for this test.
     import { fly } from "svelte/transition";
     import { flip } from "svelte/animate";
     import Nested from "./Nested.svelte";
     import { hello } from "./script";
     import { AValue, AType } from "./types";
     import { storeTemplateOnly, storeScriptOnly } from "./store";
+    import { onlyUsedInModuleScript } from "./modulescript";
     const ui = { MyNested: Nested };
     const val: AType = "test1";
     const prom: Promise<AType> = Promise.resolve("test2");
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 299ff231..5eca4730 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -128,6 +128,9 @@ describe('transformer - typescript', () => {
       expect(code).toContain(
         `import { storeTemplateOnly, storeScriptOnly } from "./store"`,
       );
+      expect(code).toContain(
+        `import { onlyUsedInModuleScript } from "./modulescript";`,
+      );
     });
 
     it('should deal with empty transpilation result', async () => {

From b0418473da642e111377eb50bbf5cd89e1ef8a95 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Wed, 1 Sep 2021 13:23:55 +0200
Subject: [PATCH 18/22] remove unused code

---
 test/transformers/globalStyle.test.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/test/transformers/globalStyle.test.ts b/test/transformers/globalStyle.test.ts
index 2b1514ea..8009c995 100644
--- a/test/transformers/globalStyle.test.ts
+++ b/test/transformers/globalStyle.test.ts
@@ -136,11 +136,6 @@ describe('transformer - globalStyle', () => {
   describe('global selector', () => {
     it('adds sourceMap with { sourceMap: true }', async () => {
       const template = `<style>:global div{color:red}:global .test{}</style>`;
-      const opts = autoProcess({
-        globalStyle: {
-          sourceMap: true,
-        },
-      });
 
       const preprocessedWithMap: any = await preprocess(
         template,

From 23c24f6f6685f589a4428f0f93bfc34b8df2ddd5 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Wed, 1 Sep 2021 13:31:03 +0200
Subject: [PATCH 19/22] fix comment regression + add test for it

---
 src/modules/markup.ts                  | 2 +-
 test/fixtures/TypeScriptImports.svelte | 4 +++-
 test/transformers/typescript.test.ts   | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/modules/markup.ts b/src/modules/markup.ts
index fb0fc273..16aba061 100644
--- a/src/modules/markup.ts
+++ b/src/modules/markup.ts
@@ -3,7 +3,7 @@ import type { Transformer, Preprocessor } from '../types';
 /** Create a tag matching regexp. */
 export function createTagRegex(tagName: string, flags?: string): RegExp {
   return new RegExp(
-    `<!--[^]*?-->|<${tagName}(\\s[^]*?)?(?:>([^]*?)<\\/${tagName}>|\\/>)`,
+    `/<!--[^]*?-->|<${tagName}(\\s[^]*?)?(?:>([^]*?)<\\/${tagName}>|\\/>)`,
     flags,
   );
 }
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
index 365e6c4d..07402ce8 100644
--- a/test/fixtures/TypeScriptImports.svelte
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -116,4 +116,6 @@
 
     {@html val}
     {@debug val, inputVal}
-</div>
\ No newline at end of file
+</div>
+
+<!-- Some comment -->
diff --git a/test/transformers/typescript.test.ts b/test/transformers/typescript.test.ts
index 5eca4730..563bb534 100644
--- a/test/transformers/typescript.test.ts
+++ b/test/transformers/typescript.test.ts
@@ -120,6 +120,7 @@ describe('transformer - typescript', () => {
 
       const { code } = await preprocess(tpl, opts);
 
+      // Test that imports are properly preserved
       expect(code).toContain(`import { fly } from "svelte/transition"`);
       expect(code).toContain(`import { flip } from "svelte/animate"`);
       expect(code).toContain(`import Nested from "./Nested.svelte"`);
@@ -131,6 +132,8 @@ describe('transformer - typescript', () => {
       expect(code).toContain(
         `import { onlyUsedInModuleScript } from "./modulescript";`,
       );
+      // Test that comments are properly preserved
+      expect(code).toContain('<!-- Some comment -->');
     });
 
     it('should deal with empty transpilation result', async () => {

From de8e07713cd4fb842aeca466b00e43b69f2c36c1 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Wed, 1 Sep 2021 13:32:36 +0200
Subject: [PATCH 20/22] lint

---
 src/transformers/typescript.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index ef95326b..378ed4d3 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -148,6 +148,7 @@ function injectVarsToCode({
 
   if (sourceMapChain) {
     const s = new MagicString(content);
+
     s.append(injectedCode);
 
     const fname = `${filename}.injected.ts`;
@@ -398,6 +399,7 @@ async function mixedImportsTranspiler({
 
   if (sourceMapChain) {
     const fname = `${filename}.transpiled.js`;
+
     sourceMapChain.content[fname] = transpiledCode;
     sourceMapChain.sourcemaps[fname] = JSON.parse(sourceMapText);
   }
@@ -460,10 +462,12 @@ const transformer: Transformer<Options.Typescript> = async ({
   attributes,
 }) => {
   const basePath = process.cwd();
+
   filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
-  const compilerOptions = getCompilerOptions({ filename, options, basePath });
 
+  const compilerOptions = getCompilerOptions({ filename, options, basePath });
   const canUseMixedImportsTranspiler = +pkg.version.split('.')[1] >= 39;
+
   if (!canUseMixedImportsTranspiler && options.handleMixedImports) {
     throw new Error(
       'You need at least Svelte 3.39 to use the handleMixedImports option',

From 3d561aa885582e9889288206a0b99143c1739877 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Fri, 3 Sep 2021 13:19:11 +0200
Subject: [PATCH 21/22] filter out reserved keywords to prevent syntax errors

---
 src/modules/utils.ts                   | 51 ++++++++++++++++++++++++++
 src/transformers/typescript.ts         |  3 +-
 test/fixtures/TypeScriptImports.svelte |  3 +-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/modules/utils.ts b/src/modules/utils.ts
index 58f50b52..b7147c4b 100644
--- a/src/modules/utils.ts
+++ b/src/modules/utils.ts
@@ -107,3 +107,54 @@ export function setProp(obj, keyList, val) {
 
   obj[keyList[i]] = val;
 }
+
+export const javascriptReservedKeywords = new Set([
+  'arguments',
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'eval',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'implements',
+  'import',
+  'in',
+  'instanceof',
+  'interface',
+  'let',
+  'new',
+  'null',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'return',
+  'static',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+]);
diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 378ed4d3..33d44f32 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -9,6 +9,7 @@ import sorcery from 'sorcery';
 import { throwTypescriptError } from '../modules/errors';
 import { createTagRegex, parseAttributes, stripTags } from '../modules/markup';
 import type { Transformer, Options, TransformerArgs } from '../types';
+import { javascriptReservedKeywords } from '../modules/utils';
 
 type CompilerOptions = ts.CompilerOptions;
 
@@ -137,7 +138,7 @@ function injectVarsToCode({
   const codestores = Array.from(
     content.match(/\$[^\s();:,[\]{}.?!+-=*/~|&%<>^]+/g) || [],
     (name) => name.slice(1),
-  );
+  ).filter((name) => !javascriptReservedKeywords.has(name));
 
   const varsString = [...codestores, ...varnames].join(',');
   const injectedVars = `const $$vars$$ = [${varsString}];`;
diff --git a/test/fixtures/TypeScriptImports.svelte b/test/fixtures/TypeScriptImports.svelte
index 07402ce8..755ff47d 100644
--- a/test/fixtures/TypeScriptImports.svelte
+++ b/test/fixtures/TypeScriptImports.svelte
@@ -18,7 +18,8 @@
     const isTest1 = (v: AType) => v === "test1";
     const obj = {
         fn: () => "test",
-        val: "test1" as const
+        val: "test1" as const,
+        $in: ""
     };
     let inputVal: string;
     const action = (node: Element, options: { id: string; }) => { node.id = options.id; };

From fe37ccbcb91217781555ceb9da98d2e3fa3da945 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Fri, 3 Sep 2021 14:07:55 +0200
Subject: [PATCH 22/22] cleanup

---
 src/transformers/typescript.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/transformers/typescript.ts b/src/transformers/typescript.ts
index 33d44f32..abbb62ba 100644
--- a/src/transformers/typescript.ts
+++ b/src/transformers/typescript.ts
@@ -23,6 +23,8 @@ type InternalTransformerOptions = TransformerArgs<Options.Typescript> & {
   compilerOptions: CompilerOptions;
 };
 
+const injectedCodeSeparator = 'const $$$$$$$$ = null;';
+
 function createFormatDiagnosticsHost(cwd: string): ts.FormatDiagnosticsHost {
   return {
     getCanonicalFileName: (fileName: string) =>
@@ -126,7 +128,7 @@ function injectVarsToCode({
     filename,
   });
 
-  const sep = '\nconst $$$$$$$$ = null;\n';
+  const sep = `\n${injectedCodeSeparator}\n`;
   const varnames = vars.map((v) =>
     v.name.startsWith('$') && !v.name.startsWith('$$')
       ? `${v.name},${v.name.slice(1)}`
@@ -181,7 +183,7 @@ function stripInjectedCode({
 }): string {
   if (!markup) return transpiledCode;
 
-  const injectedCodeStart = transpiledCode.indexOf('const $$$$$$$$ = null;');
+  const injectedCodeStart = transpiledCode.indexOf(injectedCodeSeparator);
 
   if (sourceMapChain) {
     const s = new MagicString(transpiledCode);
@@ -457,7 +459,7 @@ async function simpleTranspiler({
 
 const transformer: Transformer<Options.Typescript> = async ({
   content,
-  filename = 'source.svelte',
+  filename,
   markup,
   options = {},
   attributes,
@@ -467,7 +469,9 @@ const transformer: Transformer<Options.Typescript> = async ({
   filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
 
   const compilerOptions = getCompilerOptions({ filename, options, basePath });
-  const canUseMixedImportsTranspiler = +pkg.version.split('.')[1] >= 39;
+  const versionParts = pkg.version.split('.');
+  const canUseMixedImportsTranspiler =
+    +versionParts[0] > 3 || (+versionParts[0] === 3 && +versionParts[1] >= 39);
 
   if (!canUseMixedImportsTranspiler && options.handleMixedImports) {
     throw new Error(