custom-event-polyfill icon indicating copy to clipboard operation
custom-event-polyfill copied to clipboard

CustomEvent could not be extended

Open Stav88 opened this issue 4 years ago • 3 comments

When I extends CustomEvent using babel the prototype is wrongly set to CustomEventPrototype instead of my class so I can't call methods of my class.

Scenario:

  • Extends CustomEvent using ES6 syntax:
export default class MyEvent extends CustomEvent {
    test() {return 'ok';}
}
  • Construct event and call test() methods:
const evt = new MyEvent();
console.log(Object.getPrototypeOf(evt));
console.log(evt.test());
  • Compile using Babel

Results:

[object CustomEventPrototype]
Object doesn't support property or method 'test'

Expected:

no error

[object MyEvent]
ok

Fix

I find a way to fix that by adding the following code at the end of CustomEvent contructor:

Object.setPrototypeOf(evt, Object.getPrototypeOf(this));

Stav88 avatar Jan 16 '20 09:01 Stav88

Thanks for reporting this. Can you raise a PR for the same after checking what is the behaviour in browsers which do support CustomEvent? I'm on a mobile so can't check it myself right now.

kumarharsh avatar Jan 18 '20 04:01 kumarharsh

I have checked the behaviour of actual browsers without polyfill :

  • Gecko (Firefox): support CustomEvent constructor and extends
  • Bink (Chrome): support CustomEvent constructor and extends
  • Webkit (Safari): support CustomEvent constructor but doesn't support correctly extends
  • Edge: support CustomEvent constructor but doesn't support correctly extends
  • IE: don't support CustomEvent constructor

Stav88 avatar Jan 20 '20 13:01 Stav88

Thanks. I'll take a look at your commit in some time...

kumarharsh avatar Jan 20 '20 14:01 kumarharsh