@kumologica/devkit

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 /kumologica-contrib-
• kumologica: This property will be responsible to register all the nodes that your contrib module is exporting

Example:

{
  "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

<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.