lit

Простой. Быстрый. Веб-компоненты.

Lit — простая библиотека для создания быстрых и легких веб-компонентов.

В основе Lit лежит базовый класс компонентов, уничтожающих шаблоны, который обеспечивает реактивное состояние, стили с ограниченной областью действия и систему декларативных шаблонов, небольшую, быструю и выразительную.

Документация

Полную документацию по Lit см. на сайтеlit.dev.

Дополнительную документацию для разработчиков, желающих внести свой вклад или узнать больше о проекте, можно найти в dev-docs .

НПМ

Для установки из npm:

npm i lit

Лит Монорепо

Это монорепозиторий для пакетов Lit.

Исходный код Lit 2.x доступен в ветке 2.x Исходный кодlit-html 1.x доступен в lit-html-1.x .

Пакеты

• Основные пакеты
  • lit — основной пакет Lit, ориентированный на пользователя, который включает в себя все, отlit-html иlit-element.
  • lit-element — базовый класс веб-компонента, используемый в Lit.
  • lit-html — библиотека рендеринга, используемая LitElement.
  • @lit/reactive-element — базовый класс низкого уровня, обеспечивающий реактивный жизненный цикл, основанный на изменениях атрибутов/свойств.
• Дополнительные библиотеки
  • @lit/localize — библиотека и инструмент командной строки для локализации веб-приложений, созданных с использованием Lit.
  • @lit/localize-tools — инструменты локализации для использования с @lit/localize .
  • @lit/react — оболочка компонента React для веб-компонентов.
  • @lit/task — контроллер для Lit, который выполняет асинхронные задачи.
  • @lit/context — система передачи данных через дерево элементов с помощью событий браузера, позволяющая избежать необходимости передавать свойства на каждый уровень дерева с использованием протокола, определенного сообществом.
• Лаборатории
  • @lit-labs/ssr — серверный пакет для рендеринга шаблонов и компонентов Lit на сервере.
  • @lit-labs/ssr-client — набор модулей поддержки на стороне клиента для рендеринга компонентов и шаблонов Lit на сервере с помощью @lit-labs/ssr .
  • @lit-labs/eleventy-plugin-lit — плагин для Eleventy, который предварительно визуализирует компоненты Lit с использованием @lit-labs/ssr с дополнительной гидратацией.
  • @lit-labs/ssr-react — пакет для интеграции Lit SSR с React и фреймворками React.
  • @lit-labs/nextjs — плагин для Next.js, который обеспечивает глубокий серверный рендеринг компонентов Lit с помощью Lit SSR.
  • @lit-labs/router — Маршрутизатор для Лит.
  • @lit-labs/motion — директивы Lit, позволяющие заставить вещи двигаться.
  • @lit-labs/scoped-registry-mixin — примесь для LitElement, которая интегрируется с спекулятивным полифилом CustomElementRegistry с областью действия.
  • @lit-labs/observers — набор реактивных контроллеров, упрощающих использование объектов-наблюдателей платформы.
  • @lit-labs/preact-signals — интеграция Preact Signals для Lit.
  • @lit-labs/testing — Утилиты для тестирования компонентов Lit.
  • @lit-labs/virtualizer — виртуализация на основе области просмотра (включая виртуальную прокрутку).
  • @lit-labs/compiler — Компилятор для оптимизации шаблонов Lit.
• Стартовые наборы (не опубликованы в npm)
  • lit-starter-ts (репозиторий шаблонов) — стартовый репозиторий для создания повторно используемых компонентов с использованием Lit в TypeScript.
  • lit-starter-js (репозиторий шаблонов) — стартовый репозиторий для создания повторно используемых компонентов с использованием Lit в JavaScript.
• Внутренние пакеты (не публикуются в npm)
  • tests — Тестовая инфраструктура для монорепозитория.
  • benchmarks — Бенчмарки для тестирования различных библиотек в монорепозитории.
  • @lit-internal/scripts — служебные скрипты, используемые в монорепозитории.

Вклад в лит.

Lit имеет открытый исходный код, и мы ценим отчеты о проблемах и запросы на включение изменений. См. CONTRIBUTING.md для получения дополнительной информации.

Настройка освещенного монорепозитория для разработки

Инициализировать репо:

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

Соберите все пакеты:

npm run build

Протестируйте все пакеты:

npm run test

Запустите тесты для всех пакетов:

npm run benchmarks

Подробную информацию о разработке для конкретного пакета см. в файлах README отдельных пакетов.