Skip to main content

@affects

The @affects decorator is used to mark properties that affect another property of a block. That allows the builder to update certain elements when the property changes. For example, if a property is used in the label of the block, decorating it with @affects("#label") indicates the builder that the label should update when the decorated property changes.

Decorator type​

Property ℹ️

Applies to​

Decorator signature​

@affects(
  what: "#name" | "#label" | "#icon" | "#required" | "#condition" | "#slots" | "#collection" | "#refresh",
  collectionProperty: string
)

Decorator parameters​

NameTypeOptionalDescription
what"#name" | "#label" | "#icon" | "#required" | "#condition" | "#slots" | "#collection" | "#refresh"NoSpecifies what the decorated property affects. It can be one of the following values:
- #name: Affects the name of the block;
- #label: Affects the label of the block;
- #icon: Affects the icon of the block;
- #required: Affects the required state (that specifies if a block is required or optional) of the block;
- #condition: Affects a condition block;
- #slots: Affects the slots of the block;
- #collection: Affects the collection that is supplied as argument;
- #refresh: Affects a collection item.
collectionPropertystringYesSpecifies the property name that holds the affected collection when what is set #collection.

Example​

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

@tripetto({
  type: "node",
  identifier: "example-block",
  label: "Example",
  icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})
class ExampleBlock extends NodeBlock {
  // This example property will trigger a label update when the value of the property changes
  @affects("#label")
  example: boolean;

  // This generates the label for the block that is shown in the builder
  get label() {
      return this.example ? "True" : "False";
  }
}