Using a different loader in Aurelia Script

Help Requests
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.

1 Like
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

1 Like
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

1 Like
8

Would it be possible to use one of the shims for dynamic import like https://github.com/guybedford/es-module-shims or https://github.com/rich-harris/shimport? Just loading the shim didn’t seem to work but I’m probably missing something.

1 Like
9

It is possible to use any Loader, as long as they implement all necessary methods of Loader here https://github.com/aurelia/loader/blob/f5600a1d6cb371f994d5b78240a445e093d93e08/src/loader.js#L19

To do so, you can use the dist of Aurelia script that doesn’t include a loader by default, and include it yourself. Or you can just use a normal one and override it, similarly as seen here https://github.com/aurelia/script/blob/d5d8c0233c3b6cd283df6033b09763c93a58caa2/build/index.no-loader.js#L13

10

Thanks, apparently the shims I mentioned do not implement the loadModule(id) so they’re not options? But maybe I’m missing something? Or there’s another more obvious alternative. I was hoping on supporting the Edge people.

1 Like
11

The shim you mention should just work fine, you can use the shim in combination with esm loader here https://github.com/aurelia/loader-esm

What you need to tweak is probably this line https://github.com/aurelia/loader-esm/blob/0428490cb2d3f197744dbd9bdfd07e2b890010c8/src/index.ts#L106

Change from:

return import(....)

to:

return shimport(...)

And configure the shimport in away that "sh"importing aurelia modules shimport('aurelia-framework') will return something like this:

return Promise.resolve(au);