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 /** Dart APIs for interacting with the JavaScript Custom Elements polyfill. */ | 5 /** Dart APIs for interacting with the JavaScript Custom Elements polyfill. */ |
6 library custom_element.polyfill; | 6 library web_components.polyfill; |
7 | 7 |
8 import 'dart:async'; | 8 import 'dart:async'; |
9 import 'dart:html'; | 9 import 'dart:html'; |
10 import 'dart:js' as js; | 10 import 'dart:js' as js; |
11 | 11 |
12 /** | 12 /** |
13 * A future that completes once all custom elements in the initial HTML page | 13 * A future that completes once all custom elements in the initial HTML page |
14 * have been upgraded. | 14 * have been upgraded. |
15 * | 15 * |
16 * This is needed because the native implementation can update the elements | 16 * This is needed because the native implementation can update the elements |
17 * while parsing the HTML document, but the custom element polyfill cannot, | 17 * while parsing the HTML document, but the custom element polyfill cannot, |
18 * so it completes this future once all elements are upgraded. | 18 * so it completes this future once all elements are upgraded. |
19 */ | 19 */ |
| 20 // TODO(jmesserly): rename to webComponentsReady to match the event? |
20 Future customElementsReady = () { | 21 Future customElementsReady = () { |
21 if (_isReady) return new Future.value(); | 22 if (_isReady) return new Future.value(); |
22 | 23 |
23 // Not upgraded. Wait for the polyfill to fire the WebComponentsReady event. | 24 // Not upgraded. Wait for the polyfill to fire the WebComponentsReady event. |
24 // Note: we listen on document (not on document.body) to allow this polyfill | 25 // Note: we listen on document (not on document.body) to allow this polyfill |
25 // to be loaded in the HEAD element. | 26 // to be loaded in the HEAD element. |
26 return document.on['WebComponentsReady'].first; | 27 return document.on['WebComponentsReady'].first; |
27 }(); | 28 }(); |
28 | 29 |
29 // Return true if we are using the polyfill and upgrade is complete, or if we | 30 // Return true if we are using the polyfill and upgrade is complete, or if we |
30 // have native document.register and therefore the browser took care of it. | 31 // have native document.register and therefore the browser took care of it. |
31 // Otherwise return false, including the case where we can't find the polyfill. | 32 // Otherwise return false, including the case where we can't find the polyfill. |
32 bool get _isReady { | 33 bool get _isReady { |
33 // If we don't have dart:js, assume things are ready | 34 // If we don't have dart:js, assume things are ready |
34 if (js.context == null) return true; | 35 if (js.context == null) return true; |
35 | 36 |
36 var customElements = js.context['CustomElements']; | 37 var customElements = js.context['CustomElements']; |
37 if (customElements == null) { | 38 if (customElements == null) { |
38 // Return true if native document.register, otherwise false. | 39 // Return true if native document.register, otherwise false. |
39 // (Maybe the polyfill isn't loaded yet. Wait for it.) | 40 // (Maybe the polyfill isn't loaded yet. Wait for it.) |
40 return document.supportsRegister; | 41 return document.supportsRegister; |
41 } | 42 } |
42 | 43 |
43 return customElements['ready'] == true; | 44 return customElements['ready'] == true; |
44 } | 45 } |
45 | 46 |
46 /** | 47 /** |
47 * Loads `custom-elements.debug.js` or `custom-elements.min.js` by adding the | 48 * *Note* this API is primarily intended for tests. In other code it is better |
48 * script tag to the page. Returns a future that completes when custom elements | 49 * to write it in a style that works with or without the polyfill, rather than |
49 * are ready (equivalent to [customElementsReady]). | 50 * using this method. |
50 * | 51 * |
51 * Normally you should add this to your HTML file | 52 * Synchronously trigger evaluation of pending lifecycle events, which otherwise |
52 * (the Polymer package will do this automatically), but loading dynamically | 53 * need to wait for a [MutationObserver] to signal the changes in the polyfill. |
53 * can be useful for scenarios such as tests. | 54 * This method can be used to resolve differences in timing between native and |
| 55 * polyfilled custom elements. |
54 */ | 56 */ |
55 Future loadCustomElementPolyfill() { | 57 void customElementsTakeRecords() { |
56 if (!document.supportsRegister && !js.context.hasProperty('CustomElements')) { | 58 var customElements = js.context['CustomElements']; |
57 var script = new ScriptElement() | 59 if (customElements != null) { |
58 ..src = '/packages/custom_element/custom-elements.debug.js'; | 60 customElements.callMethod('takeRecords'); |
59 document.head.append(script); | |
60 return document.on['WebComponentsReady'].first; | |
61 } | 61 } |
62 return new Future.value(); | |
63 } | 62 } |
OLD | NEW |