Skip to main content

@tripetto

The @tripetto decorator is used to register the builder part of node and condition blocks. It can be used to register the following classes:

  • NodeBlock: A block that can be assigned to a node (this can be a visual block or a headless block);
  • ConditionBlock: A block that can be assigned to branch conditions.
tip

See the blocks documentation to learn how to develop custom blocks.

Decorator type​

Class ℹ️

Applies to​

Decorator signature​

@tripetto(properties: INodeBlockDecorator | IConditionBlockDecorator)

Decorator parameters​

NameTypeOptionalDescription
propertiesINodeBlockDecorator | IConditionBlockDecoratorNoSpecifies the block properties that implicitly determine the type of block.

Example​

import { tripetto, _, NodeBlock, ConditionBlock } from "@tripetto/builder";

// Register a node block
@tripetto({
  type: "node",
  identifier: "example-block",
  get label() {
    return _("Example");
  },
  icon: /* Icon for the block. */
})
class ExampleBlock extends NodeBlock {
  // Block implementation here
}

// Register a condition block
@tripetto({
  type: "condition",
  identifier: "example-block-condition",
  context: ExampleBlock,
  get label() {
    return _("Condition for the example block");
  },
  icon: /* Icon for the block. */
})
class ExampleCondition extends ConditionBlock {
  // Block implementation here
}

⛓️ Interfaces​

🔗 INodeBlockDecorator​

Describes the interface for registering a NodeBlock.

Type declaration​
interface INodeBlockDecorator {
  type: "node";
  identifier: string;
  label: string;
  icon: SVGImage | string;
  version?: string;Optional
  alias?: string | string[];Optional
  namespace?: string | string[];Optional
  kind?: "ui" | "headless";Optional
}
🖱️ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🏷️ alias​

Specifies optional type aliases (alternative type identifiers for the block).

Type​

string | string[]

🏷️ icon​

Specifies the icon image for the block (either an URL or Base64-encoded image data).

tip

See the Block icon guide for more information about the block icon.

Type​

SVGImage | string

Example​
@tripetto({
  type: "node",
  identifier: "example-block",
  label: "Example block",
  icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})

🏷️ identifier​

Specifies the unique type identifier for the block.

Type​

string

🏷️ kind​

Specifies the kind of block. Can be one of the following values:

  • ui: Specifies the block needs a user interface in the runner (this is the default kind);
  • headless: Specifies the block is headless (doesn't need a user interface).
Type​

"ui" | "headless"

🏷️ label​

Specifies the localized block label (if you use gettext, return the localized string using a getter function).

Type​

string

Example​
import { _, tripetto } from "@tripetto/builder";

@tripetto({
  get label() {
    return _("Example");
  },
})

🏷️ namespace​

Specifies the namespace(s) for the block.

Type​

string | string[]

🏷️ type​

Specifies to register a node block.

Type​

"node"

🏷️ version​

Specifies the version of the block in SemVer format (defaults to 0.0.0).

Type​

"node"

🔗 IConditionBlockDecorator​

Describes the interface for registering a ConditionBlock.

Type declaration​
interface IConditionBlockDecorator {
  type: "condition";
  identifier: string;
  context: "*" | "section" | "branch" | "node" | string | typeof NodeBlock
  label: string;
  icon: SVGImage | string;
  version?: string;Optional
  alias?: string | string[];Optional
  namespace?: string | string[];Optional
  autoOpen?: boolean;Optional
}
🖱️ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🏷️ alias​

Specifies optional type aliases (alternative type identifiers for the block).

Type​

string | string[]

🏷️ autoOpen​

Specifies if the condition editor panel in the builder should automatically open when the condition is added to the form.

Type​

boolean

🏷️ context​

Specifies the block context. Can be one of the following values:

  • *: The block defines a global condition (it can be used anywhere and it is not dependent on a section, branch, node or block type);
  • section: The block defines a condition that applies to a section;
  • branch: The block defines a condition that applies to a branch;
  • node: The block defines a condition that applies to a node;
  • typeof NodeBlock: Specifies the NodeBlock type to which the condition applies;
  • The type string identifier of the NodeBlock type to which the condition applies.
Type​

"*" | "section" | "branch" | "node" | string | typeof NodeBlock

🏷️ icon​

Specifies the icon image for the block (either an URL or Base64-encoded image data).

tip

See the Block icon guide for more information about the block icon.

Type​

SVGImage | string

Example​
@tripetto({
  type: "condition",
  identifier: "example-block",
  context: "*",
  label: "Example block",
  icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})

🏷️ identifier​

Specifies the unique type identifier for the block.

Type​

string

🏷️ label​

Specifies the localized block label (if you use gettext, return the localized string using a getter function).

Type​

string

Example​
import { _, tripetto } from "@tripetto/builder";

@tripetto({
  get label() {
    return _("Example");
  },
})

🏷️ namespace​

Specifies the namespace(s) for the block.

Type​

string | string[]

🏷️ type​

Specifies to register a condition block.

Type​

"condition"

🏷️ version​

Specifies the version of the block in SemVer format (defaults to 0.0.0).

Type​

string