enable env composition to override compiler options

ocombe · ocombe · commit f5be6fff35c1 · 2021-07-13T18:59:11.000+02:00
diff --git a/packages/angular-v11/angular-v11.main.runtime.ts b/packages/angular-v11/angular-v11.main.runtime.ts
@@ -1,46 +1,8 @@
-import { MainRuntime } from '@teambit/cli';
-import { CompilerAspect, CompilerMain } from '@teambit/compiler';
-import { CompositionsAspect, CompositionsMain } from '@teambit/compositions';
-import { EnvsAspect, EnvsMain } from '@teambit/envs';
-import { ESLintAspect, ESLintMain } from '@teambit/eslint';
-import { GeneratorAspect, GeneratorMain } from '@teambit/generator';
-import { JestAspect, JestMain } from '@teambit/jest';
-import { NgPackagrAspect, NgPackagrMain } from '@teambit/ng-packagr';
-import { WebpackAspect, WebpackMain } from '@teambit/webpack';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-import { AngularPreview } from '@teambit/angular';
+import { AngularDeps, AngularMain, AngularPreview } from '@teambit/angular';
 import { AngularV11Aspect } from './angular-v11.aspect';
 import { AngularV11Env } from './angular-v11.env';
 
-type AngularV11Deps = [
-  JestMain,
-  CompilerMain,
-  ESLintMain,
-  NgPackagrMain,
-  GeneratorMain,
-  WebpackMain,
-  Workspace,
-  CompositionsMain,
-  EnvsMain
-];
-
-export class AngularV11Main {
-  static slots = [];
-  static runtime: any = MainRuntime;
-  static dependencies: any = [
-    JestAspect,
-    CompilerAspect,
-    ESLintAspect,
-    NgPackagrAspect,
-    GeneratorAspect,
-    WebpackAspect,
-    WorkspaceAspect,
-    CompositionsAspect,
-    EnvsAspect,
-  ];
-
-  constructor(readonly angularV11Env: AngularV11Env) {}
-
+export class AngularV11Main extends AngularMain {
   static async provider([
     jestAspect,
     compiler,
@@ -51,7 +13,7 @@ export class AngularV11Main {
     workspace,
     compositions,
     envs,
-  ]: AngularV11Deps) {
+  ]: AngularDeps) {
     const angularV11Env = new AngularV11Env(
       jestAspect,
       compiler,
@@ -62,9 +24,7 @@ export class AngularV11Main {
       workspace,
       compositions
     );
-    const angularV11Main = new AngularV11Main(angularV11Env);
-    envs.registerEnv(angularV11Env);
-    return angularV11Main;
+    return new AngularV11Main(envs, angularV11Env);
   }
 }
 
diff --git a/packages/angular-v12/angular-v12.main.runtime.ts b/packages/angular-v12/angular-v12.main.runtime.ts
@@ -1,46 +1,8 @@
-import { MainRuntime } from '@teambit/cli';
-import { CompilerAspect, CompilerMain } from '@teambit/compiler';
-import { CompositionsAspect, CompositionsMain } from '@teambit/compositions';
-import { EnvsAspect, EnvsMain } from '@teambit/envs';
-import { ESLintAspect, ESLintMain } from '@teambit/eslint';
-import { GeneratorAspect, GeneratorMain } from '@teambit/generator';
-import { JestAspect, JestMain } from '@teambit/jest';
-import { NgPackagrAspect, NgPackagrMain } from '@teambit/ng-packagr';
-import { WebpackAspect, WebpackMain } from '@teambit/webpack';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-import { AngularPreview } from '@teambit/angular';
+import { AngularDeps, AngularMain, AngularPreview } from '@teambit/angular';
 import { AngularV12Aspect } from './angular-v12.aspect';
 import { AngularV12Env } from './angular-v12.env';
 
-type AngularV12Deps = [
-  JestMain,
-  CompilerMain,
-  ESLintMain,
-  NgPackagrMain,
-  GeneratorMain,
-  WebpackMain,
-  Workspace,
-  CompositionsMain,
-  EnvsMain
-];
-
-export class AngularV12Main {
-  static slots = [];
-  static runtime: any = MainRuntime;
-  static dependencies: any = [
-    JestAspect,
-    CompilerAspect,
-    ESLintAspect,
-    NgPackagrAspect,
-    GeneratorAspect,
-    WebpackAspect,
-    WorkspaceAspect,
-    CompositionsAspect,
-    EnvsAspect,
-  ];
-
-  constructor(readonly angularV12Env: AngularV12Env) {}
-
+export class AngularV12Main extends AngularMain {
   static async provider([
     jestAspect,
     compiler,
@@ -51,7 +13,7 @@ export class AngularV12Main {
     workspace,
     compositions,
     envs,
-  ]: AngularV12Deps) {
+  ]: AngularDeps): Promise<AngularMain> {
     const angularV12Env = new AngularV12Env(
       jestAspect,
       compiler,
@@ -62,9 +24,7 @@ export class AngularV12Main {
       workspace,
       compositions
     );
-    const angularV12Main = new AngularV12Main(angularV12Env);
-    envs.registerEnv(angularV12Env);
-    return angularV12Main;
+    return new AngularV12Main(envs, angularV12Env);
   }
 }
 
diff --git a/packages/angular/angular.env.ts b/packages/angular/angular.env.ts
@@ -3,22 +3,30 @@ import { BuildTask } from '@teambit/builder';
 import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';
 import { CompilerMain, CompilerOptions } from '@teambit/compiler';
 import { VariantPolicyConfigObject } from '@teambit/dependency-resolver';
-import { BuilderEnv, DependenciesEnv, DevEnv, EnvDescriptor, LinterEnv, TesterEnv } from '@teambit/envs';
+import {
+  BuilderEnv,
+  CompilerEnv,
+  DependenciesEnv,
+  DevEnv,
+  EnvDescriptor,
+  LinterEnv,
+  TesterEnv
+} from '@teambit/envs';
 import { ESLintMain } from '@teambit/eslint';
 import { GeneratorMain } from '@teambit/generator';
 import { JestMain } from '@teambit/jest';
 import { Linter } from '@teambit/linter';
 import { NgPackagr, NgPackagrMain } from '@teambit/ng-packagr';
 import { Tester } from '@teambit/tester';
-import { TsCompilerOptionsWithoutTsConfig } from '@teambit/typescript';
 import { WebpackConfigTransformer } from '@teambit/webpack';
+import { CompilerOptions as TsCompilerOptions } from '@angular/compiler-cli';
 import { angularTemplates } from './angular.templates';
 import { AngularWebpack } from './angular.webpack';
 
 /**
  * a component environment built for [Angular](https://angular.io).
  */
-export abstract class AngularEnv implements BuilderEnv, LinterEnv, DependenciesEnv, DevEnv, TesterEnv {
+export abstract class AngularEnv implements CompilerEnv, LinterEnv, DependenciesEnv, DevEnv, TesterEnv {
   icon = 'https://static.bit.dev/extensions-icons/angular.svg';
 
   constructor(
@@ -39,38 +47,22 @@ export abstract class AngularEnv implements BuilderEnv, LinterEnv, DependenciesE
   abstract __getDescriptor(): Promise<EnvDescriptor>;
   abstract getDependencies(): VariantPolicyConfigObject | Promise<VariantPolicyConfigObject>;
 
-  private createNgPackgrCompiler(
-    tsconfig?: any, // any instead of TsConfigSourceFile because we don't use the same ts version
-    compilerOptions: Partial<CompilerOptions> = {}
-  ) {
-    return this.ngPackagrAspect.createCompiler(this.ngPackagr, this.readDefaultTsConfig, tsconfig, {
-      ...compilerOptions,
-    });
-  }
-
-  getCompiler(
-    tsconfig?: any, // any instead of TsConfigSourceFile because we don't use the same ts version
-    compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {}
-  ) {
-    return this.createNgPackgrCompiler(tsconfig, compilerOptions);
+  private createNgPackgrCompiler(tsCompilerOptions?: TsCompilerOptions, bitCompilerOptions?: Partial<CompilerOptions>) {
+    return this.ngPackagrAspect.createCompiler(this.ngPackagr, this.readDefaultTsConfig, tsCompilerOptions, bitCompilerOptions);
   }
 
-  private getCompilerTask(
-    tsconfig?: any, // any instead of TsConfigSourceFile because we don't use the same ts version
-    compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {}
-  ) {
-    return this.compiler.createTask('NgPackagrCompiler', this.getCompiler(tsconfig, compilerOptions));
+  getCompiler(tsCompilerOptions?: TsCompilerOptions, bitCompilerOptions?: Partial<CompilerOptions>) {
+    return this.createNgPackgrCompiler(tsCompilerOptions, bitCompilerOptions);
   }
 
   /**
    * Returns the component build pipeline
    * Required for `bit build`
    */
-  getBuildPipe(
-    tsconfig?: any, // any instead of TsConfigSourceFile because we don't use the same ts version
-    compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {}
-  ): BuildTask[] {
-    return [this.getCompilerTask(tsconfig, compilerOptions)];
+  getBuildPipe(tsCompilerOptions?: TsCompilerOptions, bitCompilerOptions?: Partial<CompilerOptions>): BuildTask[] {
+    const compiler = this.getCompiler(tsCompilerOptions, bitCompilerOptions);
+    const compilerTask = this.compiler.createTask('NgPackagrCompiler', compiler);
+    return [compilerTask];
   }
 
   /**
diff --git a/packages/angular/angular.main.runtime.ts b/packages/angular/angular.main.runtime.ts
@@ -0,0 +1,75 @@
+import { CompilerOptions as TsCompilerOptions, readConfiguration } from '@angular/compiler-cli';
+import { CompilerAspect, CompilerMain, CompilerOptions } from '@teambit/compiler';
+import { CompositionsAspect, CompositionsMain } from '@teambit/compositions';
+import { Environment, EnvsAspect, EnvsMain, EnvTransformer } from '@teambit/envs';
+import { ESLintAspect, ESLintMain } from '@teambit/eslint';
+import { GeneratorAspect, GeneratorMain } from '@teambit/generator';
+import { JestAspect, JestMain } from '@teambit/jest';
+import { MainRuntime } from '@teambit/legacy/dist/scopes/harmony/cli';
+import { NgPackagrAspect, NgPackagrMain } from '@teambit/ng-packagr';
+import { WebpackAspect, WebpackMain } from '@teambit/webpack';
+import { Workspace, WorkspaceAspect } from '@teambit/workspace';
+import { AngularEnv } from './angular.env';
+
+export type AngularDeps = [
+  JestMain,
+  CompilerMain,
+  ESLintMain,
+  NgPackagrMain,
+  GeneratorMain,
+  WebpackMain,
+  Workspace,
+  CompositionsMain,
+  EnvsMain
+];
+
+export abstract class AngularMain {
+  static slots = [];
+  static runtime: any = MainRuntime;
+  static dependencies: any = [
+    JestAspect,
+    CompilerAspect,
+    ESLintAspect,
+    NgPackagrAspect,
+    GeneratorAspect,
+    WebpackAspect,
+    WorkspaceAspect,
+    CompositionsAspect,
+    EnvsAspect,
+  ];
+
+  constructor(private envs: EnvsMain, private angularEnv: AngularEnv) {
+    envs.registerEnv(angularEnv);
+  }
+
+  /**
+   * Create a new composition of the angular environment.
+   */
+  compose(transformers: EnvTransformer[], targetEnv: Environment = {}) {
+    return this.envs.compose(this.envs.merge(targetEnv, this.angularEnv), transformers);
+  }
+
+  /**
+   * Override the compiler options for the Angular environment.
+   * Compiler options combine both typescript "compilerOptions" and Angular specific "angularCompilerOptions"
+   */
+  overrideCompilerOptions(tsconfigPath: string, bitCompilerOptions?: Partial<CompilerOptions>): EnvTransformer;
+  overrideCompilerOptions(compilerOptions: TsCompilerOptions, bitCompilerOptions?: Partial<CompilerOptions>): EnvTransformer;
+  overrideCompilerOptions(opts?: TsCompilerOptions | string, bitCompilerOptions?: Partial<CompilerOptions>): EnvTransformer {
+    let tsCompilerOptions: TsCompilerOptions | undefined;
+    if (typeof opts === 'string') {
+      tsCompilerOptions = readConfiguration(opts).options;
+    } else {
+      tsCompilerOptions = opts;
+    }
+
+    return this.envs.override({
+      getCompiler: () => {
+        return this.angularEnv.getCompiler(tsCompilerOptions, bitCompilerOptions);
+      },
+      getBuildPipe: () => {
+        return this.angularEnv.getBuildPipe(tsCompilerOptions, bitCompilerOptions);
+      }
+    });
+  }
+}
diff --git a/packages/angular/angular.templates.ts b/packages/angular/angular.templates.ts
@@ -1,6 +1,7 @@
 import { ComponentTemplate } from '@teambit/generator';
+import { ngEnvTemplate } from './templates/ng-env';
 import { ngLibTemplate } from './templates/ng-lib';
 
-export const angularTemplates: ComponentTemplate[] = [ngLibTemplate];
+export const angularTemplates: ComponentTemplate[] = [ngLibTemplate, ngEnvTemplate];
 
 // export const workspaceTemplates: WorkspaceTemplate[] = [angularWorkspaceTemplate];
diff --git a/packages/angular/angular.webpack.ts b/packages/angular/angular.webpack.ts
@@ -1,5 +1,4 @@
 import { Bundler, BundlerContext, DevServer, DevServerContext, Target } from '@teambit/bundler';
-import { ComponentID } from '@teambit/component';
 import { CompositionsMain } from '@teambit/compositions';
 import { CACHE_ROOT } from '@teambit/legacy/dist/constants';
 import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
diff --git a/packages/angular/index.ts b/packages/angular/index.ts
@@ -2,3 +2,5 @@ export { AngularWebpack, WebpackSetup } from './angular.webpack';
 export { AngularEnv } from './angular.env';
 export { AngularPreview } from './angular.preview.runtime';
 export { AngularModulesResolverPlugin } from './angular.webpack.resolver';
+export { AngularMain } from './angular.main.runtime';
+export type { AngularDeps } from './angular.main.runtime'
diff --git a/packages/angular/templates/ng-env/files/doc.ts b/packages/angular/templates/ng-env/files/doc.ts
@@ -0,0 +1,11 @@
+export function docFile() {
+  return `---
+labels: ['extension', 'angular', 'env', 'environment']
+description: 'A customized extension for Angular environment.'
+---
+
+This is a customized extension for Angular, based on the [Angular Aspect](https://bit.dev/teambit/angular/angular-v12).
+
+Explain here the modified configurations and tools applied.
+`;
+}
diff --git a/packages/angular/templates/ng-env/files/extension.ts b/packages/angular/templates/ng-env/files/extension.ts
@@ -0,0 +1,28 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function extensionFile({ namePascalCase: Name }: ComponentContext) {
+  return `import { EnvsMain, EnvsAspect } from '@teambit/envs'
+import { AngularV12Aspect, AngularV12Main } from '@teambit/angular-v12'
+
+export class ${Name}Extension {
+  constructor(private angular: AngularV12Main) {}
+
+  static dependencies: any = [EnvsAspect, AngularV12Aspect]
+
+  static async provider([envs, angular]: [EnvsMain, AngularV12Main]) {
+    const ${Name}Env = angular.compose([
+      /**
+       * Use any of the "angular.override..." transformers, for example:
+       * angular.overrideCompilerOptions({
+       *   fullTemplateTypeCheck: false
+       * })
+       */
+    ])
+
+    envs.registerEnv(${Name}Env)
+
+    return new ${Name}Extension(angular)
+  }
+}
+`;
+}
diff --git a/packages/angular/templates/ng-env/files/index.ts b/packages/angular/templates/ng-env/files/index.ts
@@ -0,0 +1,6 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function indexFile({ namePascalCase: Name, name }: ComponentContext) {
+  return `export { ${Name}Extension, ${Name}Extension as default } from './${name}.extension';
+`;
+}
diff --git a/packages/angular/templates/ng-env/index.ts b/packages/angular/templates/ng-env/index.ts
@@ -0,0 +1,27 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { indexFile } from './files/index';
+import { docFile } from './files/doc';
+import { extensionFile } from './files/extension';
+
+export const ngEnvTemplate: ComponentTemplate = {
+  name: 'ng-env',
+  description: 'customize the base Angular env with your configs and tools',
+  aspect: true,
+  generateFiles: (context: ComponentContext) => {
+    return [
+      {
+        relativePath: 'index.ts',
+        content: indexFile(context),
+        isMain: true,
+      },
+      {
+        relativePath: `${context.name}.docs.mdx`,
+        content: docFile(),
+      },
+      {
+        relativePath: `${context.name}.extension.ts`,
+        content: extensionFile(context),
+      },
+    ];
+  },
+};
diff --git a/packages/angular/templates/ng-lib/index.ts b/packages/angular/templates/ng-lib/index.ts
@@ -9,7 +9,6 @@ import { publicApiFile } from './template-files/public-api';
 export const ngLibTemplate: ComponentTemplate = {
   name: 'ng-lib',
   description: 'a generic Angular library',
-  hidden: false,
 
   generateFiles(context: ComponentContext) {
     return [
diff --git a/packages/ng-packagr/index.ts b/packages/ng-packagr/index.ts
diff --git a/packages/ng-packagr/ng-packagr.compiler.ts b/packages/ng-packagr/ng-packagr.compiler.ts
diff --git a/packages/ng-packagr/ng-packagr.main.runtime.ts b/packages/ng-packagr/ng-packagr.main.runtime.ts
diff --git a/workspace.jsonc b/workspace.jsonc

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { Bundler, BundlerContext, DevServer, DevServerContext, Target } from '@teambit/bundler';`
`2`		`-import { ComponentID } from '@teambit/component';`
`3`	`2`	`import { CompositionsMain } from '@teambit/compositions';`
`4`	`3`	`import { CACHE_ROOT } from '@teambit/legacy/dist/constants';`
`5`	`4`	`import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';`