Skip to content

feat: add render prop#9918

Open
SevereCloud wants to merge 2 commits into
masterfrom
SevereCloud/feat/add-render-prop
Open

feat: add render prop#9918
SevereCloud wants to merge 2 commits into
masterfrom
SevereCloud/feat/add-render-prop

Conversation

@SevereCloud

@SevereCloud SevereCloud commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

  • Unit-тесты
  • e2e-тесты
  • Дизайн-ревью
  • Документация фичи
  • Release notes

Описание

Добавляем свойство render для компонентов

Release notes

Улучшения

  • Для компонентов добавлено свойство render на замену Component

@SevereCloud SevereCloud requested a review from a team as a code owner June 10, 2026 09:26
@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
JS 425.88 KB (+0.04% 🔺)
JS (gzip) 131.32 KB (+0.03% 🔺)
JS (brotli) 108.37 KB (+0.02% 🔺)
JS import Div (tree shaking) 945 B (+16.53% 🔺)
CSS 382.6 KB (0%)
CSS (gzip) 46.86 KB (0%)
CSS (brotli) 36.95 KB (0%)

@SevereCloud SevereCloud marked this pull request as draft June 10, 2026 09:29
@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

📊 Найдены изменения в собранных файлах: Отчет

Commit d19c3d3

@codecov

codecov Bot commented Jun 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.22%. Comparing base (38f9c16) to head (d19c3d3).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #9918   +/-   ##
=======================================
  Coverage   95.22%   95.22%           
=======================================
  Files         462      462           
  Lines       12518    12524    +6     
  Branches     4479     4480    +1     
=======================================
+ Hits        11920    11926    +6     
  Misses        598      598           
Flag Coverage Δ
unittests 95.22% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

👀 Docs deployed

📦 Package ✅

yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9918/d19c3d350f22aa088ea3a049e3313c70a13adb4f/pkg/@vkontakte/vkui/_pkg.tgz

Commit d19c3d3

@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from 994ae8b to a8cac1d Compare June 10, 2026 10:32
@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

e2e tests

Playwright Report

};

if (render) {
return <RenderRootComponent render={render} getRootRef={getRootRef} {...resolvedProps} />;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

А точно нужно дополнительный узел в дереве создавать? Нельзя просто?

if (render) return render({ ...resolvedProps, getRootRef });

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нельзя, так как ругается компилятор

playground

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нашёл несколько моментов, которые стоит поправить перед мержем:

  1. ContentCard сейчас наследует render через TappableOmitProps, но Component у него применяется к внешнему Card, а render проваливается во внутренний Tappable. Получается, что render не является аналогом Component для этого компонента. Нужно либо передавать render во внешний Card, либо явно исключить его из props.

  2. Часть компонентов, которые являются обёртками над RootComponent, типизируются через HTMLAttributesWithRootRef & HasComponent, поэтому render в их публичном API не появляется, хотя технически они его уже могут прокинуть в RootComponent. Нужно либо HasComponent расширить типом render, либо по аналогии создать тип HasRender и подключить ручками

    • Card
    • CardGrid
    • CardScroll
    • Chip
    • FormItemTop
    • GroupContainer
    • GroupExpandedContent

@SevereCloud SevereCloud marked this pull request as ready for review June 18, 2026 10:15
@vkcom-publisher vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jun 25, 2026
@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from a8cac1d to adb290d Compare June 29, 2026 08:20
@SevereCloud SevereCloud removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jun 29, 2026
@SevereCloud SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from adb290d to 9c0cd5f Compare June 29, 2026 08:30
Comment thread packages/vkui/src/components/RootComponent/RootComponent.tsx
Comment thread packages/vkui/src/components/RootComponent/RootComponent.test.tsx
};

if (render) {
return <RenderRootComponent render={render} getRootRef={getRootRef} {...resolvedProps} />;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нашёл несколько моментов, которые стоит поправить перед мержем:

  1. ContentCard сейчас наследует render через TappableOmitProps, но Component у него применяется к внешнему Card, а render проваливается во внутренний Tappable. Получается, что render не является аналогом Component для этого компонента. Нужно либо передавать render во внешний Card, либо явно исключить его из props.

  2. Часть компонентов, которые являются обёртками над RootComponent, типизируются через HTMLAttributesWithRootRef & HasComponent, поэтому render в их публичном API не появляется, хотя технически они его уже могут прокинуть в RootComponent. Нужно либо HasComponent расширить типом render, либо по аналогии создать тип HasRender и подключить ручками

    • Card
    • CardGrid
    • CardScroll
    • Chip
    • FormItemTop
    • GroupContainer
    • GroupExpandedContent

extends HasRootRef<HTMLDivElement>,
HasComponent,
Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,
Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src' | 'render'>,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а почему тут удаляем? Component ведь можно передать

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

4 participants