[web] Remove package:js in favor of dart:js_interop #164254

harryterkelsen · 2025-02-27T00:48:52Z

Removes package:js and uses dart:js_interop instead

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

kevmoo · 2025-02-28T20:45:56Z

engine/src/flutter/lib/web_ui/lib/src/engine/js_interop/js_loader.dart

 extension FlutterLoaderExtension on FlutterLoader {
  external void didCreateEngineInitializer(FlutterEngineInitializer initializer);
-  bool get isAutoStart => !js_util.hasProperty(this, 'didCreateEngineInitializer');
+  bool get isAutoStart => !(this as JSObject).has('didCreateEngineInitializer');


What is the type of FlutterLoader? is it a JSObject?

kevmoo · 2025-02-28T20:49:04Z

engine/src/flutter/lib/web_ui/lib/src/engine/dom.dart


-bool domInstanceOfString(Object? element, String objectType) =>
-    js_util.instanceOfString(element, objectType);
+bool domInstanceOfString(JSAny element, String objectType) => element.instanceOfString(objectType);


Maybe as a follow-up, we should deprecate/remove this and just inline the call

kevmoo · 2025-02-28T20:51:55Z

engine/src/flutter/lib/web_ui/lib/src/engine/js_interop/js_loader.dart

 // found in the LICENSE file.

 @JS()
 library js_loader;


We should be able to drop the library name here!

harryterkelsen · 2025-02-28T22:00:40Z

I think I gotta put this one on pause for now. I am hitting a ton of problems with DOMEventListeners running in the wrong zone and issues with events seemingly never firing ("focus" events in particular aren't firing in tests)

kevmoo · 2025-02-28T22:38:44Z

I think I gotta put this one on pause for now. I am hitting a ton of problems with DOMEventListeners running in the wrong zone and issues with events seemingly never firing ("focus" events in particular aren't firing in tests)

😢 CC @srujzs – we should figure out if this is something systemic

harryterkelsen · 2025-02-28T23:57:53Z

I was able to work around some of the zone issues using the technique outlined here: dart-lang/sdk#54507

However, this didn't fix the issues with the focus event seemingly never firing after calling focus() on a DOM element.

srujzs · 2025-03-01T00:06:53Z

I was able to work around some of the zone issues using the technique outlined here: dart-lang/sdk#54507

Yup, I was just about to mention this. This is more or less does what dart:html does with callbacks.

However, this didn't fix the issues with the focus event seemingly never firing after calling focus() on a DOM element.

I'm happy to help debug here if you'd like to point me to the specific test. It's possible there's some unobvious semantic differences in registering the event listener.

harryterkelsen · 2025-03-01T01:14:09Z

@srujzs I added this test (dom_focus_event_test.dart) when I was trying to debug the issue: https://github.com/flutter/flutter/pull/164254/files#diff-4cce257d905c908ac4719d3a062beac4d5f91ec21d616c60019e9612ebd10b74

srujzs · 2025-03-03T22:32:11Z

It looks like div elements aren't focusable by default: https://javascript.info/focus-blur#allow-focusing-on-any-element-tabindex

Adding divElement.tabIndex = 1; works to get the test passing, but presumably this test is representing some other code that was working without that and before migrating. What is that other code?

If it's text_editing_test.dart, that goes from failing to passing if I revert the change to waitForTextStrategyStopPropagation, but I don't fully understand that change, so maybe it's necessary.

kevmoo · 2025-03-04T03:06:32Z

@srujzs – @harryterkelsen is on leave for many weeks. If you're bored, would you be willing to take this over?

srujzs · 2025-03-04T04:01:47Z

Ah, sure, I'll take a stab at it. I'd like to get this in so that the work doesn't become stale.

Removes package:js and uses dart:js_interop instead This is taken directly from flutter#164254 and will be iterated on.

flutter-dashboard · 2025-03-24T04:06:00Z

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@js

Removes package:js and uses dart:js_interop instead This is taken directly from #164254 and will be iterated on. ---- Initial commit is the original PR % rebasing. Follow-up commits address test/analysis failures and commits after those clean up JS interop code: - Remove remaining uses of `@staticInterop`. - Code that uses JSBoolean, JSString, or JSNumber are mostly historical relics due to not supporting primitives in externals. Remove the redirecting functions and let the compiler handles the conversions. - Replace domInstanceOfString calls with isA and add @js annotations to all extension types where needed. - Remove unnecessary @js annotations. - Remove unneeded implements JSObject clauses. - Standardize naming of extension types in some cases. - Remove JSVoid in favor of void. - Enabled invalid_runtime_checks_with_js_interop_types lint. - Removed unnecessary JSUint8Array constructors. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. --------- Co-authored-by: Kevin Moore <[email protected]>

srujzs · 2025-04-10T23:45:23Z

This was landed with other changes in #165324, so I'm going to go ahead and close this.

@js

Removes package:js and uses dart:js_interop instead This is taken directly from flutter#164254 and will be iterated on. ---- Initial commit is the original PR % rebasing. Follow-up commits address test/analysis failures and commits after those clean up JS interop code: - Remove remaining uses of `@staticInterop`. - Code that uses JSBoolean, JSString, or JSNumber are mostly historical relics due to not supporting primitives in externals. Remove the redirecting functions and let the compiler handles the conversions. - Replace domInstanceOfString calls with isA and add @js annotations to all extension types where needed. - Remove unnecessary @js annotations. - Remove unneeded implements JSObject clauses. - Standardize naming of extension types in some cases. - Remove JSVoid in favor of void. - Enabled invalid_runtime_checks_with_js_interop_types lint. - Removed unnecessary JSUint8Array constructors. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. --------- Co-authored-by: Kevin Moore <[email protected]>

@js

Removes package:js and uses dart:js_interop instead This is taken directly from flutter#164254 and will be iterated on. ---- Initial commit is the original PR % rebasing. Follow-up commits address test/analysis failures and commits after those clean up JS interop code: - Remove remaining uses of `@staticInterop`. - Code that uses JSBoolean, JSString, or JSNumber are mostly historical relics due to not supporting primitives in externals. Remove the redirecting functions and let the compiler handles the conversions. - Replace domInstanceOfString calls with isA and add @js annotations to all extension types where needed. - Remove unnecessary @js annotations. - Remove unneeded implements JSObject clauses. - Standardize naming of extension types in some cases. - Remove JSVoid in favor of void. - Enabled invalid_runtime_checks_with_js_interop_types lint. - Removed unnecessary JSUint8Array constructors. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. --------- Co-authored-by: Kevin Moore <[email protected]>

harryterkelsen added 3 commits February 24, 2025 10:23

WIP remove package:js

f5375f8

Merge branch 'master' into canvaskit-remove-packagejs

9ef6e35

WIP remove package:js

73d62ca

more wip

f50c439

kevmoo reviewed Feb 28, 2025

View reviewed changes

harryterkelsen added 2 commits February 28, 2025 17:09

run callbacks in correct zone

5c8955c

format

5da11fd

github-actions bot added the f: routes Navigator, Router, and related APIs. label Mar 1, 2025

srujzs self-assigned this Mar 4, 2025

srujzs added a commit to srujzs/flutter that referenced this pull request Mar 17, 2025

[web] Remove package:js in favor of dart:js_interop

d7c479e

Removes package:js and uses dart:js_interop instead This is taken directly from flutter#164254 and will be iterated on.

srujzs mentioned this pull request Mar 17, 2025

[web] Remove package:js in favor of dart:js_interop #165324

Merged

9 tasks

srujzs added a commit to srujzs/flutter that referenced this pull request Mar 17, 2025

[web] Remove package:js in favor of dart:js_interop

80bf13b

Removes package:js and uses dart:js_interop instead This is taken directly from flutter#164254 and will be iterated on.

update deps

7fc0f68

fix analyzer

dc656d1

srujzs closed this Apr 10, 2025

[web] Remove package:js in favor of dart:js_interop #164254

[web] Remove package:js in favor of dart:js_interop #164254

Uh oh!

Conversation

harryterkelsen commented Feb 27, 2025

Pre-launch Checklist

Uh oh!

kevmoo Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

kevmoo Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

kevmoo Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

harryterkelsen commented Feb 28, 2025

Uh oh!

kevmoo commented Feb 28, 2025

Uh oh!

harryterkelsen commented Feb 28, 2025

Uh oh!

srujzs commented Mar 1, 2025

Uh oh!

harryterkelsen commented Mar 1, 2025

Uh oh!

srujzs commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kevmoo commented Mar 4, 2025

Uh oh!

srujzs commented Mar 4, 2025

Uh oh!

flutter-dashboard bot commented Mar 24, 2025

Uh oh!

srujzs commented Apr 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

srujzs commented Mar 3, 2025 •

edited

Loading