Skip to content

Latest commit

 

History

History
81 lines (57 loc) · 4.85 KB

NEW_COMPONENT.md

File metadata and controls

81 lines (57 loc) · 4.85 KB
Raw

Neue Komponente erstellen

Schritt-für-Schritt-Anleitung, wie man eine neue Komponente im Teilmodul components erstellt.

Grundprinzipien

Folgende Grundprinzipien gelten für das Schreiben von Quellcode:

  • Auflistungen werden immer alphabetisch sortiert
  • Wiederverwendete Algorithmen (z.B. Property-Validatoren) werden in statische Funktionen ausgelagert (z.B. packages/schema/src/validators/<prop-name>.ts)
  • ...

Checkliste

Schritt Kurzbeschreibung
0 Projekt starten
1 Name im Schema hinterlegen
2 Verzeichnis anlegen
- component.tsx(optional)
- readme.md
- shadow.tsx: Komponente mit Shadow DOM
- styles.css
- types.ts
3 API spezifizieren
4 Klasse zur API implementieren
- Props
- State
- Watcher
- Initialer Hook
- Render-Methode
5 Styling anlegen
6 Beispiele in index.html aufnehmen
7 readme.md vervollständigen
... ...
... Klasse in Komponenten-Liste für Tests aufnehmen (packages/components/src/components/component-list.ts)
... Alle autogeneierten Daten zur Komponente mit einchecken

Schritt 0

Projekt starten, wie in Contribution beschrieben.

Schritt 1

Als erstes wird der Name der neuen Komponenten in der Schema-Datei (packages/schema/tag-names.ts) hinterlegt.

Schritt 2 - Verzeichnis anlegen

Eine Vorlage ist unter /docs/tutorials/new-component zu finden. Ziel: /packages/components/src/components/[component-name]. Sofern eine Variante ohne Shadow DOM für andere Komponenten benötigt wird, ist die Komponente selbst, mit shadow: false anzulegen und diese Komponente in shadow.tsx einzubinden. Andernfalls ist die Komponente direkt mit shadow: true in shadow.tsx zu implementieren. Ziel: shadow.tsx existiert immer und liefert die Komponente mit Shadow DOM. Die readme.md wird automatisch bei pnpm build erzeugt, sollte sie bereits existieren wird der automatisch generierte Inhalt angehängt.

Schritt 3 - API spezifizieren

Datei: types.ts; Inhalt: RequiredProps, OptionalProps, RequiredStates, OptionalStates, States und ComponentApi

Schritt 4 - Klasse Implementieren

Datei: shadow.tsx oder/und component.tsx; Inhalt:

  • @Component (außerhalb der Klasse),
  • @Prop: alphabetisch sortiert,
  • @State: Standardwerte werden hier gesetzt,
  • @Watch: werden bei Änderungen des Wertes aufgerufen, Validierung und Übernahme des Wertes in den State,
  • public componentWillLoad(): Initialer Hook, alle Validierungsmethoden hier aufrufen
  • public render(): Render-Methode, erstellt das HTML, das gerendert werden soll

Schritt 5 - Styling anlegen

Datei: styles.css; Wichtig: packages/components/src/components/README.md beachten. Sofern Styling für mehrere Komponenten verwendet werden soll, Datei passend benennen und direkt unter /packages/components/src/components/ erstellen und in styles.css importieren.

Schritt 6 - Beispiel in index.html erstellen

Datei: /packages/components/src/index.html; Unter body > main > ol ein li mit dem Beispielcode erstellen. Aus dem Verzeichnis /packages/components kann mit pnpm start der dev-server gestartet werden. Andere li können vorrübergehend entfernt werden, dafür ist die index.bak.html da. Nach Beendigung der Entwicklung ist die index.html zurückzusetzen, abgesehen des neuen Beispiels, welches in die index.bak.html ebenfalls einzufügen ist.

Schritt 7 - readme.md vervollständigen

Datei: readme.md; Die von pnpm build (in /packages/components ausgeführt) erzeugte readme.md mit sinnvollen Informationen vervollständigen.

... bitte fortsetzen.