lit

Simple. Rápido. Componentes web.

Lit es una biblioteca sencilla para crear componentes web rápidos y ligeros.

En el núcleo de Lit hay una clase base de componentes que elimina los textos estándar y que proporciona estado reactivo, estilos con alcance y un sistema de plantillas declarativas que es pequeño, rápido y expresivo.

Documentación

Consulte la documentación completa de Lit en lit.dev.

Puede encontrar documentación adicional para desarrolladores que deseen contribuir o comprender más sobre el proyecto en dev-docs .

npm

Para instalar desde npm:

npm i lit

Monorepo iluminado

Este es el monorepo para paquetes Lit.

La fuente lit 2.x está disponible en la rama 2.x La fuente lit-html 1.x está disponible en la rama lit-html-1.x .

Paquetes

• Paquetes principales
  • lit : el paquete principal de Lit para el usuario que incluye todo, desde lit-html y lit-element.
  • lit-element : la clase base del componente web utilizada en Lit.
  • lit-html : la biblioteca de renderizado utilizada por LitElement.
  • @lit/reactive-element : una clase base de bajo nivel que proporciona un ciclo de vida reactivo basado en cambios de atributos/propiedades.
• Bibliotecas adicionales
  • @lit/localize : una biblioteca y una herramienta de línea de comandos para localizar aplicaciones web creadas con Lit.
  • @lit/localize-tools : herramientas de localización para usar con @lit/localize .
  • @lit/react : un contenedor de componentes React para componentes web.
  • @lit/task : un controlador para Lit que genera tareas asincrónicas.
  • @lit/context : un sistema para pasar datos a través de un árbol de elementos usando eventos del navegador, evitando la necesidad de pasar propiedades a cada capa del árbol usando un protocolo definido por la comunidad.
• laboratorios
  • @lit-labs/ssr : un paquete de servidor para renderizar plantillas y componentes de Lit en el servidor.
  • @lit-labs/ssr-client : un conjunto de módulos de soporte del lado del cliente para renderizar componentes y plantillas de Lit en el servidor usando @lit-labs/ssr .
  • @lit-labs/eleventy-plugin-lit : un complemento para Eleventy que renderiza previamente los componentes de Lit usando @lit-labs/ssr con hidratación opcional.
  • @lit-labs/ssr-react : un paquete para integrar Lit SSR con los marcos React y React.
  • @lit-labs/nextjs : un complemento para Next.js que permite la representación profunda del servidor de componentes Lit con Lit SSR.
  • @lit-labs/router - Un enrutador para Lit.
  • @lit-labs/motion - Directrices iluminadas para hacer que las cosas se muevan
  • @lit-labs/scoped-registry-mixin : un mixin para LitElement que se integra con el polirelleno especulativo Scoped CustomElementRegistry.
  • @lit-labs/observers : un conjunto de controladores reactivos que facilitan el uso de los objetos de observación de la plataforma.
  • @lit-labs/preact-signals - Integración de Preact Signals para Lit.
  • @lit-labs/testing - Utilidades para probar componentes Lit.
  • @lit-labs/virtualizer : virtualización basada en ventanas gráficas (incluido el desplazamiento virtual).
  • @lit-labs/compiler : un compilador para optimizar plantillas de Lit.
• Kits de inicio (no publicados en npm)
  • lit-starter-ts (repositorio de plantillas): un repositorio inicial para crear componentes reutilizables utilizando Lit en TypeScript.
  • lit-starter-js (repositorio de plantillas): un repositorio inicial para crear componentes reutilizables utilizando Lit en JavaScript.
• Paquetes internos (no publicados en npm)
  • tests - Infraestructura de prueba para el monorepo.
  • benchmarks : puntos de referencia para probar varias bibliotecas en monorepo.
  • @lit-internal/scripts : scripts de utilidad utilizados dentro del monorepo.

Contribuyendo a la literatura

Lit es de código abierto y apreciamos los informes de problemas y las solicitudes de extracción. Consulte CONTRIBUTING.md para obtener más información.

Configurando el monorepo iluminado para el desarrollo.

Inicializar repositorio:

git clone https://github.com/lit/lit.git
cd lit
npm ci

Construya todos los paquetes:

npm run build

Pruebe todos los paquetes:

npm run test

Ejecute pruebas comparativas para todos los paquetes:

npm run benchmarks

Consulte los archivos README de paquetes individuales para obtener detalles sobre el desarrollo de un paquete específico.