Router(automatic routing)

A Router is used for navigation between views of various components in a Bemtv application, allows you to change the browser's URL and keeps the UI synchronized with the URL.

Bemtv uses an innovative automatic route creation system, this is possible because the components can behave like routes/pages.

Automatic routing

Bemtv is able to automatically figure out when a “normal” component should also be treated as a route:

A regular component:

import { _ } from "bemtv";

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

template`We are cool!`;

The component responsible for rendering the App:

import { _ } from "bemtv";

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

template`
      Welcome!  br[]br[]

      #[] br[]br[]
      
      #AboutUs[ Link to about us ]`;

render();

The second component uses the #[] symbol, it is within it that the routes are rendered.

Note the #AboutUs[...], this is where the “magic” happens. First, Bemtv will read the App component template and find that the AboutUs component is also a route (thanks to the # before it), and when the template is rendered, everything inside the #AboutUs[...] component will be wrapped in an a tag with the href attribute pointing to the route.

The route address will be the component name in kebab-case: /about-us.

When the user clicks on the link, the AboutUs component will be rendered in #[].

Bemtv will also figure out that the component is a route whenever we access some method of the component that targets routes, even if it is not called(thanks to Proxies).

Defining properties for the route

We can define properties to define the behavior of the route:

import { _ } from "bemtv";

const { route, template } = _`AboutUs`();

route({
  title: "About us!", // The title of the document.
  concat: "1234567/hey/89", // Allows you to concatenate a `string` in the route link
});

template`We are cool!`;

Going to the route

To render the route without a user action, we can use the renderRoute() method:

import { _ } from "bemtv";

const { renderRoute, template } = _`AboutUs`();

setTimeout(() => {
  renderRoute();
}, 3000);

template`We are cool!`;

Route/component Root

If you create a component with the name Root, it will be rendered whenever there is no other active route.