Skip to main content

Convert Low-Code Integrations to Code-Native

This is a beta feature

The low-code converter tool is currently in beta. It will convert your low-code integration to an equivalent code-native integration, handling step invocations, branching, looping and the config wizard.

The output of the generator may need some manual work (outlined below) to get your code-native integration to work correctly.

You might build a proof-of-concept integration in the low-code builder, but later want to switch to code-native. The low-code-to-code-native converter tool allows you to turn your low-code integration into a code-native integration, so you can extend your integration using native TypeScript in your favorite IDE.

Converting a low-code YAML definition to code-native​

To convert a low-code integration to code-native, first export the low-code integration as a YAML file.

Next, ensure that you have the latest version of the prism CLI tool installed. Then run the converter command:

Convert a low-code YAML definition to code-native
# Create a code-native integration in a new folder called "my-cni-integration"
prism experimental:yaml --yamlFile /path/to/my-integration.yaml --folder ./my-cni-integration

After generating the component, it's a good idea to install dependencies and automatically format your code:

cd ./my-cni-integration
npm install
npm run format
npm update --save

Handling custom components​

If your low-code integration uses custom components, you can either:

  1. Abstract the logic in the custom component into a package that both your custom component and low-code integration use
  2. Invoke the custom component actions, connections, triggers and data sources from your code-native integration

If you would like to do the later, you likely use a custom package registry prefix for your custom component manifests. You can specify your custom component package prefix with the --registryPrefix flag:

Include custom components
prism experimental:yaml --yamlFile /path/to/my-integration.yaml --registryPrefix "@acme-connectors"

Post-generation instructions​

Depending on your integration, a few manual steps may be required to get your integration to compile and run properly.

Remove unused step result assignments​

If you had a low-code step that is not referenced by a subsequent step, you may see myStep is declared but its value is never read. Simply remove the variable assignment:

// go from:
const myAction = await components.myComponent.myAction({});

// to:
await components.myComponent.myAction({});

Provide TypeScript types for each step​

By default a step returns an object of unknown type. Use generics to provide your step with a return type.

In this example, an HTTP - Get step returns an array of todo items. We create a TypeScript interface and provide that interface as a generic for the step invocation:

Add TypeScript types to steps
interface TodoItem {
  id: number;
  completed: boolean;
  task: string;
}

export const flow1 = flow({
  //...
  onExecution: async (context, params) => {
    const getToDoTasks = await context.components.http.httpGet<{
      data: TodoItem[];
    }>({
      url: "https://my-json-server.typicode.com/prismatic-io/placeholder-data/todo",
      responseType: "json",
    });
    for (const item of getToDoTasks.data) {
      // TypeScript now knows item is of type TodoItem
    }
  },
});

With types generics, TypeScript now knows the shape of our getToDoTasks variable.

Simplify conditionals in branches​

To ensure that generated code-native code behaves identically to low-code branching conditionals, we import isEqual and other functions from Spectral. These, generally, can be safely converted to JavaScript equivalents.

// Generated code
import { isEqual } from "@prismatic-io/spectral/dist/conditionalLogic";
if (isEqual(val1, val2)) {
  doSomething();
}

// Likely equivalent code with no import
if (val1 === val2) {
  doSomething();
}

Code component usage​

If your low-code integration used code steps, invoking a code step in code-native is redundant. You can refactor your code so that you do not invoke the code step, and instead simply run the code within your flow's code. This may require updating subsequent steps' references to your code step.

Conditional branch names​

The branch component's result is the name of the branch that was traversed. Some low-code integrations use that value to determine what to do once the branch has completed.

The code-native equivalent looks like this:

let myBranchStep = "Else";
if (something()) {
  doSomethingElse();
  myBranchStep = "Unexpected Error";
} else {
  doYetAnotherThing();
  myBranchStep = "Else";
}

You can remove myBranchName if your low-code integration did not make use of the branch step's result.

Importing your converted code-native integration​

You can import your converted code-native integration the same way you would import any code-native integration. Note: a safeguard exists to prevent accidentally overwriting a low-code integration with a code-native integration. When importing your integration, you will create a new integration.

If you have customers with existing instances of the low-code version of your integration, you can transfer those instances' configurations to code-native equivalent instances. Reach out to our support team for guidance on how to do that.