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

Author: SomaticIT

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": {

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,