Nightly Patch Machine

    @kumologica/devkit

    3.0.30 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @kumologica/devkit

    DownloadsWeekly Downloads

    260

    Version

    3.0.30

    License

    ISC

    Unpacked Size

    10.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • kumologica-admin
    • ligrecito