lit

Einfach. Schnell. Webkomponenten.

Lit ist eine einfache Bibliothek zum Erstellen schneller, leichter Webkomponenten.

Im Kern von Lit handelt es sich um eine Komponenten-Basisklasse, die den Standardwert vernichtet und einen reaktiven Zustand, bereichsbezogene Stile und ein deklaratives Vorlagensystem bereitstellt, das klein, schnell und ausdrucksstark ist.

Dokumentation

Die vollständige Dokumentation für Lit finden Sie unter lit.dev.

Zusätzliche Dokumentation für Entwickler, die einen Beitrag leisten oder mehr über das Projekt erfahren möchten, finden Sie in dev-docs .

npm

So installieren Sie von npm aus:

npm i lit

Lit Monorepo

Dies ist das Monorepo für Lit-Pakete.

Die beleuchtete 2.x-Quelle ist im 2.x Zweig verfügbar. Die Quelle lit-html 1.x ist im Zweig lit-html-1.x verfügbar.

Pakete

• Kernpakete
  • lit – Das primäre benutzerorientierte Paket von Lit, das alles von lit-html bis lit-element enthält.
  • lit-element – ​​Die in Lit verwendete Webkomponenten-Basisklasse.
  • lit-html – Die von LitElement verwendete Rendering-Bibliothek.
  • @lit/reactive-element – ​​Eine Basisklasse auf niedriger Ebene, die einen reaktiven Lebenszyklus basierend auf Attribut-/Eigenschaftsänderungen bereitstellt.
• Zusätzliche Bibliotheken
  • @lit/localize – Eine Bibliothek und ein Befehlszeilentool zum Lokalisieren von Webanwendungen, die mit Lit erstellt wurden.
  • @lit/localize-tools – Lokalisierungstools zur Verwendung mit @lit/localize .
  • @lit/react – Ein React-Komponenten-Wrapper für Webkomponenten.
  • @lit/task – Ein Controller für Lit, der asynchrone Aufgaben rendert.
  • @lit/context – Ein System zum Weiterleiten von Daten durch einen Baum von Elementen mithilfe von Browserereignissen, wodurch die Notwendigkeit vermieden wird, Eigenschaften mithilfe eines von der Community definierten Protokolls auf jeder Ebene des Baums weiterzugeben.
• Labore
  • @lit-labs/ssr – Ein Serverpaket zum Rendern von Lit-Vorlagen und -Komponenten auf dem Server.
  • @lit-labs/ssr-client – ​​Eine Reihe clientseitiger Unterstützungsmodule zum Rendern von Lit-Komponenten und -Vorlagen auf dem Server mithilfe von @lit-labs/ssr .
  • @lit-labs/eleventy-plugin-lit – Ein Plugin für Eleventy, das Lit-Komponenten mit @lit-labs/ssr mit optionaler Hydratation vorab rendert.
  • @lit-labs/ssr-react – Ein Paket zur Integration von Lit SSR mit React und React-Frameworks.
  • @lit-labs/nextjs – Ein Plugin für Next.js, das ein tiefes Server-Rendering von Lit-Komponenten mit Lit SSR ermöglicht.
  • @lit-labs/router – Ein Router für Lit.
  • @lit-labs/motion – Lit-Anweisungen, um Dinge in Bewegung zu setzen
  • @lit-labs/scoped-registry-mixin – Ein Mixin für LitElement, das in die spekulative Scoped CustomElementRegistry-Polyfüllung integriert wird.
  • @lit-labs/observers – Eine Reihe reaktiver Controller, die die Verwendung der Plattform-Observer-Objekte erleichtern.
  • @lit-labs/preact-signals – Preact Signals-Integration für Lit.
  • @lit-labs/testing – Dienstprogramme zum Testen von Lit-Komponenten.
  • @lit-labs/virtualizer – Viewport-basierte Virtualisierung (einschließlich virtuellem Scrollen).
  • @lit-labs/compiler – Ein Compiler zur Optimierung von Lit-Vorlagen.
• Starterkits (nicht auf npm veröffentlicht)
  • lit-starter-ts (Vorlagen-Repo) – Ein Starter-Repo zum Erstellen wiederverwendbarer Komponenten mit Lit in TypeScript.
  • lit-starter-js (Vorlagen-Repo) – Ein Starter-Repo zum Erstellen wiederverwendbarer Komponenten mit Lit in JavaScript.
• Interne Pakete (nicht auf npm veröffentlicht)
  • tests – Testinfrastruktur für das Monorepo.
  • benchmarks – Benchmarks zum Testen verschiedener Bibliotheken im Monorepo.
  • @lit-internal/scripts – Utility-Skripte, die im Monorepo verwendet werden.

Beitrag zu Lit

Lit ist Open Source und wir freuen uns über Problemberichte und Pull-Requests. Weitere Informationen finden Sie unter CONTRIBUTING.md.

Einrichten des beleuchteten Monorepo für die Entwicklung

Repo initialisieren:

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

Erstellen Sie alle Pakete:

npm run build

Testen Sie alle Pakete:

npm run test

Führen Sie Benchmarks für alle Pakete durch:

npm run benchmarks

Einzelheiten zur Entwicklung für ein bestimmtes Paket finden Sie in den READMEs der einzelnen Pakete.