Support Loaders

[MeirionHughes]

Aurelia supports quite a varied array of loaders some of which change the local context. For example:

https://github.com/bryanrsmith/aurelia-binding-loader

<template>
  <require from="styles.css!module!bind" as="styles"></require>

  <div class.one-time="styles.first">First</div>
  <div class.one-time="styles.second">Second</div>
</template>

The comprehensive solution would be to actually use the loader plug-in directly and use the template resources it produces. However, this also means that the base project files require transpiling i.e. if you are using .scss then any look up for a .css file would require transpiling the scss to css first, in memory.

Same applies to any relative path "module" look-up with a typescript file requiring transpiling into memory before being fed to the loader.

[MeirionHughes]

<template>
  <require from="styles.css!module!bind" as="styles"></require>

  <div class.one-time="styles.first">First</div>
  <div class.one-time="styles.second">Second</div>
</template>

this explicit example could be triaged by examining the as="styles" and adding styles to the template context. That at least would allow ignoring (not cause issues) any bindings to it.

[MeirionHughes]

https://github.com/bryanrsmith/aurelia-react-loader

<template>
  <require from="my-react-component.js!react-component"></require>
  <my-react-component props.bind="{ name: in.value, onClick: submit }"></my-react-component>
</template>

... can also be triaged by ignoring any unknown custom element (current behaviour in 0.9).

[MeirionHughes]

Best I can do for now is to stub a Loader class and abstract this away. The default would be called for all require elements and would simply import resources from source files.

Configurable by changing loader in Config.