How do you interact with js from dart?

Question

No, this isn\'t the same as the other question of the same name.

There are seemingly identical packages which seem to do this, but with different apis.

• htt

Answer 1

Js interop started with package:js. It was built with with window.postMessage.

Later dart:js has been added to provide better performance and reduce the size of the compiled js file. Basically the goal were :

• removing scopes and lifecycle manual handling
• avoiding noSuchMethod to keep compilation size as low as possible
• renaming objects to make the api more understandable

Once dart:js has been ready, package:js has been rewrite to use dart:js under the cover.

package:js provides a simpler Api that comes at the cost of an increase of the js size (because package:js uses dart:mirrors and noSuchMethod).

Here is the same thing done with package:js and dart:js :

import 'package:js/js.dart' as js;

main() {
  var pixi = new js.Proxy(js.context.PIXI.Stage, 0xffffff);
  var renderer = js.context.PIXI.autoDetectRenderer(400, 400);
  document.body.append(renderer.view);
}

---

import 'dart:js' as js;

main() {
  var pixi = new js.JsObject(js.context['PIXI']['Stage'], [0xffffff]);
  var renderer = js.context['PIXI'].callMethod('autoDetectRenderer', [400, 400]);
  document.body.append(renderer['view']);
}