npm package: @kumologica/devkit
Description: Module used to develop contrib nodes for Kumologica runtime
Latest version: 4.0.1

# README

For impatients, you can jump to the `test` folder to see a simple node. However, we will recommend to read this guide as there are naming conventions that every single kumologica developer will have to follow to develop contrib nodes.

# Project structure

Contrib nodes will be made of two files:

- a js file that defines the behaviour at runtime of the node
- an html file that defines and captures the properties of the node from the designer

The whole project will be bundled together with a `package.json`

## package.json

kumologica imposes the following convention into this file:

- `name`: it will follow the convention <Account>/kumologica-contrib-<NODE>
- `kumologica`: This property will be responsible to register all the nodes that your contrib module is exporting

Example:

```json
{
  "name": "@acme/kumologica-contrib-echo",
  "kumologica": {
    "nodes": {
      "echo": "echo.js"
    }
  }
}
```

## The JS file

```
module.exports = function(App) {
  const { KLNode } = require('@kumologica/devkit');

  class Echo extends KLNode {
    constructor(props) {
      // Do not forget to call the constructor!!
      super(App, props);
      this.message = props.message;
    }

    handle(msg) {
      App.log.info(`Echo node says: ${this.message}`);
      this.send(msg);
    }
  }
  //  Do not forget to register the node
  App.nodes.registerType('echo', Echo);
};
```

This node is named `Echo`, and the runtime will ensure to invoke the `handle` method when a message is received by the node.

A few points to remember here:

- Do not forget to extend from KLNode, otherwise your node will not receive any message.
- Do not forget to override the method `handle`.
- `send` method can be invoked to send the message linked as an output in the designer.

## The HTML file

This file provides the following:

- Registration with the designer
- A window to capture the properties to the node

```html
<script type="text/x-kumologica" data-template-name="echo">
  <!-- name field -->
  <div class="form-row">
      <label for="node-input-name">
        <span>Name</span>
      </label>
      <input type="text" id="node-input-name" placeholder="Display name">
  </div>

  <!-- message field -->
  <div class="form-row" style="margin-bottom:0px">
    <label for="node-input-message">
        <span>Message</span>
    </label>
    <input type="text" id="node-input-message">
  </div>
</script>

<script type="text/javascript">
  App.nodes.registerType('echo', {
    category: 'echo_contrib',
    icon: 'browser.png',
    color: '#FFF59D',
    defaults: {
      name: { value: '' },
      message: { value: '' }
    },
    inputs: 1,
    outputs: 1,
    label: function() {
      return this.name || 'echo';
    }
  });
</script>
```

| WARNING: the `category` property only takes alphanumerical and `_` which will be replaced by a whitespace in the designer |
| ------------------------------------------------------------------------------------------------------------------------- |


All the icons will need to placed in the directory called `icons` in the same directory that the `html` and `js` files are.