Plugin & hook system

[matthias]

See Pull Request #1066

In this PR I propose a Plugin & hook system for Flowise

Plugins are packages, that currently live in /plugins - but they should also be installable via npm

It borrows ideas from the WordPress plugin and hook system. One of the most powerful forces why WordPress became such a popular OpenSource framework (despite a lot of not so likable things about WordPress code)

Within a plugin package we use package.json/main to point to the plugins main class which extends the FlowisePlugin class

It automatically loads components and credentials from the plugins directory by specifying nodesPath and credentialsPath

=> Check the components in the UI within a new "Custom" section

Under the hood it's using an event based hook system (based on EventEmitter) that adds the ability to collect and manipulate (filter) data, via emitting and listening to events (we call them hooks)

---

There is a new plugins directory (can be configured via PLUGINS_PATH in .env

Currently plugins are packages living with the /plugins directory. In a next iteration we could also specify plugins as npm packages via a PLUGINS_PACKAGES setting or plugins.json file - or similar.

As plugins are just packages we create our package as a directory within plugins.
And use package.json to specify the entry point. (and all the compile options, etc ... if we want to use typescript, etc ...)

/plugins/my-plugin/package.json

{
    "name": "my-plugin",
    "version": "1.0.0",
    "description": "My First Plugin",
    "license": "MIT",
    "main": "dist/index.js",
    "types": "dist/src/index.d.ts",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "tsc && gulp",
        "dev": "tsc --watch"
    },
    "author": "Matthias Platzer @engarde.net",
    "dependencies": {
        "flowise": "*",
        "flowise-components": "*",
        "winston": "^3.11.0"
    },
    "devDependencies": {
        "@types/winston": "^2.4.4",
        "typescript": "^4.8.4"
    }
}

Note

In the example plugin in the PR - the index.ts lives within the root directory - and not in the /src directory like in packages/components/nodes/**

If we specify a nodesPath the Plugin system will automatically load and initialize all (component) nodes it finds in that directory (using the same mechanism as flowise core) - same goes for credentialsPath, if specified.

constructor() is executed before the (server) app is initialized.
initialize() is executed after database and app are initialized - right before the web server is started.

import path from 'path'
import { FlowisePlugin } from 'flowise/dist/Plugin'

class MyPlugin extends FlowisePlugin {
    name = 'MyFirstPlugin'
    dirname = __dirname
    nodesPath = path.join(this.dirname, 'nodes')

    constructor() {
        super()
        this.logger.debug('### MyPlugin loaded successfully ###')
    }

    initialize() {
        this.logger.debug(`### ${this.name} initialized ###`)
    }
}

export default MyPlugin

In the PR you will find an example component node.
It lives in:

/plugins
  /my-plugins
    index.ts
    ...
    /nodes
      /MyCheerio
         MyCheerio.ts
         cheerio.svg

This one is just a plain copy of the existing Cheerio node, slightly modified for demo purpose. It's added to a "Custom" section via this.category = 'Custom'