refactor: update language-service package and tests to work with ESM (#48521)

devversion · devversion · commit acf98268f808 · 2022-12-19T19:50:44.000Z
The Angular Language Service package is now tested & compiled using ESM. Previously it was a mismatch of CommonJS and ESM. Still the language-service ESM output is transformed into a single UMD bundle to allow for module resolution to be overriden. See `bundles/BUILD`. This is kept as is. To fully ship ESM (language-service is an exception here), we need to: * Update all code to no longer reference typescript via import. Instead typescript needs to be passed around so that the extension can control the version * The VSCode extension/ the TS server needs to be able to load ESM. It looks like the server supports ESM global plugins, but the extension might not yet. This is out of scope for the dev-infra effort as it requires more insight into VSCode & the extension system & the TS language server. PR Close #48521
diff --git a/packages/language-service/BUILD.bazel b/packages/language-service/BUILD.bazel
@@ -1,25 +1,48 @@
-load("//tools:defaults.bzl", "pkg_npm", "ts_library")
+load("//tools:defaults.bzl", "esbuild", "extract_types", "pkg_npm", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
 ts_library(
     name = "api",
     srcs = [
         "api.ts",
-        "index.ts",
-        "override_rename_ts_plugin.ts",
     ],
-    prodmode_module = "commonjs",
     deps = [
+        "@npm//typescript",
+    ],
+)
+
+ts_library(
+    name = "factory_lib",
+    srcs = ["plugin-factory.ts"],
+    deps = [
+        ":api",
         "@npm//@types/node",
         "@npm//typescript",
     ],
 )
 
+esbuild(
+    name = "factory_bundle",
+    entry_point = ":plugin-factory.ts",
+    external = ["./bundles/language-service.js"],
+    format = "cjs",
+    deps = [":factory_lib"],
+)
+
+extract_types(
+    name = "factory_types",
+    deps = [":factory_lib"],
+)
+
 pkg_npm(
     name = "npm_package",
     package_name = "@angular/language-service",
-    srcs = ["package.json"],
+    srcs = [
+        "index.d.ts",
+        "index.js",
+        "package.json",
+    ],
     tags = [
         "release-with-framework",
     ],
@@ -32,8 +55,8 @@ pkg_npm(
         "//integration:__subpackages__",
     ],
     deps = [
-        ":api",
-        # min bundle is not used at the moment; omit from package to speed up build
+        ":factory_bundle",
+        ":factory_types",
         "//packages/language-service/bundles:language-service.js",
     ],
 )
diff --git a/packages/language-service/index.d.ts b/packages/language-service/index.d.ts
@@ -0,0 +1,13 @@
+/**
+ * @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
+ */
+
+import {factory} from './plugin-factory';
+
+// Tsserver expects `@angular/language-service` to provide a factory function
+// as the default export of the package.
+export = factory;
diff --git a/packages/language-service/index.js b/packages/language-service/index.js
@@ -0,0 +1,13 @@
+/**
+ * @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
+ */
+
+const {factory} = require('./factory_bundle');
+
+// Tsserver expects `@angular/language-service` to provide a factory function
+// as the default export of the package.
+module.exports = factory;
diff --git a/packages/language-service/override_rename_ts_plugin.ts b/packages/language-service/override_rename_ts_plugin.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 function isAngularCore(path: string): boolean {
   return isExternalAngularCore(path) || isInternalAngularCore(path);
diff --git a/packages/language-service/plugin-factory.ts b/packages/language-service/plugin-factory.ts
@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
+
 import {NgLanguageService, PluginConfig} from './api';
 
 interface PluginModule extends ts.server.PluginModule {
   create(createInfo: ts.server.PluginCreateInfo): NgLanguageService;
   onConfigurationChanged?(config: PluginConfig): void;
 }
 
-const factory: ts.server.PluginModuleFactory = (tsModule): PluginModule => {
+export const factory: ts.server.PluginModuleFactory = (tsModule): PluginModule => {
   let plugin: PluginModule;
 
   return {
@@ -30,10 +31,3 @@ const factory: ts.server.PluginModuleFactory = (tsModule): PluginModule => {
     },
   };
 };
-
-/**
- * Tsserver expects `@angular/language-service` to provide a factory function
- * as the default export of the package. See
- * https://github.com/microsoft/TypeScript/blob/f4d0ea6539edb6d8f70b626132d6f9ac1ac4281a/src/server/project.ts#L1611
- */
-export = factory;
diff --git a/packages/language-service/src/adapters.ts b/packages/language-service/src/adapters.ts
@@ -14,7 +14,7 @@ import {AbsoluteFsPath, FileStats, PathSegment, PathString} from '@angular/compi
 import {isShim} from '@angular/compiler-cli/src/ngtsc/shims';
 import {getRootDirs} from '@angular/compiler-cli/src/ngtsc/util/src/typescript';
 import * as p from 'path';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {isTypeScriptFile} from './utils';
 
diff --git a/packages/language-service/src/codefixes/code_fixes.ts b/packages/language-service/src/codefixes/code_fixes.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
-import * as tss from 'typescript/lib/tsserverlibrary';
+import tss from 'typescript/lib/tsserverlibrary';
 
 import {TemplateInfo} from '../utils';
 
diff --git a/packages/language-service/src/codefixes/fix_invalid_banana_in_box.ts b/packages/language-service/src/codefixes/fix_invalid_banana_in_box.ts
@@ -8,7 +8,7 @@
 
 import {ErrorCode, ngErrorCode} from '@angular/compiler-cli/src/ngtsc/diagnostics';
 import {BoundEvent} from '@angular/compiler/src/render3/r3_ast';
-import * as tss from 'typescript/lib/tsserverlibrary';
+import tss from 'typescript/lib/tsserverlibrary';
 
 import {getTargetAtPosition, TargetNodeKind} from '../template_target';
 import {getTemplateInfoAtPosition, TemplateInfo} from '../utils';
diff --git a/packages/language-service/src/codefixes/fix_missing_member.ts b/packages/language-service/src/codefixes/fix_missing_member.ts
@@ -9,7 +9,7 @@
 import {findFirstMatchingNode} from '@angular/compiler-cli/src/ngtsc/typecheck/src/comments';
 import * as e from '@angular/compiler/src/expression_parser/ast';  // e for expression AST
 import ts from 'typescript';
-import * as tss from 'typescript/lib/tsserverlibrary';
+import tss from 'typescript/lib/tsserverlibrary';
 
 import {getTargetAtPosition, getTcbNodesOfTemplateAtPosition, TargetNodeKind} from '../template_target';
 import {getTemplateInfoAtPosition} from '../utils';
diff --git a/packages/language-service/src/codefixes/utils.ts b/packages/language-service/src/codefixes/utils.ts
@@ -8,7 +8,7 @@
 
 import {absoluteFrom} from '@angular/compiler-cli';
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
-import * as tss from 'typescript/lib/tsserverlibrary';
+import tss from 'typescript/lib/tsserverlibrary';
 
 import {TemplateInfo} from '../utils';
 
diff --git a/packages/language-service/src/language_service.ts b/packages/language-service/src/language_service.ts
@@ -17,7 +17,7 @@ import {isNamedClassDeclaration} from '@angular/compiler-cli/src/ngtsc/reflectio
 import {TypeCheckShimGenerator} from '@angular/compiler-cli/src/ngtsc/typecheck';
 import {OptimizeFor} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
 import {findFirstMatchingNode} from '@angular/compiler-cli/src/ngtsc/typecheck/src/comments';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {GetComponentLocationsForTemplateResponse, GetTcbResponse, GetTemplateLocationForComponentResponse} from '../api';
 
diff --git a/packages/language-service/src/signature_help.ts b/packages/language-service/src/signature_help.ts
@@ -10,7 +10,7 @@ import {Call, SafeCall} from '@angular/compiler';
 import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {getSourceFileOrError} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {SymbolKind} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {getTargetAtPosition, TargetNodeKind} from './template_target';
 import {findTightestNode} from './ts_utils';
diff --git a/packages/language-service/src/template_target.ts b/packages/language-service/src/template_target.ts
@@ -11,7 +11,7 @@ import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {findFirstMatchingNode} from '@angular/compiler-cli/src/ngtsc/typecheck/src/comments';
 import * as e from '@angular/compiler/src/expression_parser/ast';  // e for expression AST
 import * as t from '@angular/compiler/src/render3/r3_ast';         // t for template AST
-import * as tss from 'typescript/lib/tsserverlibrary';
+import tss from 'typescript/lib/tsserverlibrary';
 
 import {isBoundEventWithSyntheticHandler, isTemplateNodeWithKeyAndValue, isWithin, isWithinKeyValue, TemplateInfo} from './utils';
 
diff --git a/packages/language-service/src/ts_plugin.ts b/packages/language-service/src/ts_plugin.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {GetComponentLocationsForTemplateResponse, GetTcbResponse, GetTemplateLocationForComponentResponse, NgLanguageService} from '../api';
 
diff --git a/packages/language-service/test/adapters_spec.ts b/packages/language-service/test/adapters_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {LSParseConfigHost} from '../src/adapters';
 
diff --git a/packages/language-service/test/legacy/compiler_factory_spec.ts b/packages/language-service/test/legacy/compiler_factory_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {APP_COMPONENT, MockService, setup, TEST_TEMPLATE} from './mock_host';
 
diff --git a/packages/language-service/test/legacy/language_service_spec.ts b/packages/language-service/test/legacy/language_service_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {ErrorCode, ngErrorCode} from '@angular/compiler-cli/src/ngtsc/diagnostics';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {LanguageService} from '../../src/language_service';
 
diff --git a/packages/language-service/test/legacy/mock_host.ts b/packages/language-service/test/legacy/mock_host.ts
@@ -8,7 +8,7 @@
 
 import {NgCompilerOptions} from '@angular/compiler-cli/src/ngtsc/core/api';
 import {join} from 'path';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {isTypeScriptFile} from '../../src/utils';
 
diff --git a/packages/language-service/test/legacy/mock_host_spec.ts b/packages/language-service/test/legacy/mock_host_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {APP_COMPONENT, APP_MAIN, MockService, setup, TEST_SRCDIR} from './mock_host';
 
diff --git a/packages/language-service/test/quick_info_spec.ts b/packages/language-service/test/quick_info_spec.ts
@@ -7,7 +7,7 @@
  */
 
 import {initMockFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system/testing';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {createModuleAndProjectWithDeclarations, LanguageServiceTestEnv, Project} from '../testing';
 
diff --git a/packages/language-service/testing/src/buffer.ts b/packages/language-service/testing/src/buffer.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {LanguageService} from '../../src/language_service';
 
diff --git a/packages/language-service/testing/src/env.ts b/packages/language-service/testing/src/env.ts
@@ -9,7 +9,7 @@
 import {getFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {MockFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system/testing';
 import {loadStandardTestFiles} from '@angular/compiler-cli/src/ngtsc/testing';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {MockServerHost} from './host';
 import {Project, ProjectFiles, TestableOptions} from './project';
diff --git a/packages/language-service/testing/src/host.ts b/packages/language-service/testing/src/host.ts
@@ -8,7 +8,7 @@
 
 import {absoluteFrom} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {MockFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system/testing';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 const NOOP_FILE_WATCHER: ts.FileWatcher = {
   close() {}
diff --git a/packages/language-service/testing/src/project.ts b/packages/language-service/testing/src/project.ts
@@ -9,7 +9,7 @@
 import {InternalOptions, LegacyNgcOptions, StrictTemplateOptions} from '@angular/compiler-cli/src/ngtsc/core/api';
 import {absoluteFrom, AbsoluteFsPath, FileSystem, getFileSystem, getSourceFileOrError} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {OptimizeFor, TemplateTypeChecker} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
-import * as ts from 'typescript/lib/tsserverlibrary';
+import ts from 'typescript/lib/tsserverlibrary';
 
 import {LanguageService} from '../../src/language_service';
 
diff --git a/tslint.json b/tslint.json
@@ -21,6 +21,7 @@
         // the ESM interop only exposes statically-discoverable named exports). Instead
         // default imports should be used to ensure compatibility with both ESM or CommonJS.
         "noNamedExports": [
+          "typescript/lib/tsserverlibrary",
           "typescript",
           "minimist",
           "magic-string",
@@ -73,7 +74,10 @@
       true,
       {"name": "fdescribe", "message": "Don't keep jasmine focus methods."},
       {"name": "fit", "message": "Don't keep jasmine focus methods."},
-      {"name": ["*", "getMutableClone"], "message": "Use a ts.factory.update* or ts.factory.create* method instead."}
+      {
+        "name": ["*", "getMutableClone"],
+        "message": "Use a ts.factory.update* or ts.factory.create* method instead."
+      }
     ]
   },
   "jsRules": {
