What is the difference between Aurelia Plugin and Feature?

Question

I am trying to register a couple of plugins for my app however I am not sure how this should be done.

The plugins that I have, include two ValueConverters and the gooy/aurelia-animator-tinyanimate which I have installed via JSPM.

Here is my current implementation:

resources\index.ts/js

export function configure(aurelia) {
  aurelia.globalResources('../from-now', '../date-format');
}

main.ts/js (this is the entry point of the app)

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia): void {
        aurelia.use
            .standardConfiguration()
            .developmentLogging()
            .plugin('resources/index', 'gooy/aurelia-animator-tinyanimate'); 

        aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}

The converters are working however I do not see the tinyanimate to be loaded.

Based on the above, I have the following questions:

1. how would I move the gooy/aurelia-animator-tinyanimate over to the index.js file?
2. what is the difference between plugin() and feature()?

Answer 1

Features are basically the same as a plugin, except that they live in your own source tree. Based on your index.js file, you would need to load your feature like this:

aurelia.use.feature('resources`);

Assuming that the feature's index.js file is located in the resources folder. You may want to change your index.js file to

export function configure(config) {
  config.globalResources('./from-now', './date-format');
}

and update your directory structure to put from-now.js and date-format.js in the resources directory. You don't need to do this, but from an organizational standpoint, it would make sense. Changing the parameter name is simply to better describe what the parameter is (a FrameworkConfiguration instance).

To load gooy/aurelia-animator-tinyanimate in your main.js file, you will need to remove the 'resources/index' parameter from the call to plugin. Aurelia will then load the plugin properly for you. Your main.js file should end up looking like this:

export function configure(aurelia: Aurelia): void {
        aurelia.use
            .standardConfiguration()
            .developmentLogging()
            .feature('resources')
            .plugin('gooy/aurelia-animator-tinyanimate'); 

        aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}

Also, note that there is no need for the import {Aurelia} from 'aurelia-framework'; line in your main.ts.