3. Signals (Reactivity) and Dynamic Render

Base

There are mechanisms in the framework that allow you to achieve application reactivity.
First, we need to understand how reactivity works:

The Signal is responsible for the reactivity. Signal returns a structure with the value property. Which, when changed, sends an event for changes in the Signal object. That allows to work with small details in the framework in a rather optimized way.

Practice:

import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";

export default comp((_, { text, $ }) => {
    // Creating Signal
    const counter = useSignal(0)

    // Creating button with click event and text like `Counter: ${counter.value}`
    $('button', { '@click': () => counter.value++ }, () => {
        text('Counter: ')
        text(counter)
    })
})

As Raw (Custom data for DOM)

To display your information in the DOM element. You can use the asRaw method in the configuration

import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";

export default comp((_, { text, $ }) => {
    const name = useSignal('jonh doe', {
        asRaw: value => `Hello ${value}!`
    })

    text(name)
})

And the output will be

<span>Hello jonh doe!</span>

Or another example:

import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";

export default comp((_, { text, $ }) => {
    const blockConfig = useSignal({}, {
        asRaw: value => `display: ${value.display}; width: ${display.width}em;`
    })

    blockConfig.display = 'flex'
    blockConfig.width   = 10

    $('div', { style: blockConfig }, () => {
        // ...Block content...
    })
})

And the output will be

<div style="display: flex; width: 10em;">
    <!--...Block content...-->
</div>

And all of the examples have reactivity