@teambit/typescript 1.0.106 → 1.0.108

package/transform-source-file.spec.ts

@@ -0,0 +1,155 @@
+import ts from 'typescript';
+import {
+  transformSourceFile,
+  classNamesTransformer,
+  functionNamesTransformer,
+  importTransformer,
+  interfaceNamesTransformer,
+  typeAliasNamesTransformer,
+  variableNamesTransformer,
+  expressionStatementTransformer,
+  exportTransformer,
+} from './sourceFileTransformers';
+
+function normalizeFormatting(code: string): string {
+  const sourceFile = ts.createSourceFile('temp.ts', code, ts.ScriptTarget.Latest, true);
+  const printer = ts.createPrinter({
+    newLine: ts.NewLineKind.LineFeed,
+    removeComments: false,
+  });
+  return printer.printFile(sourceFile);
+}
+
+describe('transformSourceFile', () => {
+  const createTransformerTest = (
+    sourceCode: string,
+    nameMapping: any,
+    transformer: (nameMapping: any) => ts.TransformerFactory<ts.SourceFile>,
+    expectedCode: string
+  ) => {
+    it(`should correctly transform source code with ${transformer.name}`, async () => {
+      const result = await transformSourceFile('test.ts', sourceCode, [transformer(nameMapping)]);
+      const normalizedResult = normalizeFormatting(result);
+      const normalizedExpectedCode = normalizeFormatting(expectedCode);
+
+      expect(normalizedResult).toBe(normalizedExpectedCode);
+    });
+  };
+
+  const testCases = [
+    {
+      transformer: classNamesTransformer,
+      sourceCode: 'class TestClass {}',
+      nameMapping: { TestClass: 'NewClassName' },
+      expectedCode: 'class NewClassName {}',
+    },
+    {
+      transformer: functionNamesTransformer,
+      sourceCode: 'function testFunction() {}',
+      nameMapping: { testFunction: 'newFunctionName' },
+      expectedCode: 'function newFunctionName() {}',
+    },
+    {
+      transformer: importTransformer,
+      sourceCode: 'import { Test } from "./test";',
+      nameMapping: { './test': './newTest' },
+      expectedCode: 'import { Test } from "./newTest";',
+    },
+    {
+      transformer: interfaceNamesTransformer,
+      sourceCode: 'interface TestInterface {}',
+      nameMapping: { TestInterface: 'NewInterfaceName' },
+      expectedCode: 'interface NewInterfaceName {}',
+    },
+    {
+      transformer: typeAliasNamesTransformer,
+      sourceCode: 'type TestType = string;',
+      nameMapping: { TestType: 'NewTypeName' },
+      expectedCode: 'type NewTypeName = string;',
+    },
+    {
+      transformer: variableNamesTransformer,
+      sourceCode: 'let testVariable = "test";',
+      nameMapping: { testVariable: 'newVariableName' },
+      expectedCode: 'let newVariableName = "test";',
+    },
+    {
+      transformer: classNamesTransformer,
+      sourceCode: 'class TestClass { oldMethod() {} }',
+      nameMapping: { TestClass: 'NewClassName', oldMethod: 'newMethodName' },
+      expectedCode: 'class NewClassName { newMethodName() {} }',
+    },
+    {
+      transformer: classNamesTransformer,
+      sourceCode: 'class TestClass { oldMember: string; }',
+      nameMapping: { TestClass: 'NewClassName', oldMember: 'newMember' },
+      expectedCode: 'class NewClassName { newMember: string; }',
+    },
+    {
+      transformer: expressionStatementTransformer,
+      sourceCode: 'TestClass.staticMethod();',
+      nameMapping: { TestClass: 'NewClassName', staticMethod: 'newMethodName' },
+      expectedCode: 'NewClassName.newMethodName();',
+    },
+    {
+      transformer: expressionStatementTransformer,
+      sourceCode: 'let instance = new TestClass(); instance.method();',
+      nameMapping: { TestClass: 'NewClassName', method: 'newMethodName' },
+      expectedCode: 'let instance = new NewClassName(); instance.newMethodName();',
+    },
+    {
+      transformer: interfaceNamesTransformer,
+      sourceCode: 'interface TestInterface { oldMember: string; }',
+      nameMapping: { TestInterface: 'NewInterfaceName', oldMember: 'newMember' },
+      expectedCode: 'interface NewInterfaceName { newMember: string; }',
+    },
+    {
+      transformer: importTransformer,
+      sourceCode: 'const UI = require("@xxx/ui-library");',
+      nameMapping: { '@xxx/ui-library': '@abc/ui-library' },
+      expectedCode: 'const UI = require("@abc/ui-library");',
+    },
+    {
+      transformer: exportTransformer,
+      sourceCode: 'export { Component } from "@xxx/ui-library";',
+      nameMapping: { '@xxx/ui-library': '@abc/ui-library' },
+      expectedCode: 'export { Component } from "@abc/ui-library";',
+    },
+    {
+      transformer: exportTransformer,
+      sourceCode: 'export * from "@xxx/ui-library";',
+      nameMapping: { '@xxx/ui-library': '@abc/ui-library' },
+      expectedCode: 'export * from "@abc/ui-library";',
+    },
+    {
+      transformer: exportTransformer,
+      sourceCode: 'export { default as UI } from "@xxx/ui-library";',
+      nameMapping: { '@xxx/ui-library': '@abc/ui-library' },
+      expectedCode: 'export { default as UI } from "@abc/ui-library";',
+    },
+  ];
+
+  for (const { transformer, sourceCode, nameMapping, expectedCode } of testCases) {
+    createTransformerTest(sourceCode, nameMapping, transformer, expectedCode);
+  }
+
+  it('should return original source code if no transformations are applied', async () => {
+    const sourceCode = 'class TestClass {} function testFunction() {}';
+    const result = await transformSourceFile('test.ts', sourceCode, []);
+    const normalizedResult = normalizeFormatting(result);
+    const normalizedSourceCode = normalizeFormatting(sourceCode);
+    expect(normalizedResult).toBe(normalizedSourceCode);
+  });
+
+  it('should handle multiple transformers', async () => {
+    const sourceCode = 'class TestClass {} function testFunction() {}';
+    const expectedCode = 'class NewClassName {} function newFunctionName() {}';
+    const result = await transformSourceFile('test.ts', sourceCode, [
+      classNamesTransformer({ TestClass: 'NewClassName' }),
+      functionNamesTransformer({ testFunction: 'newFunctionName' }),
+    ]);
+    const normalizedResult = normalizeFormatting(result);
+    const normalizedExpectedCode = normalizeFormatting(expectedCode);
+    expect(normalizedResult).toBe(normalizedExpectedCode);
+  });
+});

package/tsconfig-writer.ts

@@ -0,0 +1,249 @@
+import fs from 'fs-extra';
+import path from 'path';
+import yesno from 'yesno';
+import { PathLinuxRelative } from '@teambit/legacy/dist/utils/path';
+import { compact, invertBy, isEqual, uniq } from 'lodash';
+import { PromptCanceled } from '@teambit/legacy/dist/prompts/exceptions';
+import { Environment, ExecutionContext } from '@teambit/envs';
+import { Workspace } from '@teambit/workspace';
+import { Logger } from '@teambit/logger';
+import chalk from 'chalk';
+import { TsconfigWriterOptions } from './typescript.main.runtime';
+import { TypescriptAspect } from '.';
+
+export type TsconfigPathsPerEnv = { envIds: string[]; tsconfig: string; paths: string[] };
+
+type PathsPerEnv = { env: Environment; ids: string[]; paths: string[] };
+
+export class TsconfigWriter {
+  constructor(private workspace: Workspace, private logger: Logger) {}
+
+  async write(
+    envsExecutionContext: ExecutionContext[],
+    options: TsconfigWriterOptions
+  ): Promise<TsconfigPathsPerEnv[]> {
+    const pathsPerEnvs = this.getPathsPerEnv(envsExecutionContext, options);
+    const tsconfigPathsPerEnv = pathsPerEnvs.map((pathsPerEnv) => ({
+      envIds: pathsPerEnv.ids,
+      tsconfig: this.getTsconfigFromEnv(pathsPerEnv.env), // pathsPerEnv.env.getTsConfig(),
+      paths: pathsPerEnv.paths,
+    }));
+    if (options.dryRun) return tsconfigPathsPerEnv;
+    if (!options.silent) await this.promptForWriting(tsconfigPathsPerEnv.map((p) => p.paths).flat());
+    await this.writeFiles(tsconfigPathsPerEnv);
+    return tsconfigPathsPerEnv;
+  }
+
+  private getTsconfigFromEnv(env: Environment) {
+    const compiler = env.getCompiler();
+    if (compiler.id === TypescriptAspect.id) {
+      return compiler.displayConfig() as string;
+    }
+    return JSON.stringify(env.getTsConfig(), undefined, 2);
+  }
+
+  async clean(envsExecutionContext: ExecutionContext[], { dryRun, silent }: TsconfigWriterOptions): Promise<string[]> {
+    const pathsPerEnvs = this.getPathsPerEnv(envsExecutionContext, { dedupe: false });
+    const componentPaths = pathsPerEnvs.map((p) => p.paths).flat();
+    const allPossibleDirs = getAllPossibleDirsFromPaths(componentPaths);
+    const dirsWithTsconfig = await filterDirsWithTsconfigFile(allPossibleDirs);
+    const tsconfigFiles = dirsWithTsconfig.map((dir) => path.join(dir, 'tsconfig.json'));
+    if (dryRun) return tsconfigFiles;
+    if (!dirsWithTsconfig.length) return [];
+    if (!silent) await this.promptForCleaning(tsconfigFiles);
+    await this.deleteFiles(tsconfigFiles);
+    return tsconfigFiles;
+  }
+
+  private async promptForWriting(dirs: string[]) {
+    this.logger.clearStatusLine();
+    const tsconfigFiles = dirs.map((dir) => path.join(dir, 'tsconfig.json'));
+    const ok = await yesno({
+      question: `${chalk.underline('The following paths will be written:')}
+${tsconfigFiles.join('\n')}
+${chalk.bold('Do you want to continue? [yes(y)/no(n)]')}`,
+    });
+    if (!ok) {
+      throw new PromptCanceled();
+    }
+  }
+
+  private async promptForCleaning(tsconfigFiles: string[]) {
+    this.logger.clearStatusLine();
+    const ok = await yesno({
+      question: `${chalk.underline('The following paths will be deleted:')}
+${tsconfigFiles.join('\n')}
+${chalk.bold('Do you want to continue? [yes(y)/no(n)]')}`,
+    });
+    if (!ok) {
+      throw new PromptCanceled();
+    }
+  }
+
+  private async deleteFiles(tsconfigFiles: string[]) {
+    await Promise.all(tsconfigFiles.map((f) => fs.remove(f)));
+  }
+
+  private async writeFiles(tsconfigPathsPerEnvs: TsconfigPathsPerEnv[]) {
+    await Promise.all(
+      tsconfigPathsPerEnvs.map((pathsPerEnv) => {
+        return Promise.all(
+          pathsPerEnv.paths.map((p) => fs.writeFile(path.join(p, 'tsconfig.json'), pathsPerEnv.tsconfig))
+        );
+      })
+    );
+  }
+
+  private getPathsPerEnv(envsExecutionContext: ExecutionContext[], { dedupe }: TsconfigWriterOptions): PathsPerEnv[] {
+    const pathsPerEnvs = envsExecutionContext.map((envExecution) => {
+      return {
+        id: envExecution.id,
+        env: envExecution.env,
+        paths: envExecution.components.map((c) => this.workspace.componentDir(c.id, undefined, { relative: true })),
+      };
+    });
+    if (!dedupe) {
+      return pathsPerEnvs.map(({ id, env, paths }) => ({ ids: [id], env, paths }));
+    }
+
+    const envsWithFiles = envsExecutionContext.map((e) => ({
+      id: e.id,
+      file: e.env.getTsConfig(),
+    }));
+    const envsPerFile: { envIds: string[]; fileContent: Record<string, any> }[] = [];
+    const isEnvProcessed = (envId: string) =>
+      envsPerFile
+        .map((e) => e.envIds)
+        .flat()
+        .find((e) => e === envId);
+    envsWithFiles.forEach(({ id, file }) => {
+      if (isEnvProcessed(id)) return;
+      const foundSameFile = envsWithFiles.filter((e) => isEqual(file, e.file));
+      envsPerFile.push({ envIds: foundSameFile.map((f) => f.id), fileContent: file });
+    });
+    const pathsPerEnvIds = envsPerFile.map((e) => ({
+      ids: e.envIds,
+      paths: compact(e.envIds.map((envId) => pathsPerEnvs.find((p) => p.id === envId)?.paths).flat()),
+    }));
+    // const pathsPerEnvIds = pathsPerEnvs.map((p) => ({ ids: p.ids, paths: p.paths }));
+    const envsPerDedupedPaths = dedupePaths(pathsPerEnvIds);
+    const dedupedPathsPerEnvs: PathsPerEnv[] = envsPerDedupedPaths.map((envWithDedupePaths) => {
+      const found = pathsPerEnvs.find((p) => envWithDedupePaths.ids.includes(p.id));
+      if (!found) throw new Error(`dedupedPathsPerEnvs, unable to find ${envWithDedupePaths.ids}`);
+      return {
+        env: found.env,
+        ids: envWithDedupePaths.ids,
+        paths: envWithDedupePaths.paths,
+      };
+    });
+
+    return dedupedPathsPerEnvs;
+  }
+}
+
+type PathsPerEnvIds = { ids: string[]; paths: string[] };
+
+async function filterDirsWithTsconfigFile(dirs: string[]): Promise<string[]> {
+  const dirsWithTsconfig = await Promise.all(
+    dirs.map(async (dir) => {
+      const hasTsconfig = await fs.pathExists(path.join(dir, 'tsconfig.json'));
+      return hasTsconfig ? dir : undefined;
+    })
+  );
+  return compact(dirsWithTsconfig);
+}
+
+function getAllPossibleDirsFromPaths(paths: PathLinuxRelative[]): PathLinuxRelative[] {
+  const dirs = paths.map((p) => getAllParentsDirOfPath(p)).flat();
+  dirs.push('.'); // add the root dir
+  return uniq(dirs);
+}
+
+function getAllParentsDirOfPath(p: PathLinuxRelative): PathLinuxRelative[] {
+  const all: string[] = [];
+  let current = p;
+  while (current !== '.') {
+    all.push(current);
+    current = path.dirname(current);
+  }
+  return all;
+}
+
+/**
+ * easier to understand by an example:
+ * input:
+ * [
+ *   { id: react, paths: [ui/button, ui/form] },
+ *   { id: aspect, paths: [p/a1, p/a2] },
+ *   { id: node, paths: [p/n1] },
+ * ]
+ *
+ * output:
+ * [
+ *   { id: react, paths: [ui] },
+ *   { id: aspect, paths: [p] },
+ *   { id: node, paths: [p/n1] },
+ * ]
+ *
+ * the goal is to minimize the amount of files to write per env if possible.
+ * when multiple components of the same env share a root-dir, then, it's enough to write a file in that shared dir.
+ * if in a shared-dir, some components using env1 and some env2, it finds the env that has the max number of
+ * components, this env will be optimized. other components, will have the files written inside their dirs.
+ */
+export function dedupePaths(pathsPerEnvId: PathsPerEnvIds[]): PathsPerEnvIds[] {
+  const rootDir = '.';
+  const individualPathPerConcatenatedEnvIds: { [path: string]: string } = pathsPerEnvId.reduce((acc, current) => {
+    current.paths.forEach((p) => {
+      acc[p] = current.ids.join(',');
+    });
+    return acc;
+  }, {});
+  const allPaths = Object.keys(individualPathPerConcatenatedEnvIds);
+  const allPossibleDirs = getAllPossibleDirsFromPaths(allPaths);
+
+  const allPathsPerEnvId: { [path: string]: string | null } = {}; // null when parent-dir has same amount of comps per env.
+
+  const calculateBestEnvForDir = (dir: string) => {
+    if (individualPathPerConcatenatedEnvIds[dir]) {
+      // it's the component dir, so it's the best env
+      allPathsPerEnvId[dir] = individualPathPerConcatenatedEnvIds[dir];
+      return;
+    }
+    const allPathsShareSameDir = dir === rootDir ? allPaths : allPaths.filter((p) => p.startsWith(`${dir}/`));
+    const countPerEnv: { [env: string]: number } = {};
+    allPathsShareSameDir.forEach((p) => {
+      const envIdStr = individualPathPerConcatenatedEnvIds[p];
+      if (countPerEnv[envIdStr]) countPerEnv[envIdStr] += 1;
+      else countPerEnv[envIdStr] = 1;
+    });
+    const max = Math.max(...Object.values(countPerEnv));
+    const envWithMax = Object.keys(countPerEnv).filter((env) => countPerEnv[env] === max);
+    if (!envWithMax.length) throw new Error(`must be at least one env related to path "${dir}"`);
+    if (envWithMax.length > 1) allPathsPerEnvId[dir] = null;
+    else allPathsPerEnvId[dir] = envWithMax[0];
+  };
+
+  allPossibleDirs.forEach((dirPath) => {
+    calculateBestEnvForDir(dirPath);
+  });
+
+  // this is the actual deduping. if found a shorter path with the same env, then no need for this path.
+  // in other words, return only the paths that their parent is null or has a different env.
+  const dedupedPathsPerEnvIds = Object.keys(allPathsPerEnvId).reduce((acc, current) => {
+    if (allPathsPerEnvId[current] && allPathsPerEnvId[path.dirname(current)] !== allPathsPerEnvId[current]) {
+      acc[current] = allPathsPerEnvId[current];
+    }
+
+    return acc;
+  }, {});
+  // rootDir parent is always rootDir, so leave it as is.
+  if (allPathsPerEnvId[rootDir]) dedupedPathsPerEnvIds[rootDir] = allPathsPerEnvId[rootDir];
+
+  const envIdsPerDedupedPaths = invertBy(dedupedPathsPerEnvIds);
+
+  const dedupedPaths = Object.keys(envIdsPerDedupedPaths).map((envIdStr) => ({
+    ids: envIdStr.split(','),
+    paths: envIdsPerDedupedPaths[envIdStr],
+  }));
+  return dedupedPaths;
+}

package/tsconfig.json

@@ -1,38 +1,33 @@
 {
   "compilerOptions": {
     "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
+      "esnext",
+      "dom",
+      "dom.Iterable"
     ],
-    "target": "es2015",
-    "module": "CommonJS",
-    "jsx": "react",
-    "allowJs": true,
-    "composite": true,
+    "target": "es2020",
+    "module": "es2020",
+    "jsx": "react-jsx",
     "declaration": true,
     "sourceMap": true,
-    "skipLibCheck": true,
     "experimentalDecorators": true,
-    "outDir": "dist",
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "rootDir": ".",
     "resolveJsonModule": true,
-    "emitDeclarationOnly": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "preserveConstEnums": true
+    "allowJs": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true
   },
   "exclude": [
+    "artifacts",
+    "public",
     "dist",
+    "node_modules",
+    "package.json",
     "esm.mjs",
-    "package.json"
+    "**/*.cjs",
+    "./dist"
   ],
   "include": [
     "**/*",

package/types/asset.d.ts

@@ -5,12 +5,12 @@ declare module '*.png' {
 declare module '*.svg' {
   import type { FunctionComponent, SVGProps } from 'react';
 
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
   const src: string;
   export default src;
 }
-
-// @TODO Gilad
 declare module '*.jpg' {
   const value: any;
   export = value;
@@ -27,3 +27,15 @@ declare module '*.bmp' {
   const value: any;
   export = value;
 }
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/typescript.aspect.ts

@@ -0,0 +1,5 @@
+import { Aspect } from '@teambit/harmony';
+
+export const TypescriptAspect = Aspect.create({
+  id: 'teambit.typescript/typescript',
+});

package/typescript.compiler.spec.ts

@@ -0,0 +1,63 @@
+import { Logger } from '@teambit/logger';
+import ts from 'typescript';
+import { expect } from 'chai';
+import path from 'path';
+import { TypescriptAspect } from './typescript.aspect';
+
+import { TypescriptCompiler } from './typescript.compiler';
+import type { TsCompilerOptionsWithoutTsConfig } from './compiler-options';
+
+const defaultOpts = {
+  tsconfig: {},
+  types: [],
+};
+
+describe('TypescriptCompiler', () => {
+  describe('getDistPathBySrcPath', () => {
+    it('should replace the extension with .js and prepend the dist dir', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.getDistPathBySrcPath('index.ts')).to.equal(path.join('dist', 'index.js'));
+      expect(tsCompiler.getDistPathBySrcPath('index.tsx')).to.equal(path.join('dist', 'index.js'));
+    });
+    it('should not replace the extension if the file is not supported', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.getDistPathBySrcPath('style.css')).to.equal(path.join('dist', 'style.css'));
+      expect(tsCompiler.getDistPathBySrcPath('index.d.ts')).to.equal(path.join('dist', 'index.d.ts'));
+    });
+  });
+  describe('isFileSupported', () => {
+    it('should support .ts files', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.isFileSupported('index.ts')).to.be.true;
+    });
+    it('should support .tsx files', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.isFileSupported('index.tsx')).to.be.true;
+    });
+    it('should not support .jsx files by default', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.isFileSupported('index.jsx')).to.be.false;
+    });
+    it('should not support .js files by default', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.isFileSupported('index.js')).to.be.false;
+    });
+    it('should support .jsx files when passing compileJsx', () => {
+      const tsCompiler = getTsCompiler({ compileJsx: true, ...defaultOpts });
+      expect(tsCompiler.isFileSupported('index.jsx')).to.be.true;
+    });
+    it('should support .js files when passing compileJs', () => {
+      const tsCompiler = getTsCompiler({ compileJs: true, ...defaultOpts });
+      expect(tsCompiler.isFileSupported('index.js')).to.be.true;
+    });
+    it('should not support .d.ts files', () => {
+      const tsCompiler = getTsCompiler();
+      expect(tsCompiler.isFileSupported('index.d.ts')).to.be.false;
+    });
+  });
+});
+
+function getTsCompiler(opts: TsCompilerOptionsWithoutTsConfig = defaultOpts) {
+  const finalOpts = Object.assign({}, defaultOpts, opts);
+  return new TypescriptCompiler(TypescriptAspect.id, new Logger('test'), finalOpts, ts);
+}