Aurelia-binding and event.path deprecation

1

The aurelia-binding package makes use of event.path which is marked as deprecated.

Event.path is deprecated and will be removed. Please use Event.composedPath() instead.

Are there any plans to address this? If not, what is the recommended course of action?

Cheers!

1 Like
2

Not only the aurelia-binding package, but also aurelia-templating-resources and aurelia-validation.

For the time being, I would like to add a polyfill, but where to ?

if (!Event.prototype.path) {
  Object.defineProperty(Event.prototype, 'path', {
    get() { return this.composedPath(); }
  });
}
1 Like
3

I have tried downloading the latest version of those three packages from GitHub.

In aurelia-binding:

This already uses composedPath.

In aurelia-templating-resources:

This appears to be the same function, and it does not use composedPath.

In aurelia-validation:
I could not find any usage of path.

Overall this problem seems to affect only the self binding behaviour which is a very limited scope, if it even does cause problems.

I guess a good spot for a polyfill would be in the main entry point of the application (aurelia-bootstrapper looks for a main.ts/js) before Aurelia is configured.

4

Thanks for your answer.
To clarify, my remark referred to an old version of Aurelia (1.x) where indeed there is usage of path. Hence my need to add a polyfill.

5

I did some digging into this as I spent about a day chasing the ‘missing’ composedPath() within the $event object (the answer to this is already in the name of the variable just mentioned).

What’s causing the deprecation notice (in browsers)?
The browsers are scanning the html page and looking for patterns like ‘event.path
’ etc
The simple pattern scan is done out of the assumption that if ‘event.path
’ i.e. ‘event.path[i].foo.etc’
is utilized then the safest assumption on the browsers’ part is that you’re using vanilla JS and thus playing with a deprecated feature (with fire). So they throw up a “world is burning, please update code” sort of warning.

What does Aurelia 2 do?
(I haven’t tested Aurelia 1 so assume worst case without doing your own testing)

Aurelia 2 automatically checks for the presence of event.composedPath() and uses that where it is present.

Please also note that $event !== event (the hint at the beginning of this answer).
You see, $event is an Aurelia 2 provided event object and thus is NOT the vanilla browser event object at all therefore if you go spelunking inside of $event looking for composedPath() you will never find it.
What you will find instead is the plain old path[ ] array.

This was presumably done out of a desire to preserve existing functionality (smart reasoning) in deployed templates.

How to know you’re not dealing with vanilla browser event object?

  1. Visit your index.html file at project root
  2. Add a script tag like so:
  <script type="text/javascript">
  function ckMyFooClickHandler(event)
  {
    console.log(event);
  }
  </script>
  1. Then in your template of choice, file any element and add the following:
onClick="ckMyFooClickHandler()"

  1. By doing this, you are testing the vanilla event object of the browser OUTSIDE of Aurelia’s influence.
    In the console.log output (upon clicking to cause the callback to be invoked) you will indeed see
    a composedPath() member within the event object.

  2. When you do the same thing within your component .ts (or .js) file inside of Aurelia’s purview, you will and console.log() the passed-in $event object from an equivalently delegated/triggered/captured handler method, YOU WILL NOT SEE composedPath() inside the printed out $event object.

Summary and Conclusion
You may SAFELY IGNORE the deprecation warnings thrown by your browser if and only if you are running Aurelia 2 and your template is using delegate/trigger/capture and passing in the Aurelia generated $event object.

That is all.

2 Likes
6

Update

After Aurelia 2.0.0-beta.1 landed on January 15th 2023, some changes to event handling need to be taken into condsideration, I have made a detailed post about this

Please refer to it for changes (delegate is gone, and the advice on event.path[0]... above is no longer relevant for 2.0.0-beta.1), so please read the post for details.

2 Likes