Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Better check for 'script is synchronous' #1036

Closed
wants to merge 6 commits into from
Closed

Better check for 'script is synchronous' #1036

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a9f1ac3
Check for case where document is already interactive
pshihn Oct 4, 2018
a871650
Merge pull request #1 from webcomponents/master
pshihn Oct 15, 2018
6832857
Better check for script is synchronous
pshihn Oct 15, 2018
5946414
async loader test
Oct 15, 2018
e4ea62b
fixed async loader test
Oct 15, 2018
04fb1cb
Deal with undefined document.currentScript. Added comments to test case
Oct 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions tests/async-loader-with-long-load.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<!--
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>

<head>
<title>Test async loader with long sync load</title>
<meta charset="UTF-8">
<script src="./wct-config.js"></script>
<script>window.callback = null; WCT.waitFor = (cb) => { window.callback = cb; }</script>
<script src="../node_modules/wct-browser-legacy/browser.js"></script>

<script async src="../webcomponents-loader.js"></script>
<script>
const start = Date.now();
let diff = 0;
while (diff < 5000) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a clarifying comment here. Something like we mimic a long loading script to make sure the document readystate is loading when the loader executes.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a detailed explanation in the comments

diff = Date.now() - start;
}
const newScript = document.createElement('script');
newScript.src = './imports/dummy.js';
document.write(newScript.outerHTML);
</script>
</head>

<body>
<module-a id="parsed"></module-a>
<script>
const register = () => {
try {
customElements.define('module-a', class extends HTMLElement { });
window.callback();
} catch (err) {
window.callback();
}
};
if (window.WebComponents && window.WebComponents.ready) {
register();
} else {
addEventListener('WebComponentsReady', () => register());
}

suite('late everything', function () {
test('element upgraded', function () {
let el = document.querySelector('#parsed');
let moduleA = customElements.get('module-a');
assert.instanceOf(el, moduleA);
});
});
</script>
</body>

</html>
3 changes: 3 additions & 0 deletions tests/imports/dummy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
(() => {
// dummy
})();
7 changes: 4 additions & 3 deletions tests/runner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,17 @@
'symbol.html',
'bundle-after-load.html',
'loader-after-load.html',
'baseuri.html'
'baseuri.html',
'async-loader-with-long-load.html'
];
</script>
<script>
try {
// include `async loader` if `import()` function is supported.
eval('import("").catch(function(){})');
window.suites.push('async-loader-with-modules.html');
} catch (e) {} // eslint-disable-line no-empty
} catch (e) { } // eslint-disable-line no-empty
</script>
<script>
WCT.loadSuites(window.suites);
</script>
</script>
4 changes: 2 additions & 2 deletions webcomponents-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@

var newScript = document.createElement('script');
newScript.src = url;
// if readyState is 'loading', this script is synchronous
if (document.readyState === 'loading') {
// if readyState is 'loading' and this script is synchronous
if (document.readyState === 'loading' && (!document.currentScript.async)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Iirc, document.currentscript does not exist in type="module". Could you verify? (In that case, it would need to be document.currentScript && ...

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

// make sure custom elements are batched whenever parser gets to the injected script
newScript.setAttribute('onload', 'window.WebComponents._batchCustomElements()');
document.write(newScript.outerHTML);
Expand Down