aurelia / aurelia/templating

child-observation is broken when Zone.js is present on page and wraps MutationObserver

Open
#664 5 comments 0 reactions 0 assignees View on GitHub
documentation question
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
master

* **Browser:**
all

**Current behavior:**

As can be seen here:
https://github.com/aurelia/templating/blob/master/src/child-observation.js#L160

MutationObserver returned by `DOM.createMutationObserver(onChildChange);` is being patched, by adding `observer.binders = [];`

Later it is expected here:
https://github.com/aurelia/templating/blob/master/src/child-observation.js#L67
That the callback's observer contains the binders array.

This is not always the case, and error of the type "Uncaught TypeError: Cannot read property 'length' of undefined" are thrown.

In my use case, aurelia is used as an application inside an Angular application which uses Zone.js. Zone.js wraps the original MutationObserver. So when `new MutationObserver()` is called a wrapped instance by Zone.js is returned. To this instance `.binders` is added by aurelia. But in `onChildChange()` the observer is a different constructor (the browsers original) which does not contain the binders causing the errors.

**Expected/desired behavior:**

All should work event if `window.MutationObserver` is not the native browsers constructor.
child observation should not rely on monkey patching `window.MutationObserver`.

Contributor guide

Open the contributing guide

Research direction

Read src/child-observation.js at the referenced lines, focusing on how DOM.createMutationObserver creates the observer and how onChildChange accesses binders. Reproduce the failure with a non-native or wrapped window.MutationObserver, then verify that child observation no longer depends on monkey-patching the global constructor and that the TypeError is gone.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.