feat(server): provide folding ranges for inline templates (#1779)

* test(server): Remove spec for view engine, which is no longer supported

To support legacy view engine, we install an old version of the language
server into the vsix.

* build: remove unused esbuild.js

The esbuild configuration is now managed in the BUILD.bazel rules.

* feat(server): provide folding ranges for inline templates

Following the embedded language support documentation, this commit provides
folding ranges for inline templates in typescript files.
This feature is provided in the language server so other editors that
use the @angular/language-server package can make use of the feature as
well.

https://code.visualstudio.com/api/language-extensions/embedded-languages

fixes #852

* fixup! feat(server): provide folding ranges for inline templates

* fixup! feat(server): provide folding ranges for inline templates

* fixup! feat(server): provide folding ranges for inline templates

Author: atscott

BUILD.bazel

@@ -54,6 +54,7 @@ npm_package(
         ":node_modules/semver",
         ":node_modules/typescript",
         ":node_modules/vscode-jsonrpc",
+        ":node_modules/vscode-html-languageservice",
         ":node_modules/vscode-languageclient",
         ":node_modules/vscode-languageserver-protocol",
         ":node_modules/vscode-languageserver-types",

client/src/client.ts

@@ -151,7 +151,15 @@ export class AngularLanguageClient implements vscode.Disposable {
           }
 
           return angularCompletionsPromise;
-        }
+        },
+        provideFoldingRanges: async (
+            document: vscode.TextDocument, context: vscode.FoldingContext,
+            token: vscode.CancellationToken, next) => {
+          if (!(await this.isInAngularProject(document)) || document.languageId !== 'typescript') {
+            return null;
+          }
+          return next(document, context, token);
+        },
       }
     };
   }

esbuild.js

@@ -181,6 +181,38 @@ describe('Angular Ivy language server', () => {
     expect(targetUri).toContain('libs/post/src/lib/post.component.ts');
   });
 
+  it('provides folding ranges for inline templates', async () => {
+    openTextDocument(client, APP_COMPONENT, `
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: \`
+  <div>
+    <span>
+      Hello {{name}}
+    </span>
+  </div>\`,
+})
+export class AppComponent {
+  name = 'Angular';
+  @Input() appInput = '';
+  @Output() appOutput = new EventEmitter<string>();
+}`);
+    const languageServiceEnabled = await waitForNgcc(client);
+    expect(languageServiceEnabled).toBeTrue();
+    const response = await client.sendRequest(lsp.FoldingRangeRequest.type, {
+      textDocument: {
+        uri: APP_COMPONENT_URI,
+      },
+    }) as lsp.FoldingRange[];
+    expect(Array.isArray(response)).toBe(true);
+    // 1 folding range for the div, 1 for the span
+    expect(response.length).toEqual(2);
+    expect(response).toContain({startLine: 6, endLine: 9});
+    expect(response).toContain({startLine: 7, endLine: 8});
+  });
+
   describe('signature help', () => {
     it('should show signature help for an empty call', async () => {
       client.sendNotification(lsp.DidOpenTextDocumentNotification.type, {

integration/lsp/ivy_spec.ts

@@ -201,7 +201,7 @@
   "main": "./dist/client/src/extension",
   "scripts": {
     "ng-dev": "cross-env TS_NODE_PROJECT=$PWD/.ng-dev/tsconfig.json TS_NODE_TRANSPILE_ONLY=1 node --no-warnings --loader ts-node/esm node_modules/@angular/dev-infra-private/ng-dev/bundles/cli.mjs",
-    "compile": "tsc -b && node esbuild.js",
+    "compile": "tsc -b && yarn bazel build :npm",
     "compile:test": "tsc -b test.tsconfig.json",
     "compile:integration": "tsc -b integration && yarn --cwd integration/project build",
     "compile:syntaxes-test": "tsc -b syntaxes/test",
@@ -248,6 +248,7 @@
     "tslint": "6.1.3",
     "tslint-eslint-rules": "5.4.0",
     "vsce": "1.100.1",
+    "vscode-html-languageservice": "^5.0.2",
     "vscode-languageserver-protocol": "3.16.0",
     "vscode-languageserver-textdocument": "1.0.7",
     "vscode-test": "1.6.1",
@@ -257,4 +258,4 @@
     "type": "git",
     "url": "https://github.com/angular/vscode-ng-language-service"
   }
-}
+}

integration/lsp/viewengine_spec.ts

@@ -53,6 +53,8 @@ esbuild(
         "vscode-languageserver",
         "vscode-uri",
         "vscode-jsonrpc",
+        "vscode-languageserver-textdocument",
+        "vscode-html-languageservice",
     ],
     config = "esbuild.mjs",
     # Do not enable minification. It seems to break the extension on Windows (with WSL). See #1198.

package.json

@@ -16,11 +16,13 @@
   },
   "dependencies": {
     "@angular/language-service": "15.0.0-next.0",
+    "vscode-html-languageservice": "^5.0.2",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageserver": "7.0.0",
+    "vscode-languageserver-textdocument": "^1.0.7",
     "vscode-uri": "3.0.3"
   },
   "publishConfig": {
     "registry": "https://wombat-dressing-room.appspot.com"
   }
-}
+}

server/BUILD.bazel

@@ -11,7 +11,9 @@ ts_project(
         "//:node_modules/@angular/language-service",
         "//:node_modules/@types/node",
         "//:node_modules/typescript",
+        "//:node_modules/vscode-html-languageservice",
         "//:node_modules/vscode-languageserver",
+        "//:node_modules/vscode-languageserver-textdocument",
         "//:node_modules/vscode-uri",
         "//common",
     ],

server/package.json

@@ -18,9 +18,9 @@ const originalRequire = require;
  * compile the server and add this banner to the top of the compilation so any place
  * in the server code that uses `require` will get routed through this override.
  *
- * Refer also to `esbuild.js`, the `bannerConfig` which overrides the `require` using
- * the `footer` option, and the `serverConfig` which provides the banner code at the top
- * of the server output using the `banner` option.
+ * Refer also to `esbuild` rules in the server package, the `bannerConfig` which overrides the
+ * `require` using the `footer` option, and the `serverConfig` which provides the banner code at the
+ * top of the server output using the `banner` option.
  *
  * @param moduleName The module to resolve
  * @returns