Integrar Proxy para crear mini framework reactivo

Crear reactividad sin dependencias es posible. Aquí verás cómo integrar JavaScript Proxy para observar accesos a propiedades, validar errores de uso y mantener un comportamiento por defecto en tu mini framework. La clave: diseñar un handler con trampas como get.

¿Cómo hacer reactividad con JavaScript proxy en un mini framework?

El patrón es simple: origen → proxy (trampas) → destino. El origen es tu objeto de estado; el destino es el mismo objeto, pero interceptado por trampas que controlan la lectura y escritura. Con esto puedes observar accesos, evitar errores silenciosos y preparar la reactividad.

¿Cómo se define el origen y el destino con proxy?

• El origen es un objeto con tus datos base.
• El destino es el resultado de crear un new Proxy(origen, handler).
• El handler es un objeto con trampas como get, set o has.

// Origen: el estado base.
const origen = {
  titulo: "Hola",
  descripcion: "Estado inicial",
};

// Destino: el mismo objeto, pero con trampas.
const data = new Proxy(origen, {
  get(target, name) {
    console.log('Acceso a propiedad:', name);
    if (name in target) {
      // Comportamiento por defecto.
      return target[name];
    }
    // Validación y experiencia de uso mejorada.
    console.warn(`La propiedad "${String(name)}" no existe.`);
    return ""; // Evitar undefined en el template.
  },
});

¿Qué estructura tiene la trampa get?

• Parámetros: target (el objeto origen) y name (propiedad solicitada).
• Lógica: decidir qué devolver al leer una propiedad.
• Resultado: puedes mantener el comportamiento por defecto o personalizar la respuesta.

¿Qué hace la trampa get y por qué aparece undefined?

Cuando interceptas con get, modificas la lectura de propiedades. Si no devuelves nada, obtendrás undefined en el template. Eso ocurrió al principio al solo imprimir en consola el target y el name.

¿Por qué tu template muestra undefined?

• Porque la trampa get no retornaba un valor.
• JavaScript asume undefined si no hay retorno.
• El template refleja ese undefined al pintar la UI.

¿Cómo mantener el comportamiento por defecto?

• Devuelve la propiedad del target cuando existe.
• Ejemplo: return target[name];.
• Si quieres respuestas personalizadas (por ejemplo, siempre "Platzi"), devuélvelo explícitamente.

// Retorno personalizado (ejemplo exploratorio):
const data = new Proxy(origen, {
  get(target, name) {
    return "Platzi"; // Siempre devuelve este string.
  }
});

// Comportamiento por defecto con validación:
const data = new Proxy(origen, {
  get(target, name) {
    if (name in target) return target[name];
    console.warn(`La propiedad "${String(name)}" no existe.`);
    return "";
  }
});

¿Qué habilidades y conceptos clave aplicarás con proxys?

Trabajar con proxys te permite controlar la lectura y escritura del estado con una sintaxis directa y extensible. Esto sienta las bases de la reactividad y mejora la DX de tu mini framework.

¿Qué habilidades técnicas practicas?

• Definir un origen y un destino con new Proxy.
• Implementar trampas como get para observar accesos.
• Mantener el comportamiento por defecto con target[name].
• Validar propiedades inexistentes y evitar undefined retornando "".
• Comunicar errores de uso con console.warn.

¿Qué keywords y conceptos debes recordar?

• Proxy: clase interna de JavaScript para interceptar operaciones.
• Handler: objeto con trampas como get, set, has.
• Trampa get: se ejecuta al leer una propiedad.
• Target y name: referencias al objeto origen y a la propiedad solicitada.
• Template: capa que dispara lecturas y muestra valores.
• Clon interceptado: el destino es "lo mismo" que el origen, pero con trampas.

¿Te gustaría ver ejemplos con otras trampas como set y has, o aplicar estas validaciones en tu componente PText? Comparte cómo lo usarías y qué casos te gustaría cubrir.