Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * Support for interoperating with JavaScript. | 6 * Support for interoperating with JavaScript. |
| 7 * | 7 * |
| 8 * This library provides access to JavaScript objects from Dart, allowing | 8 * This library provides access to JavaScript objects from Dart, allowing |
| 9 * Dart code to get and set properties, and call methods of JavaScript objects | 9 * Dart code to get and set properties, and call methods of JavaScript objects |
| 10 * and invoke JavaScript functions. The library takes care of converting | 10 * and invoke JavaScript functions. The library takes care of converting |
| 11 * between Dart and JavaScript objects where possible, or providing proxies if | 11 * between Dart and JavaScript objects where possible, or providing proxies if |
| 12 * conversion isn't possible. | 12 * conversion isn't possible. |
| 13 * | 13 * |
| 14 * This library does not yet make Dart objects usable from JavaScript, their | 14 * This library does not yet make Dart objects usable from JavaScript, their |
| 15 * methods and proeprties are not accessible, though it does allow Dart | 15 * methods and proeprties are not accessible, though it does allow Dart |
| 16 * functions to be passed into and called from JavaScript. | 16 * functions to be passed into and called from JavaScript. |
| 17 * | 17 * |
| 18 * [JsObject] is the core type and represents a proxy of a JavaScript object. | 18 * [JsObject] is the core type and represents a proxy of a JavaScript object. |
| 19 * JsObject gives access to the underlying JavaScript objects properties and | 19 * JsObject gives access to the underlying JavaScript objects properties and |
| 20 * methods. `JsObject`s can be acquired by calls to JavaScript, or they can be | 20 * methods. `JsObject`s can be acquired by calls to JavaScript, or they can be |
| 21 * created from proxies to JavaScript constructors. | 21 * created from proxies to JavaScript constructors. |
| 22 * | 22 * |
| 23 * The top-level getter [context] provides a [JsObject] that represents the | 23 * The top-level getter [context] provides a [JsObject] that represents the |
| 24 * global object in JavaScript, usually `window`. | 24 * global object in JavaScript, usually `window`. |
| 25 * | 25 * |
| 26 * The following example shows an alert dialog via a JavaScript call to the | 26 * The following example shows an alert dialog via a JavaScript call to the |
| 27 * global function `alert()`: | 27 * global function `alert()`: |
| 28 * | 28 * |
| 29 * import 'dart:js'; | 29 * import 'dart:js'; |
| 30 * | 30 * |
| 31 * main() => context.callMethod('alert', ['Hello from Dart!']); | 31 * main() => context.callMethod('alert', ['Hello from Dart!']); |
| 32 * | 32 * |
| 33 * This example shows how to create a [JsObject] from a JavaScript constructor | 33 * This example shows how to create a [JsObject] from a JavaScript constructor |
| 34 * and access its properties: | 34 * and access its properties: |
| 35 * | 35 * |
| 36 * import 'dart:js'; | 36 * import 'dart:js'; |
| 37 * | 37 * |
| 38 * main() { | 38 * main() { |
| 39 * var object = new JsObject(context['Object']); | 39 * var object = new JsObject(context['Object']); |
| 40 * object['greeting'] = 'Hello'; | 40 * object['greeting'] = 'Hello'; |
| 41 * object['greet'] = (name) => "${object['greeting']} $name"; | 41 * object['greet'] = (name) => "${object['greeting']} $name"; |
| 42 * var message = object.callMethod('greet', ['JavaScript']); | 42 * var message = object.callMethod('greet', ['JavaScript']); |
| 43 * context['console'].callMethod('log', [message]); | 43 * context['console'].callMethod('log', [message]); |
| 44 * } | 44 * } |
| 45 * | 45 * |
| 46 * ## Proxying and automatic conversion | 46 * ## Proxying and automatic conversion |
| 47 * | 47 * |
| 48 * When setting properties on a JsObject or passing arguments to a Javascript | 48 * When setting properties on a JsObject or passing arguments to a Javascript |
| 49 * method or function, Dart objects are automatically converted or proxied to | 49 * method or function, Dart objects are automatically converted or proxied to |
| 50 * JavaScript objects. When accessing JavaScript properties, or when a Dart | 50 * JavaScript objects. When accessing JavaScript properties, or when a Dart |
| 51 * closure is invoked from JavaScript, the JavaScript objects are also | 51 * closure is invoked from JavaScript, the JavaScript objects are also |
| 52 * converted to Dart. | 52 * converted to Dart. |
| 53 * | 53 * |
| 54 * Functions and closures are proxied in such a way that they are callable. A | 54 * Functions and closures are proxied in such a way that they are callable. A |
| 55 * Dart closure assigned to a JavaScript property is proxied by a function in | 55 * Dart closure assigned to a JavaScript property is proxied by a function in |
| 56 * JavaScript. A JavaScript function accessed from Dart is proxied by a | 56 * JavaScript. A JavaScript function accessed from Dart is proxied by a |
| 57 * [JsFunction], which has a [apply] method to invoke it. | 57 * [JsFunction], which has a [apply] method to invoke it. |
| (...skipping 15 matching lines...) Expand all Loading... | |
| 73 * ## Converting collections with JsObject.jsify() | 73 * ## Converting collections with JsObject.jsify() |
| 74 * | 74 * |
| 75 * To create a JavaScript collection from a Dart collection use the | 75 * To create a JavaScript collection from a Dart collection use the |
| 76 * [JsObject.jsify] constructor, which converts Dart [Map]s and [Iterable]s | 76 * [JsObject.jsify] constructor, which converts Dart [Map]s and [Iterable]s |
| 77 * into JavaScript Objects and Arrays. | 77 * into JavaScript Objects and Arrays. |
| 78 * | 78 * |
| 79 * The following expression creats a new JavaScript object with the properties | 79 * The following expression creats a new JavaScript object with the properties |
| 80 * `a` and `b` defined: | 80 * `a` and `b` defined: |
| 81 * | 81 * |
| 82 * var jsMap = new JsObject.jsify({'a': 1, 'b': 2}); | 82 * var jsMap = new JsObject.jsify({'a': 1, 'b': 2}); |
| 83 * | 83 * |
| 84 * This expression creates a JavaScript array: | 84 * This expression creates a JavaScript array: |
| 85 * | 85 * |
| 86 * var jsArray = new JsObject.jsify([1, 2, 3]); | 86 * var jsArray = new JsObject.jsify([1, 2, 3]); |
| 87 */ | 87 */ |
| 88 library dart.js; | 88 library dart.js; |
| 89 | 89 |
| 90 import 'dart:html' show Blob, Event, ImageData, Node, Window; | 90 import 'dart:html' show Blob, Event, ImageData, Node, Window; |
| 91 import 'dart:collection' show HashMap, ListMixin; | 91 import 'dart:collection' show HashMap, ListMixin; |
| 92 import 'dart:indexed_db' show KeyRange; | 92 import 'dart:indexed_db' show KeyRange; |
| 93 import 'dart:typed_data' show TypedData; | 93 import 'dart:typed_data' show TypedData; |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 158 return _wrapToDart(jsObj); | 158 return _wrapToDart(jsObj); |
| 159 } | 159 } |
| 160 | 160 |
| 161 /** | 161 /** |
| 162 * Constructs a [JsObject] that proxies a native Dart object; _for expert use | 162 * Constructs a [JsObject] that proxies a native Dart object; _for expert use |
| 163 * only_. | 163 * only_. |
| 164 * | 164 * |
| 165 * Use this constructor only if you wish to get access to JavaScript | 165 * Use this constructor only if you wish to get access to JavaScript |
| 166 * properties attached to a browser host object, such as a Node or Blob, that | 166 * properties attached to a browser host object, such as a Node or Blob, that |
| 167 * is normally automatically converted into a native Dart object. | 167 * is normally automatically converted into a native Dart object. |
| 168 * | 168 * |
| 169 * An exception will be thrown if [object] either is `null` or has the type | 169 * An exception will be thrown if [object] either is `null` or has the type |
| 170 * `bool`, `num`, or `String`. | 170 * `bool`, `num`, or `String`. |
| 171 */ | 171 */ |
| 172 factory JsObject.fromBrowserObject(object) { | 172 factory JsObject.fromBrowserObject(object) { |
| 173 if (object is num || object is String || object is bool || object == null) { | 173 if (object is num || object is String || object is bool || object == null) { |
| 174 throw new ArgumentError( | 174 throw new ArgumentError( |
| 175 "object cannot be a num, string, bool, or null"); | 175 "object cannot be a num, string, bool, or null"); |
| 176 } | 176 } |
| 177 return _wrapToDart(_convertToJS(object)); | 177 return _wrapToDart(_convertToJS(object)); |
| 178 } | 178 } |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 225 * object. | 225 * object. |
| 226 * | 226 * |
| 227 * The type of [property] must be either [String] or [num]. | 227 * The type of [property] must be either [String] or [num]. |
| 228 */ | 228 */ |
| 229 dynamic operator[](property) { | 229 dynamic operator[](property) { |
| 230 if (property is! String && property is! num) { | 230 if (property is! String && property is! num) { |
| 231 throw new ArgumentError("property is not a String or num"); | 231 throw new ArgumentError("property is not a String or num"); |
| 232 } | 232 } |
| 233 return _convertToDart(JS('', '#[#]', _jsObject, property)); | 233 return _convertToDart(JS('', '#[#]', _jsObject, property)); |
| 234 } | 234 } |
| 235 | 235 |
| 236 /** | 236 /** |
| 237 * Sets the value associated with [property] on the proxied JavaScript | 237 * Sets the value associated with [property] on the proxied JavaScript |
| 238 * object. | 238 * object. |
| 239 * | 239 * |
| 240 * The type of [property] must be either [String] or [num]. | 240 * The type of [property] must be either [String] or [num]. |
| 241 */ | 241 */ |
| 242 operator[]=(property, value) { | 242 operator[]=(property, value) { |
| 243 if (property is! String && property is! num) { | 243 if (property is! String && property is! num) { |
| 244 throw new ArgumentError("property is not a String or num"); | 244 throw new ArgumentError("property is not a String or num"); |
| 245 } | 245 } |
| (...skipping 157 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 403 void set length(int length) { super['length'] = length; } | 403 void set length(int length) { super['length'] = length; } |
| 404 | 404 |
| 405 | 405 |
| 406 // Methods overriden for better performance | 406 // Methods overriden for better performance |
| 407 | 407 |
| 408 void add(E value) { | 408 void add(E value) { |
| 409 callMethod('push', [value]); | 409 callMethod('push', [value]); |
| 410 } | 410 } |
| 411 | 411 |
| 412 void addAll(Iterable<E> iterable) { | 412 void addAll(Iterable<E> iterable) { |
| 413 var list = (JS('bool', '# instanceof Array', iterable)) | 413 var list = (JS('bool', '# instanceof Array', iterable)) |
| 414 ? iterable | 414 ? iterable |
| 415 : new List.from(iterable); | 415 : new List.from(iterable); |
| 416 callMethod('push', list); | 416 callMethod('push', list); |
| 417 } | 417 } |
| 418 | 418 |
| 419 void insert(int index, E element) { | 419 void insert(int index, E element) { |
| 420 _checkInsertIndex(index); | 420 _checkInsertIndex(index); |
| 421 callMethod('splice', [index, 0, element]); | 421 callMethod('splice', [index, 0, element]); |
| 422 } | 422 } |
| 423 | 423 |
| (...skipping 20 matching lines...) Expand all Loading... | |
| 444 var args = [start, length]..addAll(iterable.skip(skipCount).take(length)); | 444 var args = [start, length]..addAll(iterable.skip(skipCount).take(length)); |
| 445 callMethod('splice', args); | 445 callMethod('splice', args); |
| 446 } | 446 } |
| 447 | 447 |
| 448 void sort([int compare(E a, E b)]) { | 448 void sort([int compare(E a, E b)]) { |
| 449 callMethod('sort', [compare]); | 449 callMethod('sort', [compare]); |
| 450 } | 450 } |
| 451 } | 451 } |
| 452 | 452 |
| 453 // property added to a Dart object referencing its JS-side DartObject proxy | 453 // property added to a Dart object referencing its JS-side DartObject proxy |
| 454 const _DART_OBJECT_PROPERTY_NAME = r'_$dart_dartObject'; | 454 var _DART_OBJECT_PROPERTY_NAME = ""; |
| 455 const _DART_CLOSURE_PROPERTY_NAME = r'_$dart_dartClosure'; | 455 var _DART_CLOSURE_PROPERTY_NAME = ""; |
| 456 | 456 |
| 457 // property added to a JS object referencing its Dart-side JsObject proxy | 457 // property added to a JS object referencing its Dart-side JsObject proxy |
| 458 const _JS_OBJECT_PROPERTY_NAME = r'_$dart_jsObject'; | 458 const _JS_OBJECT_PROPERTY_NAME = r'_$dart_jsObject'; |
| 459 const _JS_FUNCTION_PROPERTY_NAME = r'$dart_jsFunction'; | 459 const _JS_FUNCTION_PROPERTY_NAME = r'$dart_jsFunction'; |
| 460 | 460 |
| 461 bool _defineProperty(o, String name, value) { | 461 bool _defineProperty(o, String name, value) { |
| 462 if (JS('bool', 'Object.isExtensible(#)', o)) { | 462 if (JS('bool', 'Object.isExtensible(#)', o)) { |
| 463 try { | 463 try { |
| 464 JS('void', 'Object.defineProperty(#, #, { value: #})', o, name, value); | 464 JS('void', 'Object.defineProperty(#, #, { value: #})', o, name, value); |
| 465 return true; | 465 return true; |
| (...skipping 22 matching lines...) Expand all Loading... | |
| 488 || o is Node || o is TypedData || o is Window) { | 488 || o is Node || o is TypedData || o is Window) { |
| 489 return o; | 489 return o; |
| 490 } else if (o is DateTime) { | 490 } else if (o is DateTime) { |
| 491 return Primitives.lazyAsJsDate(o); | 491 return Primitives.lazyAsJsDate(o); |
| 492 } else if (o is JsObject) { | 492 } else if (o is JsObject) { |
| 493 return o._jsObject; | 493 return o._jsObject; |
| 494 } else if (o is Function) { | 494 } else if (o is Function) { |
| 495 return _getJsProxy(o, _JS_FUNCTION_PROPERTY_NAME, (o) { | 495 return _getJsProxy(o, _JS_FUNCTION_PROPERTY_NAME, (o) { |
| 496 var jsFunction = _convertDartFunction(o); | 496 var jsFunction = _convertDartFunction(o); |
| 497 // set a property on the JS closure referencing the Dart closure | 497 // set a property on the JS closure referencing the Dart closure |
| 498 _defineProperty(jsFunction, _DART_CLOSURE_PROPERTY_NAME, o); | 498 _defineProperty(jsFunction, _DART_CLOSURE_PROPERTY_NAME, o); |
|
sra1
2014/02/13 04:27:26
I too am not sure if this path can be executed bef
floitsch
2014/02/13 16:26:57
Done.
justinfagnani
2014/02/13 16:39:22
Not easily, since _wrapToDart is called in the con
floitsch
2014/02/13 16:46:52
I just made it safe and clean for now.
| |
| 499 return jsFunction; | 499 return jsFunction; |
| 500 }); | 500 }); |
| 501 } else { | 501 } else { |
| 502 return _getJsProxy(o, _JS_OBJECT_PROPERTY_NAME, | 502 return _getJsProxy(o, _JS_OBJECT_PROPERTY_NAME, |
| 503 (o) => JS('', 'new DartObject(#)', o)); | 503 (o) => JS('', 'new DartObject(#)', o)); |
| 504 } | 504 } |
| 505 } | 505 } |
| 506 | 506 |
| 507 Object _getJsProxy(o, String propertyName, createProxy(o)) { | 507 Object _getJsProxy(o, String propertyName, createProxy(o)) { |
| 508 var jsProxy = _getOwnProperty(o, propertyName); | 508 var jsProxy = _getOwnProperty(o, propertyName); |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 530 var ms = JS('num', '#.getMilliseconds()', o); | 530 var ms = JS('num', '#.getMilliseconds()', o); |
| 531 return new DateTime.fromMillisecondsSinceEpoch(ms); | 531 return new DateTime.fromMillisecondsSinceEpoch(ms); |
| 532 } else if (JS('bool', '#.constructor === DartObject', o)) { | 532 } else if (JS('bool', '#.constructor === DartObject', o)) { |
| 533 return JS('', '#.o', o); | 533 return JS('', '#.o', o); |
| 534 } else { | 534 } else { |
| 535 return _wrapToDart(o); | 535 return _wrapToDart(o); |
| 536 } | 536 } |
| 537 } | 537 } |
| 538 | 538 |
| 539 JsObject _wrapToDart(o) { | 539 JsObject _wrapToDart(o) { |
| 540 if (_DART_OBJECT_PROPERTY_NAME == "") { | |
| 541 int counter = JS("int", 'Object["_DART_INTEROP_COUNTER_"]||0'); | |
|
sra1
2014/02/13 04:27:26
Pull _DART_INTEROP_COUNTER out into variable that
floitsch
2014/02/13 16:26:57
Done.
| |
| 542 JS("", 'Object["_DART_INTEROP_COUNTER_"]=#', counter + 1); | |
| 543 _DART_OBJECT_PROPERTY_NAME = "_\$dart_dartObject$counter"; | |
| 544 _DART_CLOSURE_PROPERTY_NAME = "_\$dart_dartClosure$counter"; | |
|
sra1
2014/02/13 04:27:26
These strings should be interned (possibly as a se
floitsch
2014/02/13 16:26:57
Done.
| |
| 545 } | |
| 540 if (JS('bool', 'typeof # == "function"', o)) { | 546 if (JS('bool', 'typeof # == "function"', o)) { |
| 541 return _getDartProxy(o, _DART_CLOSURE_PROPERTY_NAME, | 547 return _getDartProxy(o, _DART_CLOSURE_PROPERTY_NAME, |
| 542 (o) => new JsFunction._fromJs(o)); | 548 (o) => new JsFunction._fromJs(o)); |
| 543 } else if (JS('bool', '# instanceof Array', o)) { | 549 } else if (JS('bool', '# instanceof Array', o)) { |
| 544 return _getDartProxy(o, _DART_OBJECT_PROPERTY_NAME, | 550 return _getDartProxy(o, _DART_OBJECT_PROPERTY_NAME, |
| 545 (o) => new JsArray._fromJs(o)); | 551 (o) => new JsArray._fromJs(o)); |
| 546 } else { | 552 } else { |
| 547 return _getDartProxy(o, _DART_OBJECT_PROPERTY_NAME, | 553 return _getDartProxy(o, _DART_OBJECT_PROPERTY_NAME, |
| 548 (o) => new JsObject._fromJs(o)); | 554 (o) => new JsObject._fromJs(o)); |
| 549 } | 555 } |
| 550 } | 556 } |
| 551 | 557 |
| 552 Object _getDartProxy(o, String propertyName, createProxy(o)) { | 558 Object _getDartProxy(o, String propertyName, createProxy(o)) { |
| 553 var dartProxy = _getOwnProperty(o, propertyName); | 559 var dartProxy = _getOwnProperty(o, propertyName); |
| 554 // Temporary fix for dartbug.com/15193 | 560 // Temporary fix for dartbug.com/15193 |
| 555 // In some cases it's possible to see a JavaScript object that | 561 // In some cases it's possible to see a JavaScript object that |
| 556 // came from a different context and was previously proxied to | 562 // came from a different context and was previously proxied to |
| 557 // Dart in that context. The JS object will have a cached proxy | 563 // Dart in that context. The JS object will have a cached proxy |
| 558 // but it won't be a valid Dart object in this context. | 564 // but it won't be a valid Dart object in this context. |
| 559 // For now we throw away the cached proxy, but we should be able | 565 // For now we throw away the cached proxy, but we should be able |
| 560 // to cache proxies from multiple JS contexts and Dart isolates. | 566 // to cache proxies from multiple JS contexts and Dart isolates. |
| 561 if (dartProxy == null || !_isLocalObject(o)) { | 567 if (dartProxy == null || !_isLocalObject(o)) { |
| 562 dartProxy = createProxy(o); | 568 dartProxy = createProxy(o); |
| 563 _defineProperty(o, propertyName, dartProxy); | 569 _defineProperty(o, propertyName, dartProxy); |
| 564 } | 570 } |
| 565 return dartProxy; | 571 return dartProxy; |
| 566 } | 572 } |
| OLD | NEW |