Migrate to package:web

[lukassgramm]

Is your feature request related to a problem?

Official Flutter documentation:

If you maintain a public Flutter package that uses dart:html or any of the other Dart SDK web libraries, you should migrate to package:web as soon as possible. package:web is replacing dart:html and other web libraries as Dart's web interop solution long-term. Read the package:web vs dart:html section for more information.

Dart core web libraries, like dart:html and dart:svg, are not supported when compiling to Wasm

https://dart.dev/interop/js-interop/package-web

Describe the solution you'd like

Update lib/wagmi_flutter_web.dart

Only in this file is dart:html used.

Import web

Before

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;

After

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

Update _completeOnReadyEvent

Before

void _completeOnReadyEvent(Completer completer) {
  const readyEventName = 'wagmi_flutter_web_ready';

  void readyEventListener(event) {
    html.window.document.removeEventListener(
      readyEventName,
      readyEventListener,
    );
    completer.complete();
  }

  html.window.document.addEventListener(
    readyEventName,
    readyEventListener,
  );
}

After

void _completeOnReadyEvent(Completer completer) {
  const readyEventName = 'wagmi_flutter_web_ready';

  void readyEventListener(web.EventListener event) {

    web.window.document.removeEventListener(
      readyEventName,
      readyEventListener.toJS,
    );
    completer.complete();
  }

  web.window.document.addEventListener(
    readyEventName,
    readyEventListener.toJS,
  );
}

Update _injectJavascriptModule

Before

Future<void> _injectJavascriptModule(String assetPath) async {
  final scriptPath = 'assets/packages/wagmi_flutter_web/$assetPath';

  final scriptNode = html.ScriptElement()
    ..type = 'module'
    ..src = scriptPath;
  html.window.document.getElementsByTagName('html')[0].append(scriptNode);
}

After

Future<void> _injectJavascriptModule(String assetPath) async {
  final scriptPath = 'assets/packages/wagmi_flutter_web/$assetPath';

  final scriptNode = web.HTMLScriptElement()
    ..type = 'module'
    ..src = scriptPath;
  web.window.document.getElementsByTagName('html').item(0)!.append(scriptNode);
}

If item(0) not work, try https://github.com/dart-lang/web/issues/281

Additional context

No response

Epic

No response

[redDwarf03]

Thank you @lukassgramm for this issue and the suggested solutions. It's true that we want to make this lib WASM-compatible, but we don't always have the skills to go all the way. Any help is welcome

See: https://github.com/archethic-foundation/wagmi_flutter_web/discussions