No “props”!

Almost all libraries and user interface frameworks use the concept of props to pass data or customize the use of components, in Bemtv we have the concept of “component proxy” which is much more powerful because it offers access to the component we want to use, with this we can define or set properties, use its methods and export it to be used in other parts of the application.

There are two ways that allow us to access one component in another, they work the same way, the only difference is where they are imported from.

Let's create two components, the first is the App[] and the second is the Button[], in this example the App[] will make use of the Button[] :

import { _ } from "bemtv";

const { template } = _`App`();

template`Button[]`;

import { _ } from "bemtv";

const { template } = _`Button`({ bgColor: "blue" });

template`button[background-color: $bgColor; ~ I am a button!]`;

Note that our Button[] makes use of CSS-In-Template to define its background color and its definition is done through a compVar named bgColor.

When rendering our components, we would have a button with a blue background color, but what if we wanted another color?

proxy()

The first way is through the proxy() method, it is available in the instance of the component that we want to customize and we must import it in the component that will use it:

import { _ } from "bemtv";
import { proxy } from "./Button"

const { template } = _`App`();

template`Button[]`;

import { _ } from "bemtv";

export const { proxy, template } = _`Button`({ bgColor: "blue" });

template`button[background-color: $bgColor; ~ I am a button!]`;

We changed our example so that Button[] exports its methods and App[] imports them.

When we call the proxy() method we have access to an object that simulates the operation of the component from which it was imported, basically we have access to the component:

import { _ } from "bemtv";
import { proxy } from "./Button"

const { template } = _`App`();
const ButtonProxy = proxy();

template`${ButtonProxy}[]`;

We change the App[] to use the proxy() method, and in the template we replace the name of the component with the return of proxy() by doing this we bind our proxy object to the instance of the component we want to use.

This object has a “key” property that bemtv automatically accesses when the template is defined as a TemplateStringsArray.

Now that we have access to the component we can simply change the bgColor property:

import { _ } from "bemtv";
import { proxy } from "./Button"

const { template } = _`App`();
const ButtonProxy = proxy();

ButtonProxy.$.bgColor = "red";

template`${ButtonProxy}[]`;

Maybe you're wondering why all this work to change a property? But as we can see, we have direct access to the instance of the component we want and with that we can make use of all that it offers, in addition to being able to export the ButtonProxy variable to other parts of the application.

proxyFrom()

The only difference to the proxy() method is that the proxyFrom() function is imported from the main module and takes the component name as an argument:

import { _, proxyFrom } from "bemtv";

const { template } = _`App`();

const ButtonProxy = proxyFrom`Button`;

ButtonProxy.$.bgColor = "red";

template`${ButtonProxy}[]`;

When using TypeScript the proxy() method has an advantage as it already comes with the compVars types defined.