Release version 1.4.5 🚀

Update new README

Release version 1.4.4 🚀

🚀 Release Notes v1.4.4 - useHttpRequest Opcional

✨ Nueva Característica Principal: HTTP Opcional via Dependency Injection

🎯 Lo Que Cambió

useHttpRequest ahora es completamente opcional mediante inyección de dependencia. Puedes usar el hook de dos formas:

Modo Básico (Sin HTTP):

const [target, handleTarget, handleSubmit, errors] = useTargetHandler(
  initialValues,
  validationRules
);
// ✅ No necesita usehttprequest
// ✅ No necesita variables de entorno

Modo Completo (Con HTTP):

import { useHttpRequest } from "usehttprequest";

const [target, handleTarget, handleSubmit, errors, httpRequest] = useTargetHandler(
  initialValues,
  validationRules,
  { storageType: "local" },
  { enableCSRF: true },
  useHttpRequest  // ← Inyección explícita
);

// Acceso completo a apiCall, isLoading, Sentry, etc.

---

🎉 Beneficios

1. Flexibilidad Total

• ✅ Proyectos pequeños: Solo validación de formularios
• ✅ Proyectos grandes: Full HTTP + Sentry + CSRF
• ✅ El usuario decide qué necesita

2. Sin Breaking Changes

• ✅ Totalmente retrocompatible
• ✅ Los proyectos existentes siguen funcionando
• ✅ API intuitiva y fácil de adoptar

3. Type-Safe

• ✅ TypeScript infiere correctamente los tipos
• ✅ Autocompletado funciona perfectamente
• ✅ Zod integration completa

---

📦 Instalación

npm install usetargethandler@1.5.0

# Opcional (solo si necesitas HTTP):
npm install usehttprequest

---

📚 Documentación Actualizada

• ✅ Nuevos ejemplos de uso en ambos modos
• ✅ Ejemplo completo de Login Form con apiCall
• ✅ Referencia de métodos HTTP (GET, POST, PUT, DELETE, PATCH)
• ✅ Guía clara de cuándo usar cada modo

---

🔧 Cambios Técnicos

Arquitectura:

• Nuevo parámetro opcional: httpHook?: (enableCSRF?: boolean) => UseHttpRequestReturn
• Inyección de dependencia en lugar de import estático
• useMemo para optimizar funciones callback
• Sin breaking changes en la API existente

Package.json:

• usehttprequest movido a peerDependencies opcional
• No está en dependencies ni optionalDependencies
• El usuario instala solo si lo necesita

Código Limpio:

• Sin mocks explícitos en el código
• Sin helpers complejos de importación dinámica
• Arquitectura más mantenible y testeable

---

🚀 Migration Guide

Si ya usas el hook:

// ✅ Sigue funcionando igual
import { useTargetHandler } from "usetargethandler";

// Ahora puedes opcionalmente NO usar HTTP features
// o explícitamente pasarlas:
import { useHttpRequest } from "usehttprequest";

const form = useTargetHandler(
  values,
  rules,
  storage,
  security,
  useHttpRequest  // ← Agregar este parámetro
);

Si SOLO necesitas validación:

// ✅ Nuevo: Puedes omitir usehttprequest completamente
const form = useTargetHandler(values, rules);
// No instales usehttprequest, no configures .env

---

🐛 Fixes Incluidos

• ✅ Resuelve error de React Hooks condicionales
• ✅ Mejor manejo de campos numéricos con Zod (z.coerce.number())
• ✅ safeParse en lugar de parse para mejor manejo de errores Zod
• ✅ Optimización de renders con useMemo

---

📊 Stats

• Tamaño del paquete: Más ligero sin dependencias obligatorias
• TypeScript: 100% type-safe
• Compatibilidad: React >=16.8.0
• Zero Breaking Changes: ✅

---

🙏 Agradecimientos

Esta actualización hace que useTargetHandler sea más versátil y accesible para todo tipo de proyectos, desde simples formularios hasta aplicaciones complejas con full HTTP stack.

---

¿Preguntas, bugs o sugerencias?
👉 GitHub Issues
👉 npm Package

Release version 1.4.3 🚀

🚀 Release v1.4.3 - useHttpRequest es Ahora Opcional

✨ Nueva Característica Principal

usehttprequest convertido en dependencia opcional

Ya NO es necesario instalar usehttprequest ni configurar variables de entorno para usar useTargetHandler. Perfecto para proyectos que solo necesitan validación de formularios sin funcionalidades HTTP.

---

🎯 Cambios Implementados

1. Dependencia Opcional

• Movido usehttprequest de dependencies a optionalDependencies
• El paquete funciona completamente sin instalarlo
• Las funcionalidades HTTP están disponibles solo si se instala

2. Importación Inteligente

• Nuevo módulo httpRequestHelper.ts que detecta si usehttprequest está disponible
• Fallback automático a valores por defecto cuando no está instalado
• Sin errores ni warnings si faltan variables de entorno

3. Documentación Actualizada

• Sección clara en README explicando configuración opcional
• Instrucciones para uso básico (solo validación)
• Instrucciones para uso avanzado (con HTTP/Sentry)

4. Limpieza del Repositorio

• Archivos dist/ eliminados del control de versiones
• .gitignore actualizado correctamente
• Archivos de build ya no contaminan el repositorio

---

📦 Casos de Uso

Caso 1: Solo Validación (Instalación Mínima)

npm install usetargethandler

✅ Funciona sin configuración adicional
✅ No requiere variables de entorno
✅ Instalación más rápida y ligera

Caso 2: Con Funcionalidades HTTP

npm install usetargethandler usehttprequest

Luego crear .env:

VITE_API_URL=https://tu-api.com

✅ Acceso a isLoading, Sentry, llamadas API

---

🔄 Compatibilidad

• ✅ Sin breaking changes: Proyectos existentes siguen funcionando igual
• ✅ Retrocompatible: Si ya tienes usehttprequest instalado, todo funciona como antes
• ✅ Flexible: Elige qué funcionalidades necesitas

---

📊 Tamaño del Paquete

• Paquete npm: 19.0 kB (antes: 21.9 kB)
• Descomprimido: 67.5 kB
• Archivos: 12 archivos totales

---

📥 Instalación

npm install usetargethandler@1.4.3
# o
npm update usetargethandler

---

📚 Documentación

• README completo
• CHANGELOG
• npm package

---

🙏 Nota de Agradecimiento

Esta actualización hace que useTargetHandler sea más flexible y fácil de usar para proyectos de cualquier tamaño. ¡Gracias por usar el paquete!

---

¿Preguntas o problemas? Abre un issue en GitHub

Release version 1.4.2 🚀

🚀 Release v1.4.2 - Source Maps Fix

🐛 Bug Fixes

Removed Source Maps from Production Build

• Disabled source map generation to prevent warnings about missing src/ files
• Resolves: Failed to parse source map errors in consuming projects
• Reduced package size by ~57 kB

🛠 Technical Changes

• Updated tsconfig.build.json: Set sourceMap: false and declarationMap: false
• Clean production build without unnecessary map files

📦 Package Size

• Before: ~79 kB
• After: ~22 kB (compiled code only)

🔄 Compatibility

• No breaking changes
• Fully backward compatible with v1.4.0 and v1.4.1

📥 Update

npm install usetargethandler@1.4.2

Release version 1.4.1 🚀

🚀 Release v1.4.1 - Critical Fix for useHttpRequest Import

🐛 Bug Fixes

Fixed useHttpRequest Import Issue

• Resolved critical runtime error: export 'default' (imported as 'useHttpRequest') was not found in 'usehttprequest'
• Updated type declarations to support both named and default exports for better compatibility
• Ensured backward compatibility with existing implementations

🛠 Technical Details

• File Modified: src/usehttprequest.d.ts
• Changes:
  • Added named export support while maintaining default export
  • Fixed TypeScript type definitions

🔄 Compatibility

• Backward Compatible: Yes
• Breaking Changes: No

📦 How to Update

npm install usetargethandler@1.4.1
# or
npm update usetargethandler

📝 Note

This is a critical fix for all users of v1.4.0. Please update to v1.4.1 as soon as possible.

---

GitHub Release Notes: View Full Changelog

Release version 1.4.0 🚀

📝 Descripción para el Release v1.4.0

Usa esta descripción cuando crees el release en GitHub:

---

🚀 Release v1.4.0 - Zod Integration & Security Improvements

🔷 Zod Integrado (Nueva Característica Principal)

Zod ahora viene incluido en el paquete - no necesitas instalarlo por separado.

import { useTargetHandler, z } from "usetargethandler";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6)
});

const [target, handleTarget, handleSubmit, errors] = useTargetHandler(
  { email: "", password: "" },
  schema  // ← Detección automática
);

Características de Zod:

• ✅ Detección automática de schemas (sin configuración)
• ✅ Conversión automática de errores al formato de useTargetHandler
• ✅ Validaciones complejas con .refine()
• ✅ Transformaciones con .transform()
• ✅ Inferencia de tipos con z.infer<typeof schema>

---

🔒 Mejoras de Seguridad

• DOMPurify integrado: Sanitización XSS robusta que elimina scripts maliciosos, event handlers, y protege contra inyecciones SVG/XML
• Configuración estricta: Sin tags HTML ni atributos permitidos en los inputs

---

🛠️ Mejoras Técnicas

• Código modernizado: Refactorizado con import en lugar de require
• TypeScript completo: Tipos actualizados y mejorados
• Documentación actualizada: Nuevos ejemplos con Zod, guía de seguridad completa

---

📦 Dependencias

• zod: Ahora incluido como dependencia del paquete
• dompurify: Para sanitización XSS

---

📚 Documentación

• Nueva sección completa de ejemplos con Zod en README
• Guía de Seguridad detallada (XSS, CSRF, SQL Injection)
• CHANGELOG actualizado con todos los cambios

---

🔄 Compatibilidad

• ✅ Sin breaking changes: ValidationRules nativas siguen funcionando igual
• ✅ Dual package: Compatible con JavaScript y TypeScript
• ✅ Retrocompatible: Proyectos existentes funcionan sin cambios

---

📥 Instalación

npm install usetargethandler@1.4.0
# o
npm update usetargethandler

---

🔗 Enlaces

• README completo
• CHANGELOG
• npm package

---

Gracias por usar useTargetHandler! 🎉

Version 1.2.5 🚀

Versión 1.2.5 - Mejoras en Manejo de Errores y Sentry 🎉

Resumen

Esta versión incluye importantes mejoras en el manejo de errores y la integración con Sentry en el hook useTargetHandler. Se solucionó un problema donde los errores no se capturaban correctamente, lo que permite un mejor seguimiento y manejo de excepciones en la aplicación. Además, se optimizó el rendimiento general del hook, asegurando una experiencia de usuario más fluida y eficiente. 🚀

Cambios

• Integración Mejorada con Sentry 🛠️: useTargetHandler ahora se integra de forma más fluida con Sentry, permitiendo registrar advertencias, errores, información y eventos específicos durante el proceso de envío de formularios. Esto facilita el seguimiento de problemas y la depuración de errores.
• Nuevos Parámetros ➕: Se han agregado los siguientes parámetros a useTargetHandler:
  • SentryWarning: Permite registrar advertencias en Sentry. ⚠️
  • SentryError: Permite registrar errores en Sentry. ❌
  • SentryInfo: Registra información relevante en Sentry durante el proceso de envío. ℹ️
  • SentryEvent: Registra eventos específicos en Sentry. 🎊
• Optimización del Rendimiento ⚡: Se han realizado mejoras en el rendimiento general del hook useTargetHandler, asegurando una experiencia de usuario más fluida y eficiente.
• Manejo de Errores Mejorado 🔧: Se solucionó un problema donde los errores no se capturaban correctamente, lo que permite un mejor seguimiento y manejo de excepciones en la aplicación.

Beneficios

• Mejor seguimiento y manejo de errores gracias a la integración con Sentry. 📊
• Facilidad para depurar problemas y analizar el comportamiento del usuario. 🔍
• Experiencia de usuario mejorada gracias a las optimizaciones de rendimiento. 🌟

Actualización

Para actualizar a la versión 1.2.5, simplemente instala la última versión del paquete que contiene useTargetHandler. Si estás utilizando npm:

npm install usetargethandler@latest

Después de la actualización, useTargetHandler estará listo para usar con las nuevas funcionalidades de Sentry y las mejoras de rendimiento. 🎈

version 1.2.4 🚀

Release de la Versión 1.2.4 de useTargetHandler

[1.2.4] - 2024-08-10

Mejoras y Nuevas Funcionalidades 🚀

🌟 Limitación de Tasa (Rate Limiting)

• Descripción: Se ha implementado una funcionalidad de limitación de tasa que previene el envío excesivo de solicitudes en un corto período de tiempo.
• Funcionalidad: Ahora puedes establecer un intervalo de tiempo mínimo entre envíos de formularios, mejorando la experiencia del usuario y la estabilidad del servidor.
• Uso: Ajusta el parámetro rateLimit al utilizar el hook para definir el tiempo de espera entre envíos, evitando la sobrecarga del servidor.

🛡️ Sanitización de Entradas

• Descripción: La función de sanitización de entradas ha sido mejorada para proteger contra ataques de inyección de código.
• Funcionalidad: La función sanitizeInput elimina etiquetas HTML y scripts potencialmente dañinos de los valores de entrada, asegurando que solo se almacenen datos limpios y seguros.
• Impacto: Esto es crucial para prevenir ataques de Cross-Site Scripting (XSS), garantizando que los datos procesados en el frontend no contengan contenido malicioso.

🚫 Protección contra Inyecciones SQL

• Descripción: Se ha implementado una sanitización de entradas que ayuda a prevenir inyecciones SQL.
• Funcionalidad: Asegura que los datos enviados a las API estén debidamente filtrados, lo que es especialmente importante al trabajar con APIs que pueden realizar operaciones de base de datos.
• Impacto: Mejora la seguridad general de la aplicación al proteger contra posibles vulnerabilidades, asegurando que las entradas de los usuarios no comprometan la integridad de la base de datos.

📚 Documentación

• Documentación Actualizada: Se han agregado ejemplos claros en la documentación para facilitar la implementación de las nuevas funcionalidades de seguridad y gestión de formularios.

🐛 Correcciones

• Se realizaron diversas correcciones menores para mejorar la estabilidad y el rendimiento del hook.

🚀 Recomendaciones

Se recomienda a todos los usuarios actualizar a la versión 1.2.4 para aprovechar las mejoras en la seguridad, la gestión de formularios y la protección contra inyecciones SQL.

Version 1.2.3 🚀

Release Note: Protección CSRF en useTargetHandler 1.2.3

Descripción

La versión 1.2.3 del hook useTargetHandler introduce una mejora significativa en la seguridad de las aplicaciones React al implementar la protección contra CSRF (Cross-Site Request Forgery) en las solicitudes a la API. Esta nueva funcionalidad ayuda a prevenir ataques CSRF maliciosos, asegurando que las interacciones del usuario sean legítimas y autorizadas.

Características Principales

• Protección CSRF: Se ha añadido la opción enableCSRF que permite activar o desactivar la protección CSRF en las solicitudes a la API. Cuando se establece en true, el hook incluirá automáticamente el token CSRF en las solicitudes que modifican datos (POST, PUT, DELETE), ayudando a prevenir ataques CSRF.

• Integración con useHttpRequest: La protección CSRF se implementa a través del hook useHttpRequest, que se encarga de manejar las llamadas HTTP a la API. Cuando enableCSRF está activado, useHttpRequest incluirá el token CSRF en las solicitudes relevantes.

• Configuración Flexible: El parámetro enableCSRF permite a los desarrolladores controlar si desean activar o desactivar la protección CSRF según las necesidades de su aplicación. Esto brinda flexibilidad y control sobre la seguridad de las interacciones del usuario con la API.

Ejemplo de Uso

import React from "react";
import useTargetHandler from "./useTargetHandler"; // Asegúrate de que la ruta sea correcta

const MyForm = () => {
  const initialValues = {
    nombre: "",
    apellido: "",
    email: "",
    password: "",
    confirmPassword: "",
    age: "",
    terms: false,
    ciudad: "",
    gender: "",
  };

  const validationRules = {
    nombre: {
      required: true,
      requiredMessage: "El nombre es obligatorio !!!",
      pattern: /^[a-zA-Z]+$/,
      patternMessage: "No puede tener o llevar números",
    },
    // ... Otras reglas de validación
  };

  const [
    target,
    handleTarget,
    handleSubmit,
    errors,
  ] = useTargetHandler(initialValues, validationRules, "local", "formData", true); // Activar CSRF

  const onSubmit = () => {
    console.log("Datos enviados:", target);
    // Aquí puedes realizar la llamada a la API o cualquier otra acción
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="nombre"
        value={target.nombre}
        placeholder="Nombre"
        onChange={handleTarget}
      />
      {errors.nombre && <span>{errors.nombre.message}</span>}

      {/* Resto de los campos del formulario */}

      <button type="submit">Enviar</button>
    </form>
  );
};

export default MyForm;

Conclusión

La versión 1.2.3 de useTargetHandler introduce una mejora crucial en la seguridad de las aplicaciones React al implementar la protección CSRF. Al activar esta funcionalidad, los desarrolladores pueden estar seguros de que las interacciones del usuario con la API son legítimas y están protegidas contra ataques CSRF. Esta actualización refuerza la solidez y confiabilidad del hook useTargetHandler para la gestión de formularios en aplicaciones React.

Version 1.2.2 🚀

🚀 Release 1.2.2

Resumen

La versión 1.2.2 de useTargetHandler se enfoca en mejorar la validación de la edad y el manejo de errores en el envío de formularios. También se han optimizado las validaciones para mejorar la legibilidad y mantenibilidad del código.

Novedades

✨ Mejoras

• Validación de Edad: Se ha mejorado la validación de la edad en el hook useTargetHandler. Ahora se verifica que el valor de la edad sea un número y esté dentro del rango especificado.

• Manejo de Errores en el Envío: Se ha agregado un mejor manejo de errores en la parte donde se envían los datos en handleSubmit. Ahora se capturan y manejan adecuadamente los errores que puedan ocurrir durante el proceso de envío.

• Optimización de Validaciones: Se han dividido las validaciones en funciones más pequeñas para cada tipo de validación, mejorando la legibilidad y mantenibilidad del código.

📚 Documentación

• Documentación Actualizada: Se han agregado ejemplos claros en la documentación para facilitar la implementación de las mejoras en la validación de edad y el manejo de errores en el envío.

Correcciones

• Se realizaron diversas correcciones menores para mejorar la estabilidad y el rendimiento del hook.

Instrucciones de Actualización

Para actualizar a la versión 1.2.2, sigue estos pasos:

1. Actualiza la dependencia de useTargetHandler en tu proyecto a la versión 1.2.2.

2. Revisa la documentación actualizada para ver ejemplos de cómo implementar las mejoras en la validación de edad y el manejo de errores en el envío.

3. Asegúrate de que tu código utilice las nuevas funcionalidades y correcciones para aprovechar al máximo las mejoras de esta versión.

Problemas Conocidos

No se han reportado problemas conocidos en esta versión.

Próximos Pasos

El equipo de desarrollo de useTargetHandler está trabajando en nuevas características y mejoras para futuras versiones. Mantente atento a los próximos lanzamientos.

¡Disfruta de la nueva versión 1.2.2!