What is a difference between dart:js and js package?

Issue

Everywhere in Dart documentation it is recommended to use js package for javascript interoperability.

However, I have recently found that dart:js package exists in SDK that seems to have similar (but not same) interface.

Are there any differences between these packages? Are they feature equivalent? Which one is recommended?

Solution

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']);
}

Answered By – Alexandre Ardhuin

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)