Integración con SolidJS

Effectify ofrece integraciones potentes para SolidJS que combinan la naturaleza reactiva de SolidJS con el tipado seguro y la componibilidad de Effect. Nuestros paquetes permiten construir aplicaciones de alto rendimiento y mantenibles con excelente experiencia de desarrollo.

Paquetes disponibles

@effectify/solid-query

Integración de Effect con TanStack Query para SolidJS. Proporciona obtención de datos con tipos seguros y manejo de errores con Effect y reactividad de SolidJS.

Más información →

@effectify/solid-ui

Biblioteca de componentes de UI construida con SolidJS, Kobalte y Tailwind CSS. Incluye formularios, layouts y componentes interactivos optimizados para SolidJS.

Más información →

@effectify/chat-solid

Componentes y servicios de chat en tiempo real para SolidJS. Construidos con Effect para estado robusto y SolidJS para actualizaciones reactivas.

Más información →

Primeros pasos

Inicio rápido

Ponte en marcha con Effectify en tu aplicación SolidJS en minutos.

Empezar →

Características clave

Reactivo por diseño: Aprovecha la reactividad granular de SolidJS
Tipos seguros: Soporte completo de TypeScript con Effect
Manejo de errores: Gestión robusta de errores con Effect
Rendimiento: Optimizado para compilación y runtime de SolidJS
Componibilidad: Construye aplicaciones complejas desde piezas componibles
Experiencia de desarrollo: Herramientas y depuración de primer nivel

¿Por qué SolidJS + Effect?

Reactividad granular: Primitivas de SolidJS funcionan con el flujo de datos de Effect
Optimizaciones de compilación: Ambas optimizan en tiempo de compilación
Programación funcional: Comparten principios funcionales
Seguridad de tipos: Fuerte soporte de TypeScript
Bundle pequeño: Prioridad a bajo overhead de runtime

Arquitectura

const fetchUser = (id: number) =>
  Effect.tryPromise({
    try: () => fetch(`/api/users/${id}`).then(res => res.json()),
    catch: (error) => new Error(`Failed to fetch user: ${error}`)
  })

function UserProfile(props: { userId: number }) {
  const [user] = createResource(
    () => props.userId,
    (id) => Effect.runPromise(fetchUser(id))
  )

  return (
    <Show when={user()} fallback={<div>Cargando...</div>}>
      <h1>{user()?.name}</h1>
    </Show>
  )
}

Comunidad y soporte

Ejemplos

SolidJS SPA: apps/solid-app-spa
SolidJS Start: apps/solid-app-start