mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
eddca4280b
These changes are essentially the same as those introduced in
angular#45273, but they include backward compatibility
for applications that explicitly rely on the order in which microtasks are drained.
This is critically important for our code and other third-party code, which is
beyond our control, to work properly. If a microtask is scheduled within an event
listener to be executed "later", it should indeed be executed later and not synchronously,
as this would break the expected flow of code execution.
The simple code that reproduces the behavior that exists now:
```ts
Zone.current.fork({name: 'child'}).run(() => {
const div = document.createElement('div');
div.style.height = '200px';
div.style.width = '200px';
div.style.backgroundColor = 'red';
document.body.appendChild(div);
function listener() {
Promise.resolve().then(() => {
div.style.height = '400px';
});
}
div.addEventListener('fakeEvent', listener);
div.dispatchEvent(new Event('fakeEvent'));
console.log(div.getBoundingClientRect().height); // 400
});
```
The code above logs 400 as the height, but it should actually log 200 because the
height is updated in a microtask within the event listener.
When using Angular with microfrontend applications, especially when other apps might be
using React, zone.js can disrupt the classical order of operations. For example, when using a
`react-component/trigger`, it schedules a microtask within an event listener using
`Promise.resolve().then(...)` to determine whether the event needs to be re-dispatched.
The event is re-dispatched when the layout has changed, which is why a microtask is used.
With this change, we introduce a global configuration flag,
`__zone_symbol__enable_native_microtask_draining`, to allow consumers to enable
microtask draining within a browser microtask.
This flag is necessary to prevent any breaking changes resulting from this modification.
The previous attempt to address this issue caused a significant number of failures in g3.
Therefore, we are hiding that fix behind the configuration flag.
Closes angular#44446
Closes angular#55590
Closes angular#51328
(cherry picked from commit
|
||
|---|---|---|
| .. | ||
| assets | ||
| browser | ||
| closure | ||
| common | ||
| extra | ||
| jest | ||
| node | ||
| npm_package | ||
| patch | ||
| performance | ||
| promise | ||
| rxjs | ||
| typings | ||
| vitest | ||
| webdriver | ||
| zone-spec | ||
| browser-env-setup.ts | ||
| browser-zone-setup.ts | ||
| browser_disable_wrap_uncaught_promise_rejection_entry_point.ts | ||
| browser_disable_wrap_uncaught_promise_rejection_setup.ts | ||
| browser_entry_point.ts | ||
| browser_es2015_entry_point.ts | ||
| browser_shadydom_entry_point.ts | ||
| browser_shadydom_setup.ts | ||
| browser_symbol_setup.ts | ||
| BUILD.bazel | ||
| common_tests.ts | ||
| fake_entry.js | ||
| jasmine-patch.spec.ts | ||
| karma_test.bzl | ||
| main.ts | ||
| mocha-patch.spec.ts | ||
| node-env-setup.ts | ||
| node_bluebird_entry_point.init.ts | ||
| node_entry_point.init.ts | ||
| node_error_disable_policy.ts | ||
| node_error_disable_policy_entry_point.init.ts | ||
| node_error_entry_point.init.ts | ||
| node_error_lazy_policy.ts | ||
| node_error_lazy_policy_entry_point.init.ts | ||
| node_tests.ts | ||
| saucelabs.js | ||
| test-env-setup-jasmine.ts | ||
| test-env-setup-mocha.ts | ||
| test-util.ts | ||
| test_fake_polyfill.ts | ||
| ws-server.js | ||
| ws-webworker-context.ts | ||
| wtf_mock.ts | ||
| zone_worker_entry_point.ts | ||