Yupiik Dev Tools

Simple application with a set of developer tools.

Build

npm i
npm run build

Then you can run the application using (ensure to hava Java >= 17 in your path):

cd out/yupiik-dev-tools-linux-x64/
./yupiik-dev-tools

Important

it requires Java 17 to run the backend. If not installed, java.setup.js will automatically install it at first start. If you already have Java 17 install, ensure to set properly your JAVA_HOME environment variable before running yupiik-dev-tools to reuse it.

Custom Operations

A custom-operations.json can be added to this folder (root of the distribution) to define custom JSON-Logic operations:

{
  "jsonLogics": [
    {
      "name": "hello-world",
      "description": "A simple custom operation based on JSON-Logic",
      "parameters": [
        {
          "type": "STRING", // or NUMBER or BOOLEAN
          "name": "name",
          "required": true,
          "documentation": "The name to greet"
        }
      ],
      "jsonLogic": {
        "cat": [
          "Hello ",
          {
            "var": "name" // injected from parameters
          },
          "!"
        ]
      }
    }
  ]
}

It is possible to reuse a JSON-RPC method in a JSON-Logic flow:

{
  "name": "custom-base64",
  "description": "A simple custom operation based on JSON-Logic and JSON-RPC",
  "parameters": [],
  "jsonLogic": {
    "jsonrpc": {
      "jsonrpc": "2.0",
      "method": "base64-encode",
      "params": {
        "mode": "DEFAULT",
        "value": "my text"
      }
    }
  }
}

But it becomes useful when you combine with it custom JSON-Logic parameter (standard parameters having a wrapper $jsonlogic containing the JSON-Logic to evaluate against the parameters context):

{
  "name": "custom-base64",
  "description": "A simple custom operation based on JSON-Logic and JSON-RPC",
  "parameters": [
    {
      "type": "STRING",
      "name": "name",
      "required": true,
      "documentation": "The name to convert"
    }
  ],
  "jsonLogic": {
    "jsonrpc": {
      "jsonrpc": "2.0",
      "method": "base64-encode",
      "params": {
        "mode": "DEFAULT",
        "value": {
          "$jsonLogic": {
            "cat": [
              "Hello ",
              {
                "var": "name"
              },
              "!"
            ]
          }
        }
      }
    }
  }
}

In this last snippet, you will compute the base64 of the text Hello <parameter.name>! string.

Format the returned data

Returned data are by default rendered as a code block JSON formatted. If you want to refine the way it is formatted you can use a JSON describing the react tree. For the UI to understand it, the result must have an ui and a data attributes. ui attribute is the react graph in JSON and data the evaluable data (actual result). The data can be evaluated in react children using {$eval:'<path to attribute to evaluate>'}.

{
    ui: {
        type: 'div',
        props: {
            className: 'custom-widget-wrapper',
        },
        children: [
            {
                type: 'div',
                props: {
                    className: 'custom-widget-header'
                },
                children: [
                    { type: 'h2', props: {}, children: ['Header'] },
                    { type: 'p', props: {}, children: ['Some description.'] },
                ],
            },
            {
                type: 'div',
                props: {
                    className: 'custom-widget-data'
                },
                children: [
                    { type: 'h2', props: {}, children: ['Something'] },
                    { $eval: 'value1.something' },
                ],
            }
        ],
    },
    data: {
        value1: {
            something: "..."
        }
    },
}