kitsu web

Kitsu Web App

---

Dies ist unser Client -Repository. Es enthält die React.js -Anwendung für Kitsu.
Schauen Sie sich die Tools, Mobile, Server- und API -Dokumente an.

---

Beitragen

Die Tatsache, dass Sie dies lesen, bedeutet wahrscheinlich, dass Sie an der Kitsu -Webanwendung beitragen möchten. Wenn ja, willkommen! Es ist ziemlich einfach, loszulegen, und wir sind hier, um Ihnen den ganzen Weg zu helfen. Wenn Sie Fragen haben, zögern Sie bitte nicht, uns unsere Zwietracht im #Dev -Kanal zu stellen!

Bevor Sie eine Pull -Anfrage stellen, lesen Sie bitte den StyleGuide und stellen Sie sicher, dass Sie die Codebasis für zukünftige Entwickler sauber und konsistent halten.

Es zum Laufen bringen

Sie brauchen eine ziemlich moderne Node.js -Version. Das aktive LTS ist wahrscheinlich die beste Option, wenn Sie sich nicht sicher sind. Unsere Bereitstellungen werden die aktiven LTs verwenden, aber wir versuchen, sicherzustellen, dass alles auch auf der aktuellen Version reibungslos läuft.

Führen Sie nach dem Knoten Folgendes aus:

1. npm install (Installation von Abhängigkeiten)
2. npm run dev (Standardport 3000)

Besuchen Sie nun http://localhost:3000 und Sie sollten die Kitsu -Anwendung sehen!

Standardmäßig wird im Entwicklungsmodus eine Verbindung zu staging.kitsu.io (unserer Vorproduktionsumgebung) für die API hergestellt, was bedeutet, dass alles, was Sie tun, wöchentlich ausgelöscht werden. Sie können dies ändern, um bei Bedarf eine Verbindung zur Produktion herzustellen, indem Sie in der Datei .env VITE_API_HOST=https://kitsu.io/ einstellen. Dies ist im Allgemeinen nicht notwendig, aber es gibt einige Dinge, die bei der Inszenierung nicht vollständig funktionieren.

In Zukunft planen wir, dies besser in die Kitsu-Tools-Umgebung zu integrieren.

Navigieren der Codebasis

Während die Grundprojektstruktur den meisten Entwicklern, die React und Vite in der Vergangenheit verwendet haben, bekannt sein sollte, ist Kitsu eine große Anwendung und hat mehr Struktur als Sie es gewöhnt sind.

Einstiegspunkte

Vite erstellt die Anwendung, die an einem "Einstiegspunkt" beginnt. In unserem Fall haben wir vier, über drei "Build -Ziele":

• BUILD_TARGET=client - die Haupt -Kitsu -Web -App (V4)
  • index.html - Haupteinstiegspunkt für die Kitsu -Webanwendung
  • oauth2-callback.html -Einstiegspunkt für einen Callback-Handler eines OAuth2-Anbieters (meistens nur delegiert in unsere Nanoauth) -Bibliothek.
• BUILD_TARGET=server -serverseitige Version der Kitsu-Web-App
  • server.js - Haupteinstiegspunkt für die Kitsu -Web -App
• BUILD_TARGET=library - eine Bibliothek von Komponenten aus der Web -App Kitsu (V4), um die V3 Ember -App während der Migration aufzudecken.
  • src/entry-ember.tsx -Die Exporte, auf die aus der Ember-Anwendung zugegriffen werden kann

Anwendungsquellcode

• src/assets/ - statische Vermögenswerte wie Symbole, Illustrationen und Animationen, die von der Anwendung importiert werden. Diese werden nicht nur in das Ausgabeverzeichnis kopiert, diese müssen auch importiert werden und können während der Kompilierung mit verschiedenen Plugins verarbeitet werden.
• src/components/ - gemeinsame, wiederverwendbare Komponenten
• src/pages/ - Komponenten, die eine ganze Seite rendern
• src/layouts/ - Komponenten, die eine wiederverwendbare Seitenstruktur liefern
• src/contexts/ - reagieren Kontexte für den Austauschstatus zwischen Komponenten
• src/initializers/ - Imperative Code, der während des App -Starts ausgeführt wird (vermeiden Sie diese, wenn möglich, bevorzugen Hooks in der App -Komponente).
• src/constants/config.ts - Die Konfiguration der Anwendung zur Laufzeit vorliegt
• src/graphql/ - GraphQL -Support -Code wie die generierten Schema -Typen, Skalare und Urql -Börsen.
• src/hooks/ - benutzerdefinierte React -Hooks für die Anwendung
• src/locales/ -Daten für jedes Gebietsschema, das wir unterstützen (Übersetzungen, Date-Fn-Orte usw.)
• src/errors/ - Alle unsere Fehlerunterklassen
• src/styles/ -anwendungsweite Stile (nicht spezifisch für eine Komponente), hauptsächlich in Form von Variablen, die in Komponentenstilen verwendet werden.

Schlüsselbibliotheken

• Sprache: TypeScript
• Framework: React (wir könnten irgendwann auf die Vorwirkung wechseln)
• Bundler: Vite
• Test: Vitest
• Routing: Router V6 reagieren
• GraphQL Client: URQL mit aktiviertem GraphCache
• Stile: CSS -Module, die von Postcss verarbeitet wurden
• Internationalisierung/Lokalisierung: React Intl
• Zeit: Date-Fns

Common Development Workflows

Ausführen von Codegen

npm run codegen

Wenn Sie eine .gql -Datei ändern oder einen neuen Übersetzungsschlüssel hinzufügen, müssen Sie npm run codegen ausführen, damit sie ordnungsgemäß funktionieren. Der GraphQL -Codegen generiert TypeScript -Dateien für jede Abfrage und der INTL -CodeGen extrahiert alle Übersetzungsschlüssel aus Ihren Komponenten.

Laufen Storybook

npm run storybook

Wir verwenden Storybook, um Komponenten zu dokumentieren. Wir bitten Sie, bitte alle neuen Komponenten zu dokumentieren, die Sie hinzufügen.

Auslauftests

npm run test:unit # Runs unit tests (vitest)
npm run test:unit:watch # Opens vitest in watch mode
npm run test:e2e # Runs e2e tests (cypress)

Wir haben zwei Testsuiten:

• Unit -Tests
  • Angetrieben von Vitest, einem scherzkompatiblen Testgerüst
  • Extrem schnell
  • Läuft in einem gefälschten Dom (kein echter Browser)
  • Neben dem Code in .test.ts(x) Dateien gespeichert
• End-to-End-Tests
  • Angetrieben von Cypress, einem kopfflüften Browser -Test -Framework
  • Langsamer
  • Läuft in einem echten Browser (Chrom, Firefox usw.)
  • In cypress/

Meistens empfehlen wir, Ihren Code mit Vitest zu testen. Es ist eine viel schönere Erfahrung und es läuft schneller. Das heißt, manchmal müssen Sie einen vollständigen Workflow von End-to-End testen, wofür Cypress da ist.

Übersetzungen

Wir verwenden Crowdin, um Übersetzungen zu bewältigen, gehen Sie zu crowdin.com/project/kitsu-web, um Änderungen vorzuschlagen oder neue Übersetzungen hinzuzufügen.

Übersetzungen verwenden das ICU -Nachrichtensyntaxformat. Lesen Sie die Syntaxdokumentation.

Probleme

Möchten Sie ein Problem erstellen? Öffnen Sie einen Fehlerbericht oder eine Funktionsanforderung in Kitsu.