SpringRoll provides the ability to register plugins for the application to attach new behavior.
To be recognized and used by the SpringRoll Application a plugin must be registered. This is done via the Application.uses()
method.
import { Application } from 'springroll';
import CustomPlugin from './CustomPlugin';
Application.uses(new CustomPlugin()); // Register plugin
const myApp = new Application(); // Application startup will also call the lifecycle methods of plugins
myApp.state.ready.subscribe(() => {
console.log('Ready!');
});
It's important to note that if your plugin uses any of the lifecycle methods (preload
, init
, start
) these are only called if your plugin is registered BEFORE the Application is instantiated
Function | Description | Intent |
---|---|---|
constructor |
called when the plugin is created | Used for setting options |
preload |
asynchronously called during Application startup |
Used for any api calls that are needed to load data for the plugin to operate correctly |
init |
called synchronously after all plugin's preload functions have resolved |
Used for any further initialization |
start |
called synchronously after all plugin's init functions have been called |
this is where your plugin should start any of it's operations, if required. |
Note: preload
, init
and start
functions are all optional.
here is a brief example of how a plugin might be created:
import { ApplicationPlugin } from 'springroll/plugins/ApplicationPlugin';
export default class CustomPlugin extends ApplicationPlugin {
constructor(options) {
super({ name: 'custom' });
// custom constructor code
}
preload(app) {
// custom asynchronous code. Expected to return a Promise.
return fetch(someApiEndpoint)
.then(response => response.json())
.then(json => this.json = json);
}
init(app) {
// custom initialization synchronous code
this.otherPlugin = Application.getPlugin('otherPlugin');
app.state.musicVolume.subscribe(() => {
// app state change code.
this.otherPlugin.update();
});
}
start(app) {
// custom kick off synchronous code.
app.state.musicVolume.value = this.json.music.volume;
}
}
All plugins must declare a unique key name
which allows other plugins to depend on it. For instance, in the above case, CustomPlugin
declares it's name as 'custom'
, and during initialization it calls getPlugin
to retrieve a reference to 'otherPlugin'
.
getPlugin
can be called at any time. but we recommend keeping it in init
but recognize this might not always be possible.
it is highly recommended that plugins do not have circular dependencies, if A
depends on B
, B
should not depend on A
.