ES modules: syntax import vs preprocessing cs plugins

Claus Reinke claus.reinke at talk21.com
Thu Jul 5 14:19:09 PDT 2012


>> To outline the disconnect, consider this simple static module
>> chain for a dummy project ab I might like to use:
>>
>>    // a.js
>>    export var a = "a";
>>
>>    // b.js
>>    import {a} from 'a';
>>    export var b = a+"b";
>>
>> To use this in my main code, I again use static import
>>
>>    // main.js (or perhaps a script element in index.html)
>>    import {b} from 'b';    // early failure-protection here
>>    .. other imports ..        // executed in sequence, but
>>                                         // can be loaded in parallel
>>    .. lots of code that uses imports ..
>>                                        // if this code is part of a HTML
>>                                        // source, we can use imports
>>                                        // to fill static HTML syntax here
>>
>> Now, if I need to use module loader hooks while importing
>> the ab project, I thought there would be a way to extend
>> the default loader, then keep the rest of main.js unchanged.
>
> In what way do you want to extend the default loader?

Similar to the dummy project sources, the nature of the loader
is not important to the concerns expressed in my message (in
the comments).

What is important is loader usage and, in particular, the
requirement to rewrite mostly synchronous and syntactic
module usage into mostly asynchronous and dynamic
module usage, only to accommodate a single added loader-
dependent import.

> Both of your snipped examples are reasonable uses of the loader API.

Thanks, so I did not misread the spec, at least. However, I do
not consider the need to rewrite the original example into one
of the snipped variants a reasonable requirement in practice.

Meanwhile, a third variant occurred to me: we might be
able to make use of the staged loading to limit the impact
of the rewrite, and to recover from asynchronous loading
and dynamic usage back to synchronous loading and module
syntax. This is going to be a variant of my second example, in
a web page context:

    // old-main.js
    import {b} from 'b';
    .. other imports ..
    .. lots of code that uses imports ..
    export ...

    // index.html
    <script>
    let myLoader = new Loader(...);
    myLoader.load('old-main',function(mainMO){
        System.set('main',mainMO),
    });
    </script>
    <script>
    // this second script element will be resolved in a
    // separate 'phase', with 'main' available, right?
    import {...} from 'main';
    </script>
    .. can we now use imports from 'main' in the <body>?

But even if this works out in a web page (does it?), what is
the equivalent mechanism server-side?

Claus
 



More information about the es-discuss mailing list