kitsu web

Aplikasi Web Kitsu

---

Ini adalah repositori klien kami. Ini berisi aplikasi react.js untuk kitsu.
Lihatlah repositori alat, seluler, server, dan dokumen API.

---

Berkontribusi

Fakta bahwa Anda membaca ini mungkin berarti Anda tertarik untuk berkontribusi pada aplikasi web Kitsu. Jika demikian, selamat datang! Sangat mudah untuk memulai, dan kami di sini untuk membantu Anda sepanjang jalan. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya kepada kami di perselisihan kami di saluran #DEV!

Sebelum Anda membuat permintaan tarik, silakan baca styleGuide dan pastikan Anda menjaga basis kode tetap bersih dan konsisten untuk pengembang di masa depan.

Menjalankannya

Anda akan membutuhkan versi node.js yang cukup modern. LTS aktif mungkin merupakan pilihan terbaik jika Anda tidak yakin. Penyebaran kami akan menggunakan LTS aktif, tetapi kami mencoba memastikan bahwa semuanya berjalan dengan lancar pada versi saat ini juga.

Setelah Anda memiliki Node, jalankan yang berikut:

1. npm install (instalasi dependensi)
2. npm run dev (port default 3000)

Sekarang kunjungi http://localhost:3000 dan Anda akan melihat aplikasi kitsu!

Secara default, dalam mode pengembangan, ini akan terhubung ke staging.kitsu.io (lingkungan pra-produksi kami) untuk API, yang berarti apa pun yang Anda lakukan akan dimusnahkan setiap minggu. Anda dapat mengubah ini untuk terhubung ke produksi jika perlu dengan mengatur VITE_API_HOST=https://kitsu.io/ di file .env . Ini umumnya tidak perlu, tetapi ada beberapa hal yang tidak bekerja sepenuhnya dalam pementasan.

Di masa depan kami berencana untuk mengintegrasikan ini ke dalam lingkungan kitsu-tools dev lebih baik.

Menavigasi basis kode

Sementara struktur proyek dasar harus akrab bagi sebagian besar pengembang yang telah menggunakan bereaksi dan vite di masa lalu, Kitsu adalah aplikasi yang besar dan memiliki lebih banyak struktur daripada yang mungkin biasa Anda lakukan.

Titik masuk

Vite mengkompilasi aplikasi mulai dari "titik masuk". Dalam kasus kami, kami memiliki empat, di tiga "target pembangunan":

• BUILD_TARGET=client - Aplikasi Web Kitsu Utama (V4)
  • index.html - Titik masuk utama untuk aplikasi web Kitsu
  • oauth2-callback.html -Titik masuk untuk penangan callback dari penyedia OAuth2 (kebanyakan hanya delegasi ke perpustakaan nanoauth kami).
• BUILD_TARGET=server -Server-Side Version dari Aplikasi Web KITSU
  • server.js - Titik Masuk Utama untuk Aplikasi Web Kitsu
• BUILD_TARGET=library - Perpustakaan komponen dari aplikasi web Kitsu (v4) untuk mengekspos untuk aplikasi V3 Ember selama migrasi.
  • src/entry-ember.tsx -Ekspor yang akan dapat diakses dari Aplikasi Ember

Kode Sumber Aplikasi

• src/assets/ - Aset statis seperti ikon, ilustrasi, dan animasi yang diimpor oleh aplikasi. Ini tidak hanya disalin ke direktori output, ini harus diimpor dan dapat diproses selama kompilasi dengan berbagai plugin.
• src/components/ - Komponen Umum dan Dapat Digunakan kembali
• src/pages/ - Komponen Rendering seluruh halaman
• src/layouts/ - Komponen yang menyediakan struktur halaman yang dapat digunakan kembali
• src/contexts/ - Bereaksi konteks untuk berbagi keadaan antar komponen
• src/initializers/ - Kode Imperatif yang berjalan selama Boot Aplikasi (hindari ini jika memungkinkan, lebih suka kait dalam komponen aplikasi)
• src/constants/config.ts - Mengekspos Konfigurasi ke Aplikasi Saat Runtime
• src/graphql/ - Kode Dukungan GraphQL, seperti jenis skema yang dihasilkan, skalar, dan pertukaran URQL.
• src/hooks/ - Kait reaksi khusus untuk aplikasi
• src/locales/ -Data untuk setiap lokal yang kami dukung (terjemahan, tanggal-FN lokal, dll.)
• src/errors/ - Semua subkelas kesalahan kami
• src/styles/ -Gaya aplikasi-lebar (tidak spesifik untuk komponen), sebagian besar dalam bentuk variabel yang digunakan dalam gaya komponen.

Perpustakaan utama

• Bahasa: naskah
• Kerangka kerja: bereaksi (kita mungkin beralih ke pra -awal di beberapa titik)
• Bundler: Vite
• Pengujian: Vitest
• Routing: React Router V6
• Klien GraphQL: URQL dengan GraphCache Diaktifkan
• Gaya: Modul CSS yang diproses oleh PostCSS
• Internasionalisasi/Lokalisasi: React Intl
• Waktu: Tanggal-FNS

Alur kerja pengembangan umum

Menjalankan codegen

npm run codegen

Jika Anda mengubah file .gql atau menambahkan kunci terjemahan baru, Anda harus menjalankan npm run codegen agar mereka berfungsi dengan baik. Codegen GraphQL akan menghasilkan file TypeScript untuk setiap kueri dan INTL Codegen akan mengekstrak semua kunci terjemahan dari komponen Anda.

Menjalankan buku cerita

npm run storybook

Kami menggunakan buku cerita untuk mendokumentasikan komponen. Kami meminta Anda, silakan mendokumentasikan komponen baru yang Anda tambahkan.

Menjalankan tes

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)

Kami memiliki dua suite tes:

• Tes unit
  • Didukung oleh Vitest, kerangka kerja pengujian yang kompatibel
  • Sangat cepat
  • Berjalan dalam dom palsu (bukan browser sungguhan)
  • Disimpan berdekatan dengan kode di file .test.ts(x)
• Tes ujung ke ujung
  • Didukung oleh Cypress, kerangka kerja pengujian browser tanpa kepala
  • Lebih lambat
  • Berjalan di browser sungguhan (Chrome, Firefox, dll.)
  • Disimpan di cypress/

Sebagian besar waktu, kami sarankan menguji kode Anda dengan Vitest. Ini pengalaman yang jauh lebih baik, dan berjalan lebih cepat. Yang mengatakan, kadang-kadang Anda perlu menguji alur kerja penuh dari ujung ke ujung, untuk tujuan Cypress.

Terjemahan

Kami menggunakan Crowdin untuk menangani terjemahan, pergi ke crowdin.com/project/kitsu-web untuk menyarankan perubahan atau menambahkan terjemahan baru.

Terjemahan Gunakan format sintaks pesan ICU. Baca dokumentasi sintaksis.

Masalah

Ingin membuat masalah? Buka laporan bug atau permintaan fitur di Kitsu.