Merge branch 'angular:main' into dispatcher2

angular · Apr 22, 2024 · f70ac97 · f70ac97
2 parents 2826028 + ebfba77
commit f70ac97
Show file tree

Hide file tree

Showing 27 changed files with 518 additions and 72 deletions.
diff --git a/.github/actions/yarn-install/action.yml b/.github/actions/yarn-install/action.yml
@@ -4,7 +4,7 @@ description: 'Installs the dependencies using Yarn'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/cache@ab5e6d0c87105b4c9c2047343972218f562e4319 # v4
+    - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4
       with:
         path: |
           ./node_modules/

diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.html b/adev/src/app/features/references/api-items-section/api-items-section.component.html
@@ -1,8 +1,10 @@
 <header class="adev-api-items-section-header">
-  @if (group.isFeatured) {
-    <docs-icon>star</docs-icon>
-  }
-  <h3>{{ group.title }}</h3>
+  <h3 [attr.id]="group.id">
+    @if (group.isFeatured) {
+      <docs-icon aria-hidden>star</docs-icon>
+    }
+    <a routerLink="/api" [fragment]="group.id" class="adev-api-anchor" tabindex="-1">{{ group.title }}</a>
+  </h3>
 </header>
 
 <ul class="adev-api-items-section-grid">

diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.scss b/adev/src/app/features/references/api-items-section/api-items-section.component.scss
@@ -1,14 +1,19 @@
+@use '@angular/docs/styles/anchor' as anchor;
+
 .adev-api-items-section-header {
   display: flex;
-  gap: 0.75em;
-  align-items: center;
 
   svg {
     fill: var(--primary-contrast);
   }
 
   h3 {
     flex: 1;
+
+    display: flex;
+    gap: 0.75em;
+    align-items: flex-start;
+
     margin-top: 1.43rem;
     font-size: 1.25rem;
   }
@@ -100,3 +105,10 @@
   padding: 0.001rem 0.2rem 0.005rem;
   margin-inline-start: 0.5rem;
 }
+
+
+.adev-api-anchor {
+  color: inherit;
+
+  @include anchor.docs-anchor();
+}
diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.spec.ts b/adev/src/app/features/references/api-items-section/api-items-section.component.spec.ts
@@ -22,6 +22,7 @@ describe('ApiItemsSection', () => {
 
   const fakeFeaturedGroup: ApiItemsGroup = {
     title: 'Featured',
+    id: 'featured',
     isFeatured: true,
     items: [
       {
@@ -48,6 +49,7 @@ describe('ApiItemsSection', () => {
 
   const fakeGroup: ApiItemsGroup = {
     title: 'Example group',
+    id: 'example',
     isFeatured: false,
     items: [
       {title: 'Fake Title', itemType: ApiItemType.CONST, url: 'api/fakeTitle', isFeatured: false},

diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.ts b/adev/src/app/features/references/api-items-section/api-items-section.component.ts
@@ -7,7 +7,6 @@
  */
 
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {NgFor, NgIf} from '@angular/common';
 import {RouterLink} from '@angular/router';
 import {ApiItemsGroup} from '../interfaces/api-items-group';
 import ApiItemLabel from '../api-item-label/api-item-label.component';
@@ -16,7 +15,7 @@ import {IconComponent} from '@angular/docs';
 @Component({
   selector: 'adev-api-items-section',
   standalone: true,
-  imports: [NgIf, NgFor, ApiItemLabel, RouterLink, IconComponent],
+  imports: [ApiItemLabel, RouterLink, IconComponent],
   templateUrl: './api-items-section.component.html',
   styleUrls: ['./api-items-section.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts b/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts
@@ -15,6 +15,7 @@ import {ApiItemType} from '../interfaces/api-item-type';
 import {ApiReferenceManager} from './api-reference-manager.service';
 import ApiItemLabel from '../api-item-label/api-item-label.component';
 import {ApiLabel} from '../pipes/api-label.pipe';
+import {ApiItemsGroup} from '../interfaces/api-items-group';
 
 export const ALL_STATUSES_KEY = 'All';
 
@@ -45,11 +46,12 @@ export default class ApiReferenceList {
   type = signal(ALL_STATUSES_KEY);
 
   featuredGroup = this.apiReferenceManager.featuredGroup;
-  filteredGroups = computed(() => {
+  filteredGroups = computed((): ApiItemsGroup[] => {
     return this.allGroups()
       .map((group) => ({
         title: group.title,
         isFeatured: group.isFeatured,
+        id: group.id,
         items: group.items.filter((apiItem) => {
           return (
             (this.query()

diff --git a/adev/src/app/features/references/api-reference-list/api-reference-manager.service.ts b/adev/src/app/features/references/api-reference-list/api-reference-manager.service.ts
@@ -7,6 +7,7 @@
  */
 
 import {Injectable, signal} from '@angular/core';
+// This file is generated at build-time, error is expected here.
 import API_MANIFEST_JSON from '../../../../../src/assets/api/manifest.json';
 import {ANGULAR_PACKAGE_PREFIX, getApiUrl} from '../helpers/manifest.helper';
 import {ApiItem} from '../interfaces/api-item';
@@ -40,6 +41,7 @@ export class ApiReferenceManager {
   // Represents group of the featured items.
   featuredGroup = signal<ApiItemsGroup>({
     title: FEATURED_GROUP_TITLE,
+    id: 'featured',
     items: [],
     isFeatured: true,
   });
@@ -58,6 +60,7 @@ export class ApiReferenceManager {
 
       groups.push({
         title: packageNameWithoutPrefix,
+        id: packageNameWithoutPrefix.replaceAll('/', '-'),
         items: packageApis
           .map((api) => {
             const url = getApiUrl(packageNameWithoutPrefix, api.name);

diff --git a/adev/src/app/features/references/interfaces/api-items-group.ts b/adev/src/app/features/references/interfaces/api-items-group.ts
@@ -10,6 +10,7 @@ import {ApiItem} from './api-item';
 
 export interface ApiItemsGroup {
   title: string;
+  id: string;
   items: ApiItem[];
   isFeatured?: boolean;
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html
@@ -30,12 +30,27 @@
       {{ tab }}
     </a>
   }
-  @if (angularVersion) {
+  @if (angularVersion()) {
     <section id="app-angular-version">
       Angular version:
-      <span id="version-number">
-        {{ angularVersion }}
-      </span>
+
+      @if (majorAngularVersion() > 12 || majorAngularVersion() == 0) {
+        <span id="version-number">
+          {{ angularVersion() }}
+        </span>
+      } @else {
+        <span 
+          id="version-number"
+          matTooltip="
+            Angular Devtools supports Angular versions 12 and above. Some DevTools features may be available in 
+            older versions of Angular, but it is not officially supported.
+          "
+          class="unsupported-version"
+          >
+          {{ angularVersion() }} (unsupported)
+        </span>
+      }
+
       @if (latestSHA) {
         | DevTools SHA: {{ latestSHA }}
       }

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.scss
@@ -67,6 +67,10 @@ ng-injector-tree.hidden {
   -webkit-user-select: text;
   -ms-user-select: text;
   user-select: text;
+
+  &.unsupported-version {
+    color: red;
+  }
 }
 
 mat-icon {
@@ -89,6 +93,10 @@ mat-icon {
 :host-context(.dark-theme) {
   #version-number {
     color: #5caace;
+
+    &.unsupported-version {
+      color: red;
+    }
   }
 
   .inspector-active {

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -9,8 +9,10 @@
 import {
   AfterViewInit,
   Component,
+  computed,
   EventEmitter,
   inject,
+  input,
   Input,
   OnInit,
   Output,
@@ -59,7 +61,6 @@ type Tabs = 'Components' | 'Profiler' | 'Router Tree' | 'Injector Tree';
   providers: [TabUpdate],
 })
 export class DevToolsTabsComponent implements OnInit, AfterViewInit {
-  @Input() angularVersion: string | undefined = undefined;
   @Input() isHydrationEnabled = false;
 
   @Output() frameSelected = new EventEmitter<Frame>();
@@ -80,6 +81,15 @@ export class DevToolsTabsComponent implements OnInit, AfterViewInit {
 
   TOP_LEVEL_FRAME_ID = TOP_LEVEL_FRAME_ID;
 
+  angularVersion = input<string | undefined>(undefined);
+  majorAngularVersion = computed(() => {
+    const version = this.angularVersion();
+    if (!version) {
+      return -1;
+    }
+    return parseInt(version.toString().split('.')[0], 10);
+  });
+
   constructor(
     public tabUpdate: TabUpdate,
     public themeService: ThemeService,

diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.html b/devtools/projects/ng-devtools/src/lib/devtools.component.html
@@ -2,9 +2,9 @@
   @switch (angularStatus) {
     @case (AngularStatus.EXISTS) {
       @if (angularIsInDevMode) {
-        @if (supportedVersion) {
+        @if (supportedVersion()) {
           <div class="devtools-wrapper noselect" [@enterAnimation]>
-            <ng-devtools-tabs (frameSelected)="inspectFrame($event)" [isHydrationEnabled]="hydration" [angularVersion]="angularVersion"></ng-devtools-tabs>
+            <ng-devtools-tabs (frameSelected)="inspectFrame($event)" [isHydrationEnabled]="hydration" [angularVersion]="angularVersion()"></ng-devtools-tabs>
           </div>
         } @else {
           <p class="text-message">

diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.ts b/devtools/projects/ng-devtools/src/lib/devtools.component.ts
@@ -9,7 +9,15 @@
 import {animate, style, transition, trigger} from '@angular/animations';
 import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
-import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+  WritableSignal,
+} from '@angular/core';
 import {Events, MessageBus} from 'protocol';
 import {interval} from 'rxjs';
 
@@ -40,6 +48,8 @@ enum AngularStatus {
   EXISTS,
 }
 
+const LAST_SUPPORTED_VERSION = 9;
+
 @Component({
   selector: 'ng-devtools',
   templateUrl: './devtools.component.html',
@@ -56,10 +66,22 @@ enum AngularStatus {
 export class DevToolsComponent implements OnInit, OnDestroy {
   AngularStatus = AngularStatus;
   angularStatus: AngularStatus = AngularStatus.UNKNOWN;
-  angularVersion: string | boolean | undefined = undefined;
+  angularVersion: WritableSignal<string | undefined> = signal(undefined);
   angularIsInDevMode = true;
   hydration: boolean = false;
-  ivy!: boolean;
+  ivy: WritableSignal<boolean | undefined> = signal(undefined);
+
+  supportedVersion = computed(() => {
+    const version = this.angularVersion();
+    if (!version) {
+      return false;
+    }
+    const majorVersion = parseInt(version.toString().split('.')[0], 10);
+
+    // Check that major version is either greater or equal to the last supported version
+    // or that the major version is 0 for the (0.0.0-PLACEHOLDER) dev build case.
+    return (majorVersion >= LAST_SUPPORTED_VERSION || majorVersion === 0) && this.ivy();
+  });
 
   private readonly _firefoxStyleName = 'firefox_styles.css';
   private readonly _chromeStyleName = 'chrome_styles.css';
@@ -85,9 +107,9 @@ export class DevToolsComponent implements OnInit, OnDestroy {
 
     this._messageBus.once('ngAvailability', ({version, devMode, ivy, hydration}) => {
       this.angularStatus = version ? AngularStatus.EXISTS : AngularStatus.DOES_NOT_EXIST;
-      this.angularVersion = version;
+      this.angularVersion.set(version);
       this.angularIsInDevMode = devMode;
-      this.ivy = ivy;
+      this.ivy.set(ivy);
       this._interval$.unsubscribe();
       this.hydration = hydration;
     });
@@ -98,17 +120,6 @@ export class DevToolsComponent implements OnInit, OnDestroy {
     this._loadStyle(browserStyleName);
   }
 
-  get majorAngularVersion(): number {
-    if (!this.angularVersion) {
-      return -1;
-    }
-    return parseInt(this.angularVersion.toString().split('.')[0], 10);
-  }
-
-  get supportedVersion(): boolean {
-    return (this.majorAngularVersion >= 9 || this.majorAngularVersion === 0) && this.ivy;
-  }
-
   /** Add a style file in header based on fileName */
   private _loadStyle(styleName: string) {
     const head = this._document.getElementsByTagName('head')[0];

diff --git a/devtools/projects/ng-devtools/src/lib/devtools_spec.ts b/devtools/projects/ng-devtools/src/lib/devtools_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FrameManager} from './frame_manager';
 import {DevToolsComponent} from './devtools.component';
@@ -44,8 +44,8 @@ describe('DevtoolsComponent', () => {
   it('should render ng devtools tabs when Angular Status is EXISTS and is in dev mode and is supported version', () => {
     component.angularStatus = component.AngularStatus.EXISTS;
     component.angularIsInDevMode = true;
-    component.angularVersion = '0.0.0';
-    component.ivy = true;
+    component.angularVersion = signal('0.0.0');
+    component.ivy = signal(true);
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('ng-devtools-tabs')).toBeTruthy();
   });
@@ -62,7 +62,7 @@ describe('DevtoolsComponent', () => {
   it('should render version support message when Angular Status is EXISTS and angular version is not supported', () => {
     component.angularStatus = component.AngularStatus.EXISTS;
     component.angularIsInDevMode = true;
-    component.angularVersion = '1.0.0';
+    component.angularVersion = signal('1.0.0');
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
       'Angular Devtools only supports Angular versions 12 and above',

diff --git a/devtools/projects/protocol/src/lib/messages.ts b/devtools/projects/protocol/src/lib/messages.ts
@@ -238,7 +238,7 @@ export interface Events {
   shutdown: () => void;
   queryNgAvailability: () => void;
   ngAvailability: (config: {
-    version: string | undefined | boolean;
+    version: string | undefined;
     devMode: boolean;
     ivy: boolean;
     hydration: boolean;

diff --git a/devtools/projects/shell-browser/src/app/content-script.ts b/devtools/projects/shell-browser/src/app/content-script.ts
@@ -46,14 +46,6 @@ detectAngularMessageBus.on('detectAngular', (detectionResult) => {
     return;
   }
 
-  if (detectionResult.isDebugMode !== true) {
-    return;
-  }
-
-  if (detectionResult.isSupportedAngularVersion !== true) {
-    return;
-  }
-
   // Defensive check against non html page. Realistically this should never happen.
   if (document.contentType !== 'text/html') {
     return;

diff --git a/goldens/public-api/common/http/errors.md b/goldens/public-api/common/http/errors.md
@@ -9,6 +9,10 @@ export const enum RuntimeErrorCode {
     // (undocumented)
     HEADERS_ALTERED_BY_TRANSFER_CACHE = 2802,
     // (undocumented)
+    HTTP_ORIGIN_MAP_CONTAINS_PATH = 2804,
+    // (undocumented)
+    HTTP_ORIGIN_MAP_USED_IN_CLIENT = 2803,
+    // (undocumented)
     MISSING_JSONP_MODULE = -2800,
     // (undocumented)
     NOT_USING_FETCH_BACKEND_IN_SSR = 2801