abe-plugins.md

Abe Plugins

Abe plugin system is based on npm modules : You can install a plugin which has been deployed on npm or resides on github with a proper package.json. Furthermore, you can create your own scripts without having to register it in npm (see below).

Install a plugin

run

abe install some-plugin-name

this will install the plugin in the node_modules directory and add a new entry inside abe.json file (it will create abe.json if it doesn't exist).

{
  "plugins": [
    "some-plugin-name"
  ]
}

You can install a specific version of the plugin this way:

abe install some-plugin-name@1.0.0

this will install the plugin in the node_modules directory. The entry in abe.json:

{
  "plugins": [
    "some-plugin-name@1.0.0"
  ]
}

You can also install a module hosted on github. This is particularly useful for modules you don't want to make public and don't have a private npm repo. The syntax is abe install user_or_org/repo#branch user_or_org being your user or organization github id, repo being the repo and branch being the branch or the tag

run

abe install user_or_org/myrepo

this will install the plugin in the node_modules directory and add a new entry inside abe.json file (it will create abe.json if it doesn't exist).

{
  "plugins": [
    "user_or_org/myrepo"
  ]
}

You can install a specific version of the plugin this way:

abe install user_or_org/myrepo#1.0.0

The entry in abe.json:

{
  "plugins": [
    "user_or_org/myrepo#1.0.0"
  ]
}

Install all plugins

run

abe install

this will fetch all plugins listed in abe.json and npm install the plugins

Use custom scripts

Custom scripts are created under "scripts" directory. Follow the same structure as for a plugin. Example for a module "abe-hint" under scripts:

Example from abe-hint plugins

website/
  |_ scripts/
    |_ abe-hint/
      |_ hooks/
      |  - hooks.js
      |_ partials/
      | - some_partials.html ...
      | - some ...
      | - ...
      |_ routes/
        - my_route.js ...

This way, you'll be able to create custom scripts which you don't want to share between your different Abe projects. You can name your module as you want.

Dev plugins

How to create plugins

Inside website (under scripts folder) create a directory with the name of your choice (this name will be the name of your plugin)

You can then add hooks or template override

Example from abe-hint plugins

website/
  |_ node_modules/
    |_ abe-hint/
      |_ hooks/
      |  - hooks.js
      |_ partials/
      | - some_partials.html ...
      | - some ...
      | - ...
      |_ routes/
        - my_route.js ...

Plugin examples at https://github.com/AdFabConnect/abe-plugins

Once you'll be satisfied with the way your module works, you'll then be able to create a regular npm module and install it on your project with the command abe install my_module

frontend javascript

Your partial can import css/js file

You can register some event to alter abe

for example :

website/
  |_ node_modules/
    |_ my-plugin/
      |_ partials/
        - styles.html
        - my-scripts.js

content of styles.html

<script src="/my-scripts.js"></script>

content of my-scripts.js

abe.json.saving(function (e) {
  abe.json.data.someVariable = 'test'
})

someVariable will be saved into content json file, because the json was changed before saving

Add route

website/
  |_ node_modules/
    |_ my-plugin/
      |_ routes/
        - my_route.js ...

You now get a new route at http://localhost:8000/plugin/my-plugin/my_route (this is created fron plugin name 'my-plugin' and 'my_route.js'

Example file:

'use strict';

var route = function route(req, res, abe) {
	res.set('Content-Type', 'application/json')
	res.send(JSON.stringify({
		route: 'search',
		success: 1
	}))
}

exports.default = route;