Using a different loader in Aurelia Script

#1

First I wanted to say, this is great work. With Aurelia Script it’s super easy to get a project started. Node JS and all the baggage is way too much overkill and overhead for simple projects. Can’t wait to see the future posts about it.

On topic, the Aurelia Script works perfectly on Chrome, but it fails on Edge and FireFox. I noticed it’s using EsmLoader by default, which depends on the browser’s support of dynamic imports, which Edge nor FireFox support for the moment.

I wanted to provide a SystemJS loader through “new au.Aurelia(new SystemLoader())”, but no such loader seem to exist.

Took a look at the default loader in https://github.com/aurelia/loader-default, but that doesn’t seem to be Aurelia Script friendly.

Before I try to build my own loader, wanted to know if there’s already a SystemJS loader I could easily plugin.

#2

@bigopon did all the amazing work on Aurelia Script. I bet he has some thoughts on this. I know we’re still working a lot to improve things so I’m not sure where this particular use case is at today.

#3

@efrenb5 Thanks for the question. The loader at https://github.com/aurelia/loader-default is probably a good choice for both AMD / SystemJS module formats, if you don’t wanna use EsmLoader. Though it kind of defeats the purpose of Aurelia Script: ability to work without build step / tooling. If you don’t mind having your script compiled into AMD / SystemJS compatible format, then it should just work.

#4

Nah. I like it without any compilation. I’m playing around with the EsmLoader to change how the dynamic import works.

Ugly hack until Edge and FireFox release a version with proper dynamic loading supported. Last two browsers to catch up actually. sheesh

I only wanted to know if there was anything in the works or already built I could use.

Actually, I found this package https://www.npmjs.com/package/aurelia-loader-systemjs which contains a proper SystemJSLoader class and I sent it through as “new au.Aurelia(new SystemJSLoader())”, but I get errors.

#5

That loader is not an official package, and it seems to be created for a specific need of the author, which looks like an ability to reference the current instance of the loader globally.

#6

Good thing I stopped trying then. LOL

Did a little hack to the EsmLoader to force this to work.

Commented these lines in aurelia_router.umd.js
return import(join(this.baseUrl, moduleId)).then(m => {
this.moduleRegistry[moduleId] = m;
return m;
});

And added these
const moduleUrl = join(this.baseUrl, moduleId);
return new Promise(function (resolve, reject) {
const script = document.createElement(‘script’);
script.charset = ‘utf-8’;
script.crossOrigin = ‘anonymous’;
const scriptId = ‘script_’ + Math.random().toString(36).substr(2, 9);
script.id = scriptId;
script.resolve = resolve;
script.reject = reject;
script.innerHTML = ‘import * as foo from "’ + moduleUrl + ‘";const script=document.getElementById("’ + scriptId + ‘");script.resolve(foo);document.head.removeChild(script);’;
script.type = ‘module’;
document.head.appendChild(script);
});

I know it’s very dirty and I’m probably assuming a lot of things, but so far it’s working correctly.

Anyway, I’m hoping Edge and FireFox add the dynamic import support soon. If not, the app I’m working on isn’t specially critical, so I don’t mind the temporary hack.

Or maybe Aurelia can provide an alternative loader? wink, wink

#7

Looks like the fix for this is targeted for the next FF release (not sure about MS).

Otherwise you can change it manually in about:config with this setting:

javascript.options.dynamicImport