implement async at HTMLScriptElement

[yuqinlear]

Hi,
I'm trying to load and execute a bunch of scripts synchronously, and I notice HTMLScriptElement at jsdom doesn't support the property of async. I tried to provide a custom resource loader by calling readFileSync. It works for reading files, but it doesn't execute code synchronously.
By following the documentation, I can see I may use requirejs to deal with asynchronous script loading. It doesn't work well for me because I want to load all scripts locally including requirejs. That's also why I don't include those js files into html.
Another approach is to preload all source files and pass them to the options parameter 'src', however, the debugger won't step into those files in that case.
It seems quite cumbersome to make it happen, so I guess it may be a good idea to support 'async' at HTMLScriptElement. Please point it out if anyone can provide the workaround.

Thank you!

[domenic]

I'm confused. Do you want to load scripts asynchronously, using the async attribute? Or synchronously?

[snuggs]

I believe he forgot the "a" in synchronously. Could be wrong. @domenic

[snuggs]

Not to go too off topic but curious myself as the same mechanism could be used for jsdom and HTML imports (webcomponents). That's the ONLY thing missing from web components within jsdom. Works well with custom elements and everything. I've been pushing my team back from switching to phantom JS but seems like phantomJS 2.0 is the only headless browser that supports HTML imports. Seems like it can be implemented by synchronously loading a DocumentFragment into the HTMLLinkElement's import attribute (which currently isn't implemented in jsdom if i'm not mistaken). There is one caveat. onload oninserted etc. callbacks that MUST fire when the HTMLLink has it's rel="import" attribute set and resource is loaded AND|OR document.registerElement and document.importElement are caclled.

Would love to contribute but don't know where. Smells like there is a "resource loader" somewhere. Apologize for any hijacking of convo but this definitely peaked my interest @domenic @yuqinlear #HappyFriday

P.S. if this should be deleted and migrated to an issue please advise.

[yuqinlear]

Hi, @domenic, @snuggs :
I do want to load scripts synchronously. You can give the option 'sync' or 'async' just as a flag. But 'async' is the standard property for HTMLScriptElement. Based on what I read from here, we need explicitly turn off 'async' when we load scripts dynamically (unlike embeded<script src=''></script>where async is false by default).
Shortly, I want a way to load all my local scripts synchronously which is not supported at jsdom.

[snuggs]

@yuqinlear better understand now your situation. Actually makes sense. And again EXTREMELY curious of the underpinnings of this feature as not only is this related to dynamic loading of scripts but related to dynamic loading of HTML Imports as the dependency graph MUST be implemented similarly. Because a component MAY link to a stylesheet, script, img, etc. There are two conditions with the loading strategy:

1. MUST stay synchronous no matter the load dependency (unless defined in the <script async>).
2. MUST NOT load duplicate resources. "The browser's network stack automatically de-dupes all requests from the same URL" (i.e. if jquery is loaded in an async script another component on the same page that calls the same script would not fetch a network request but shall load from cache. I'm assuming async scripts should behave similarly)

HTML imports is a BIG BIG deal that browsers are rapidly moving forward towards implementing into the dom. As should dom like frameworks. The only thing i'm concerned of (in both our cases @yuqinlear) is the directed link node graph which is a concern in web components AND with dynamically loading scripts that dynamically load other scripts.

HTML5 has a great description:
http://www.html5rocks.com/en/tutorials/webcomponents/imports

And the actual w3c spec is at the following location:
http://w3c.github.io/webcomponents/spec/imports/#h-import-dependent

Actually HTML Imports spec enforces the synchronous loading you describe @yuqinlear. And i'm not receiving the functionality with JSDOM.

As always I never bring up problems without solutions. Just need to know where I can help. Have been interested in the project for years now @domenic. JSDom is actually like 10% of my email feed since I watch the project. lol.

[domenic]

@snuggs I appreciate your enthusiasm but I think it's important you move any concerns about HTML imports to a separate issue. Suffice it to say for now that HTML imports is not a standard technology that will be adopted across browsers; it is a Chrome/Polymer-only technology that happens to have a spec on w3c.github.io. jsdom will not be implementing it, although we certainly can try to improve our support for things like XHR which the polyfill uses.

@yuqinlear The async flag is pretty separate from synchronous script loading. Let's try to disentangle those issues. Can you provide a small HTML page (say, 10 lines) which executes differently in jsdom and in browsers, so we can see what exact feature you're talking about that jsdom does not implement?

[snuggs]

Copy that @domenic I'll keep an eye out for xml httprequest polyfill within webcomponents. Will also look at issues to check for anything can help on. Can you point in the direction of how resource loading happens within jsdom? Tests/specs perhaps?

[domenic]

@snuggs let's take such discussion to a separate issue, where you provide a small test page that uses the polyfill and fails to work in jsdom but works in (non-Chrome) browsers.

[snuggs]

Copy that Cap'n. @domenic (just got this needle in the haystack)

[alexeyraspopov]

Does latest version of jsdom (11.0.0) support the async attribute of <script>?

[TimothyGu]

@alexeyraspopov, no, and https://twitter.com/slicknet/status/782274190451671040.