@atlaspack/transformer-typescript-types 2.12.1-canary.3354

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@atlaspack/transformer-typescript-types",
+  "version": "2.12.1-canary.3354+7bb54d46a",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian-labs/atlaspack.git"
+  },
+  "main": "lib/TSTypesTransformer.js",
+  "source": "src/TSTypesTransformer.js",
+  "engines": {
+    "node": ">= 16.0.0",
+    "atlaspack": "2.12.1-canary.3354+7bb54d46a"
+  },
+  "dependencies": {
+    "@atlaspack/diagnostic": "2.12.1-canary.3354+7bb54d46a",
+    "@atlaspack/plugin": "2.12.1-canary.3354+7bb54d46a",
+    "@atlaspack/ts-utils": "2.12.1-canary.3354+7bb54d46a",
+    "@atlaspack/utils": "2.12.1-canary.3354+7bb54d46a",
+    "@parcel/source-map": "^2.1.1",
+    "nullthrows": "^1.1.1"
+  },
+  "devDependencies": {
+    "typescript": ">=3.0.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=3.0.0"
+  },
+  "gitHead": "7bb54d46a00c5ba9cdbc2ee426dcbe82c8d79a3e"
+}

package/src/TSModule.js

@@ -0,0 +1,55 @@
+// @flow
+
+export type Import = {|specifier: string, imported: string|};
+export type Export =
+  | {|name: string, imported: string, specifier?: ?string|}
+  | {|specifier: string|};
+
+export class TSModule {
+  imports: Map<string, Import>;
+  exports: Array<Export>;
+  bindings: Map<string, Set<any>>;
+  names: Map<string, string>;
+  used: Set<string>;
+
+  constructor() {
+    this.imports = new Map();
+    this.exports = [];
+    this.bindings = new Map();
+    this.names = new Map();
+    this.used = new Set();
+  }
+
+  addImport(local: string, specifier: string, imported: string) {
+    this.imports.set(local, {specifier, imported});
+    if (imported !== '*' && imported !== 'default') {
+      this.names.set(local, local);
+    }
+  }
+
+  // if not a reexport: imported = local, name = exported
+  addExport(name: string, imported: string, specifier: ?string) {
+    this.exports.push({name, specifier, imported});
+  }
+
+  addWildcardExport(specifier: string) {
+    this.exports.push({specifier});
+  }
+
+  addLocal(name: string, node: any) {
+    const bindings = this.bindings.get(name) ?? new Set();
+    bindings.add(node);
+    this.bindings.set(name, bindings);
+    if (name !== 'default') {
+      this.names.set(name, name);
+    }
+  }
+
+  getName(name: string): string {
+    return this.names.get(name) || name;
+  }
+
+  hasBinding(name: string): boolean {
+    return this.bindings.has(name);
+  }
+}

package/src/TSModuleGraph.js

@@ -0,0 +1,277 @@
+// @flow
+import type {TSModule, Export} from './TSModule';
+
+import nullthrows from 'nullthrows';
+import invariant from 'assert';
+import ts from 'typescript';
+
+export class TSModuleGraph {
+  modules: Map<string, TSModule>;
+  mainModuleName: string;
+  mainModule: ?TSModule;
+  syntheticImportCount: number;
+
+  constructor(mainModuleName: string) {
+    this.modules = new Map();
+    this.mainModuleName = mainModuleName;
+    this.mainModule = null;
+    this.syntheticImportCount = 0;
+  }
+
+  addModule(name: string, module: TSModule) {
+    this.modules.set(name, module);
+    if (name === this.mainModuleName) {
+      this.mainModule = module;
+    }
+  }
+
+  getModule(name: string): ?TSModule {
+    return this.modules.get(name);
+  }
+
+  markUsed(module: TSModule, name: string, context: any): void {
+    // If name is imported, mark used in the original module
+    if (module.imports.has(name)) {
+      module.used.add(name);
+      let resolved = this.resolveImport(module, name);
+      // Missing or external
+      if (!resolved || resolved.module === module) {
+        return;
+      }
+
+      return this.markUsed(resolved.module, resolved.imported, context);
+    }
+
+    if (module.used.has(name)) {
+      return;
+    }
+
+    module.used.add(name);
+
+    // Visit all child nodes of the original binding and mark any referenced types as used.
+    let visit = (node: any) => {
+      if (ts.isQualifiedName(node) && ts.isIdentifier(node.left)) {
+        let resolved = this.resolveImport(
+          module,
+          node.left.text,
+          node.right.text,
+        );
+        if (resolved) {
+          this.markUsed(resolved.module, resolved.imported, context);
+        }
+      } else if (ts.isIdentifier(node)) {
+        this.markUsed(module, node.text, context);
+      }
+
+      return ts.visitEachChild(node, visit, context);
+    };
+
+    let bindings = module.bindings.get(name);
+    if (bindings) {
+      for (let node of bindings) {
+        ts.visitEachChild(node, visit, context);
+      }
+    }
+  }
+
+  getExport(
+    m: TSModule,
+    e: Export,
+  ): ?{|imported: string, module: TSModule, name: string|} {
+    invariant(e.name != null);
+    let exportName = e.name;
+
+    // Re-export
+    if (e.specifier && e.imported) {
+      let m = this.getModule(e.specifier);
+      if (!m) {
+        return null;
+      }
+
+      let exp = this.resolveExport(m, e.imported);
+      if (!exp) {
+        return null;
+      }
+
+      return {
+        module: exp.module,
+        imported: exp.imported || exp.name,
+        name: exportName,
+      };
+    }
+
+    // Import and then export
+    if (m.imports.has(exportName)) {
+      let imp = this.resolveImport(m, exportName);
+      if (!imp) {
+        return null;
+      }
+
+      return {module: imp.module, imported: imp.name, name: exportName};
+    }
+
+    // Named export
+    return {
+      module: m,
+      name: exportName,
+      imported: e.imported != null ? m.getName(e.imported) : exportName,
+    };
+  }
+
+  resolveImport(
+    module: TSModule,
+    local: string,
+    imported?: string,
+  ): ?{|imported: string, module: TSModule, name: string|} {
+    let i = module.imports.get(local);
+    if (!i) {
+      return null;
+    }
+
+    let m = this.getModule(i.specifier);
+    if (!m) {
+      // External module. pass through the import.
+      return {module, name: local, imported: imported || i.imported};
+    }
+
+    return this.resolveExport(m, imported || i.imported);
+  }
+
+  resolveExport(
+    module: TSModule,
+    name: string,
+  ): ?{|imported: string, module: TSModule, name: string|} {
+    for (let e of module.exports) {
+      if (e.name === name) {
+        return this.getExport(module, e);
+      } else if (e.specifier) {
+        const m = this.resolveExport(
+          nullthrows(this.getModule(e.specifier)),
+          name,
+        );
+        if (m) {
+          return m;
+        }
+      }
+    }
+  }
+
+  getAllExports(
+    module: TSModule = nullthrows(this.mainModule),
+    excludeDefault: boolean = false,
+  ): Array<{|imported: string, module: TSModule, name: string|}> {
+    let res = [];
+    for (let e of module.exports) {
+      if (e.name && (!excludeDefault || e.name !== 'default')) {
+        let exp = this.getExport(module, e);
+        if (exp) {
+          res.push(exp);
+        }
+      } else if (e.specifier) {
+        let m = this.getModule(e.specifier);
+        if (m) {
+          res.push(...this.getAllExports(m, true));
+        }
+      }
+    }
+    return res;
+  }
+
+  getAllImports(): Map<string, Map<string, string>> {
+    // Build a map of all imports for external modules
+    let importsBySpecifier: Map<string, Map<string, string>> = new Map();
+    for (let module of this.modules.values()) {
+      for (let [name, imp] of module.imports) {
+        if (module.used.has(name) && !this.modules.has(imp.specifier)) {
+          let importMap = importsBySpecifier.get(imp.specifier);
+          if (!importMap) {
+            importMap = new Map();
+            importsBySpecifier.set(imp.specifier, importMap);
+          }
+
+          name = module.getName(name);
+          importMap.set(name, imp.imported);
+        }
+      }
+    }
+
+    return importsBySpecifier;
+  }
+
+  propagate(context: any): Map<string, TSModule> {
+    // Resolve all exported values, and mark them as used.
+    let names = Object.create(null);
+    let exportedNames = new Map<string, TSModule>();
+    for (let e of this.getAllExports()) {
+      this.markUsed(e.module, e.imported, context);
+      e.module.names.set(e.imported, e.name);
+      names[e.name] = 1;
+      exportedNames.set(e.name, e.module);
+    }
+
+    let importedSymbolsToUpdate = [];
+
+    // Assign unique names across all modules
+    for (let m of this.modules.values()) {
+      for (let [orig, name] of m.names) {
+        if (exportedNames.has(name) && exportedNames.get(name) === m) {
+          continue;
+        }
+
+        if (!m.used.has(orig)) {
+          continue;
+        }
+
+        if (m.imports.has(orig)) {
+          // Update imports after all modules's local variables have been renamed
+          importedSymbolsToUpdate.push([m, orig]);
+          continue;
+        }
+
+        if (names[name]) {
+          m.names.set(name, `_${name}${names[name]++}`);
+        } else {
+          names[name] = 1;
+        }
+      }
+    }
+
+    // Map of imported specifiers -> map of imported names to local names
+    let imports = new Map();
+
+    for (let [m, orig] of importedSymbolsToUpdate) {
+      let imp = nullthrows(m.imports.get(orig));
+      let imported = nullthrows(this.resolveImport(m, orig));
+
+      // If the module is bundled, map the local name to the original exported name.
+      if (this.modules.has(imp.specifier)) {
+        m.names.set(orig, imported.imported);
+        continue;
+      }
+
+      // If it's external, then we need to dedup duplicate imported names, and ensure
+      // that they do not conflict with any exported or local names.
+      let importedNames = imports.get(imp.specifier);
+      if (!importedNames) {
+        importedNames = new Map();
+        imports.set(imp.specifier, importedNames);
+      }
+
+      let name = importedNames.get(imported.imported);
+      if (!name) {
+        if (names[imported.imported]) {
+          name = `_${imported.imported}${names[imported.imported]++}`;
+        } else {
+          name = imported.imported;
+          names[imported.imported] = 1;
+        }
+
+        importedNames.set(imported.imported, name);
+      }
+
+      m.names.set(orig, name);
+    }
+
+    return exportedNames;
+  }
+}

package/src/TSTypesTransformer.js

@@ -0,0 +1,185 @@
+// @flow strict-local
+
+import {Transformer} from '@atlaspack/plugin';
+import path from 'path';
+import SourceMap from '@parcel/source-map';
+import type {DiagnosticCodeFrame} from '@atlaspack/diagnostic';
+import type {CompilerOptions} from 'typescript';
+
+import ts from 'typescript';
+import {CompilerHost, loadTSConfig} from '@atlaspack/ts-utils';
+import {normalizeSeparators} from '@atlaspack/utils';
+import ThrowableDiagnostic, {escapeMarkdown} from '@atlaspack/diagnostic';
+import {TSModuleGraph} from './TSModuleGraph';
+import nullthrows from 'nullthrows';
+import {collect} from './collect';
+import {shake} from './shake';
+
+export default (new Transformer({
+  loadConfig({config, options}) {
+    return loadTSConfig(config, options);
+  },
+
+  transform({asset, config, options, logger}) {
+    let opts: CompilerOptions = {
+      // React is the default. Users can override this by supplying their own tsconfig,
+      // which many TypeScript users will already have for typechecking, etc.
+      jsx: ts.JsxEmit.React,
+      moduleResolution: ts.ModuleResolutionKind.NodeJs,
+      ...config,
+      // Always emit output
+      noEmit: false,
+      noEmitOnError: false,
+      declaration: true,
+      declarationMap: true,
+      isolatedModules: false,
+      emitDeclarationOnly: true,
+      outFile: 'index.d.ts',
+      // createProgram doesn't support incremental mode
+      composite: false,
+      incremental: false,
+    };
+
+    let host = new CompilerHost(options.inputFS, ts, logger);
+    // $FlowFixMe
+    let program = ts.createProgram([asset.filePath], opts, host);
+
+    for (let file of program.getSourceFiles()) {
+      if (path.normalize(file.fileName) !== asset.filePath) {
+        asset.invalidateOnFileChange(
+          host.redirectTypes.get(file.fileName) ?? file.fileName,
+        );
+      }
+    }
+
+    let mainModuleName = normalizeSeparators(
+      path
+        .relative(program.getCommonSourceDirectory(), asset.filePath)
+        .slice(0, -path.extname(asset.filePath).length),
+    );
+    let moduleGraph = new TSModuleGraph(mainModuleName);
+
+    let emitResult = program.emit(undefined, undefined, undefined, true, {
+      afterDeclarations: [
+        // 1. Build module graph
+        context => sourceFile => {
+          return collect(moduleGraph, context, sourceFile);
+        },
+        // 2. Tree shake and rename types
+        context => sourceFile => {
+          return shake(moduleGraph, context, sourceFile);
+        },
+      ],
+    });
+
+    let diagnostics = ts
+      .getPreEmitDiagnostics(program)
+      .concat(emitResult.diagnostics);
+
+    let diagnosticIds = new Set();
+    let deduplicatedDiagnostics = [];
+    for (let d of diagnostics) {
+      if (d.start != null && d.length != null && d.messageText != null) {
+        let id = `${d.start}:${d.length}:${ts.flattenDiagnosticMessageText(
+          d.messageText,
+          '\n',
+        )}`;
+        if (!diagnosticIds.has(id)) {
+          deduplicatedDiagnostics.push(d);
+        }
+        diagnosticIds.add(id);
+      } else {
+        deduplicatedDiagnostics.push(d);
+      }
+    }
+
+    let atlaspackDiagnostics = deduplicatedDiagnostics.map(diagnostic => {
+      let filename = asset.filePath;
+      let {file} = diagnostic;
+
+      let diagnosticMessage = ts.flattenDiagnosticMessageText(
+        diagnostic.messageText,
+        '\n',
+      );
+
+      let codeframe: ?DiagnosticCodeFrame;
+      if (file != null && diagnostic.start != null) {
+        let source = file.text || diagnostic.source;
+        if (file.fileName) {
+          filename = file.fileName;
+        }
+
+        // $FlowFixMe
+        if (source) {
+          let lineChar = file.getLineAndCharacterOfPosition(diagnostic.start);
+          let start = {
+            line: lineChar.line + 1,
+            column: lineChar.character + 1,
+          };
+          let end = {
+            line: start.line,
+            column: start.column + 1,
+          };
+
+          if (
+            typeof diagnostic.start === 'number' &&
+            typeof diagnostic.length === 'number'
+          ) {
+            let endCharPosition = file.getLineAndCharacterOfPosition(
+              diagnostic.start + diagnostic.length,
+            );
+
+            end = {
+              line: endCharPosition.line + 1,
+              column: endCharPosition.character,
+            };
+          }
+
+          codeframe = {
+            filePath: filename,
+            code: source,
+            codeHighlights: [
+              {
+                start,
+                end,
+                message: escapeMarkdown(diagnosticMessage),
+              },
+            ],
+          };
+        }
+      }
+
+      return {
+        message: escapeMarkdown(diagnosticMessage),
+        codeFrames: codeframe ? [codeframe] : undefined,
+      };
+    });
+
+    if (host.outputCode == null) {
+      throw new ThrowableDiagnostic({diagnostic: atlaspackDiagnostics});
+    } else {
+      for (let d of atlaspackDiagnostics) {
+        logger.warn(d);
+      }
+    }
+
+    let code = nullthrows(host.outputCode);
+    code = code.substring(0, code.lastIndexOf('//# sourceMappingURL'));
+
+    let map = JSON.parse(nullthrows(host.outputMap));
+    map.sources = map.sources.map(source =>
+      path.join(path.dirname(asset.filePath), source),
+    );
+
+    let sourceMap = null;
+    if (map.mappings) {
+      sourceMap = new SourceMap(options.projectRoot);
+      sourceMap.addVLQMap(map);
+    }
+
+    asset.type = 'ts';
+    asset.setCode(code);
+    asset.setMap(sourceMap);
+    return [asset];
+  },
+}): Transformer);

package/src/collect.js

@@ -0,0 +1,157 @@
+// @flow
+import type {TSModuleGraph} from './TSModuleGraph';
+
+import nullthrows from 'nullthrows';
+import ts, {type EntityName} from 'typescript';
+import {TSModule} from './TSModule';
+import {getExportedName, isDeclaration} from './utils';
+
+export function collect(
+  moduleGraph: TSModuleGraph,
+  context: any,
+  sourceFile: any,
+): any {
+  // Factory only exists on TS >= 4.0
+  const {factory = ts} = context;
+
+  // When module definitions are nested inside each other (e.g with module augmentation),
+  // we want to keep track of the hierarchy so we can associated nodes with the right module.
+  const moduleStack: Array<?TSModule> = [];
+  let _currentModule: ?TSModule;
+  let visit = (node: any): any => {
+    if (ts.isBundle(node)) {
+      return factory.updateBundle(node, ts.visitNodes(node.sourceFiles, visit));
+    }
+
+    if (ts.isModuleDeclaration(node)) {
+      moduleStack.push(_currentModule);
+      _currentModule = new TSModule();
+      moduleGraph.addModule(node.name.text, _currentModule);
+    }
+
+    if (!_currentModule) {
+      return ts.visitEachChild(node, visit, context);
+    }
+
+    let currentModule = nullthrows(_currentModule);
+    if (ts.isImportDeclaration(node) && node.importClause) {
+      if (node.importClause.namedBindings) {
+        if (node.importClause.namedBindings.elements) {
+          for (let element of node.importClause.namedBindings.elements) {
+            currentModule.addImport(
+              element.name.text,
+              node.moduleSpecifier.text,
+              (element.propertyName ?? element.name).text,
+            );
+          }
+        } else if (node.importClause.namedBindings.name) {
+          currentModule.addImport(
+            node.importClause.namedBindings.name.text,
+            node.moduleSpecifier.text,
+            '*',
+          );
+        }
+      }
+
+      if (node.importClause.name) {
+        currentModule.addImport(
+          node.importClause.name.text,
+          node.moduleSpecifier.text,
+          'default',
+        );
+      }
+    }
+
+    if (ts.isExportDeclaration(node)) {
+      if (node.exportClause) {
+        for (let element of node.exportClause.elements) {
+          if (node.moduleSpecifier) {
+            currentModule.addExport(
+              element.name.text,
+              (element.propertyName ?? element.name).text,
+              node.moduleSpecifier.text,
+            );
+          } else {
+            currentModule.addExport(
+              element.name.text,
+              (element.propertyName ?? element.name).text,
+            );
+          }
+        }
+      } else {
+        currentModule.addWildcardExport(node.moduleSpecifier.text);
+      }
+    }
+
+    node = ts.visitEachChild(node, visit, context);
+
+    if (
+      ts.isImportTypeNode(node) &&
+      ts.isLiteralTypeNode(node.argument) &&
+      ts.isStringLiteral(node.argument.literal)
+    ) {
+      let local = `$$atlaspack$import$${moduleGraph.syntheticImportCount++}`;
+      let [specifier, entity] = getImportName(node.qualifier, local, factory);
+      currentModule.addImport(local, node.argument.literal.text, specifier);
+      return factory.createTypeReferenceNode(entity, node.typeArguments);
+    }
+
+    // Handle `export default name;`
+    if (ts.isExportAssignment(node) && ts.isIdentifier(node.expression)) {
+      currentModule.addExport('default', node.expression.text);
+    }
+
+    if (isDeclaration(node)) {
+      if (node.name) {
+        currentModule.addLocal(node.name.text, node);
+      }
+
+      let name = getExportedName(node);
+      if (name) {
+        currentModule.addLocal(name, node);
+        currentModule.addExport(name, name);
+      }
+    }
+
+    if (ts.isVariableStatement(node) && node.modifiers) {
+      let isExported = node.modifiers.some(
+        m => m.kind === ts.SyntaxKind.ExportKeyword,
+      );
+      for (let v of node.declarationList.declarations) {
+        currentModule.addLocal(v.name.text, v);
+        if (isExported) {
+          currentModule.addExport(v.name.text, v.name.text);
+        }
+      }
+    }
+
+    // After we finish traversing the children of a module definition,
+    // we need to make sure that subsequent nodes get associated with the next-highest level module.
+    if (ts.isModuleDeclaration(node)) {
+      _currentModule = moduleStack.pop();
+    }
+    return node;
+  };
+
+  return ts.visitNode(sourceFile, visit);
+}
+
+// Traverse down an EntityName to the root identifier. Return that to use as the named import specifier,
+// and collect the remaining parts into a new QualifiedName with the local replacement at the root.
+// import('react').JSX.Element => import {JSX} from 'react'; JSX.Element
+function getImportName(
+  qualifier: ?EntityName,
+  local: string,
+  factory: typeof ts,
+) {
+  if (!qualifier) {
+    return ['*', factory.createIdentifier(local)];
+  }
+
+  if (qualifier.kind === ts.SyntaxKind.Identifier) {
+    return [qualifier.text, factory.createIdentifier(local)];
+  }
+
+  let [name, entity] = getImportName(qualifier.left, local, factory);
+  return [name, factory.createQualifiedName(entity, qualifier.right)];
+}