Implementación de Signals en Librería Reactiva Solid

¿Qué son los signals y por qué son importantes?

Los signals son una de las primitivas reactivas más importantes en nuestro sistema reactivo. No solo funcionan por sí mismos, sino que interactúan con un amplio espectro de primitivas reactivas como los effects y los memos. Entender cómo funcionan los signals es crucial para desarrollar aplicaciones reactivas eficientes. Este conocimiento no solo mejora nuestra comprensión teórica, sino que también nos ayuda a implementar una sintaxis clara y útil para los usuarios finales de nuestras bibliotecas.

¿Cómo implementar un signal en JavaScript?

Para implementar un signal, lo primero que debemos definir es la sintaxis que queremos ofrecer a los desarrolladores. Ahora bien, sigamos una metodología similar a la utilizada en Solid.js para facilitar la interacción:

import { createSignal } from 'platzi-solid';

const [getCount, setCount] = createSignal(0); // Creación del signal con un valor inicial

1. Definir la sintaxis de creación: Creamos una función llamada createSignal que inicializa el signal con un valor predeterminado.
2. Lectura y escritura: Utilizamos un array para devolver dos funciones, una para leer el valor actual y otra para modificarlo.

¿Cómo integrar signals en una aplicación?

Cuando integramos signals en una aplicación, es común querer reflejar cambios en el HTML, por ejemplo, actualizando un contador cada vez que el usuario hace clic en un botón.

Pasos para implementar un contador utilizando signals:

• Selecciona el elemento HTML deseado con querySelector.
• Añade un listener para manejar el evento de clic.
• Usa las funciones de lectura y escritura para manipular el valor del signal.

document.querySelector('button').addEventListener('click', () => {
  setCount((currentCount) => currentCount + 1); // Incrementa el contador
});

¿Cómo funciona el debugging con signals?

El debugging con signals es crucial para asegurar que la lógica funcione correctamente. Podemos usar console.log para verificar la actividad de nuestros signals durante su ejecución.

Ejemplo de debugging:

function readSignal() {
  console.log('Leyendo el valor del signal');
  return value; // Retorna el valor actual del signal
}

function writeSignal(newValue) {
  console.log(`Escribiendo nuevo valor: ${newValue}`);
  value = newValue; // Modifica el valor del signal
}

Estas funciones de console.log te ayudarán a observar cuándo se lee o modifica el valor del signal, facilitando la comprensión de su flujo de datos.

¿Cuál es la sintaxis ergonómica en Solid?

Solid.js ofrece una sintaxis más ergonómica para manejar los signals permitiendo pasar funciones directamente al setter del signal. Esto es útil cuando quieres modificar el valor del signal sin especificar el valor exacto, dado que el setter ya sabe cuál es el valor actual.

Implementación de la sintaxis ergonómica:

En lugar de escribir algo así:

setCount(getCount() + 1);

Podemos usar la sintaxis ergonómica:

setCount((currentCount) => currentCount + 1);

Esta sintaxis no solo facilita la escritura de código más limpio y conciso, sino que también mejora la mantenibilidad al abstraer detalles innecesarios sobre el valor actual del signal en cada operación de modificación.