Umgang mit Functional Components

Protokoll vom 2024-10-16

Vision: Die internen WebComponents durch Functional Components ersetzen.

Ziel: Performance, Robustheit

Glossar:

• FC - Functional Component
• WC - Interne Web Components ohne Shadow-Root
• SR - Web Components mit Shadow-Root

Argumentation:

• das Refactoring darf keine Breaking Changes verursachen (außer Styleing, eigene Themes managen wir, neue Minor)
• ein FC darf keine WCs beinhalten
• nicht alle WC-Komponenten können einfach durch FC-Komponenten abgelöst werden (z.B. KolIcon wegen der Fonts)
• FC haben grundsätzlich keine States -> somit kein Einfluss auf Rendering / kein First-Rendering möglich / kein LifeCycle / keine SideEffects
• State-Handling muss bei FC auf Ebende der WebComponents verlagert werden.
• Bedingte Slots funktionieren nur in SR-Comp

Vorgehen:

• WCs identifizieren, die wirklich in ihrer Art stateless sind
• Alert-Ticket muss gelöst werden
  • https://github.com/public-ui/kolibri/blob/f89a60c8d4ed63eeb023f265f1ab92e801b4236a/packages/components/src/components/span/component.tsx#L55

Abstimmung:

• Stateless WCs sollten durch FC ersetzt werden: einstimmig

Regeln:

• Prop-Type für die FC sollte weitesgehend durch Prop* zusammengesetzt werden: https://github.com/public-ui/kolibri/blob/f89a60c8d4ed63eeb023f265f1ab92e801b4236a/packages/components/src/schema/props/label.ts#L78C13-L78C23

---

Protokoll vom 2024-10-21

1. Dateibenennung: PascalCase oder wie aktuell belassen?
   • → PascalCase verwenden, auch für andere Dateitypen, die zur Component gehören (”ComponentName.scss”)
2. index.ts für exports nutzen oder Component direkt importieren?
   • → index.ts verwenden
3. Functional Components in getrenntem Ordner oder direkt in components ablegen?
   • → In neuem Ordner: src/functional-components
   • → Alle Unterordner in PascalCase benennen
4. Follow-Up-Ticket wird erstellt:
   • Bestehenden Components ebenfalls in PascalCase umbenennen (avatar/component.tsx → Avatar/AvatarWc.tsx, avatar/shadow.tsx → AvatarSc.tsx)
   • components/*.scss verschieben nach src/styles
   • @deprecated → Module nach types und controllers verschieben.
   • @else → entfernen
   • @shared → aufteilen nach functional-components und styles

Ticket: https://github.com/public-ui/kolibri/issues/6950

Beispiel-Ordnerstruktur:

Avatar/
├── AvatarWc.tsx
├── AvatarController.ts
├── readme.md
├── AvatarSc.tsx
├── avatar.scss
└── test
    ├── avatarHtml.mock.ts
    └── avatarSnapshot.spec.tsx