boxels

Boxels

Boxels es una librería frontend diseñada para desarrollar aplicaciones web modernas del lado del cliente. Está construida con TypeScript y enfocada en bajo consumo, control total y excelente experiencia de desarrollo.

Incluye un sistema reactivo propio, un motor optimizado de ciclo de vida y renderizado para Single Page Applications (SPA), y una versión personalizada de JSX sin dependencias externas.

⚠️ Actualmente Boxels no soporta renderizado del lado del servidor (SSR). Esta funcionalidad está en evaluación para futuras versiones.

📄 La documentación detallada y técnica de cada módulo se encuentra en la carpeta ./docs/**.

Este proyecto cuenta con un Código de Conducta. Por favor, revísalo antes de contribuir.

Soporte Multiplataforma

Boxels incluye soporte para desarrollar aplicaciones multiplataforma mediante un módulo especial ubicado en boxels/multiplatform.

Este módulo proporciona wrappers y extensiones para funcionalidades nativas en:

• Web
• Ionic (Capacitor)
• Electron

Todas las plataformas comparten la misma semántica y API base. El sistema selecciona automáticamente la implementación adecuada en tiempo de ejecución.

Algunas funcionalidades incluidas:

• Acceso a cámara (useCamera)
• Almacenamiento clave-valor (store)
• Cliente HTTP con cancelación y transformaciones (httpClient)
• Notificaciones nativas (notifier)

El módulo multiplatform está diseñado para ser extensible y respetar la filosofía de bajo acoplamiento de Boxels.

Tabla de Contenidos

• Instalación
• Características
• Inicio Rápido
• Cómo Contribuir
• Colaboradores
• Licencia

Instalación

Instala Boxels usando npm:

npm install boxels

Requiere Node.js v18 o superior.

Características

• JSX personalizado sin dependencias externas.
• Sistema reactivo integrado: signal, computed, effect, persistentSignal.
• Componentes base: <Show>, <For>, <Lazy>, <RouterOutlet>, <Fragment>.
• Manejo de formularios con validación reactiva.
• Enrutador integrado con manejo de rutas, estado e historial.
• Ciclo de vida declarativo: $lifecycle:mount, $lifecycle:unmount, etc.
• Comunicación entre componentes mediante canales reactivos.
• Utilidades modernas: manejo de estilos, almacenamiento persistente, cliente HTTP con cancelación, entre otras.
• Cero dependencias externas innecesarias.

Inicio Rápido

import { mount } from 'boxels/dom';

const App = () => (
    <main>
        <h1>Hola desde Boxels 👋</h1>
    </main>
);

mount(document.body, App());

Cómo Contribuir

¿Tienes ideas, mejoras o encontraste un bug? ¡Tu ayuda es bienvenida! Sigue estos pasos para contribuir:

• Revisa los issues abiertos.

• Haz un fork del repositorio.

• Crea una rama con tu cambio:

  git checkout -b feature/mi-cambio
  

• Realiza tus cambios y haz commit:

  git commit -m "feat: agrega nueva funcionalidad"
  

• Haz push y abre un Pull Request.

Consulta la guía de contribución para más detalles.

Colaboradores

Agradecemos a todas las personas que han contribuido a Boxels:

kkokotero

¿Quieres aparecer aquí? ¡Envía tu PR!

Licencia

Este proyecto está licenciado bajo la MIT License.