mcpField
I
implementing-new-features

implementing-new-features

github.com/streamlit开发46.2k68 次安装今天更新
代码仓库

关于 implementing-new-features

面向 Streamlit 功能开发的指南，说明如何依次处理后端、前端和 protobuf 层，并添加 Python、Vitest 与 Playwright 测试，最后进行修复和验证。

主要功能

  1. 01后端、前端与 protobuf 实现顺序
  2. 02Python 单元测试指引
  3. 03Vitest 前端测试指引
  4. 04Playwright 端到端测试指引
  5. 05autofix 与 make check 验证

适用场景

  1. 01规划跨层功能改动
  2. 02为新的 Streamlit 元素添加测试
  3. 03完成前验证实现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/streamlit/streamlit --skill implementing-new-features

安装后在 Claude Code 中输入/implementing-new-features确认已加载。

详细介绍

新功能实现指南

如需了解底层架构（后端运行时、前端渲染、WebSocket 通信、元素树），请参阅 understanding-streamlit-architecture 技能。

大多数功能需要在三个方面实现：

  • 后端：lib/streamlit/
  • 前端：frontend/
  • Protobuf：proto/

新功能应包含：

  • lib/tests 中的 Python 单元测试
  • Vitest 单元测试
  • e2e_playwright/ 中的 E2E Playwright 测试

实现顺序

  1. 在 proto/ 中进行 Protobuf 更改，然后运行 make protobuf

    • 新元素：添加到 proto/streamlit/proto/Element.proto

  2. 在 lib/streamlit/ 中实现 后端

    • 新元素：添加到 lib/streamlit/__init__.py

  3. 在 lib/tests 中编写 Python 单元测试

    • 运行：uv run pytest lib/tests/streamlit/the_test_name.py
    • 新元素：添加到 lib/tests/streamlit/element_mocks.py

  4. 在 frontend/ 中实现 前端

    • 新元素：添加到 frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx

  5. 在 *.test.tsx 中编写 Vitest 测试

    • 运行：cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx

  6. 在 e2e_playwright/ 中编写 E2E Playwright 测试

    • 运行：make run-e2e-test e2e_playwright/name_of_the_test.py

  7. 自动修复格式和 lint：make autofix

  8. 验证实现：make check

评论

支持 Markdown