Isolated and special variables

To create a component that renders values ​​in isolation in each rendering we must pass a second argument to the function that creates components, this must be an object with the properties that will be isolated:

import { _ } from "bemtv";

_`Counter`({ count: 0 });

These properties behave like isolated variables for each component render.

We will now refer to these variables as compVars(component variables)

Handling compVars

After creating the component and the compVars they are available through an object and accessible by the $ symbol, with which we can access, change the values ​​of the properties and add others.

This is a special object that can only be used in known callbacks of the component instance, it will normally be used in Hooks and in callbacks in DOM events.

import { _ } from "bemtv";

const { onInit, $ } = _`Counter`({ count: 0 });

onInit(() => {
  console.log($.count);
});

The responsibility of this object is to keep the values ​​isolated for each rendering of the component and only when necessary to create clones of data structures such as Array, Map, Set and Object.

Using compVars in the template

To use compVars in the template we will use a special shortcut, using $ plus the property name/path:

import { _ } from "bemtv";

const { $, template } = _`Hero`({
  hero: {
    name: "Black Panther",
  },
});

template`button[Clicked: $hero.name ]`;

To mark the property as optional just add a ? to the end:

template`button[Clicked: $hero.name? `;

Variables that are attributes

If a variable has the same name as an attribute and its value is intended for it, we can use the @ and the variable name so that it is used as the attribute name and value:

import { _ } from "bemtv";

const { $, template } = _`Img`({
  src: "avatar.png",
  data: {
    alt: "User avatar",
  },
});

template`img[ @src @data.alt ]`;