Workiva / Workiva/over_react

migrate to package:web (from dart:html)

Open
#981 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
432
Forks
57
PR merge metrics
No merged PRs in 30d

Description

I suppose a followup question is: does the OverReact team plan to follow this migration guide to move away from dart:html use package:web (and dart:js_interop) instead? https://dart.dev/interop/js-interop/package-web

I'm not sure if there's an advantage to doing this as long as dart:html is supported, but I notice their first justification for migrating is compatibility with WASM, which might mean package:web is more efficient? (or ultimately will be more efficient?)

Originally posted by @dave-doty in #947

On the same project, we are now migrating to package:web. OverReact's functions ask for dart:html types. For example, the function
react_dom.render() in the following code snippet:

      react_dom.render(
        over_react_components.ErrorBoundary()(
          (ReduxProvider()..store = app.store)(
            set_side_menu_props(ConnectedSideMenu(), state)(),
          ),
        ),
        document.querySelector('#$SIDE_VIEW_MENU_ID')!,
      );

throws the following error:

The argument type 'Element (where Element is defined in C:\Users\__\AppData\Local\Pub\Cache\hosted\pub.dev\web-1.1.1\lib\src\dom\dom.dart)' can't be assigned to the parameter type 'Element (where Element is defined in C:\tools\dart-sdk\lib\html\dart2js\html_dart2js.dart)'. dart[argument_type_not_assignable](https://dart.dev/diagnostics/argument_type_not_assignable)
dom.dart(3047, 16): Element is defined in C:\Users\__\AppData\Local\Pub\Cache\hosted\pub.dev\web-1.1.1\lib\src\dom\dom.dart
html_dart2js.dart(13159, 7): Element is defined in C:\tools\dart-sdk\lib\html\dart2js\html_dart2js.dart

This is likely because OverReact has not migrated to package:web. Would love to hear if there are any plans to support package:web interop, or any recommendations for teams navigating this migration.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Dart package:web migration guide, then inspect react_dom.render and other OverReact functions that accept dart:html types. Trace the Element type mismatch shown in the issue and identify the APIs affected by package:web and dart:js_interop. Done means teams using package:web can call the relevant OverReact APIs without dart:html type conflicts.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, wasm
Domain
frontend, web-dev
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.