Verified Commit 79f35adf authored by Mark van den Brink's avatar Mark van den Brink
Browse files

Refactor providers to blocks

parent f8c7d0ec
[![pipeline status](https://gitlab.com/tripetto/docs/badges/master/pipeline.svg)](https://gitlab.com/tripetto/docs/commits/master)
Tripetto Forms documentation website which is published at [docs.tripetto.community](https://docs.tripetto.community). Generated using [Jekyll](https://jekyllrb.com/).
Tripetto technical documentation website published at [docs.tripetto.community](https://docs.tripetto.community). Generated using [Jekyll](https://jekyllrb.com/).
## Prerequisites
Make sure [Ruby](https://www.ruby-lang.org/en/) is installed. Run the following command to install the required gems.
......
source: src
destination: public
email: support@tripetto.com
description: "Documentation for Tripetto Forms"
description: "Documentation for Tripetto"
url: "https://docs.tripetto.community"
editor: "https://gitlab.com/tripetto/docs/blob/master/src/"
repository: "https://gitlab.com/tripetto/docs/blob/master/src/"
permalink: pretty
accounts:
......@@ -13,8 +13,8 @@ accounts:
gitter: tripetto
npm_packages:
editor: "@tripetto/forms-editor"
collector: "@tripetto/forms-collector"
editor: "tripetto"
collector: "tripetto-collector"
google_tag_manager: GTM-W5BFLGF
webmaster_verifications:
......@@ -34,9 +34,9 @@ collections:
permalink: /collector/
name: Collector
position: 2
docs_providers:
permalink: /providers/
name: Providers
docs_blocks:
permalink: /blocks/
name: Blocks
position: 3
docs_support:
permalink: /support/
......
No preview for this file type
......@@ -13,7 +13,7 @@
{% endif %}
{% if doc.source and doc.source != "" %}
<a href="{{ site.editor }}{{ doc.source }}" target="_blank" class="edit">Edit</a>
<a href="{{ site.repository }}{{ doc.source }}" target="_blank" class="edit">Edit</a>
{% endif %}
</h2>
......
var TRIPETTO_DEMO_FORM = {
"Id": "53a271f77ced0e31dcbf7ab75866058655da7b03dfa127cc19bba39c98c6a3a7",
"Name": "Demo",
"Clusters": [
{
"Id": "e063d364ba6f35285bfa9771346d80005af64355c7c14f6ecd11a9bb8d74c54f",
"Name": "Customer satisfaction",
"Nodes": [
{
"Id":
"0042d46c29f935b966724987e31592ab03c7c5c7879a8bdc2b1de427e8ef2b5c",
"Explanation": "",
"Name": "We like to hear from you!",
"NameVisible": true,
"Placeholder": "",
"Description":
"Please let us know what you think of Tripetto. We really like to hear how and where we can improve.",
"Branches": [],
"Slots": []
},
{
"Id":
"7a33b3309edc481a5d097ce547197f18181aaa7e3405b4d070cbfe5c53b755a6",
"Explanation": "",
"Name": "What's your name?",
"NameVisible": true,
"Placeholder": "",
"Description": "",
"Branches": [],
"Provider": { "Type": "tripetto-forms-text", "Version": "1.0.11" },
"Slots": [
{
"Id":
"1747c9e533f763099c506b24813b7cb53fff509663d8a5f64760750114f01d93",
"Type": "Text",
"Kind": "static",
"Reference": "value",
"Sequence": 0,
"Name": "",
"Placeholder": "What's your name?",
"Alias": "",
"Transformation": "none"
}
]
},
{
"Id":
"a40143d250f75e6b68ad600b0b82ead23f20c377a1bd4418b1a286fc6cb29b15",
"Explanation": "",
"Name": "How would you describe your developer skills?",
"NameVisible": true,
"Placeholder": "",
"Description": "",
"Branches": [],
"Provider": {
"Type": "tripetto-forms-radiobuttons",
"Version": "1.0.11",
"Radiobuttons": [
{
"Id":
"f9698a3b26e72b51e7e7b7e42840cc20827276f5934bbb9a6831898b606c232d",
"Name": "Beginner",
"Value": ""
},
{
"Id":
"ec47fbc8a90cc3fd3e146788906f40a65ccbe6e029450a1bf247773bb71d076c",
"Name": "Advanced",
"Value": ""
},
{
"Id":
"2675a9f821ac63967d86d774bfedd7ea5070e03529b4539a270b2c3f15fbf1f9",
"Name": "Expert",
"Value": ""
}
]
},
"Slots": [
{
"Id":
"fa515026ddcdb7fed094375ced8059591f191f74cd4b0c31787e85b5384eba51",
"Type": "String",
"Kind": "static",
"Reference": "button",
"Sequence": 0,
"Name": "",
"Placeholder": "How would you describe your developer skills?",
"Alias": ""
}
]
},
{
"Id":
"d4ddbd626a7149e08341bd3b866f67210a1ec47bca795f03370b88e4da23164d",
"Explanation": "",
"Name": "Have you tried Tripetto Forms?",
"NameVisible": true,
"Placeholder": "Please make a choice...",
"Description": "",
"Branches": [
{
"Id":
"c91a840ce9fc0ab49249fb9c936c31965138ed683e201983c3bc4fce73e18a6c",
"Culling": "first",
"Name": "",
"Clusters": [
{
"Id":
"034f77dfc907a6c74417021b345308889928fd848871c53a274c5e059c40b601",
"Name": "",
"Nodes": [
{
"Id":
"49fa3f0518bd7e93e122cecb7256de48f070b640302ca9ad578c84f9fdc38dc1",
"Explanation": "",
"Name": "Did you like it?",
"NameVisible": true,
"Placeholder": "Please make a choice...",
"Description": "",
"Branches": [
{
"Id":
"cf40ae587afad3adcbe9046ed0266489b31252dd7d9974776733e37712178915",
"Culling": "first",
"Name": "Satisfied",
"Clusters": [],
"Conditions": [
{
"Id":
"56b19c1d06ae388b691bdadc2615bde585ed5bd6f100f9385cbd8919026235b1",
"Provider": {
"Option":
"8ba215329ecc96b7bfdec3f8576bfd63f5be87b14368cbb544cc20bb7b47664c",
"Type":
"tripetto-forms-dropdown.is-option-selected",
"Version": "1.0.12",
"Node":
"49fa3f0518bd7e93e122cecb7256de48f070b640302ca9ad578c84f9fdc38dc1",
"Slot":
"b567a632077b2f260c6f037e1eb5e2b237b43025398bdc003c895e542d36dc39"
}
}
]
},
{
"Id":
"c5a3c915788f54a27dc27a7adf705af840cf6b2e4b08f262eaab4d4a6d5fc6e9",
"Culling": "first",
"Name": "Not satisfied",
"Clusters": [
{
"Id":
"95492d3ba330fb82b726bf191aeda600fe945e16ab99337cdf3a4dae19a236a1",
"Name": "",
"Nodes": [
{
"Id":
"371613040d5ee4bdebb8b924ac7faef1be8ccb7911fca5adeef3f770d1da553d",
"Explanation": "",
"Name":
"Tell us what we can do to improve it.",
"NameVisible": true,
"Placeholder": "",
"Description": "",
"Branches": [],
"Provider": {
"Type": "tripetto-forms-textarea",
"Version": "1.0.10"
},
"Slots": [
{
"Id":
"fcd9a7d4ebf27f2f17438a843f392ea94d553e68e424e8b0b89781437d8dcb75",
"Type": "Text",
"Kind": "static",
"Reference": "value",
"Sequence": 0,
"Name": "",
"Placeholder":
"Tell us what we can do to improve it.",
"Alias": "",
"Transformation": "none"
}
]
}
]
}
],
"Conditions": [
{
"Id":
"07262ecf571ed3399167bc566c30e343802802a6c5e73038332629d1b1de9dd2",
"Provider": {
"Option":
"9864bc4be8b690fa41f6c2b2a18e43763ef3ea6630032b0330e4f535bcb8578b",
"Type":
"tripetto-forms-dropdown.is-option-selected",
"Version": "1.0.12",
"Node":
"49fa3f0518bd7e93e122cecb7256de48f070b640302ca9ad578c84f9fdc38dc1",
"Slot":
"b567a632077b2f260c6f037e1eb5e2b237b43025398bdc003c895e542d36dc39"
}
}
]
}
],
"Provider": {
"Type": "tripetto-forms-dropdown",
"Version": "1.0.12",
"Options": [
{
"Id":
"8ba215329ecc96b7bfdec3f8576bfd63f5be87b14368cbb544cc20bb7b47664c",
"Name": "Yes",
"Value": ""
},
{
"Id":
"9864bc4be8b690fa41f6c2b2a18e43763ef3ea6630032b0330e4f535bcb8578b",
"Name": "No",
"Value": ""
}
]
},
"Slots": [
{
"Id":
"b567a632077b2f260c6f037e1eb5e2b237b43025398bdc003c895e542d36dc39",
"Type": "String",
"Kind": "static",
"Reference": "option",
"Sequence": 0,
"Name": "",
"Placeholder": "Did you like it?",
"Alias": "",
"Required": true
}
]
}
]
}
],
"Conditions": [
{
"Id":
"007f414a61060651f316bbb169ca3f7a82f32d5f8473dab552ce4e3fe4c33c6d",
"Provider": {
"Option":
"109a7a6d6725d45efde6beb25e01afe46b987b7e2382856b1a3fac7062570036",
"Type": "tripetto-forms-dropdown.is-option-selected",
"Version": "1.0.12",
"Node":
"d4ddbd626a7149e08341bd3b866f67210a1ec47bca795f03370b88e4da23164d",
"Slot":
"517eda531ce243c6e5d9f714f5e976bf73673436f3294287cbf3ce20da076baf"
}
}
]
}
],
"Provider": {
"Type": "tripetto-forms-dropdown",
"Version": "1.0.12",
"Options": [
{
"Id":
"109a7a6d6725d45efde6beb25e01afe46b987b7e2382856b1a3fac7062570036",
"Name": "Yes",
"Value": ""
},
{
"Id":
"a970a26d6882dfdb2e67282a917fcaceec0dc49599213b1d3dd394b843a377f3",
"Name": "No",
"Value": ""
}
]
},
"Slots": [
{
"Id":
"517eda531ce243c6e5d9f714f5e976bf73673436f3294287cbf3ce20da076baf",
"Type": "String",
"Kind": "static",
"Reference": "option",
"Sequence": 0,
"Name": "",
"Placeholder": "Have you tried Tripetto Forms?",
"Alias": "",
"Required": true
}
]
}
]
},
{
"Id": "9ec5243996dc279b29140bbeb10c503dc288d1e2f746866c85f010e1ca7b5679",
"Name": "Message",
"Nodes": [
{
"Id":
"29724db46674305872cf03e2fcf5d3eca61fb2964db6e507a7441ec25f03e6a5",
"Explanation": "",
"Name": "Thank you for your feedback!",
"NameVisible": true,
"Placeholder": "",
"Description":
"This is a demo application. No data is actually sent.\n\nClick the `Complete`-button and open your developer console to see the collected data.",
"Branches": [],
"Slots": []
}
]
}
],
"Editor": { "Name": "@tripetto/forms-editor", "Version": "0.3.2" }
};
---
source: docs/_docs_blocks/00-introduction.md
title: Blocks
---
### Taking hardcore charge
Perhaps one of the best things about Tripetto is that you decide which form *building blocks* (e.g. question types) you want to use in the editor and collector. We offer a default set to choose from, but you can also develop your own. The building blocks’ behaviors are defined in so-called **blocks**.
**In one single package a block typically both:**
- Holds the programmable behavior of a particular building block (e.g. [dropdown](https://www.npmjs.com/package/tripetto-block-dropdown){:target="_blank"}, [checkbox](https://www.npmjs.com/package/tripetto-block-checkbox){:target="_blank"}, etc.);
- **And** facilitates the management of its properties through the editor.
For building blocks we recommend using [TypeScript](https://www.typescriptlang.org/){:target="_blank"}. We supply typings to enable optimal [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense){:target="_blank"} support.
{: .info }
This step-by-step guide for building blocks assumes a good understanding of [TypeScript](https://www.typescriptlang.org/){:target="_blank"}, [object-oriented programming](https://www.typescriptlang.org/docs/handbook/classes.html){:target="_blank"} and [webpack](https://webpack.js.org/){:target="_blank"}.
{: .warning }
---
source: content/_docs_providers/01-concepts.md
source: docs/_docs_blocks/01-concepts.md
bookmark: concepts
title: Concepts
---
This is a good time to highlight again that we built a 2D drawing board because we think that's the best way to visualize and edit an advanced form; especially if it supports logic and conditional flow to smartly adapt to respondents' inputs. This generally shortens forms and enhances their responsiveness. So instead of being a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG){:target="_blank"} editor, it presents the structural layout of a form's flow and lets you easily move around building blocks on a self-organizing grid.
This is where providers also come in. These **node providers** and **condition providers** essentially define building block behaviors in a form and dictate what properties and **feature cards** to unlock in the editor for their configuration. A provider instructs the editor. And when instructed correctly by properly formatted provider **interfaces**, the editor will know everything it needs to know to handle the pertaining building block on the drawing board and the collector can collect respondent inputs in so-called **slots**.
This is where blocks also come in. These **node blocks** and **condition blocks** essentially define building block behaviors in a form and dictate what properties and **feature cards** to unlock in the editor for their configuration. A block instructs the editor. And when instructed correctly by properly formatted block **interfaces**, the editor will know everything it needs to know to handle the pertaining building block on the drawing board and the collector can collect respondent inputs in so-called **slots**.
#### Overview
The following diagram shows the root structure of a form in the editor. This scheme is actually a pattern that can occur recursively. Each cluster can be a repeat of the shown structure, with varying numbers of branches and clusters per branch of course. You'll recognize this recursive pattern quite easily when you start using the [editor](../editor/).
You'll probably notice that the following diagram looks a lot like the diagram we used in the chapter about the collector to explain the core concepts for the structure of Tripetto Forms. That's because we're talking about the exact same concepts here. Yet, we're now taking you a step deeper into how exactly behaviors are coupled with nodes; by injecting **providers**.
You'll probably notice that the following diagram looks a lot like the diagram we used in the chapter about the collector to explain the core concepts for the structure of Tripetto. That's because we're talking about the exact same concepts here. Yet, we're now taking you a step deeper into how exactly behaviors are coupled with nodes; by injecting **blocks**.
{: .info }
![Editor structure](../images/diagrams/editor.svg)
#### Entities
Before starting your development of providers you'll want to familiarize yourself with the following entities:
Before starting your development of blocks you'll want to familiarize yourself with the following entities:
#### `Nodes`
These are the containers for the actual form building blocks (i.e. element types like text input, dropdown, checkbox etc.). A node is basically a placeholder for a provider. The node behavior itself is defined in a *provider*.
These are the containers for the actual form building blocks (i.e. element types like text input, dropdown, checkbox etc.). A node is basically a placeholder for a block. The node behavior itself is defined in a *block*.
#### `Clusters`
One or more *nodes* can be placed in a so-called *cluster*. It is simply a collection of nodes.
......@@ -29,12 +29,12 @@ One or more *nodes* can be placed in a so-called *cluster*. It is simply a colle
One or more *clusters* can form a *branch*. A branch can be conditional. You can define certain conditions for the branch to be taken or skipped.
#### `Conditions`
A *branch* can contain one or more *conditions*, which are used to direct flow into the branch. They are evaluated when a cluster ends. Only subsequent branches with matching condition(s) are taken by the collector. Just like nodes, the conditions are actually placeholders for condition behaviors. The condition behavior itself is defined in a *condition provider*.
A *branch* can contain one or more *conditions*, which are used to direct flow into the branch. They are evaluated when a cluster ends. Only subsequent branches with matching condition(s) are taken by the collector. Just like nodes, the conditions are actually placeholders for condition behaviors. The condition behavior itself is defined in a *condition block*.
#### `Providers`
So, providers supply a certain behavior to node and condition building blocks that are used in the editor to build smart forms. As mentioned before providers come in two flavours:
- *Node providers*: Provide building blocks for nodes (for example [text input](https://www.npmjs.com/package/tripetto-forms-text){:target="_blank"}, [dropdown](https://www.npmjs.com/package/tripetto-forms-dropdown){:target="_blank"}, [checkbox](https://www.npmjs.com/package/tripetto-forms-checkbox){:target="_blank"} etc.);
- *Condition providers*: Provide building blocks for conditions.
#### `Blocks`
So, blocks supply a certain behavior to node and condition building blocks that are used in the editor to build smart forms. As mentioned before blocks come in two flavours:
- *Node blocks*: Provide building blocks for nodes (for example [text input](https://www.npmjs.com/package/tripetto-block-text){:target="_blank"}, [dropdown](https://www.npmjs.com/package/tripetto-block-dropdown){:target="_blank"}, [checkbox](https://www.npmjs.com/package/tripetto-block-checkbox){:target="_blank"} etc.);
- *Condition blocks*: Provide building blocks for conditions.
#### `Slots`
All data collected through the [collector](../collector/) needs to be stored somewhere. In Tripetto Forms we use `Slots` to do this. Slots are also defined by providers. For example, if you build a text-input provider, you're probably going to retrieve a text value from an input control in your collector implementation. In that case your provider should create a slot to store this text value. There are different types of slots, such as a `StringSlot`, `BooleanSlot` or `NumberSlot`.
All data collected through the [collector](../collector/) needs to be stored somewhere. In Tripetto we use `Slots` to do this. Slots are also defined by blocks. For example, if you build a text-input block, you're probably going to retrieve a text value from an input control in your collector implementation. In that case your block should create a slot to store this text value. There are different types of slots, such as a `StringSlot`, `BooleanSlot` or `NumberSlot`.
---
source: content/_docs_providers/02-boilerplate.md
source: docs/_docs_blocks/02-boilerplate.md
bookmark: boilerplate
title: Boilerplate
---
We've created a [boilerplate](https://gitlab.com/{{ site.accounts.gitlab }}/forms/providers/boilerplate){:target="_blank"} to help you start building providers. It contains the recommended packages, boilerplate code and tasks to get things up and running smoothly. We suggest using the boilerplate as a starting point when you are going to develop a provider. To do so, start by downloading and extracting the boilerplate from the following URL to any local folder you like:
We've created a [boilerplate](https://gitlab.com/{{ site.accounts.gitlab }}/blocks/boilerplate){:target="_blank"} to help you start building blocks. It contains the recommended packages, boilerplate code and tasks to get things up and running smoothly. We suggest using the boilerplate as a starting point when you are going to develop a block. To do so, start by downloading and extracting the boilerplate from the following URL to any local folder you like:
```
https://gitlab.com/{{ site.accounts.gitlab }}/forms/providers/boilerplate/repository/master/archive.zip
https://gitlab.com/{{ site.accounts.gitlab }}/blocks/boilerplate/repository/master/archive.zip
```
Next, open your terminal/command prompt and go to your newly created folder. Execute the following command (make sure you have [npm](https://www.npmjs.com/){:target="_blank"} and [Node.js](https://nodejs.org/){:target="_blank"} installed) to install all the required packages:
......@@ -16,21 +16,21 @@ Next, open your terminal/command prompt and go to your newly created folder. Exe
$ npm install
```
To start developing and testing your provider run the following command:
To start developing and testing your block run the following command:
```bash
$ npm start
```
This will start the editor with a (initial empty) form (stored in `./forms/example.json`). The editor will restart automatically with every code change.
This will start the editor with a (initial empty) form (stored in `./test/example.json`). The editor will restart automatically with every code change.
### Start with a clean installation
If you want to start from scratch or develop providers in an existing project, you can install the editor package as a dependency using the following command:
If you want to start from scratch or develop blocks in an existing project, you can install the editor package as a dependency using the following command:
```bash
$ npm install {{ site.npm_packages.editor }} --save-dev
```
It contains the editor application as well as the TypeScript declaration files (typings) necessary for provider development. The typings should be discovered automatically by your IDE when importing symbols from the `{{ site.npm_packages.editor }}` module.
It contains the editor application as well as the TypeScript declaration files (typings) necessary for block development. The typings should be discovered automatically by your IDE when importing symbols from the `{{ site.npm_packages.editor }}` module.
This documentation is updated as we continue our work on Tripetto Forms 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.
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 }
---
source: content/_docs_providers/03-implementation.md
source: docs/_docs_blocks/03-implementation.md
bookmark: implementation
name: Implementation
title: Implementing providers
title: Implementing blocks
code: |
```json
{
"name": "your-provider",
"name": "your-block",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "webpack -d && concurrently -n \"tripetto,webpack\" -c \"blue.bold,green\" -k -s \"first\" \"tripetto ./forms/example.json\" \"webpack -d --watch\""
"test": "webpack -d && concurrently -n \"tripetto,webpack\" -c \"blue.bold,green\" -k -s \"first\" \"tripetto ./test/example.json\" \"webpack -d --watch\""
},
"devDependencies": {
"@tripetto/forms-editor": "*",
"tripetto": "*",
"concurrently": "*",
"ts-loader": "*",
"typescript": "*",
......@@ -21,7 +21,7 @@ code: |
"webpack-livereload-plugin": "*"
},
"tripetto": {
"providers": [
"blocks": [
"."
]
}
......@@ -49,7 +49,7 @@ code: |
extensions: [".ts", ".js"]
},
externals: {
"@tripetto/forms-editor": "Tripetto"
"tripetto": "Tripetto"
},
plugins: [
new webpackLiveReload({
......@@ -61,40 +61,40 @@ code: |
{: title="webpack.config.js" }
---
Providers for Tripetto Forms are actually [packages](https://docs.npmjs.com/how-npm-works/packages){:target="_blank"}. A package is a directory that is described by a `package.json` and so is a provider. The most important part of the package configuration is the `main`-field. This field contains the entry point of your provider. The entry point is used when the Tripetto Forms editor wants to load your provider. If you want you can include multiple providers in a single package. But we'll assume for now that you create a package for each provider.
Blocks for Tripetto are actually [packages](https://docs.npmjs.com/how-npm-works/packages){:target="_blank"}. A package is a directory that is described by a `package.json` and so is a block. The most important part of the package configuration is the `main`-field. This field contains the entry point of your block. The entry point is used when the Tripetto editor wants to load your block. If you want you can include multiple blocks in a single package. But we'll assume for now that you create a package for each block.
The minimal package file for a provider should look like this:
The minimal package file for a block should look like this:
```json
{
"name": "your-provider",
"name": "your-block",
"version": "1.0.0",
"main": "index.js"
}
```
This example assumes the entry point of your provider implementation is at `index.js`.
This example assumes the entry point of your block implementation is at `index.js`.
### Publishing and consuming your provider
When you have a provider with a valid `package.json`, you can publish it to any registry you like. To use your provider in the editor, read the instructions on how to use them in the [cli tool](../editor#cli-configuration) or in the [library](../editor#library-providers).
### Publishing and consuming your block
When you have a block with a valid `package.json`, you can publish it to any registry you like. To use your block in the editor, read the instructions on how to use them in the [cli tool](../editor#cli-configuration) or in the [library](../editor#library-blocks).
### Testing during development
You'll want an easy and quick way to test your provider while you are building your provider. This is achieved by adding a `tripetto`-field with the following content to the `package.json` of your provider:
You'll want an easy and quick way to test your block while you are building your block. This is achieved by adding a `tripetto`-field with the following content to the `package.json` of your block:
```json
{
"name": "your-provider",
"name": "your-block",
"version": "1.0.0",
"main": "index.js",
"tripetto": {
"providers": [
"blocks": [
"."
]
}
}
```
With this the editor will load the provider when you start the editor from the provider folder. In the boilerplate we combined this feature with the [webpack live reload plugin](https://www.npmjs.com/package/webpack-livereload-plugin){:target="_blank"}. This automatically restarts the editor with each change in the provider code.
With this the editor will load the block when you start the editor from the block folder. In the boilerplate we combined this feature with the [webpack live reload plugin](https://www.npmjs.com/package/webpack-livereload-plugin){:target="_blank"}. This automatically restarts the editor with each change in the block code.
An example `package.json` with corresponding [webpack](https://webpack.js.org/){:target="_blank"} configuration is displayed to the right (or a bit further down, if you’re reading this on a device with limited screen width) to get you up and running fast.
......@@ -102,16 +102,16 @@ An example `package.json` with corresponding [webpack](https://webpack.js.org/){
Instead of supplying the entry point in the `main`-field you may also use the `entry` field of the `tripetto` section to do this. For example:
```json
{
"name": "your-provider",
"name": "your-block",
"version": "1.0.0",
"tripetto": {
"entry": "index.js",
"providers": [
"blocks": [
"."
]
}
}
```
This documentation is updated as we continue our work on Tripetto Forms 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.