Transformation Functions

When storing values ​​in data structures like array, Map, Set or object we may want to create a markup (Brackethtml) and add it to the template, for that we can use transform functions that inject a property (using Symbol) into the data structure and tells Bemtv to transform the data structure only when used in the template.

To create a transformation function we use the tFn() function, it receives as its first argument a function that transforms the data structure and returns another function that involves the function passed as an argument:

import { tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

To use the function just pass a list and it will return the same list with a Symbol injected:

import { _, tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]`;

Whenever this list is changed (eg $.list.push(item)), Bemtv will detect and use the transform function again and rederize the change.

The transform functions can be incredibly powerful because with Brackethtml we can even return the markup with CSS-In-JS, so we can focus on the data structure.

Built-in transformation functions

import { tOl, tUl, tDl } from "bemtv";

// Works with arrays and Sets and transform them into an ordered list.
tOl([] || new Set());

// Works with arrays and Sets and transform them into an unordered list.
tUl([] || new Set());

// Works with objects and Maps and transform them into a definition list.
tDl({} || new Map());

Whenever you create a transformation function it is good practice to export the normal function that does the transform immediately:

import { toOl, toUl, toDl } from "bemtv";

// Works with arrays and Sets and transform them into an ordered list immediately.
toOl([] || new Set());

// Works with arrays and Sets and transform them into an unordered list immediately.
toUl([] || new Set());

// Works with objects and Maps and transform them into a definition list immediately.
toDl({} || new Map());