Migrate to pkg:web

[kevmoo]

Required to support compilation to wasm

• [x] Migrate pkg:devtools_app_shared - WIP - https://github.com/flutter/devtools/pull/6626
• [x] Migrate pkg:devtools_app
  • [x] Update flutter/tests to use latest devtools - https://github.com/flutter/tests/pull/311
  • [x] Update flutter/flutter to use pkg:web v0.4.0 - https://github.com/flutter/flutter/pull/138428
  • [x] Update devtools to pkg:web v0.4.0 and...
  • [x] Fix remaining usage of dart:html in devtools_app that needs new API
  • [x] Fix usage of package:js in gtags.dart and _analytics_web.dart (or migrate to unified_analytics - https://github.com/flutter/devtools/issues/6242 )
  • https://github.com/flutter/devtools/pull/7718

Googlers: go/wasm-ready-pkg-migrate

[kenzieschmoll]

migrations for devtools_app that are not straightforward, or just need a little more attention to figure out:

• [x] _drag_and_drop_web.dart: uses MouseEvent.offset
• [x] _framework_initialize_web.dart: for (var element in html.document.body!.querySelectorAll('.legacy-dart'))
• [x] _export_web.dart: uses Url.createObjectUrl
• [x] allowed_error_html.dart: uses window.console
• [x] _logger_html.dart: uses window.console
• [x] _server_web.dart: there is an outstanding todo to use package:http instead of dart:html here for http requests
  • fixed by https://github.com/flutter/devtools/pull/6712
• [x] post_message_web.dart: uses html.window.onMessage.map(...) - addressed by https://github.com/dart-lang/web/pull/95/

[kevmoo]

Console:

https://pub.dev/documentation/web/0.3.0/helpers/console.html https://pub.dev/documentation/web/0.3.0/helpers/$ConsoleExtension.html

[srujzs]

• MouseEvent.offset: The dart:html version returns a Point with offsetX and offsetY. There's some checking to make sure offsetX is supported, but that's stale since modern browsers should support it: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX. If the Point class is heavily used in devtools, then maybe we should add it as a helper class in package:web. If not, using a record with offsetX and offsetY should probably suffice.
• createObjectURL: The dart:html version checks for a webkitURL. This is no longer needed as it seems all browsers nowadays support URL: https://developer.mozilla.org/en-US/docs/Web/API/URL so it should be safe to use the package:web version => URL.createObjectURL.
• html.window.onMessage: I think this needs _ElementEventStreamImpl to be added to the helpers in package:web. A workaround is using event listeners, but Streams are nicer. Sorry, was looking at the wrong code. I think this just needs the existing onMessage to be exposed on top of Window. I think you can just do EventStreamProviders.messageEvent.forTarget(window).

[kenzieschmoll]

@srujzs re: MouseEvent, what about the dataTransfer property? event.dataTransfer.dropEffect = 'move';

re: createObjectURL - more issues:

re: html.window.onMessage

• I addressed this in https://github.com/dart-lang/web/pull/95/

[srujzs]

• I think you'll need to downcast MouseEvent to DragEvent to get dataTransfer, which then has a dropEffect property.

• You want to avoid importing dart:js here. The type you want is JSArray (I know the naming is unfortunate, but alas). To convert from a list to one, you need a List<JSAny>. This can be created by making content itself a JSString: [content.toJS].toJS should get you want you the JSArray you need.

[kenzieschmoll]

Thanks @srujzs. Getting closer! A few more errors to go:

• reader is a FileReader object, and droppedFile is a File object:
• element.style.display = 'none'
• document.body!.append(element);
• element.click()

[srujzs]

Nice!

• I think this is similar to the other issues where this stream getter is not available (onLoadEnd). It does seems to exist on Element, so a hacky workaround until we publish a version with it is to just cast to Element and use onLoad (note that we don't check whether that cast is correct since they're both just some random JS objects in the type system's eyes).
• lastModifiedData is deprecated in the browser. The right equivalent here is using lastModified to get the ms since epoch to construct a DateTime e.g. DateTime.fromMillisecondsSinceEpoch(droppedFile.lastModifiedDate, isUtc: true).
• You'll need to downcast here to the Element type you want. I believe downcasting element to HTMLAnchorElement should resolve the rest. Using createElement and then downcasting is a downgrade from the nice dart:html constructors, and maybe we should have a createElementAs<HTMLAnchorElement>()-like helper somewhere.

[kevmoo]

Closing this out as completed via https://github.com/flutter/devtools/pull/6626 - still waiting for dependencies to migrate so we can build w/ wasm

[kenzieschmoll]

Everything has been migrated to package:web except for one file: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/shared/config_specific/post_message/_post_message_web.dart#L5-L9. Removing this is blocked on a new version of package:web getting rolled into flutter.

However, if we want to start experimenting with dart2wasm now, apply the changes from this patch and it should compile fine: https://github.com/flutter/devtools/compare/master...kenzieschmoll:dart2wasm-experiment?expand=1.

@kevmoo

[kevmoo]

Reopening then. To stay on top of https://github.com/flutter/devtools/issues/6606#issuecomment-1809080582

[kevmoo]

Glad we're getting numbers on this. I think the only concrete thing blocking us is either migrating the inline gtags or moving to unified_analytics.

Is the latter tracked anywhere?

[kenzieschmoll]

migrating to unified_analytics is tracked here: https://github.com/flutter/devtools/issues/6242. This is something that @eliasyishak may be picking up in the short term.