03.03-interfaces.md 3.2 KB
Newer Older
1
---
2
source: sections/_guide_blocks/03.03-interfaces.md
3
4
5
bookmark: interfaces
name: Interfaces
title: Working with interfaces
6
sub: true
7
8
---

9
If you have read the [runner](../runner/) documentation, you probably already noticed that Tripetto requires you to implement each block in two domains:
10

11
12
- *Builder domain*: The part of the block that will allow the use of it for smart form building in the builder;
- *Runner domain*: The part of the block that renders it to a visual component inside an actual form in a website or application. If you have different runners with different visual styles, you probably need multiple implementations for each block.
13

14
There is no technical overlap between the two implementation domains, except for the block's properties. These properties describe the behavior of your block (they are set with the builder and consumed by the runner) and act as the block contract between the implementation domains.
15

16
To avoid duplicate interface declarations or mismatches between the properties, we suggest creating a single interface inside your builder block implementation. This interface then acts as the single point of truth and should be exposed by your builder block package, so you can use it inside each runner implementation. This way the block properties are declared in a single place, making it easier to maintain and more consistent.
17

Mark van den Brink's avatar
Mark van den Brink committed
18
![Blocks diagram](../../images/diagrams/blocks.svg)
19

20
21
#### Builder domain
The following example shows how to achieve this in the builder domain. First off we define the interface in a separate type declaration file, for example `interface.d.ts`.
22
23

```typescript
Mark van den Brink's avatar
Mark van den Brink committed
24
export interface IExampleProperties {
25
26
  ...
  // Define a property
Mark van den Brink's avatar
Mark van den Brink committed
27
  color: string;
28
29
30
31
  ...
}
```

Mark van den Brink's avatar
Mark van den Brink committed
32
Next, implement a block (in this example `index.ts`).
33
34

```typescript
Mark van den Brink's avatar
Mark van den Brink committed
35
36
import {
  NodeBlock, tripetto
37
} from "{{ site.npm_packages.builder }}";
Mark van den Brink's avatar
Mark van den Brink committed
38
39
40
41
42
43
44
45
46
import * as ICON from "./icon.svg";

@tripetto({
    type: "node",
    identifier: "example-block",
    icon: ICON,
    label: "Example block"
  })
export class Example extends NodeBlock {
47
48
  ...
  // Make the property part of the form definition
Mark van den Brink's avatar
Mark van den Brink committed
49
  @definition color = "red";
50
51
52
53
  ...
}
```

54
And this is all you need to do in the builder domain. Make sure to reference your type definition inside your `package.json` as follows.
55
56
57
58
59
60
61
62
63
64

```json
{
  "name": "example-block",
  "version": "1.0.0",
  "main": "index.js",
  "types": "interface.d.ts"
}
```

65
66
#### Runner domain
Now you can use the interface that is declared inside the builder block package in your runner implementation. Also make sure to add the block package to your runner. Then you can import the interface type and feed it into your runner block.
67
68
69
70

```typescript
import { IExampleProperties } from "example-block";

Mark van den Brink's avatar
Mark van den Brink committed
71
72
73
74
75
@Tripetto.block({
    type: "node",
    identifier: "example-block"
})
export class ExampleBlock extends NodeBlock<IExampleProperties> {
76
  ...
Mark van den Brink's avatar
Mark van den Brink committed
77
  doSomething(): void {
78
    // Use the property
Mark van den Brink's avatar
Mark van den Brink committed
79
    console.log(this.props.color); // Outputs `red`
80
81
82
83
84
85
86
  }
  ...
}
```

This documentation is updated as we continue our work on Tripetto and build a community. Please [let us know](../support) if you run into issues or need additional information. We’re more than happy to keep you going and also improve the documentation.
{: .warning }