How do I get js_interop working?

[sethcalebweeks]

From what I've seen it looks like there was a recent move to using dart:js_interop instead of dart:js. I can't seem to find any good example of how to use this package. I'm trying to mount a JavaScript component in a Jaspr component. I tried just calling a method atached to window, but I'm getting an error saying that callMethod is not defined. Could you please point me in the right direction?

import 'package:jaspr/jaspr.dart';

@Import.onWeb('package:web/web.dart', show: [#window, #document])
@Import.onWeb('dart:js_interop', show: [#globalContext, #toJS])
import 'handsontable.imports.dart';

class Handsontable extends StatelessComponent {
  const Handsontable({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {

    final containerId = 'hot-${DateTime.now().millisecondsSinceEpoch}';

    void callback() {
      print("hello wrld");
    }

    if (kIsWeb) {
      final asdf = document.getElementById(containerId);
      globalContext.callMethod('_showAlert'.toJS, ['hello world'.toJS]);
      print(asdf);
    }

    yield div(id: containerId, [text('Hello World')]);
  }
}

[schultek]

There are two parts to this.

1. You should use package:universal_web, which already does the conditional import and stubbing for you, so you replace both package:web and dart:js_interop imports and don't need to use @Import.
2. Any standard browser api should simply exist (e.g. window.alert()). For anything custom you should use the new js_interop way of doing things: https://dart.dev/interop/js-interop/usage#top-level-interop-members

[sethcalebweeks]

Thanks for the reply. I'm still not making any headway. This area seems very poorly documented from the Flutter/Dart side. I am brand new to Flutter/Dart/Jaspr, so maybe it's just my ignorance. But I've been banging my head on this for 3 days now.

import 'package:jaspr/jaspr.dart';
import 'package:universal_web/web.dart';

@JS('_showAlert')
external void showAlert(String message);

class Handsontable extends StatelessComponent {
  const Handsontable({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {

    final containerId = 'hot-${DateTime.now().millisecondsSinceEpoch}';

    void callback() {
      print("hello wrld");
    }

    if (kIsWeb) {
      showAlert('hello world');
      // final asdf = document.getElementById(containerId);
      // globalContext.callMethod('_showAlert'.toJS, ['hello world'.toJS]);
      // print(asdf);
    }

    yield div(id: containerId, [text('Hello World')]);
  }
}

[sethcalebweeks]

I got it working by scouring Github for code samples.

import 'package:jaspr/jaspr.dart';
import 'package:universal_web/web.dart';
import 'package:universal_web/js_interop.dart';

@JS('_showAlert')
external void showAlert(String message);

class Handsontable extends StatelessComponent {
  const Handsontable({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {

    final containerId = 'hot-${DateTime.now().millisecondsSinceEpoch}';

    if (kIsWeb) {
      showAlert('hello world');
    }

    yield div(id: containerId, [text('Hello World')]);
  }
}