new js interop, problem with `this` in method calling

[kasperpeulen]

I have the following code:

@JS('MathJax.Hub')
external get MathJaxHub;

@JS('MathJax.Hub.Queue')
external Function get MathJaxHubQueue;

void main() {
  new Future.delayed(const Duration(seconds: 3), () {
    querySelector('body').text = r"\(1+1 = 2\)";

    context['MathJax']['Hub'].callMethod('Queue', [["Typeset", MathJaxHub]]);

    MathJaxHubQueue(['Typeset', MathJaxHub]);
  });
}

I can give a more complete example, if you guys want to reproduce this. But basically, I would expect that:

context['MathJax']['Hub'].callMethod('Queue', [["Typeset", MathJaxHub]]);

is equivalent with:

MathJaxHubQueue(['Typeset', MathJaxHub]);

But they don't act the same. After some debugging I found out that on the JS side, the this in the function:

MathJax.Hub = {
  Queue: function () {
    return this.queue.Push.apply(this.queue,arguments);
  },

is in the first one captured as MathJax.Hub but in the second the this variable will be equal to window.

Is there something I do wrong, or is this a bug?

[zoechi]

This

@JS('MathJax.Hub.Queue')
external Function get MathJaxHubQueue;

should be

@JS('MathJax.Hub.Queue')
external SomeReturnType MathJaxHubQueue(someArgs);

then you can call it like a Dart function.

[kasperpeulen]

@zoechi I tried that, but that works the same for me.

While rewriting the API, this problem actually disappeared for me. It now looks like:

@JS('MathJax') external MathJaxClass get MathJax;

@JS('MathJax')
class MathJaxClass {
  external HubClass get Hub;
}

@JS('MathJax.Hub')
class HubClass {
  external Function get Queue;
}

where I call:

MathJax.Hub.Queue(["Typeset", MathJax.Hub]);

Not sure if this is a bug or that I just should write it this way, instead of:

@JS('MathJax.Hub')
external get MathJaxHub;

@JS('MathJax.Hub.Queue')
external Function get MathJaxHubQueue;

[jacob314]

The reason for these isssues is that if you want JavaScript "this" to be bound to MathJax.Hub you cannot call
MathJax.Hub.Queue as a getter. You need to call it like a method or do something else that causes this to be implicitly bound.

@zoechi's suggestion seems correct. Please message me if you can't get it to work.
Calling
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
works for somewhat the wrong reasons.
For example if you wrote.
var x = MathJax.Hub.Queue;
x(["Typeset", MathJax.Hub])
I expect you will be back to seeing the error you were getting before.

If you want to use the pattern your example showed it would be best to change your code to:
@js('MathJax.Hub')
class HubClass {
external Queue(someArgs);
}
One again this is the same as @zoechi's suggestion and I'd suggest using that approach as it will be a little easier for dart2js to optimize.

[jacob314]

Assigning to later as implicitly binding this for JS functions is a non-goal as it doesn't seem possible to do it correctly in all cases. Perhaps we can revisit if dart supports different syntax for explicit method tearoffs.

[kasperpeulen]

@jacob314

the reason I use the Funtcion type is because there is an infinite amount of arguments this function accepts, and every argument is dynamic. Every argument can be a List, a String, a Function, or a Map.

Specifying 10 dynamic arguments could in practice also work:

@JS('MathJax.Hub.Queue')
external MathJaxHubQueue([p1,p2,p3,p4,p5,p6,p7,p8,p9,p10]);

But, I found using the Function type a bit cleaner. Then I can refer to this page: http://docs.mathjax.org/en/latest/api/callback.html#specifying-a-callback for more information about what the function actually accepts as argument.

For example if you wrote.
var x = MathJax.Hub.Queue;
x(["Typeset", MathJax.Hub])
I expect you will be back to seeing the error you were getting before.

This actually seems to work with using a Function getter, see:
https://gist.github.com/kasperpeulen/e4d33318867d4a1daa30
to reproduce

@zoechi's suggestion seems correct. Please message me if you can't get it to work.

it doesn't seem to work, see also the gist above

[kasperpeulen]

I see now that this gist does work in dartium, but not compiled in chrome. The only version that works compiled in chrome is:

@JS('MathJax') external MathJaxClass get MathJax;

@JS('MathJax')
class MathJaxClass {
  external HubClass get Hub;
}

@JS('MathJax.Hub')
class HubClass {
  external Queue([p1,p2,p3,p4,p5,p6,p7,p8,p9,p10]);
}

[jacob314]

Make sure you are on the latest 1.13 release candidate. I verified the sample working in dart2js.
Stay tuned for annotations in 1.14 that will support specifying var-args methods for dart-js interop.
If you want to fake that Queue is a getter not a member function, I'd suggest binding this from the JavaScript side.
For example, from JS write:
MathJax.Hub.BoundQueue = MathJax.Hub.Queue.bind(MathJax.Hub)

That solution will work robustly in dart2js and dartium.

[jacob314]

I investigated a bit more and I think I was wrong that this was an issue with bound versus unbound this. There is an edge case in dart2js that we aren't handling correctly when calling functions like methods.

[jacob314]

Sent out a CL for review that I believe fixes this.

It is now safe to write
external Function get foo;
instead of
external foo(a,b,c,d,e,......);
Like JS, this is only going to be bound if you write
obj.foo(a,b,c);
instead of
var x = obj.foo;
x(a,b,c)

https://codereview.chromium.org/1431523002/