create-kolibri

Create-KoliBri

Mittels der CLI create-kolibri können über die Konsole verschiedene Projekte auf Basis der Komponenten-Bibliothek KoliBri erstellt werden.

Projektarten

Es gibt folgende Arten von Projekten:

• App (Vanilla, Angular, React, Vue, Preact u.a.)
• Library (Components, Theme)

Get Stared

Neues Projekt erstellen

Ein neues Projekt kann mit Hilfe der Konsole schnell erstellt werden.

npm init kolibri@latest my-kolibri-app

---

Framework-Adapter

Für eine optimale Developer Experience bieten wir zahlreiche Framework-Adapter für KoliBri an.

Übersicht

Folgende Pakete/Artefakte von KoliBri werden in der öffentlichen NPM-Registry versioniert bereitgestellt.

Paket	Erläuterung
create-kolibri	CLI zum Erstellen neuer Projekt auf KoliBri-Basis.
@public-ui/components	Beinhaltet die barrierefreien Web Components ohne Styling.
@public-ui/core	Beinhaltet generische Typen und zentrale Funktionalitäten für die Entwicklung weiterer Komponenten-Bibliothek mit gleicher Architektur.
@public-ui/themes	Beinhaltet zahlreiche Themes für die KoliBri-Komponenten.
@public-ui/react	Adapter für das Framework React.
@public-ui/preact	Adapter für das Framework Preact.
@public-ui/solid	Adapter für das Framework Solid.
@public-ui/vue	Adapter für das Framework Vue.
@public-ui/angular-v{15..x}	Adapter für das Framework Angular in der jeweiligen Version.
@public-ui/angular	Dieses Paket ist veraltet, weil Angular versionsspezifische Adapter benötigt.

Integrationsvarianten

KoliBri wird aktuell in folgenden Varianten angeboten:

Client-Side-Frameworks

Statischen Webseiten

Dynamische Webanwendungen

Technische sind Web Components, wie sie in KoliBri enthalten sind, wie auch Standard HTML universell wiederverwendbar.

Für Umsetzung von dynamischen Webanwendungen gibt es eine Reihe von Frameworks für die KoliBri wiederverwendet werden kann. Abhängig vom Framework ist die Bereitstellung von KoliBri unterschiedlich. Besonders gut geeignet sind dabei JSX/TSX basierte Frameworks, wie React oder Solid, da hier die maximalen Möglichkeiten der Typ-Unterstützung und Autovervollständung möglich sind. Hingegen bei Frameworks mit eigener Template-Sprachen, wie Angular, Vue oder Svelte, ist die Entwicklungsunterstützung unterschiedlich gut umsetzbar.

Framework
	Web Components ohne Framework Alle Komponenten von KoliBri sind gemäß dem Web Components Standard umgesetzt. Somit können die Komponenten in der Regel in allen modernen Projekten wiederverwendet werden. KoliBri lässt sich einbinden wie JQuery und ist somit auch für Server-Side-Rendering, wie bspw. PHP, JSF usw., interessant.
	React-Components (empfohlen) Alternativ zu den reinen Web Componenten bieten wir einen Adapter für React an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert.
	Angular-Components (>= 11) Alternativ zu den reinen Web Componenten bieten wir einen Adapter für Angular an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert.
	Vue-Components Alternativ zu den reinen Web Componenten bieten wir einen Adapter für Vue an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert.
	Solid-Components Alternativ zu den reinen Web Componenten bieten wir einen Adapter für Solid an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert.
	Preact-Components (experimentell) Alternativ zu den reinen Web Componenten bieten wir einen Adapter für Preact an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert.

Server-Side-Frameworks

Framework
	Astro-Framework (CSR der Web Components) Die Integration erfolgt mittels der React- und Preact-Components. Hierbei werden die Framework-Componentens Server-seitig und die Web Components client-seitig gerendert.
	Next.js-Framework (CSR der Web Components) Die Integration erfolgt mittels der React-Components. Hierbei werden die Framework-Componentens Server-seitig und die Web Components client-seitig gerendert.
	Remix-Framework (offen) Die Integration erfolgt mittels der React-Components (CSR der Web Components). Hierbei werden die Framework-Componentens Server-seitig und die Web Components client-seitig gerendert.

Changelog

1.1.19

• fix image uri in readme
• fix angular dependency versions (zone.js, typescript)

1.1.18

• fix missing .npmrc in defaults
• chore update e2e test samples

1.1.17

• add Vue (v3) template
• fix Nightwatch configuration
• fix Font-Awesome integration
• doc update documentation