feat: add visual progress indicators

[issacgerges]

• This is a bugfix
• This is a feature
• This is a code refactor
• This is a test update
• This is a docs update
• This is a metadata update

For Bugs and Features; did you add new tests?

No, could use guidance if they are needed

Motivation / Use-Case

Adds built-in visual progress indicators to webpack-dev-server

Breaking Changes

No breaking changes

Additional Info

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: issacgerges / name: Issac Gerges (0c855ac, e66ffa0)
• ✅ login: alexander-akait / name: Alexander Akait (8780851)

[alexander-akait]

Thank you for you PR, can you fix lint?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 56.19%. Comparing base (af6bd68) to head (e66ffa0).
Report is 37 commits behind head on master.

❗ Current head e66ffa0 differs from pull request most recent head 8780851

Please upload reports for the commit 8780851 to get more accurate results.

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #5186       +/-   ##
===========================================
- Coverage   90.29%   56.19%   -34.11%     
===========================================
  Files          15       11        -4     
  Lines        1577     1413      -164     
  Branches      601      555       -46     
===========================================
- Hits         1424      794      -630     
- Misses        140      507      +367     
- Partials       13      112       +99     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[issacgerges]

Should be fixed. @alexander-akait the re-run of build:types seems to have stripped all comments out. let me know if theres another way to run that command that preserves them and I can do.

[alexander-akait]

I am fine with it, but I am afraid some developers still can use our client in old browsers, so shadow dom can't work, let's add a check and don't run this code

[issacgerges]

@alexander-akait will do, sorry for moving so slow on this.

As an alternative, we could just expose some explicit API (or tell folks to lean on the postMessage you're already doing with progress) and leave implementing the visual parts to people who want them. What do you think?

[alexander-akait]

@issacgerges Yeah, we can, but I am fine with your solution, just let's add additional check to avoid problems with old browsers

[issacgerges]

Updated

• Added a guard
• Made the options "linear" and "circular" for consistency
• Combined both into a single custom element and simplified it a bit

[alexander-akait]

Let's move defineProgressElement after this check to avoid extra checks and have customElements.define("wds-progress", WebpackDevServerProgress); only in this function

[alexander-akait]

Looks very good, let's do one small improvement and we can merge

[alexander-akait]

Thank you, good work ⭐