refactor: make all imports compatible with ESM/CJS output. (angular#43431)

As outlined in the previous commit which enabled the `esModuleInterop`
TypeScript compiler option, we need to update all namespace imports
for `typescript` to default imports. This is needed to allow for
TypeScript to be imported at runtime from an ES module.

Similar changes are needed for modules like `semver` where the types incorrectly
suggest named exports that will not exist at runtime when imported from ESM.

This commit refactors all imports to match with the lint rule we have
configured in the previous commit. See the previous commit for more
details on why certain imports have been changed.

A special case are the imports to `@babel/core` and `@babel/types`. For
these a special interop is needed as both default imports, or named
imports break the other module format. e.g default imports would work
well for ESM, but it breaks for CJS. For CJS, the named imports would
only work, but in ESM, only the default export exist. We work around
this for now until the devmode is using ESM as well (which would be
consistent with prodmode and gives us more valuable test results). More
details on the interop can be found in the `babel_core.ts` files (two
interops are needed for both localize/or the compiler-cli).

PR Close angular#43431

Author: devversion

package.json

@@ -61,7 +61,6 @@
     "@babel/preset-env": "7.10.2",
     "@babel/template": "7.8.6",
     "@babel/traverse": "7.8.6",
-    "@babel/types": "7.8.6",
     "@bazel/concatjs": "4.3.0",
     "@bazel/esbuild": "4.3.0",
     "@bazel/jasmine": "4.3.0",

packages/bazel/src/ngc-wrapped/index.ts

@@ -12,7 +12,7 @@ import {BazelOptions, CachedFileLoader, CompilerHost, constructManifest, debug,
 import * as fs from 'fs';
 import * as path from 'path';
 import * as tsickle from 'tsickle';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
 const NGC_GEN_FILES = /^(.*?)\.(ngfactory|ngsummary|ngstyle|shim\.ngstyle)(.*)$/;

packages/bazel/test/ngc-wrapped/test_support.ts

@@ -9,7 +9,7 @@
 import {runOneBuild} from '@angular/bazel';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {createTsConfig} from './tsconfig_template';
 

packages/common/locales/generate-locales-tool/cldr-data.ts

@@ -8,7 +8,7 @@
 
 import {runfiles} from '@bazel/runfiles';
 import {CldrStatic} from 'cldrjs';
-import {sync as globSync} from 'glob';
+import glob from 'glob';
 
 // TypeScript doesn't allow us to import the default export without the `esModuleInterop`. We use
 // the NodeJS require function instead as specifying a custom tsconfig complicates the setup
@@ -141,7 +141,7 @@ export class CldrData {
    */
   private _readCldrDataFromRepository(): object[] {
     const jsonFiles =
-        CLDR_DATA_GLOBS.map(pattern => globSync(pattern, {cwd: this.cldrDataDir, absolute: true}))
+        CLDR_DATA_GLOBS.map(pattern => glob.sync(pattern, {cwd: this.cldrDataDir, absolute: true}))
             .reduce((acc, dataFiles) => [...acc, ...dataFiles], []);
 
     // Read the JSON for all determined CLDR json files.

packages/compiler-cli/BUILD.bazel

@@ -42,7 +42,6 @@ esbuild(
         "@angular/compiler",
         "typescript",
         "@babel/core",
-        "@babel/types",
         "reflect-metadata",
         "minimist",
         "canonical-path",

packages/compiler-cli/linker/babel/BUILD.bazel

@@ -14,7 +14,6 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/logging",
         "//packages/compiler-cli/src/ngtsc/translator",
         "@npm//@babel/core",
-        "@npm//@babel/types",
         "@npm//@types/babel__core",
         "@npm//@types/babel__traverse",
     ],

packages/compiler-cli/linker/babel/src/ast/babel_ast_factory.ts

@@ -5,10 +5,9 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import * as t from '@babel/types';
-
 import {assert} from '../../../../linker';
 import {AstFactory, BinaryOperator, LeadingComment, ObjectLiteralProperty, SourceMapRange, TemplateLiteral, VariableDeclarationType} from '../../../../src/ngtsc/translator';
+import {types as t} from '../babel_core';
 
 /**
  * A Babel flavored implementation of the AstFactory.

packages/compiler-cli/linker/babel/src/ast/babel_ast_host.ts

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as t from '@babel/types';
-
 import {assert, AstHost, FatalLinkerError, Range} from '../../../../linker';
+import {types as t} from '../babel_core';
 
 /**
  * This implementation of `AstHost` is able to get information from Babel AST nodes.

packages/compiler-cli/linker/babel/src/babel_core.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * This is an interop file allowing for `@babel/core` to be imported in both CommonJS or
+ * ES module files. The `@babel/core` package needs some special treatment because:
+ *
+ * Using a default import does not with CommonJS because the `@babel/core` package does not
+ * expose a `default` export at runtime (because it sets the `_esModule` property that causes
+ * TS to not create the necessary interop `default` export). On the other side, when loaded
+ * as part of an ESM, NodeJS will make all of the exports available as default export.
+ *
+ * Using named import bindings (i.e. namespace import or actual named bindings) is not
+ * working well for ESM because as said before, NodeJS will make all of the exports available
+ * as the `default` export. Hence ESM that imports CJS, always should use the default import.
+ *
+ * There is no solution that would work for both CJS and ESM, so we need to use a custom interop
+ * that switches between the named exports or the default exports depending on what is available.
+ * This allows the code to run in both ESM (for production) and CJS (for development).
+ *
+ * TODO(devversion): remove this once devmode uses ESM as well.
+ */
+
+// tslint:disable-next-line
+import * as _babelNamespace from '@babel/core';
+// tslint:disable-next-line
+import _babelDefault from '@babel/core';
+
+const babel: typeof _babelNamespace = _babelDefault ?? _babelNamespace;
+
+// We create an alias of the `types` namespace so that we can re-export the
+// types namespace. Preserving the namespace is important so that types
+// can still be referenced using a qualified name.
+import _typesNamespace = _babelNamespace.types;
+
+// If the default export is available, we use its `types` runtime value
+// for the type namespace we re-export. This is a trick we use to preserve
+// the namespace types, while changing the runtime value of the namespace.
+// TS complains about us assigning to a namespace but this is legal at runtime.
+if (_babelDefault !== undefined) {
+  // @ts-ignore
+  _typesNamespace = _babelDefault.types;
+}
+
+export import types = _typesNamespace;
+export type PluginObj = _babelNamespace.PluginObj;
+export type ConfigAPI = _babelNamespace.ConfigAPI;
+export type NodePath<T = _babelNamespace.Node> = _babelNamespace.NodePath<T>;
+
+export const NodePath: typeof _babelNamespace.NodePath = babel.NodePath;
+export const transformSync: typeof _babelNamespace.transformSync = babel.transformSync;
+export const parse: typeof _babelNamespace.parse = babel.parse;

packages/compiler-cli/linker/babel/src/babel_declaration_scope.ts

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {NodePath, Scope} from '@babel/traverse';
-import * as t from '@babel/types';
 
 import {DeclarationScope} from '../../../linker';
 
+import {types as t} from './babel_core';
+
 export type ConstantScopePath = NodePath<t.Function|t.Program>;
 
 /**

packages/compiler-cli/linker/babel/src/babel_plugin.ts

@@ -5,12 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ConfigAPI, PluginObj} from '@babel/core';
-
 import {NodeJSFileSystem} from '../../../src/ngtsc/file_system';
 import {ConsoleLogger, LogLevel} from '../../../src/ngtsc/logging';
 import {LinkerOptions} from '../../src/file_linker/linker_options';
 
+import {ConfigAPI, PluginObj} from './babel_core';
 import {createEs2015LinkerPlugin} from './es2015_linker_plugin';
 
 /**

packages/compiler-cli/linker/babel/src/es2015_linker_plugin.ts

@@ -5,14 +5,14 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {PluginObj} from '@babel/core';
+
 import {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
 
 import {FileLinker, isFatalLinkerError, LinkerEnvironment} from '../../../linker';
 
 import {BabelAstFactory} from './ast/babel_ast_factory';
 import {BabelAstHost} from './ast/babel_ast_host';
+import {PluginObj, types as t} from './babel_core';
 import {BabelDeclarationScope, ConstantScopePath} from './babel_declaration_scope';
 import {LinkerPluginOptions} from './linker_plugin_options';
 

packages/compiler-cli/linker/babel/test/BUILD.bazel

@@ -16,12 +16,10 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/file_system/testing",
         "//packages/compiler-cli/src/ngtsc/logging/testing",
         "//packages/compiler-cli/src/ngtsc/translator",
-        "@npm//@babel/core",
         "@npm//@babel/generator",
         "@npm//@babel/parser",
         "@npm//@babel/template",
         "@npm//@babel/traverse",
-        "@npm//@babel/types",
         "@npm//@types/babel__core",
         "@npm//@types/babel__generator",
         "@npm//@types/babel__template",

packages/compiler-cli/linker/babel/test/ast/babel_ast_factory_spec.ts

@@ -7,11 +7,16 @@
  */
 import {leadingComment} from '@angular/compiler';
 import generate from '@babel/generator';
-import {expression, statement} from '@babel/template';
-import * as t from '@babel/types';
+import template from '@babel/template';
+import {types as t} from '../../src/babel_core';
 
 import {BabelAstFactory} from '../../src/ast/babel_ast_factory';
 
+// Exposes shothands for the `expression` and `statement`
+// methods exposed by `@babel/template`.
+const expression = template.expression;
+const statement = template.statement;
+
 describe('BabelAstFactory', () => {
   let factory: BabelAstFactory;
   beforeEach(() => factory = new BabelAstFactory('/original.ts'));

packages/compiler-cli/linker/babel/test/ast/babel_ast_host_spec.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import * as t from '@babel/types';
+import {types as t} from '../../src/babel_core';
 import template from '@babel/template';
 import {parse} from '@babel/parser';
 import {BabelAstHost} from '../../src/ast/babel_ast_host';

packages/compiler-cli/linker/babel/test/babel_declaration_scope_spec.ts

@@ -5,9 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+
 import {parse} from '@babel/parser';
 import traverse, {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
+
+import {types as t} from '../src/babel_core';
 import {BabelDeclarationScope} from '../src/babel_declaration_scope';
 
 describe('BabelDeclarationScope', () => {

packages/compiler-cli/linker/babel/test/babel_plugin_spec.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {transformSync} from '@babel/core';
+import {transformSync} from '../src/babel_core';
 
 describe('default babel plugin entry-point', () => {
   it('should work as a Babel plugin using the module specifier', () => {

packages/compiler-cli/linker/babel/test/es2015_linker_plugin_spec.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as o from '@angular/compiler/src/output/output_ast';
-import {NodePath, PluginObj, transformSync} from '@babel/core';
 import generate from '@babel/generator';
-import * as t from '@babel/types';
 
 import {FileLinker} from '../../../linker';
 import {MockFileSystemNative} from '../../../src/ngtsc/file_system/testing';
 import {MockLogger} from '../../../src/ngtsc/logging/testing';
 import {PartialDirectiveLinkerVersion1} from '../../src/file_linker/partial_linkers/partial_directive_linker_1';
+import {NodePath, PluginObj, transformSync, types as t} from '../src/babel_core';
 import {createEs2015LinkerPlugin} from '../src/es2015_linker_plugin';
 
 describe('createEs2015LinkerPlugin()', () => {

packages/compiler-cli/linker/src/ast/typescript/typescript_ast_host.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {FatalLinkerError} from '../../fatal_linker_error';
 import {AstHost, Range} from '../ast_host';

packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_linker_selector.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {intersects, Range, SemVer} from 'semver';
+import semver from 'semver';
 
 import {AbsoluteFsPath} from '../../../../src/ngtsc/file_system';
 import {Logger} from '../../../../src/ngtsc/logging';
@@ -36,7 +36,7 @@ export const declarationFunctions = [
 ];
 
 export interface LinkerRange<TExpression> {
-  range: Range;
+  range: semver.Range;
   linker: PartialLinker<TExpression>;
 }
 
@@ -151,7 +151,7 @@ export class PartialLinkerSelector<TExpression> {
 
     const declarationRange = getRange('>=', minVersion);
     for (const {range: linkerRange, linker} of linkerRanges) {
-      if (intersects(declarationRange, linkerRange)) {
+      if (semver.intersects(declarationRange, linkerRange)) {
         return linker;
       }
     }
@@ -183,9 +183,9 @@ export class PartialLinkerSelector<TExpression> {
  * @param versionStr the version given in the partial declaration
  * @returns A semver range for the provided `version` and comparator.
  */
-function getRange(comparator: '<='|'>=', versionStr: string): Range {
-  const version = new SemVer(versionStr);
+function getRange(comparator: '<='|'>=', versionStr: string): semver.Range {
+  const version = new semver.SemVer(versionStr);
   // Wipe out any prerelease versions
   version.prerelease = [];
-  return new Range(`${comparator}${version.format()}`);
+  return new semver.Range(`${comparator}${version.format()}`);
 }

packages/compiler-cli/linker/test/ast/ast_value_spec.ts

@@ -7,7 +7,7 @@
  */
 import {WrappedNodeExpr} from '@angular/compiler';
 import {TypeScriptAstFactory} from '@angular/compiler-cli/src/ngtsc/translator';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {AstHost} from '../../src/ast/ast_host';
 import {AstObject, AstValue} from '../../src/ast/ast_value';

packages/compiler-cli/linker/test/ast/typescript/typescript_ast_host_spec.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import * as ts from 'typescript';
+import ts from 'typescript';
 import {TypeScriptAstHost} from '../../../src/ast/typescript/typescript_ast_host';
 
 describe('TypeScriptAstHost', () => {

packages/compiler-cli/linker/test/file_linker/emit_scopes/emit_scope_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as o from '@angular/compiler/src/output/output_ast';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {TypeScriptAstFactory} from '../../../../src/ngtsc/translator';
 import {EmitScope} from '../../../src/file_linker/emit_scopes/emit_scope';

packages/compiler-cli/linker/test/file_linker/emit_scopes/iief_emit_scope_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as o from '@angular/compiler/src/output/output_ast';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {TypeScriptAstFactory} from '../../../../src/ngtsc/translator';
 import {IifeEmitScope} from '../../../src/file_linker/emit_scopes/iife_emit_scope';

packages/compiler-cli/linker/test/file_linker/file_linker_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import * as o from '@angular/compiler/src/output/output_ast';
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 import {MockFileSystemNative} from '../../../src/ngtsc/file_system/testing';
 import {MockLogger} from '../../../src/ngtsc/logging/testing';

packages/compiler-cli/linker/test/file_linker/helpers.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import * as ts from 'typescript';
+import ts from 'typescript';
 
 /**
  * A simple helper to render a TS Node as a string.

packages/compiler-cli/linker/test/file_linker/partial_linkers/partial_linker_selector_spec.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Range} from 'semver';
+import semver from 'semver';
 
 import {MockLogger} from '../../../../src/ngtsc/logging/testing';
 import {PartialLinker} from '../../../src/file_linker/partial_linkers/partial_linker';
@@ -111,12 +111,12 @@ describe('PartialLinkerSelector', () => {
   function createSelector(unknownDeclarationVersionHandling: 'error'|'warn'|'ignore') {
     const linkerMap = new Map<string, LinkerRange<unknown>[]>();
     linkerMap.set('declareA', [
-      {range: new Range('<=12.0.0'), linker: linkerA},
-      {range: new Range('<=13.0.0'), linker: linkerA2}
+      {range: new semver.Range('<=12.0.0'), linker: linkerA},
+      {range: new semver.Range('<=13.0.0'), linker: linkerA2}
     ]);
     linkerMap.set('declareB', [
-      {range: new Range('<=12.0.0'), linker: linkerB},
-      {range: new Range('<=12.1.0'), linker: linkerB2},
+      {range: new semver.Range('<=12.0.0'), linker: linkerB},
+      {range: new semver.Range('<=12.1.0'), linker: linkerB2},
     ]);
     return new PartialLinkerSelector(linkerMap, logger, unknownDeclarationVersionHandling);
   }