Programmatically loading a ES6 module with Traceur in web page

Question

I have been using Traceur to develop some projects in ES6. In my HTML page, I include local Traceur sources:

<script src="traceur.js"></script>
<script src="bootstrap.js"></script>

and if I have a module in the HTML afterwards like:

<script type="module" src="foo.js"></script>

Then Traceur loads in that module, compiles it and everything works great.

I now want to programmatically add an ES6 module to the page from within another ES6 module (reasons are somewhat complicated). Here was my first attempt:

var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
    console.log('Inside the module now!');
`;
document.body.appendChild(module);

Unfortunately this doesn't work as Traceur does not monitor the page for every script tag added, I guess.

How can I get Traceur to compile and execute the script? I guess I need to invoke something on either 'traceur' or '$traceurRuntime' but I haven't found a good online source of documentation for that.

Answer 1

You can load other modules using ES6 import statements or TraceurLoader API for dynamic dependencies.

Example from Traceur Documentation

function getLoader() {
  var LoaderHooks = traceur.runtime.LoaderHooks;
  var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
  return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
    function(mod) {
      console.log('DONE');
    },
    function(error) {
      console.error(error);
    }
);

Also, System.js loader seems to be supported as well

window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');

Answer 2

Dynamic module loading is a (not-yet-standardized) feature of System:

System.import('./repl-module.js').catch(function(ex) {
  console.error('Internal Error ', ex.stack || ex);
});

To make this work you need to npm test then include BrowserSystem

<script src="../bin/BrowserSystem.js"></script>

You might also like to look into https://github.com/systemjs/systemjs as it has great support for browser loading.

BTW the System object may eventually be standardize (perhaps under a different name) in the WHATWG: http://whatwg.github.io/loader/#system-loader-instance