Componentes

Los componentes son los bloques de construcción para crear marcado JSX. Cada componente es una función que implementa el tipo PC (para componentes síncronos) o el tipo APC (para componentes asíncronos). El primer argumento de dicha función son los parámetros, y el segundo son las utilidades PreffX disponibles.

Características de implementación:

1. Reactividad: Utiliza el sistema de señales (@preact/signals-core) para crear y rastrear valores reactivos. Solo estos valores activan la renderización
2. Gestión del ciclo de vida: Ejecuta funciones de devolución de llamada al montar y desmontar componentes y elimina automáticamente los efectos
3. Paso de utilidades de PreffX como segundo argumento: Todo lo necesario se proporciona como parámetros; solo es necesario importar los tipos desde PreffX
4. Compatibilidad con funciones asíncronas: Funciona con funciones síncronas y asíncronas, renderizando automáticamente el árbol DOM cuando se resuelven las promesas

Implementación básica

La implementación más sencilla de un componente con un contador tiene este aspecto:

import type { PC } from 'preffx';

const MyComponent: PC = (props, { signal, computed }) => {
    const { initialCount = 0 } = props;
    const count = signal(initialCount);
    
    return (
        <div>
            <p>Counter: {count}</p>
            <button onClick={() => count.value++}>Increase</button>
        </div>
    );
};

const App: PC = () => {
    return <MyComponent
        initialCount={5}
    />;
};

Reactividad

Para garantizar la reactividad, se utilizan funciones implementadas sobre @preact/signals-core, por ejemplo:

• signal: crea una señal reactiva para el estado,
• computed: calcula valores dependientes,
• effect: gestiona los efectos secundarios.

Estas y otras funciones implementan completamente el comportamiento descrito en la documentación de Preact Signals.

Contexto del componente

Para cada instancia de componente, se crea un contexto que extiende el contexto principal. Este es un objeto regular que se puede obtener de las utilidades:

import type { PC } from 'preffx';

const contextKey = 'ctx-counter';

const AnotherComponent: PC = (props, { context }) => {
    // read context
    const counter = context[contextKey];
    return <span>
        {counter}
    </span>;
};

export const App: PC = (props, { signal, context }) => {
    const counter = signal(0);
    // modify context
    context[contextKey] = counter;
    return <p>
        {valueFromContext}
        <AnotherComponent />
    </p>;
};

Ciclo vital

Cada componente puede usar utilidades de ciclo de vida:

• onMount: se llama cuando el componente se monta, después de que sus elementos se agregan al árbol DOM;
• onDestroy: se llama cuando el componente se destruye, antes de que sus elementos se eliminen del árbol DOM.

import type { PC } from 'preffx';

export const App: PC = (props, { onMount, onDestroy }) => {
    const { count } = props;

    onMount(() => {
        // some mount logic
    });
    
    onDestroy(() => {
        // some destroy logic
    });
    return <button
        onClick={() => {
            count.value += 1
        }}
    >
        Count is {count}
    </button>
};

Generación de ID

La utilidad id permite generar identificadores únicos para su uso dentro de los componentes:

import type { PC } from 'preffx';

export const App: PC = (props, { id }) => {
    // get unique id
    const inputId = id();
    return <div>
        <label>
            Password:
            <input
                type="password"
                aria-describedby={inputId}
            />
        </label>
        <p id={inputId}>
            The password should contain at least 18 characters
        </p>
    </div>;
};