Plugins
The base of GreenLight is supposed to contain only general utilities that fit every situation. This ensures that the library will have a small footprint on your web page.
If you are in need of a more specific solution for your problem you can fetch the internet for a plugin or create it yourself.
They are made for ease of use - to include a plugin you only need to import the script in your page.
Everything you need to get going with the development of a plugin is included in the GitHub repository - from dev docs, to examples and real world codebases of plugins.
Getting started
All you have to do is use the registerPlugin method provided by the GreenLight object before the init phase.
GreenLight.registerPlugin(pluginName, (PluginObject) => {
const { directive } = PluginObject;
// With the code below we register the gl-log directive
directive.register("log", (el, Controller) => {
console.log(el);
});
});
API info
PluginObject
| variable: DataType | Description |
|---|---|
| pluginName: String | Name of the plugin |
| name: String | The name of the plugin specified. |
| getScopedPropertyFromElement(element: HTMLElement, property: String) | Get object from directive attribute, local store and global store based on the scope. |
| generateControllerEventName(controllerName: String, eventName: String) | Generates controller event name with the GreenLight format. If you are using the Controller callEvent it is called automatically, you only need to provide the eventName. |
| removeGLElement(el: HTMLElement, controllerName: String) | Remove and do cleanup on |
| directive | Object with all the necessary methods to work with directives. |
| namings | Object with important namings - GL_STORE_UPDATED_EVENT |
directive
| variable: DataType | Description |
|---|---|
| register(name: String, callback(el: HTMLElement, Controller: GLController)) | Register a new directive. |
| getAttribute(directiveName: String, el: HTMLElement) | Get the directive attribute. |
| getData(el: HTMLElement) | get the data object set by directives. |
| setData(el: HTMLElement, data: any) | set the data object |
Controller
| variable: DataType | Description |
|---|---|
| name: String | Name of the controller |
| attachedTo: HTMLElement | The element that contains the gl-controller directive |
| $store | The store object assigned to the controller |
| $refs | The references object attached to the controller |
| effect(callback: Function, depsArray: String[]) | The effect method |
| on(eventName: String, callback: Function) | Used to listen to events from the controller |
| callEvent(eventName: String, data: any) | Used to call events on the Controller and it's children. |