Skip to content

Dart2's ResizeObserver being broken by Dart minifier #40961

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
janvladimirmostert opened this issue Mar 10, 2020 · 4 comments
Closed

Dart2's ResizeObserver being broken by Dart minifier #40961

janvladimirmostert opened this issue Mar 10, 2020 · 4 comments

Comments

@janvladimirmostert
Copy link

janvladimirmostert commented Mar 10, 2020 •
edited
Loading

When using ResizeObserver in Dart2 and compiling for release (i'm assuming it uses dart2js), it stops working. Have reproduced this issue in Dart 2.7.

ResizeObserver works when doing a regular webdev serve:

pub global run webdev serve web:9999

ResizeObserver stops working when building for release:

pub global run webdev build --output=web:build --release

Test HTML file to reproduce issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1" style="background-color: red">
        <textarea style="padding: 10px; margin: 10px;">
            TESTING
        </textarea>
    </div>
    <div class="div2" style="background-color: blue">
        .
    </div>
    <script defer src="bug_resize_observer.dart.js"></script>
</body>
</html>

Test Dart file to reproduce issue:

import "dart:html";

void main() {
  final DivElement div1 = querySelector("div.div1");
  final DivElement div2 = querySelector("div.div2");

  final ResizeObserver divResizeObserver = ResizeObserver((List<ResizeObserverEntry> blah1, ResizeObserver blah2) {
    print("inside divResizeObserverCallback");
    for (ResizeObserverEntry entry in blah1) {
        div2.style.height = "${entry.target.clientHeight}px";
    }
  });
  divResizeObserver.observe(div1);
}

When doing a regular webdev serve, it works fine, when you do a build with release mode, the ResizeObserver stops working. It would seem that minification is breaking it.

DevMode working (resizing text area and the blue div resizes as well):

Screenshot_20200310_213850

Release Mode not working (resizing text area and the blue div does nothing and errors appear in the console):

Screenshot_20200310_214030

Screenshot_20200310_214058

I've documented in a lot of detail the problem here and all the workarounds i've tried without success:
https://stackoverflow.com/questions/60620940/dart2s-resizeobserver-being-broken-by-dart-minifier
@sigmundch
Copy link
Member

Thanks for the detailed bug report!

I believe this is the same issue as #36798, which we were able to fix with 16bc180

You should expect it on the next stable release of the SDK (it is currenlty available in the dev channel version 2.8.0-dev.1.0).

@janvladimirmostert
Copy link
Author

I've just tested this with 2.8.0-dev.13.0 and it's still giving the same error.

Had to change the Dart code though seeing as the list is now List<dynamic>

import "dart:html";

void main() {
  final DivElement div1 = querySelector("div.div1");
  final DivElement div2 = querySelector("div.div2");
  
  final void Function(List blah1, ResizeObserver blah2) callback = (blah1, blah2) {
    print("inside divResizeObserverCallback");
    for (ResizeObserverEntry entry in blah1) {
      div2.style.height = "${entry.target.clientHeight}px";
    }
  };
  final ResizeObserver divResizeObserver = ResizeObserver(callback);
  divResizeObserver.observe(div1);
}

@janvladimirmostert
Copy link
Author

It seems the error is now with the ResizeObserver inside the loop and no longer the callback itself

import "dart:html";
import "dart:js";

void main() {
  final DivElement div1 = querySelector("div.div1");
  final DivElement div2 = querySelector("div.div2");

  final void Function(List blah1, ResizeObserver blah2) callback = (blah1, blah2) {
    print("inside divResizeObserverCallback");
    blah1.forEach((entry) {
      context["console"].callMethod("log", [entry]);
      print((entry as ResizeObserverEntry).target); 
      div2.style.height = "${entry.target.clientHeight}px";
    });
  };
  final ResizeObserver divResizeObserver = ResizeObserver(callback);
  divResizeObserver.observe(div1);
}

it fails at print((entry as ResizeObserverEntry).target); with a casting error and if i don't cast it, it fails as well, although it works in Dev mode.

@janvladimirmostert janvladimirmostert mentioned this issue Mar 11, 2020
Open
@janvladimirmostert
Copy link
Author

Logged a separate issue for ResizeObserverEntry:
#40975

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sigmundch @janvladimirmostert