How can I interop with existing JS objects?

Question

I'm trying to write Dart code that will generate a rough equivalent of this:

var disposable = vscode['commands'].registerCommand(
    'extension.sayHello',
    function () {
        vscode['window'].showInformationMessage('Hello World!');
    }
);
context.subscriptions.push(disposable);

The variables vscode and context are both globals available in the JavaScript which is executing my Dart (which is being compiled to JS with the Dart Dev Compiler).

I'm happy for context/vscode to be completely untyped for now, but I'm struggling to bend the JS package to output code like this (eg. if I put @JS() on a stub vscode, I get dart.global.vscode).

score 2 · Accepted Answer · edited Jul 30 '16 at 12:42

You can use the base dart:js features

Note that context happens to be dart's name for the javascript context.

var disposable = context['vscode']['commands'].callMethod('registerCommand', [
    'extension.sayHello',
    () {
        context['vscode']['window'].callMethod('showInformationMessage', ['Hello World!']);
    }]);
);
context['context']['subscriptions'].callMethod('push', [disposable]);

matanlurey · Answer 2 · 2016-07-30T20:04:13.913

Let me put together a quick example on github with package:js.

Edit: OK, here you go: https://github.com/matanlurey/js-interop-examples

It took me a couple tries to the package:js syntax correct (we probably need more documentation here and examples), but I ended up creating a "fake" visual studio code API (vscode.js), and interoping with it fine.

Watch out that you need to wrap your functions with allowInterop if you expect your examples to work in Dartium.

How can I interop with existing JS objects?

2 Answers2