Aurelia external resources

Question

I'm looking for the best way to arrange my code base with common resources shared between different projects. I have three aurelia apps. In each one, I added some resources in its resources folder (custom elements, attributes, etc). When I needed one already wrote in another project, I just pasted it. Now I have time to refacto, I'd like to move all this resources in a dedicated repository. Then I want to be able to pick only the resources I need in each project.

I've tried by putting all me resources in a repo with a gulp build task from aurelia skeleton which allow me to build AMD modules of all my modules. Then, I've been able to load some modules individually by adding them in aurelia.json. For exemple for an attribute:

{
  "name": "aurelia-resources-progress-button",
  "path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes",
  "main": "progress-button"
}

or a custom element:

{
  "name": "aurelia-resources-avatar-upload",
  "path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload",
  "main": "avatar-upload",
  "resources": [
    "avatar-upload.html",
    "avatar-upload.css"
  ]
}

It worked like a charme but it failed for a value converter which import a module from relative path. The file is located in :

"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js", it import from '../utils./strings'

and

I get the following error when I au run:

"Error: ENOENT: no such file or directory, open '/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".

The strange thing is when I require a relative module from a template (like in my progress-button custom attribute) there is no problem.

I don't want to make a plugin because I don't want to load every modules of my repo. What I'd like, if it is possible, would be to be able to set .feature('../node_modules/path/resources') and load them like I load my local resources.

What should I do ?

Why do you not want to use a plugin? The API for plugin and feature are pretty much the same. You're already distributing the resources via NPM packages, so the proper way to do this is via the plugin API. — Ashley Grant
Because I don't want to load every modules. Imagine I have 10 modules in my external resources. App A uses the 10, I could use a plugin. But App B use only 2 modules, I want to load only this two. — Hadrien.eu

Ashley Grant Ashley Grant · Accepted Answer · 2017-01-31T17:34:46

I'm answering the question as reworded in the comments above.

If you have an npm package, you can simply require in resources from it using a require element. This npm package could package itself as a plugin, and you simply choose not to load it that way as you only want a subset up the stuff it provides.

I've created a set of sample projects that show this off: https://github.com/AshleyGrant/sample-app-so41961759

This application has a dependency on https://github.com/AshleyGrant/sample-resources-so41961759/

This dependency packages itself as a plugin, but it also can be consumed piecemeal as I am doing in the application by only using one of the two resources the plugin has. Note that the other resource isn't loaded since I'm not using it.

This is what it looks like in the app when I pull in a resource from within the dependency:

<template>
  <require from="sample-resources-so41961759/custom-elements/my-echo"></require>
  <h1>${message}</h1>

  <my-echo say="Echo!"></my-echo>
</template>

Aurelia external resources

1 Answers