ES6 module loader issues: preloading, and CSS imports

Calvin Metcalf calvin.metcalf at gmail.com
Tue Aug 19 10:17:27 PDT 2014


this would also be useful in some other cases, for instance the following
code that works (though is not advisable) in (node flavored) CommonJS and
AMD is impossible to recreate (as far as I can tell) using the current hooks

```js
// file shim.js
Array.prototype.stupid = function () {
   // don't do this
}

// file app.js
var a = [];
typeof a.stupid === 'undefined';
require('./shim');
typeof a.stupid === 'function';
```




On Tue, Aug 19, 2014 at 12:52 PM, Ian Hickson <ian at hixie.ch> wrote:

>
> (For some reason, e-mails containing the following text have failed to
> make it to the es-discuss list. Not sure what's going on with that.
> Anyway, this is a new e-mail that contains more or less the same contents
> but changed a bit in case there's some filter or bug that the last e-mails
> were hitting.)
>
> It would be helpful if there was a way that the module _execution_ (after
> it's been parsed and dependencies have been extracted) could be delayed by
> the loader.
>
> Suppose a page is loading and has reached a quiescent state, and so the
> browser thinks "ok, time to preload some scripts". It might start with one
> script, and then find that it imports another, and would then fetch that
> one. But it doesn't want to actually execute anything, because the scripts
> haven't been invoked yet.
>
> Since ES6 does all the heavy lifting of finding the imports in the source
> code and setting up all the linking, it would be good if the browser could
> rely on that but just put a stop to the final execution step until such
> time as the resource is actually needed. Doing this in the fetch or
> translate hooks wouldn't work because we need the instantiate hook to do
> its dependency tracking bit first.
>
> It's possible, based on this and earlier e-mails about how to change
> dependencies, that really what we need is a new hook that splits
> "instantiate" in half -- half for handling dependencies, and half for
> handling execution. That might also enable the "instantiate" hook to
> change to not return a weird object or undefined. It would similarly
> address the "how do I add out-of-band dependencies" issue I mentioned
> earlier. Combined with changing where dependencies are first initialised,
> this would address most of the dependency issues I've raised, I think.
>
> This would also allow for ES6 import syntax to be used inline to declare
> some dependencies, as in the case of an inline script marked as being
> on-demand containing something like:
>
>      import "jquery";
>      import "jquery/animations";
>      import "myapp/logic";
>
> If the browser could notice that this was an inline script and have the
> ES6 module system pre-parse it to discover the imports, it could preload
> them and then when the script element's execute() or load() method
> (whatever we end up calling it) is invoked it could just unblock the
> execution and immediately have the scripts run.
>
>
> Assuming we use the ES6 module loader to handle all the loads in an HTML
> document, in the Web context, there are also some interesting questions to
> resolve around the issue of de-duping.
>
> Suppose you had an inline style element markup containing:
>
>     @import "http://example.com/foo.x";
>
> ...followed by an external script element src="" pointing to:
>
>     http://example.com/foo.x
>
> This causes foo.x to be evaluated once as a style sheet, and once as a
> script. In the new world, though, if every load goes through the ES6
> module system, how do we distinguish them in the module registry?
>
> Similarly, consider the reverse case of an inline script module saying:
>
>     import "http://example.com/foo.x";
>
> ...followed by an inline style block saying:
>
>     @import "http://example.com/foo.x";
>
> After the module's import, foo.x is in the registry as an ES6 module. But
> the semantics of the @import rule are that it must be interpreted as CSS,
> so that doesn't work.
>
> It would be great if it was possible to attach metadata to the key that is
> used in the registry that would be part of the registry key but not
> exposed in the module API. For example, @import could tag all its modules
> as "CSS", so that the above would be keyed as {"http://example.com/foo.x",
> CSS}. Regular imports wouldn't key anything, so that in the case of an
> inline CSS block followed by an inline ES6 module both importing the same
> file, the second import would find the pre-existing CSS import rather than
> try to introduce a new one.
>
> --
> Ian Hickson               U+1047E                )\._.,--....,'``.    fL
> http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
> Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>



-- 
-Calvin W. Metcalf
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20140819/905434d2/attachment-0001.html>


More information about the es-discuss mailing list