Merge pull request #226 from angular/main

Create a new pull request by comparing changes across two branches

CHANGELOG.md

@@ -1,3 +1,24 @@
+<a name="18.2.0-next.4"></a>
+# 18.2.0-next.4 (2024-08-05)
+### compiler-cli
+| Commit | Type | Description |
+| -- | -- | -- |
+| [e2259c7b09](https://github.com/angular/angular/commit/e2259c7b093decc9255c8afe084ec574e029d7d2) | fix | support JIT transforms before other transforms modifying classes ([#57262](https://github.com/angular/angular/pull/57262)) |
+### core
+| Commit | Type | Description |
+| -- | -- | -- |
+| [827070e331](https://github.com/angular/angular/commit/827070e3314d4c3acee77920dc0d5375398917ab) | fix | Do not run image performance warning checks on server ([#57234](https://github.com/angular/angular/pull/57234)) |
+### language-service
+| Commit | Type | Description |
+| -- | -- | -- |
+| [4bb9d0f923](https://github.com/angular/angular/commit/4bb9d0f9235c644ba3ec7f1840ffa81457c5622e) | fix | avoid generating TS suggestion diagnostics for templates ([#56241](https://github.com/angular/angular/pull/56241)) |
+### router
+| Commit | Type | Description |
+| -- | -- | -- |
+| [6c76c91e15](https://github.com/angular/angular/commit/6c76c91e151b53dfaccb4be43d43a8d857715dd7) | feat | Add defaultQueryParamsHandling to router configuration ([#57198](https://github.com/angular/angular/pull/57198)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="18.2.0-next.3"></a>
 # 18.2.0-next.3 (2024-07-31)
 ### compiler

adev/BUILD.bazel

@@ -7,6 +7,10 @@ load("//adev/tools/local_deps:index.bzl", "ensure_local_package_deps", "link_loc
 
 package(default_visibility = ["//visibility:public"])
 
+exports_files([
+    "tsconfig.json",
+])
+
 # All source and configuration files required to build the docs app
 APPLICATION_FILES = [
     "angular.json",
@@ -17,10 +21,6 @@ APPLICATION_FILES = [
     ["src/**/*"],
     exclude = [
         "src/**/*.spec.ts",
-        # Temporarily exclude generated sources produced by the non-bazel
-        # build until the whole project is built by bazel and this directory
-        # isn't needed.
-        "src/generated/**/*",
     ],
 )
 
@@ -29,7 +29,7 @@ TEST_FILES = APPLICATION_FILES + [
     "test-main.ts",
     "tsconfig.spec.json",
 ] + glob(
-    ["**/*.spec.ts"],
+    ["src/**/*.spec.ts"],
 )
 
 APPLICATION_ASSETS = [
@@ -43,6 +43,7 @@ APPLICATION_ASSETS = [
 ]
 
 APPLICATION_DEPS = [
+    "@npm//@angular/docs",
     "@npm//@angular/build",
     "@npm//@angular-devkit/build-angular",
     "@npm//@angular/animations",
@@ -51,7 +52,6 @@ APPLICATION_DEPS = [
     "@npm//@angular/compiler",
     "@npm//@angular/compiler-cli",
     "@npm//@angular/core",
-    "@npm//@angular/docs",
     "@npm//@angular/forms",
     "@npm//@angular/material",
     "@npm//@angular/platform-browser",

adev/shared-docs/BUILD.bazel

@@ -16,6 +16,7 @@ ng_module(
         "//adev/shared-docs/pipes",
         "//adev/shared-docs/providers",
         "//adev/shared-docs/services",
+        "//adev/shared-docs/testing",
         "//adev/shared-docs/utils",
     ],
 )
@@ -38,7 +39,6 @@ ng_package(
         "//adev/shared-docs/pipeline/examples/template:files",
         "//adev/shared-docs/pipeline/tutorials/common:files",
         "//adev/shared-docs/styles",
-        "//adev/shared-docs/testing",
     ],
     visibility = [
         "//adev:__pkg__",

adev/shared-docs/components/search-dialog/BUILD.bazel

@@ -46,10 +46,8 @@ ts_library(
         "//adev/shared-docs/services",
         "//adev/shared-docs/testing",
         "//packages/core",
-        "//packages/core/testing",
         "//packages/platform-browser",
         "//packages/router",
-        "//packages/router/testing",
     ],
 )
 

adev/shared-docs/components/search-dialog/search-dialog.component.spec.ts

@@ -56,6 +56,7 @@ describe('SearchDialog', () => {
 
     fakeSearch.searchResults.and.returnValue(fakeSearchResults);
     fixture.detectChanges();
+    fixture.componentInstance.ngAfterViewInit();
 
     fakeWindow.dispatchEvent(
       new KeyboardEvent('keydown', {

adev/shared-docs/components/search-dialog/search-dialog.component.ts

@@ -7,18 +7,20 @@
  */
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
-  Injector,
+  EventEmitter,
+  NgZone,
   OnDestroy,
-  Signal,
-  afterNextRender,
-  effect,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren,
   inject,
-  output,
-  viewChild,
-  viewChildren,
 } from '@angular/core';
 
 import {WINDOW} from '../../providers/index';
@@ -51,82 +53,95 @@ import {RelativeLink} from '../../pipes/relative-link.pipe';
   templateUrl: './search-dialog.component.html',
   styleUrls: ['./search-dialog.component.scss'],
 })
-export class SearchDialog implements OnDestroy {
-  onClose = output();
-  dialog = viewChild.required('searchDialog', {read: ElementRef}) as Signal<
-    ElementRef<HTMLDialogElement>
-  >;
-  items = viewChildren(SearchItem);
+export class SearchDialog implements OnInit, AfterViewInit, OnDestroy {
+  @Output() onClose = new EventEmitter<void>();
+  @ViewChild('searchDialog') dialog?: ElementRef<HTMLDialogElement>;
+  @ViewChildren(SearchItem) items?: QueryList<SearchItem>;
 
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly ngZone = inject(NgZone);
   private readonly search = inject(Search);
   private readonly relativeLink = new RelativeLink();
   private readonly router = inject(Router);
   private readonly window = inject(WINDOW);
-  private readonly injector = inject(Injector);
-  private readonly keyManager = new ActiveDescendantKeyManager(
-    this.items,
-    this.injector,
-  ).withWrap();
+
+  private keyManager?: ActiveDescendantKeyManager<SearchItem>;
 
   searchQuery = this.search.searchQuery;
   searchResults = this.search.searchResults;
 
-  constructor() {
-    effect(() => {
-      this.items();
-      afterNextRender(
-        {
-          write: () => this.keyManager.setFirstItemActive(),
-        },
-        {injector: this.injector},
-      );
+  ngOnInit(): void {
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent<KeyboardEvent>(this.window, 'keydown')
+        .pipe(
+          filter((_) => !!this.keyManager),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe((event) => {
+          // When user presses Enter we can navigate to currently selected item in the search result list.
+          if (event.key === 'Enter') {
+            this.navigateToTheActiveItem();
+          } else {
+            this.ngZone.run(() => {
+              this.keyManager?.onKeydown(event);
+            });
+          }
+        });
     });
+  }
 
-    this.keyManager.change.pipe(takeUntilDestroyed()).subscribe(() => {
-      this.keyManager.activeItem?.scrollIntoView();
-    });
+  ngAfterViewInit() {
+    if (!this.dialog?.nativeElement.open) {
+      this.dialog?.nativeElement.showModal?.();
+    }
 
-    afterNextRender({
-      write: () => {
-        if (!this.dialog().nativeElement.open) {
-          this.dialog().nativeElement.showModal?.();
-        }
-      },
-    });
+    if (!this.items) {
+      return;
+    }
 
-    fromEvent<KeyboardEvent>(this.window, 'keydown')
-      .pipe(takeUntilDestroyed())
-      .subscribe((event) => {
-        // When user presses Enter we can navigate to currently selected item in the search result list.
-        if (event.key === 'Enter') {
-          this.navigateToTheActiveItem();
-        } else {
-          this.keyManager.onKeydown(event);
-        }
-      });
+    this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap();
+    this.keyManager?.setFirstItemActive();
+
+    this.updateActiveItemWhenResultsChanged();
+    this.scrollToActiveItem();
   }
 
   ngOnDestroy(): void {
-    this.keyManager.destroy();
+    this.keyManager?.destroy();
   }
 
   closeSearchDialog() {
-    this.dialog().nativeElement.close();
-    this.onClose.emit();
+    this.dialog?.nativeElement.close();
+    this.onClose.next();
   }
 
   updateSearchQuery(query: string) {
     this.search.updateSearchQuery(query);
   }
 
+  private updateActiveItemWhenResultsChanged(): void {
+    this.items?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      // Change detection should be run before execute `setFirstItemActive`.
+      Promise.resolve().then(() => {
+        this.keyManager?.setFirstItemActive();
+      });
+    });
+  }
+
   private navigateToTheActiveItem(): void {
-    const activeItemLink: string | undefined = this.keyManager.activeItem?.item?.url;
+    const activeItemLink: string | undefined = this.keyManager?.activeItem?.item?.url;
 
     if (!activeItemLink) {
       return;
     }
 
     this.router.navigateByUrl(this.relativeLink.transform(activeItemLink));
-    this.onClose.emit();
+    this.onClose.next();
+  }
+
+  private scrollToActiveItem(): void {
+    this.keyManager?.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      this.keyManager?.activeItem?.scrollIntoView();
+    });
   }
 }

adev/shared-docs/components/viewers/BUILD.bazel

@@ -65,6 +65,7 @@ ts_library(
         "//packages/platform-browser",
         "//packages/platform-browser/animations",
         "//packages/router",
+        "//packages/router/testing",
         "@npm//@angular/cdk",
         "@npm//@angular/material",
     ],

adev/shared-docs/index.ts

@@ -17,3 +17,4 @@ export * from './interfaces/index';
 export * from './providers/index';
 export * from './services/index';
 export * from './utils/index';
+export * from './testing/index';

adev/shared-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/docs",
-  "version": "0.0.0-{SCM_HEAD_SHA}",
+  "version": "0.0.0-PLACEHOLDER",
   "peerDependencies": {
     "@angular/cdk": "^18.0.0-next.6 || ^18.1.0-next || ^18.2.0-next",
     "@angular/common": "^18.0.0-next.6 || ^18.1.0-next || ^18.2.0-next",

adev/shared-docs/pipeline/api-gen/BUILD.bazel

@@ -0,0 +1,11 @@
+package(default_visibility = ["//visibility:public"])
+
+# Expose the sources in the dev-infra NPM package.
+filegroup(
+    name = "files",
+    srcs = glob(["*"]) + [
+        "//adev/shared-docs/pipeline/api-gen/extraction:files",
+        "//adev/shared-docs/pipeline/api-gen/manifest:files",
+        "//adev/shared-docs/pipeline/api-gen/rendering:files",
+    ],
+)

adev/shared-docs/pipeline/api-gen/extraction/BUILD.bazel

@@ -0,0 +1,61 @@
+load("@angular//tools/esm-interop:index.bzl", "nodejs_binary")
+load("@npm//@angular/build-tooling/bazel/esbuild:index.bzl", "esbuild")
+load("@npm//@angular/build-tooling/bazel:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//adev/shared-docs/pipeline/api-gen:__subpackages__"])
+
+esbuild(
+    name = "bin",
+    entry_point = ":index.ts",
+    external = [
+        "@angular/compiler-cli",
+        "typescript",
+    ],
+    format = "esm",
+    output = "bin.mjs",
+    platform = "node",
+    target = "es2022",
+    deps = [
+        ":extract_api_to_json_lib",
+        "@angular//packages/compiler-cli",
+        "@npm//typescript",
+    ],
+)
+
+ts_library(
+    name = "extract_api_to_json_lib",
+    srcs = glob(["**/*.ts"]),
+    devmode_module = "commonjs",
+    tsconfig = "//adev:tsconfig.json",
+    deps = [
+        "@angular//packages/compiler",
+        "@angular//packages/compiler-cli",
+        "@npm//@bazel/runfiles",
+        "@npm//@types/node",
+        "@npm//typescript",
+    ],
+)
+
+# Action binary for the api_gen bazel rule.
+nodejs_binary(
+    name = "extract_api_to_json",
+    data = [
+        ":bin",
+        "@angular//packages/compiler",
+        "@angular//packages/compiler-cli",
+        "@npm//typescript",
+    ],
+    entry_point = "bin.mjs",
+    # Note: Using the linker here as we need it for ESM. The linker is not
+    # super reliably when running concurrently on Windows- but we have existing
+    # actions using the linker. An alternative would be to:
+    #   - bundle the Angular compiler into a CommonJS bundle
+    #   - use the patched resolution- but also patch the ESM imports (similar to how FW does it).
+    visibility = ["//visibility:public"],
+)
+
+# Expose the sources in the dev-infra NPM package.
+filegroup(
+    name = "files",
+    srcs = glob(["**/*"]),
+)