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

Question

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?

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

Answer 2

I've received response regardless this on GitHub:

That stack overflow comment is way out of date. Prefer package:js - we're working on updating docs to explicitly recommend that. It's no longer implemented over window.postMessage (that was a Dartium-based solution) - it's handled directly in the compilers and should be more efficient than dart:js.

Source: https://github.com/flutter/flutter/issues/35588#issuecomment-522097151