Assorted updates to dependencies and build system in preparation for migration

.bazelrc

@@ -1,5 +1,5 @@
 # Release configuration
-build:release --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=release"
+build:release --workspace_status_command="pnpm --silent ng-dev release build-env-stamp --mode=release"
 build:release --stamp
 
 # ======================================================================================================================
@@ -27,6 +27,10 @@ test:debug --test_timeout=9999
 test:debug --nocache_test_results
 # ======================================================================================================================
 
+# Required by `rules_ts`.
+common --@aspect_rules_ts//ts:skipLibCheck=always
+common --@aspect_rules_ts//ts:default_to_tsc_transpiler
+
 ###############################
 # Filesystem interactions     #
 ###############################
@@ -40,7 +44,7 @@ test --nolegacy_external_runfiles
 # in Bazel 0.21.0 but turned off again in 0.22.0. Follow
 # https://github.com/bazelbuild/bazel/issues/7026 for more details.
 # This flag is needed to so that the bazel cache is not invalidated
-# when running bazel via `yarn bazel`.
+# when running bazel via `bazel`.
 # See https://github.com/angular/angular/issues/27514.
 build --incompatible_strict_action_env
 run --incompatible_strict_action_env

.bazelversion

@@ -1 +1 @@
-5.2.0
+7.6.0

.github/workflows/ci.yml

@@ -0,0 +1,46 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions: {}
+
+defaults:
+  run:
+    shell: bash
+
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b4659eabe75a67cebf4692c3c88a98275c67200
+      - name: Install node modules
+        run: pnpm install --frozen-lockfile
+      - name: Check Formatting
+        run: pnpm format --check
+      - name: Check Lint
+        run: |
+          pnpm tslint --project client/tsconfig.json
+          pnpm tslint --project server/tsconfig.json
+          pnpm tslint --project server/src/tests/tsconfig.json
+          pnpm tslint --project syntaxes/tsconfig.json
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@4b4659eabe75a67cebf4692c3c88a98275c67200
+      - name: Install node modules
+        run: pnpm install --frozen-lockfile
+      - name: Ensure Build
+        run: pnpm bazel build //:npm --config=release
+      - name: Run Tests
+        run: pnpm bazel test //...

.github/workflows/node.js.yml

@@ -21,11 +21,10 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: 14.x
-    - run: yarn install
-    - run: yarn install --cwd integration/project
+    - run: pnpm install
     - run: cd integration/project
-    - run: scripts/build.sh package.json
-    - run: xvfb-run -a yarn run test:e2e
+    - run: pnpm bazel build //:npm --config=release
+    - run: xvfb-run -a pnpm run test:e2e
       if: runner.os == 'Linux'
-    - run: yarn run test:e2e
+    - run: pnpm run test:e2e
       if: runner.os != 'Linux'

.ng-dev/format.mts

@@ -1,10 +1,10 @@
-import {FormatConfig} from '@angular/dev-infra-private/ng-dev';
+import {FormatConfig} from '@angular/ng-dev';
 
 /**
  * Configuration for the `ng-dev format` command.
  */
 export const format: FormatConfig = {
-  'clang-format': {
+  'prettier': {
     'matchers': [
       '**/*.{js,ts}',
     ],

.ng-dev/github.mts

@@ -1,4 +1,4 @@
-import {GithubConfig} from '@angular/dev-infra-private/ng-dev';
+import {GithubConfig} from '@angular/ng-dev';
 
 /**
  * Github configuration for the `ng-dev` toolset.

.ng-dev/pull-request.mts

@@ -1,4 +1,4 @@
-import {PullRequestConfig} from '@angular/dev-infra-private/ng-dev';
+import {PullRequestConfig} from '@angular/ng-dev';
 
 /**
  * Configuration for the merge tool in `ng-dev`. This sets up the labels which
@@ -13,6 +13,4 @@ export const pullRequest: PullRequestConfig = {
     default: 'squash',
     labels: [{pattern: 'preserve commits', method: 'rebase'}],
   },
-  mergeReadyLabel: 'action: merge',
-  commitMessageFixupLabel: 'commit message fixup',
 };

.npmrc

@@ -1,8 +1,12 @@
+# Yarn Berry doesn't check engines at all, so pnpm shouldn't either.
+engine-strict = false
+
 # Disabling pnpm [hoisting](https://pnpm.io/npmrc#hoist) by setting `hoist=false` is recommended on
 # projects using rules_js so that pnpm outside of Bazel lays out a node_modules tree similar to what
 # rules_js lays out under Bazel (without a hidden node_modules/.pnpm/node_modules)
 hoist=false
 
-# Allow for missing peer dependencies on pnpm import.
-# See https://github.com/aspect-build/rules_js/pull/445 for more context.
-strict-peer-dependencies=false
+# Avoid pnpm auto-installing peer dependencies. We want to be explicit about our versions used
+# for peer dependencies, avoiding potential mismatches. In addition, it ensures we can continue
+# to rely on peer dependency placeholders substituted via Bazel.
+auto-install-peers=false

.prettierignore

@@ -0,0 +1,5 @@
+.prettierrc
+pnpm-lock.yaml
+
+
+syntaxes/test/data/**

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "off",
+  "singleQuote": true,
+  "semi": true,
+  "quoteProps": "preserve",
+  "bracketSpacing": false,
+  "trailingComma": "all"
+}

.vscode/recommended-settings.json

@@ -3,10 +3,8 @@
   "tslint.enable": true,
   "typescript.tsc.autoDetect": "off",
   "typescript.preferences.quoteStyle": "single",
-  "//format-on-save-comment": "Format ts files on save with `clang-format.executable`. If `clang-format.executable` is not being used, this setting should be removed. You can instead run `yarn format` to manually format your code.",
+  "//format-on-save-comment": "Format You can instead run `pnpm format` to manually format your code.",
   "[typescript]": {
     "editor.formatOnSave": true
   },
-  "//clang-format-comment": "Please install https://marketplace.visualstudio.com/items?itemName=xaver.clang-format to take advantage of `clang-format` in VSCode. (See https://clang.llvm.org/docs/ClangFormat.html for more info `clang-format`.)",
-  "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format"
 }

.vscode/tasks.json

@@ -37,7 +37,7 @@
     {
       "type": "shell",
       "label": "build vsix",
-      "command": "./scripts/build.sh package.json"
+      "command": "pnpm bazel build //:npm --config=release"
     }
   ]
 }

BUILD.bazel

@@ -1,5 +1,5 @@
+load("@aspect_bazel_lib//lib:expand_template.bzl", "expand_template_rule")
 load("@aspect_rules_js//js:defs.bzl", "js_library")
-load("@aspect_rules_js//js/private:expand_template.bzl", "expand_template")
 load("@aspect_rules_js//npm:defs.bzl", "npm_package")
 load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
 load("@npm//:defs.bzl", "npm_link_all_packages")
@@ -19,7 +19,7 @@ ts_config(
     visibility = ["//visibility:public"],
 )
 
-expand_template(
+expand_template_rule(
     name = "package_json_expanded",
     out = "package_expanded.json",
     stamp_substitutions = {

DEVELOPER.md

@@ -9,9 +9,6 @@ The dependencies of the `server` need to be duplicated in the root [`package.jso
 Therefore, if a new prod dependency is added to the server, it needs to be
 added to both [`package.json`](package.json) and [`server/package.json`](server/package.json).
 
-Note that we do not install the dependencies in [`server`](server),
-hence there should not be a `yarn.lock` file.
-
 ## Navigating Projects in IDE
 
 This repository contains multiple TypeScript projects, each with its own `tsconfig.json`.
@@ -20,48 +17,19 @@ As a result, some projects depend on the `.d.ts` output of their dependencies, l
 and `server` depend on `common`. In order to navigate the projects in your IDE,
 you need to first build them by running
 ```shell
-yarn compile
+pnpm compile
 ```
 
 If you'd like to force a clean build, you can delete the existing build artifacts
 by running
 ```shell
-./scripts/build.sh
+pnpm bazel build //:npm --config=release
 ```
 
 ## Formatting source code
 
-This repository uses the [NPM distribution](https://www.npmjs.com/package/clang-format) of
-[`clang-format`](http://clang.llvm.org/docs/ClangFormat.html) to format source code.
-
-Code is automatically formatted by running `yarn format`. You can also set up your IDE to format
-files on each save.
-
-### VS Code
-
-1. Install the
-[`Clang-Format` extension](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format)
-for VS Code.
-2. Copy [`.vscode/recommended-settings.json`](./.vscode/recommended-settings.json) to a new
-   `.vscode/settings.json` file. VS Code will automatically pick up relevant formatting options for
-   the workspace from this file.
-
-### WebStorm / IntelliJ
-
-1. Install the [`ClangFormatIJ`](https://plugins.jetbrains.com/plugin/8396-clangformatij) plugin for
-   IntelliJ IDEs.
-2. Open `Preferences->Tools->clang-format`.
-3. Set the field named "PATH" to `<PATH_TO_REPOSITORY>/node_modules/.bin/`.
-
-### Vim
-
-1. Install [Vim Clang-Format](https://github.com/rhysd/vim-clang-format).
-2. Create a [project-specific `.vimrc`](https://andrew.stwrt.ca/posts/project-specific-vimrc/) in
-   the repository root directory containing
-
-```vim
-let g:clang_format#command = '<PATH_TO_REPOSITORY>/node_modules/.bin/clang-format'
-```
+This repository uses a common toolset provided in the angular organization for formatting, `ng-dev`. It is installed as a standard npm package,
+and can be run locally with `pnpm format`.
 
 ## Test Local Changes in VSCode