implementing-new-features について
Streamlitの機能をバックエンド、フロントエンド、protobuf層に実装するための開発ガイドです。Python、Vitest、Playwrightのテストを追加し、修正と検証を行う順序を示します。
主な機能
- 01バックエンド・フロントエンド・protobufの実装順
- 02Pythonユニットテストの指針
- 03Vitestフロントエンドテストの指針
- 04Playwright E2Eテストの指針
- 05autofixとmake checkによる検証
活用シーン
- 01複数レイヤーにまたがる機能変更の計画
- 02新しいStreamlit要素へのテスト追加
- 03実装完了前の検証
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ streamlit/ streamlit --skill implementing-new-featuresインストール後、Claude Code で/implementing-new-featuresを入力して読み込まれたか確認します。
詳細
新機能実装ガイド
基盤となるアーキテクチャ(バックエンドランタイム、フロントエンドレンダリング、WebSocket 通信、要素ツリー)を理解するには、understanding-streamlit-architecture スキルを参照してください。
ほとんどの機能は次の 3 つの領域で実装する必要があります。
- バックエンド:
lib/streamlit/ - フロントエンド:
frontend/ - Protobuf:
proto/
新機能には次を含める必要があります。
lib/tests内の Python ユニットテスト- Vitest ユニットテスト
e2e_playwright/内の E2E Playwright テスト
実装の順序
-
proto/内での Protobuf の変更、その後make protobufを実行- 新しい要素:
proto/streamlit/proto/Element.protoに追加
- 新しい要素:
-
lib/streamlit/内のバックエンド- 新しい要素:
lib/streamlit/__init__.pyに追加
- 新しい要素:
-
lib/tests内の Python ユニットテスト- 実行:
uv run pytest lib/tests/streamlit/the_test_name.py - 新しい要素:
lib/tests/streamlit/element_mocks.pyに追加
- 実行:
-
frontend/内のフロントエンド- 新しい要素:
frontend/lib/src/components/core/Block/ElementNodeRenderer.tsxに追加
- 新しい要素:
-
*.test.tsx内の Vitest テスト- 実行:
cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx
- 実行:
-
e2e_playwright/内の E2E Playwright テスト- 実行:
make run-e2e-test e2e_playwright/name_of_the_test.py
- 実行:
-
フォーマットとリンティングの自動修正:
make autofix -
実装の検証:
make check
コメント
Markdown 対応