Implement EventEmitter compatible with browsers

[Muhammad-Altabba]

Description

Fixes #6371

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• I have selected the correct base branch.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• Any dependent changes have been merged and published in downstream modules.
• I ran npm run lint with success and extended the tests and types if necessary.
• I ran npm run test:unit with success.
• I ran npm run test:coverage and my test cases cover all the lines and branches of the added code.
• I ran npm run build and tested dist/web3.min.js in a browser.
• I have tested my code on the live network.
• I have checked the Deploy Preview and it looks correct.
• I have updated the CHANGELOG.md file in the root folder.
• I have linked Issue(s) with this PR in "Linked Issues" menu.

[github-actions]

Bundle Stats

Hey 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

Asset	Old size	New size	Diff	Diff %
Total	583 KB	585 KB	1.64 KB	0.28%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	Old size	New size	Diff	Diff %
web3.min.js	566 KB	567 KB	1.64 KB	0.29%
../lib/commonjs/index.d.ts	8.56 KB	8.56 KB	0	0.00%
../lib/commonjs/accounts.d.ts	3.67 KB	3.67 KB	0	0.00%
../lib/commonjs/types.d.ts	2.45 KB	2.45 KB	0	0.00%
../lib/commonjs/web3.d.ts	1.14 KB	1.14 KB	0	0.00%
../lib/commonjs/abi.d.ts	1000 bytes	1000 bytes	0	0.00%
../lib/commonjs/eth.exports.d.ts	280 bytes	280 bytes	0	0.00%
../lib/commonjs/providers.exports.d.ts	148 bytes	148 bytes	0	0.00%
../lib/commonjs/version.d.ts	60 bytes	60 bytes	0	0.00%

[codecov]

Codecov Report

Merging #6398 (d7e97db) into 4.x (ae98628) will increase coverage by 0.06%.
The diff coverage is 98.36%.

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     

Flag	Coverage Δ
UnitTests	89.65% <98.36%> (+0.06%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
web3	∅ <ø> (∅)
web3-core	∅ <ø> (∅)
web3-errors	∅ <ø> (∅)
web3-eth	∅ <ø> (∅)
web3-eth-abi	∅ <ø> (∅)
web3-eth-accounts	∅ <ø> (∅)
web3-eth-contract	∅ <ø> (∅)
web3-eth-ens	∅ <ø> (∅)
web3-eth-iban	∅ <ø> (∅)
web3-eth-personal	∅ <ø> (∅)
web3-net	∅ <ø> (∅)
web3-providers-http	∅ <ø> (∅)
web3-providers-ipc	∅ <ø> (∅)
web3-providers-ws	∅ <ø> (∅)
web3-rpc-methods	∅ <ø> (∅)
web3-utils	∅ <ø> (∅)
web3-validator	∅ <ø> (∅)

[cloudflare-pages]

Deploying with    Cloudflare Pages

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

View logs

[mpetrunic]

Where is this implementation comming from?

[Muhammad-Altabba]

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,

[mpetrunic]

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

[jdevcs]

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.

[Muhammad-Altabba]

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]

[avkos]

Thank you for the PR. LGTM, I agree with @jdevcs that we need to have browser + node tests for the new implementation

[Muhammad-Altabba]

There are now tests for node as well as for jsdom (browser environment).
Thanks,

[jdevcs]

@Muhammad-Altabba update changelog for all packages where required