migrate to package:web (from dart:html)

[mongbean]

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.

[greglittlefield-wf]

Thanks for opening this issue!

We do have plans to migrate to package:web and the new dart:js_interop JS interop eventually, but unfortunately there's not a timeline for that. Our team will likely investigate this more later this year, and then we'll have a better idea of when that might happen.

or any recommendations for teams navigating this migration

For now, I would recommend continuing to use dart:html in code that interacts with over_react APIs that use those DOM types.

If there are areas of your code that need to use package:web, you should be able to cast those types to their corresponding dart:html types.

For example:

import 'dart:html' as html;
import 'package:web/web.dart' as web;

import 'over_react/react_dom' as react_dom;

void mount(web.Element webElement) => 
    react_dom.render(/*...*/, webElement as html.Element);

[dave-doty]

Hi @greglittlefield-wf, thanks for the update.

If there are areas of your code that need to use package:web, you should be able to cast those types to their corresponding dart:html types.

Do you have a link describing that? We tried, and as far as we can tell the packages are totally incompatible. We think we are stuck using only dart:html for as long as OverReact does.

We don't necessarily "need" to upgrade soon (I'm not sure if there's any performance enhancements in package:web, for instance), but I was just paranoid after noticing all the deprecation warnings and didn't want to wake up one day to find dart:html is not longer supported.

[dave-doty]

Any update on this migration? Dart is going to start removing support for dart:html soon:

dart-lang/sdk#63919

[greglittlefield-wf]

Hey @dave-doty, unfortunately we still don't have any plans for this migration. I think we may look into it in the coming months, but it's still very TBD when this work might get prioritized.

Do you have a link describing that? We tried, and as far as we can tell the packages are totally incompatible. We think we are stuck using only dart:html for as long as OverReact does.

Sorry, I missed this comment. I don't, I think I found that it worked in local testing, but wasn't able to confirm whether something like that was officially supported. For example: https://dartpad.dev/1d0b3e825f78fc6e73c0f6b6dd09fe2a