Implement EventEmitter compatible with browsers
#6398
Conversation
Bundle StatsHey there, this message comes from a github action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## 4.x #6398 +/- ##
==========================================
+ Coverage 89.59% 89.65% +0.06%
==========================================
Files 212 213 +1
Lines 8141 8199 +58
Branches 2213 2220 +7
==========================================
+ Hits 7294 7351 +57
- Misses 847 848 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
|
Deploying with
|
| Latest commit: |
d7e97db
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2e1c690a.web3-js-docs.pages.dev |
| Branch Preview URL: | https://6371-uncaught-typeerror-clas.web3-js-docs.pages.dev |
|
|
||
| type Callback = (params: any) => void | Promise<void>; | ||
|
|
||
| export class InBrowserEventEmitter extends EventTarget { |
There was a problem hiding this comment.
Where is this implementation comming from?
There was a problem hiding this comment.
Hi @mpetrunic,
This implementation comes from Stackoverflow with the help of ChatGPT 😄 .
Because events module is only a node module that does not exist for the browsers. There is a need to use something different for the browsers. And this class simply uses the class EventTarget available at the browsers and adds more methods to it which we need in our code.
The other alternative to this solution is to use a 3rd party library like: https://www.npmjs.com/package/eventemitter, https://www.npmjs.com/package/events and https://www.npmjs.com/package/eventemitter3. However, I did not want to add an additional dependency.
However, if you have a better approach, kindly advise.
Thanks,
There was a problem hiding this comment.
Event emmitters are tricky beasts, easy to cause memory leaks or annoying bugs. I would rely on some solid implementation like https://www.npmjs.com/package/eventemitter3
There was a problem hiding this comment.
This lib is ~70kb unpack size, for now its good to use some dependable lib but also create issue as lib optimisation in future we may attempt reducing lib size then.
There was a problem hiding this comment.
Thanks @mpetrunic and @jdevcs, for your valid concern and good suggestions.
Because these MR changes still rely on node EventEmitter, when it is a node environment, there are no changes for node js users. And for the browser, it depends on the available class EventTarget by just wrapping it to use it similar to node EventEmitter. So, I see this approach as stable. And, actually, our end-to-end tests pass. But I still need to write unit tests.
However, as you suggested, I can use eventemitter3 for now and create a task to write our own Event Emitter later. This is in case you still see the proposed solution in the MR is not good enough even after writing some unit tests. What do you think?
[There are failed tests for Firefox. But they are not related to the changes in this MR as they exist in other MRs as well]
9348f48 to
0e9ce5d
Compare
…ndefined-is-not-a-constructor-or-null
|
Thank you for the PR. LGTM, I agree with @jdevcs that we need to have browser + node tests for the new implementation |
…ndefined-is-not-a-constructor-or-null
…ndefined-is-not-a-constructor-or-null
6a8b701 to
e4d7317
Compare
…ndefined-is-not-a-constructor-or-null
|
There are now tests for |
…ndefined-is-not-a-constructor-or-null
…ndefined-is-not-a-constructor-or-null
There was a problem hiding this comment.
@Muhammad-Altabba update changelog for all packages where required
Description
Fixes #6371
Type of change
Checklist:
npm run lintwith success and extended the tests and types if necessary.npm run test:unitwith success.npm run test:coverageand my test cases cover all the lines and branches of the added code.npm run buildand testeddist/web3.min.jsin a browser.CHANGELOG.mdfile in the root folder.