How can I try out the latest JS interop? https://github.com/dart-lang/js-interop
Question
I'm looking to try out the "next gen" Dart JS interop with the goal of being able to export Dart libraries for use from JS. It doesn't seem to work for me though. I followed the README at:
https://github.com/dart-lang/js-interop/blob/master/README.md
I created a new project, set the dependency to this github repo, added an A class just like in the readme, and tried to instantiate the A class from javascript using the console.
When using either default or named constructors in the console I get:
var a = new dart.lib.A.withName('word');
TypeError: undefined is not a function
var a = new dart.lib.A();
TypeError: undefined is not a function
Is this rewrite functional yet? Am I doing something wrong? Is there a different branch of js-interop I should be using?
Here's my simple project that follows the readme:
## pubspec.yaml
name: lib
description: A sample Dart lib published to JS
dependencies:
browser:
js:
git: git://github.com/dart-lang/js-interop.git
transformers:
- js
- js/initializer
## lib/a.dart
library lib;
import 'package:js/js.dart';
@Export()
class A {
String name;
A();
A.withName(this.name);
}
## web/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<p id="text"></p>
<script type="application/dart" src="index.dart"></script>
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
<script src="packages/js/interop.js"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
## web/index.dart
import 'package:lib/a.dart';
import 'package:js/js.dart';
main() {
initializeJavaScript();
var a = new A();
}
## Generated index.dart_initialize.js
window.dart = window.dart || {};
window.dart.Object = function DartObject() {
throw "not allowed";
};
window.dart.Object._wrapDartObject = function(dartObject) {
var o = Object.create(window.dart.Object.prototype);
o.__dart_object__ = dartObject;
return o;
};
// library lib
(function (ns) {
var lib = ns;
["lib"].forEach(function (s) {
lib = lib[s] = lib[s] || {};
});
// class A
(function(parent) {
var constructor = parent.A = function _A() {
this.__dart_object__ = constructor._new();
};
constructor.prototype = Object.create(dart.Object.prototype);
constructor.prototype.constructor = constructor;
constructor._wrapDartObject = function(dartObject) {
var o = Object.create(constructor.prototype);
o.__dart_object__ = dartObject;
return o;
};
constructor.withName = function _withName(name) {
this.__dart_object__ = constructor._new_withName(name);
}
constructor.withName.prototype = constructor.prototype;
})(lib);
})(window.dart);
2 answers
solution1
3 ACCPTED 2014-10-08 07:40:01
I just tried your code and indeed I left something out of the instructions. You need to have a call to initializeJavaScript() in your main() method to set up the exports. Also, the script tag for interop.js needs to be before the Dart script.
Once I made those changes I was able to run your code and do this in the JS console:
> var a = new dart.lib.A.withName('word');
< undefined
> a
< _withName {__dart_object__: DartObject, constructor: function}
> a.name
< "word"
> a instanceof dart.lib.A;
< true
solution2
1 2014-10-06 19:10:47
It's a work in progress. You have to wait before using it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.