Expose Dart functions to javascript

Question

I'm a bit of a newb to dart, and trying to get my feet wet by writing some library functions in it.

While I've had no problem calling javascript functions from dart, I'd love to be able to call dart functions from javascript, but so far, I'm not having much like.

For example, I'd love to be able to expose some basic functions from dart, for example like so:

main() {
  String foo() {
    return "bar!";
  }

  js.scoped(() {
    js.context.foo = foo;
  });
}

and then be able to call them from javascript, like so:

<script>
  window.onload = function() {
    alert("foo() = " + foo());
  }
</script>

Is something like this even possible?

See also http://stackoverflow.com/questions/33174508/is-there-a-better-way-to-make-a-method-of-a-dart-class-callable-from-js-with-the — Günter Zöchbauer, Apr 24 '16 at 14:15

Alexandre Ardhuin · Accepted Answer · 2014-09-05T14:16:26.283

14

No problem ! see Calling Dart from JavaScript.

In your case :

import 'dart:js' as js;
main() {
  String foo() {
    return "bar!";
  }

  js.context['foo'] = foo;
}

edited Sep 05 '14 at 14:16

answered Mar 27 '13 at 21:06

Alexandre Ardhuin

71,959
15
151
132

and suddenly, it does not work: claims "There is no such setter 'foo' in 'Proxy'" ... – Mason Bryant Apr 16 '13 at 18:51
yes :) first update of js went to 0.19 which continued to not work. After an edit restart, and a second update, I got 0.20 and it is all good again. Thanks again! – Mason Bryant Apr 16 '13 at 21:32
4

Callback is not mentioned in the linked document 'Calling Dart from JavaScript'. Was it removed? – Günter Zöchbauer Mar 01 '14 at 09:40
Yes the answer was outdated. – Alexandre Ardhuin Mar 01 '14 at 10:09
What is the recommended way now ? – rodrigob Apr 16 '14 at 16:13
The answer had been updated. What you see is the current way to do. – Alexandre Ardhuin Apr 16 '14 at 17:01
You can just assign "js.context.foo=foo", you don't need the [] index syntax unless you are getting from the proxy and want a null instead of an error. – Pat Niemeyer Sep 05 '14 at 12:52
`package:js` should not be used (see https://code.google.com/p/dart/issues/detail?id=15795#c15 for more detail). The sample code is for `dart:js`. – Alexandre Ardhuin Sep 05 '14 at 14:15

score 4 · Answer 2 · answered Sep 09 '16 at 11:11

4

In Dart 1.20 I had to add allowInterop()

import 'dart:js' as js;
main() {
  String foo() {
    return "bar!";
  }

  js.context['foo'] = allowInterop(foo);
}

answered Sep 09 '16 at 11:11

Günter Zöchbauer

623,577
216
2,003
1,567

this works well in native dart (dartium) but not in js compiled version (chrome, ff, ie..). Please check this [screenshot](http://data.itpro.cz/dart_js.png). When I remove allowInterop, it works even in js compilled version. I am using Dart 1.19.1. Is it something that was fixed in 1.20? – Ivo Skalický Sep 12 '16 at 07:49
Seemed to work for me in Chrome and Dartium. I'll check again and report back. – Günter Zöchbauer Sep 12 '16 at 07:50
Checked again and I can confirm that it's working in Dartium and Chrome. – Günter Zöchbauer Sep 13 '16 at 09:53
Thank you for verification. I have tried to create empty sample polymer project, containing only code in screenshot above and it does not work for me with use of allowInterop (works in Dartium but not in IE, FF, Chrome). I have tested in in multiple browsers on multiple computers. You can test it yourself if you want to: http://data.itpro.cz/dart_allowinterop. When you press F12 in Chrome and type: foo() you will get an error, if you type foo2() it writes "bar2!" – Ivo Skalický Sep 13 '16 at 12:38

score 2 · Answer 3 · answered May 22 '19 at 20:24

2

In Dart 2.3.0 I had to tweak the solution just a bit for allowInterop to play nice.


    import 'dart:js' as js;
    main() {
      String foo() {
        return "bar!";
      }

      js.context['foo'] = js.allowInterop(foo);
    }

answered May 22 '19 at 20:24

rkunboxed

168
1
10

Expose Dart functions to javascript

3 Answers3

Linked