Content-Length: 1096984 | pFad | http://github.com/angular/angular/pull/60748/files

67 feat(core): Move zoneless change detection to dev preview by atscott · Pull Request #60748 · angular/angular · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): Move zoneless change detection to dev preview #60748

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {NavigationState} from '../../services';
import {NavigationItem} from '../../interfaces';
import {By} from '@angular/platform-browser';
import {RouterTestingModule} from '@angular/router/testing';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('Breadcrumb', () => {
let fixture: ComponentFixture<Breadcrumb>;
Expand All @@ -25,7 +25,7 @@ describe('Breadcrumb', () => {
TestBed.configureTestingModule({
imports: [Breadcrumb, RouterTestingModule],
providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{
provide: NavigationState,
useValue: navigationStateSpy,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
import {CookiePopup, STORAGE_KEY} from './cookie-popup.component';
import {LOCAL_STORAGE} from '../../providers/index';
import {MockLocalStorage} from '../../testing/index';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('CookiePopup', () => {
let fixture: ComponentFixture<CookiePopup>;
Expand All @@ -21,7 +21,7 @@ describe('CookiePopup', () => {
TestBed.configureTestingModule({
imports: [CookiePopup],
providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{
provide: LOCAL_STORAGE,
useValue: mockLocalStorage,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
import {
ChangeDetectionStrategy,
Component,
provideExperimentalZonelessChangeDetection,
provideZonelessChangeDetection,
signal,
} from '@angular/core';
import {By} from '@angular/platform-browser';
Expand All @@ -32,7 +32,7 @@ describe('CopySourceCodeButton', () => {
beforeEach(async () => {
TestBed.configureTestingModule({
imports: [CodeSnippetWrapper],
providers: [provideExperimentalZonelessChangeDetection()],
providers: [provideZonelessChangeDetection()],
});
fixture = TestBed.createComponent(CodeSnippetWrapper);
component = fixture.componentInstance;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {NavigationList} from './navigation-list.component';
import {By} from '@angular/platform-browser';
import {NavigationItem} from '../../interfaces';
import {provideRouter} from '@angular/router';
import {provideExperimentalZonelessChangeDetection, signal} from '@angular/core';
import {provideZonelessChangeDetection, signal} from '@angular/core';
import {NavigationState} from '../../services';

const navigationItems: NavigationItem[] = [
Expand Down Expand Up @@ -41,7 +41,7 @@ describe('NavigationList', () => {
providers: [
provideRouter([]),
{provide: NavigationState, useClass: FakeNavigationListState},
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
],
}).compileComponents();
fixture = TestBed.createComponent(NavigationList);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ import {By} from '@angular/platform-browser';
import {AlgoliaIcon} from '../algolia-icon/algolia-icon.component';
import {RouterTestingModule} from '@angular/router/testing';
import {Router} from '@angular/router';
import {
ApplicationRef,
provideExperimentalZonelessChangeDetection,
ResourceStatus,
} from '@angular/core';
import {ApplicationRef, provideZonelessChangeDetection, ResourceStatus} from '@angular/core';
import {SearchResult} from '../../interfaces';

describe('SearchDialog', () => {
Expand All @@ -38,7 +34,7 @@ describe('SearchDialog', () => {
TestBed.configureTestingModule({
imports: [SearchDialog, RouterTestingModule],
providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{provide: ENVIRONMENT, useValue: {algolia: {index: 'fakeIndex'}}},
{provide: ALGOLIA_CLIENT, useValue: {search: searchResults}},
{provide: WINDOW, useValue: fakeWindow},
Expand Down
4 changes: 2 additions & 2 deletions adev/shared-docs/components/select/select.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';

import {Select} from './select.component';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('Select', () => {
let component: Select;
Expand All @@ -18,7 +18,7 @@ describe('Select', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [Select],
providers: [provideExperimentalZonelessChangeDetection()],
providers: [provideZonelessChangeDetection()],
});
fixture = TestBed.createComponent(Select);
component = fixture.componentInstance;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';

import {SlideToggle} from './slide-toggle.component';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('SlideToggle', () => {
let component: SlideToggle;
Expand All @@ -18,7 +18,7 @@ describe('SlideToggle', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [SlideToggle],
providers: [provideExperimentalZonelessChangeDetection()],
providers: [provideZonelessChangeDetection()],
});
fixture = TestBed.createComponent(SlideToggle);
fixture.componentRef.setInput('buttonId', 'id');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {RouterTestingModule} from '@angular/router/testing';
import {TableOfContentsItem, TableOfContentsLevel} from '../../interfaces/index';
import {TableOfContentsLoader} from '../../services/index';
import {WINDOW} from '../../providers/index';
import {provideExperimentalZonelessChangeDetection, signal} from '@angular/core';
import {provideZonelessChangeDetection, signal} from '@angular/core';

describe('TableOfContents', () => {
let component: TableOfContents;
Expand Down Expand Up @@ -43,7 +43,7 @@ describe('TableOfContents', () => {
await TestBed.configureTestingModule({
imports: [TableOfContents, RouterTestingModule],
providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{
provide: WINDOW,
useValue: fakeWindow,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';

import {TextField} from './text-field.component';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('TextField', () => {
let component: TextField;
Expand All @@ -18,7 +18,7 @@ describe('TextField', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TextField],
providers: [provideExperimentalZonelessChangeDetection()],
providers: [provideZonelessChangeDetection()],
});
fixture = TestBed.createComponent(TextField);
component = fixture.componentInstance;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {Breadcrumb} from '../../breadcrumb/breadcrumb.component';
import {NavigationState} from '../../../services';
import {CopySourceCodeButton} from '../../copy-source-code-button/copy-source-code-button.component';
import {TableOfContents} from '../../table-of-contents/table-of-contents.component';
import {provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideZonelessChangeDetection} from '@angular/core';

describe('DocViewer', () => {
let fixture: ComponentFixture<DocViewer>;
Expand Down Expand Up @@ -82,7 +82,7 @@ describe('DocViewer', () => {
imports: [DocViewer],
providers: [
provideRouter([]),
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{provide: EXAMPLE_VIEWER_CONTENT_LOADER, useValue: exampleContentSpy},
{provide: NavigationState, useValue: navigationStateSpy},
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {ExampleViewer} from './example-viewer.component';
import {DocsContentLoader, ExampleMetadata, ExampleViewerContentLoader} from '../../../interfaces';
import {DOCS_CONTENT_LOADER, EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers';
import {Component, provideExperimentalZonelessChangeDetection, ComponentRef} from '@angular/core';
import {Component, provideZonelessChangeDetection, ComponentRef} from '@angular/core';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {Clipboard} from '@angular/cdk/clipboard';
Expand Down Expand Up @@ -39,7 +39,7 @@ describe('ExampleViewer', () => {
imports: [ExampleViewer],
providers: [
// TODO: Find why tests warn that zone.js is still loaded
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{provide: EXAMPLE_VIEWER_CONTENT_LOADER, useValue: exampleContentSpy},
{provide: DOCS_CONTENT_LOADER, useValue: contentServiceSpy},
{provide: ActivatedRoute, useValue: {snapshot: {fragment: 'fragment'}}},
Expand Down
4 changes: 2 additions & 2 deletions adev/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
ErrorHandler,
VERSION,
inject,
provideExperimentalZonelessChangeDetection,
provideZonelessChangeDetection,
provideEnvironmentInitializer,
} from '@angular/core';
import {
Expand Down Expand Up @@ -72,7 +72,7 @@ export const appConfig: ApplicationConfig = {
}),
withComponentInputBinding(),
),
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
provideClientHydration(),
provideHttpClient(withFetch()),
provideEnvironmentInitializer(() => inject(AppScroller)),
Expand Down
7 changes: 1 addition & 6 deletions adev/src/app/sub-navigation-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -573,12 +573,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
},
],
},
{
label: 'Experimental features',
children: [
{label: 'Zoneless', path: 'guide/experimental/zoneless', contentPath: 'guide/zoneless'},
],
},
],
},
{
Expand Down Expand Up @@ -742,6 +736,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
path: 'best-practices/skipping-subtrees',
contentPath: 'best-practices/runtime-performance/skipping-subtrees',
},
{label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
],
},
{
Expand Down
2 changes: 1 addition & 1 deletion adev/src/content/guide/testing/components-scenarios.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Then add it to the `providers` array of the testing module configuration:

HELPFUL: You can also use the `fixture.autoDetectChanges()` function instead if you only want to enable automatic change detection
after making updates to the state of the fixture's component. In addition, automatic change detection is on by default
when using `provideExperimentalZonelessChangeDetection` and turning it off is not recommended.
when using `provideZonelessChangeDetection` and turning it off is not recommended.

Here are three tests that illustrate how automatic change detection works.

Expand Down
9 changes: 4 additions & 5 deletions adev/src/content/guide/zoneless.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,18 @@ The main advantages to removing ZoneJS as a dependency are:

## Enabling Zoneless in an application

The API for enabling Zoneless is currently experimental. Neither the shape, nor the underlying behavior is stable and can change
in patch versions. There are known feature gaps, including the lack of an ergonomic API which prevents the application from serializing too early with Server Side Rendering.
The API for enabling Zoneless is currently in developer preview. Neither the shape of the API nor the underlying behavior are stable and can change in patch versions.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor: grammar

Suggested change
The API for enabling Zoneless is currently in developer preview. Neither the shape of the API nor the underlying behavior are stable and can change in patch versions.
The API for enabling Zoneless is currently in developer preview. Neither the shape of the API nor the underlying behavior is stable and can change in patch versions.


```typescript
// standalone bootstrap
bootstrapApplication(MyApp, {providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
]});

// NgModule bootstrap
platformBrowser().bootstrapModule(AppModule);
@NgModule({
providers: [provideExperimentalZonelessChangeDetection()]
providers: [provideZonelessChangeDetection()]
})
export class AppModule {}
```
Expand Down Expand Up @@ -134,7 +133,7 @@ Angular application.

```typescript
TestBed.configureTestingModule({
providers: [provideExperimentalZonelessChangeDetection()]
providers: [provideZonelessChangeDetection()]
});

const fixture = TestBed.createComponent(MyComponent);
Expand Down
2 changes: 1 addition & 1 deletion adev/src/content/reference/roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Start developing with the latest Angular features from our roadmap. This list re
### Available to experiment with

* [Incremental hydration](/guide/incremental-hydration)
* [Zoneless change detection](/guide/experimental/zoneless)
* [Zoneless change detection](/guide/zoneless)
* [Hydration support for i18n blocks](/api/platform-browser/withI18nSupport)
* [Resource API](/guide/signals/resource)
* [Effect API](/api/core/effect)
Expand Down
4 changes: 2 additions & 2 deletions adev/test-main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
* found in the LICENSE file at https://angular.dev/license
*/

import {ErrorHandler, NgModule, provideExperimentalZonelessChangeDetection} from '@angular/core';
import {ErrorHandler, NgModule, provideZonelessChangeDetection} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {BrowserTestingModule, platformBrowserTesting} from '@angular/platform-browser/testing';

@NgModule({
providers: [
provideExperimentalZonelessChangeDetection(),
provideZonelessChangeDetection(),
{
provide: ErrorHandler,
useValue: {
Expand Down
8 changes: 5 additions & 3 deletions goldens/public-api/core/index.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -1464,9 +1464,6 @@ export function provideExperimentalCheckNoChangesForDebug(options: {
exhaustive?: boolean;
}): _angular_core.EnvironmentProviders;

// @public
export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders;

// @public
export function providePlatformInitializer(initializerFn: () => void): EnvironmentProviders;

Expand All @@ -1479,6 +1476,11 @@ export type ProviderToken<T> = Type<T> | AbstractType<T> | InjectionToken<T>;
// @public
export function provideZoneChangeDetection(options?: NgZoneOptions): EnvironmentProviders;

// @public
function provideZonelessChangeDetection(): EnvironmentProviders;
export { provideZonelessChangeDetection as provideExperimentalZonelessChangeDetection }
export { provideZonelessChangeDetection }

// @public
export interface Query {
// (undocumented)
Expand Down
7 changes: 2 additions & 5 deletions modules/ssr-benchmarks/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,10 @@
* found in the LICENSE file at https://angular.dev/license
*/

import {ApplicationConfig, provideExperimentalZonelessChangeDetection} from '@angular/core';
import {ApplicationConfig, provideZonelessChangeDetection} from '@angular/core';

import {provideClientHydration, withEventReplay} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
providers: [
provideExperimentalZonelessChangeDetection(),
provideClientHydration(withEventReplay()),
],
providers: [provideZonelessChangeDetection(), provideClientHydration(withEventReplay())],
};
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {ZONELESS_ENABLED} from './zoneless_scheduling';
* and will always check all views, regardless of their "dirty" state and `ChangeDetectionStrategy`.
*
* When the `useNgZoneOnStable` option is `true`, this function will provide its own `NgZone` implementation and needs
* to come after any other `NgZone` provider, including `provideZoneChangeDetection()` and `provideExperimentalZonelessChangeDetection()`.
* to come after any other `NgZone` provider, including `provideZoneChangeDetection()` and `provideZonelessChangeDetection()`.
*
* @experimental
* @publicApi
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const ZONELESS_ENABLED = new InjectionToken<boolean>(
{providedIn: 'root', factory: () => false},
);

/** Token used to indicate `provideExperimentalZonelessChangeDetection` was used. */
/** Token used to indicate `provideZonelessChangeDetection` was used. */
export const PROVIDED_ZONELESS = new InjectionToken<boolean>(
typeof ngDevMode === 'undefined' || ngDevMode ? 'Zoneless provided' : '',
{providedIn: 'root', factory: () => false},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
* @usageNotes
* ```ts
* bootstrapApplication(MyApp, {providers: [
* provideExperimentalZonelessChangeDetection(),
* provideZonelessChangeDetection(),
* ]});
* ```
*
Expand All @@ -370,10 +370,10 @@ export class ChangeDetectionSchedulerImpl implements ChangeDetectionScheduler {
* on the exact API based on the feedback and our understanding of the problem and solution space.
*
* @publicApi
* @experimental
* @developerPreview
* @see {@link /api/platform-browser/bootstrapApplication bootstrapApplication}
*/
export function provideExperimentalZonelessChangeDetection(): EnvironmentProviders {
export function provideZonelessChangeDetection(): EnvironmentProviders {
performanceMarkFeature('NgZoneless');

if ((typeof ngDevMode === 'undefined' || ngDevMode) && typeof Zone !== 'undefined' && Zone) {
Expand Down
6 changes: 5 additions & 1 deletion packages/core/src/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ export {
provideZoneChangeDetection,
NgZoneOptions,
} from './change_detection/scheduling/ng_zone_scheduling';
export {provideExperimentalZonelessChangeDetection} from './change_detection/scheduling/zoneless_scheduling_impl';
export {
provideZonelessChangeDetection,
// TODO(atscott): Remove after internal LSC for name change
provideZonelessChangeDetection as provideExperimentalZonelessChangeDetection,
} from './change_detection/scheduling/zoneless_scheduling_impl';
export {PendingTasks} from './pending_tasks';
export {provideExperimentalCheckNoChangesForDebug} from './change_detection/scheduling/exhaustive_check_no_changes';
export {enableProdMode, isDevMode} from './util/is_dev_mode';
Expand Down
Loading








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/angular/angular/pull/60748/files

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy