kitsu web

北京ウェブアプリ

---

これは当社のクライアントリポジトリです。 KitsuのReact.jsアプリケーションが含まれています。
ツール、モバイル、サーバー、APIドキュメントのリポジトリをご覧ください。

---

貢献

あなたがこれを読んでいるという事実は、おそらくあなたが北京のウェブアプリケーションに貢献することに興味があることを意味します。もしそうなら、ようこそ！始めるのはとても簡単で、私たちはあなたをずっと助けるためにここにいます。ご質問がある場合は、#DEVチャンネルの不一致についてお問い合わせください！

プルリクエストを行う前に、StyleGuideを読んで、将来の開発者向けにコードベースをきれいで一貫していることを確認してください。

それを実行する

かなりモダンなnode.jsバージョンが必要になります。アクティブなLTSは、おそらくわからない場合はおそらく最良の選択肢です。展開はアクティブLTSを使用しますが、現在のバージョンでもすべてがスムーズに実行されるようにします。

ノードがある後、次のことを実行してください。

1. npm install （依存関係をインストール）
2. npm run dev （デフォルトポート3000）

次に、 http://localhost:3000にアクセスすると、キツのアプリケーションが表示されます！

デフォルトでは、開発モードでは、APIのstaging.kitsu.io （私たちのプリプロダクション環境）に接続されます。つまり、あなたが行うことはすべて毎週一掃されます。これを変更して、 .envファイルでVITE_API_HOST=https://kitsu.io/を設定することで、必要に応じて生産に接続できます。これは一般的に必要ではありませんが、ステージングで完全に機能しないものがいくつかあります。

将来的には、これをキツツールの開発環境に統合する予定です。

コードベースのナビゲーション

基本的なプロジェクト構造は、過去にReactとViteを使用していたほとんどの開発者に馴染みがあるはずですが、キツは大きな用途であり、慣れているよりも多くの構造を持っています。

エントリポイント

Viteは、「エントリポイント」から始まるアプリケーションをコンパイルします。私たちの場合、3つの「ビルドターゲット」に4つあります。

• BUILD_TARGET=client - メインキツ（V4）Webアプリ
  • index.html - 北京Webアプリケーションのメインエントリポイント
  • oauth2-callback.html - OAUTH2プロバイダー（主にNanoauthに委任するだけ）からコールバックハンドラーのエントリポイント。
• BUILD_TARGET=server - kitsu webアプリのサーバー側のレンダリングバージョン
  • server.js - キツのWebアプリのメインエントリポイント
• BUILD_TARGET=library - 移行中にV3エンバーアプリを公開するキツ（V4）Webアプリのコンポーネントのライブラリ。
  • src/entry-ember.tsx - エンバーアプリケーションからアクセスできるエクスポート

アプリケーションソースコード

• src/assets/ - アプリケーションによってインポートされたアイコン、イラスト、アニメーションなどの静的資産。これらは出力ディレクトリにコピーされるだけでなく、インポートする必要があり、さまざまなプラグインを使用したコンピレーション中に処理できます。
• src/components/ - 一般的な再利用可能なコンポーネント
• src/pages/ - コンポーネント全体のページをレンダリングします
• src/layouts/ - 再利用可能なページ構造を提供するコンポーネント
• src/contexts/ - コンポーネント間で状態を共有するためのコンテキストを反応します
• src/initializers/ - アプリの起動中に実行される命令コード（可能であれば避け、アプリコンポーネントのフックを好む）
• src/constants/config.ts - 実行時に構成をアプリケーションに公開します
• src/graphql/ - 生成されたスキーマタイプ、スカラー、URQL交換などのGRAPHQLサポートコード。
• src/hooks/ - アプリケーション用のカスタム反応フック
• src/locales/ - 私たちがサポートするすべてのロケールのデータ（翻訳、日付FNロケールなど）
• src/errors/ - すべてのエラーサブクラス
• src/styles/ - アプリケーション全体のスタイル（コンポーネントに固有のものではありません）、主にコンポーネントスタイルで使用される変数の形式です。

キーライブラリ

• 言語： TypeScript
• フレームワーク：反応（ある時点で事前に切り替える可能性があります）
• バンドラー： Vite
• テスト： Vitest
• ルーティング： React Router V6
• GraphQLクライアント： GraphCacheを使用したURQLが有効になっています
• スタイル： PostCSSによって処理されたCSSモジュール
• 国際化/ローカリゼーション： Intlの反応
• 時間：日付fns

一般的な開発ワークフロー

コードゲンを実行します

npm run codegen

.gqlファイルを変更したり、新しい翻訳キーを追加したりすると、 npm run codegenを実行して適切に動作させる必要があります。 GraphQL CodeGenは、すべてのクエリのTypeScriptファイルを生成し、INTL CodeGenはコンポーネントからすべての翻訳キーを抽出します。

ランニングストーリーブック

npm run storybook

ストーリーブックを使用してコンポーネントを文書化します。追加する新しいコンポーネントを文書化してください。

実行中のテスト

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)

2つのテストスイートがあります。

• ユニットテスト
  • Vitestを搭載したJest互換テストフレームワーク
  • 非常に速い
  • 偽のDOMで実行されます（実際のブラウザではありません）
  • .test.ts(x)ファイルにコードに隣接して保存されています
• エンドツーエンドテスト
  • ヘッドレスブラウザテストフレームワークであるサイプレスを搭載しています
  • もっとゆっくり
  • 実際のブラウザで実行されます（Chrome、Firefoxなど）
  • cypress/

ほとんどの場合、Vitestでコードをテストすることをお勧めします。それははるかに良い経験であり、より速く実行されます。とはいえ、エンドツーエンドから完全なワークフローをテストする必要がある場合があります。これがサイプレスの目的です。

翻訳

Crowdinを使用して翻訳を処理したり、Crowdin.com/Project/Kitsu-Webにアクセスして変更を提案したり、新しい翻訳を追加したりします。

翻訳ICUメッセージの構文形式を使用します。構文ドキュメントをお読みください。

問題

問題を作成したいですか？キツでバグレポートまたは機能リクエストを開きます。