@divkitframework/jsonbuilder library provides type safe tools to generate DivKit JSON
import { divCard, DivContainer, DivText, reference, rewritRefs, template, templateHelper } from '@divkitframework/jsonbuilder';
const templates = {
sampleBlock: new DivContainer({
items: [
template('header', {
text: reference('title')
}),
template('header', {
text: reference('subtitle')
}),
],
}),
header: new DivText({
font_size: 24,
}),
};
const tHelper = templateHelper(templates);
console.log(JSON.stringify(
divCard(rewriteRefs(templates), {
log_id: 'sample_card',
states: [
{
state_id: 0,
div: tHelper.sampleBlock({
title: "Some Title",
subtitle: "Some Subtitle",
}),
},
],
}
)));In the result JSON.stringify(divCard(...)) will return JSON below:
{
"templates": {
"sampleBlock": {
"type": "container",
"items": [
{
"type": "header",
"$text": "title"
},
{
"type": "header",
"$text": "subtitle"
},
]
},
"header": {
"type": "text",
"font_size": 24
}
},
"card": {
"log_id": "sample_card",
"states": [
{
"state_id": 0,
"div": {
"type": "sampleBlock",
"title": "Some Title",
"subtitle": "Some Subtitle",
}
}
]
}
}You can use templateHelper helper function to achieve compile time template parameters validation. Type safety works only when you enable strictNullChecks in tsconfig.json
const block = template('header', {
title: 'Some Title'
});
// using templateHelper for checking template parameters at compile-time
const safeBlock = tHelper.header({
title: 'Some Title'
});While developing cards you need to make sure that:
- Textual string are not empty;
- Urls of images, actions, etc are valid;
- Arrays are non-empty.
Documentation. Medium tutorial. Habr tutorial.
Telegram: News | English-speaking chat | Чат на русском.