Back to Details

implementing-new-features

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

New Feature Implementation Guide

Streamlit新功能实现指南

Most features need implementation in three areas:
  • Backend: 
    lib/streamlit/
  • Frontend: 
    frontend/
  • Protobufs: 
    proto/
New features should include:
  • Python unit tests in 
    lib/tests
  • Vitest unit tests
  • E2E Playwright tests in 
    e2e_playwright/
大多数功能需要在三个领域实现：
  • 后端：
    lib/streamlit/
  • 前端：
    frontend/
  • Protobuf：
    proto/
新功能应包含：
  • lib/tests
    中的Python单元测试
  • Vitest单元测试
  • e2e_playwright/
    中的端到端Playwright测试

Order of Implementation

实现顺序

  1. Protobuf changes in 
    proto/
    then run 
    make protobuf
    • New elements: add to 
      proto/streamlit/proto/Element.proto
  2. Backend in 
    lib/streamlit/
    • New elements: add to 
      lib/streamlit/__init__.py
  3. Python unit tests in 
    lib/tests
    • Run: 
      uv run pytest lib/tests/streamlit/the_test_name.py
    • New elements: add to 
      lib/tests/streamlit/element_mocks.py
  4. Frontend in 
    frontend/
    • New elements: add to 
      frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx
  5. Vitest tests in 
    *.test.tsx
    • Run: 
      cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx
  6. E2E Playwright tests in 
    e2e_playwright/
    • Run: 
      make run-e2e-test e2e_playwright/name_of_the_test.py
  7. Autofix formatting and linting: 
    make autofix
  8. Verify the implementation: 
    make check
  1. Protobuf修改在
    proto/
    中进行，然后运行
    make protobuf
    • 新元素：添加到
      proto/streamlit/proto/Element.proto
  2. 后端开发在
    lib/streamlit/
    中进行
    • 新元素：添加到
      lib/streamlit/__init__.py
  3. Python单元测试在
    lib/tests
    中编写
    • 运行命令：
      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. Vitest测试在
    *.test.tsx
    文件中编写
    • 运行命令：
      cd frontend && yarn vitest lib/src/components/elements/NewElement/NewElement.test.tsx
  6. 端到端Playwright测试在
    e2e_playwright/
    中编写
    • 运行命令：
      make run-e2e-test e2e_playwright/name_of_the_test.py
  7. 自动修复格式与代码规范：
    make autofix
  8. 验证实现：
    make check