feat: add render prop by SevereCloud · Pull Request #9918 · VKCOM/VKUI

SevereCloud · 2026-06-10T09:26:31Z

close [Feature][API]: Более гибкая возможность "смешивания" компонентов с помощью render в дополнение к Component #10001

Описание

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

Release notes

Улучшения

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

github-actions · 2026-06-10T09:29:11Z

size-limit report 📦

Path	Size
JS	425.26 KB (+0.04% 🔺)
JS (gzip)	131.14 KB (+0.03% 🔺)
JS (brotli)	108.31 KB (+0.05% 🔺)
JS import Div (tree shaking)	945 B (+16.53% 🔺)
CSS	381.95 KB (0%)
CSS (gzip)	46.76 KB (0%)
CSS (brotli)	36.94 KB (0%)

github-actions · 2026-06-10T09:34:37Z

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

Commit 4691a5f

codecov · 2026-06-10T09:34:52Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.21%. Comparing base (ac28ced) to head (4691a5f).
⚠️ Report is 11 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9918      +/-   ##
==========================================
- Coverage   95.22%   95.21%   -0.01%     
==========================================
  Files         462      461       -1     
  Lines       12535    12529       -6     
  Branches     4490     4485       -5     
==========================================
- Hits        11936    11930       -6     
  Misses        599      599

Flag	Coverage Δ
unittests	`95.21% <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 · 2026-06-10T09:35:14Z

👀 Docs deployed

✅ Website
✅ Playground

📦 Package ✅

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

Commit 4691a5f

github-actions · 2026-06-10T10:39:12Z

e2e tests

Playwright Report

andres-kovalev · 2026-06-10T14:10:40Z

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


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

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

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

playground

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

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

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

Card

CardGrid

CardScroll

Chip

FormItemTop

GroupContainer

GroupExpandedContent

inomdzhon · 2026-07-01T11:31:55Z

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


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

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

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

Card

CardGrid

CardScroll

Chip

FormItemTop

GroupContainer

GroupExpandedContent

vkcom-publisher · 2026-07-18T10:30:15Z

PR закрыт из-за отсутствия активности в течение последних 14 дней. Если это произошло по ошибке или изменения все ещё актуальны, откройте PR повторно.

inomdzhon · 2026-07-22T09:39:46Z

Изменил описание Release notes

@SevereCloud может в целом как-то подробней опишем релиз ноут? Может даже замутить пост в блоге для чего и почему и как.

Или отдельную страницу в Кастомизации

Референс https://ark-ui.com/docs/guides/composition

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

SevereCloud marked this pull request as draft June 10, 2026 09:29

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

andres-kovalev reviewed Jun 10, 2026

View reviewed changes

SevereCloud marked this pull request as ready for review June 18, 2026 10:15

inomdzhon mentioned this pull request Jun 23, 2026

feat(PanelHeader,PanelHeaderContext): remove FixedLayout using #9765

Closed

3 tasks

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jun 25, 2026

SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from a8cac1d to adb290d Compare June 29, 2026 08:20

SevereCloud requested a review from andres-kovalev June 29, 2026 08:21

SevereCloud removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jun 29, 2026

SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from adb290d to 9c0cd5f Compare June 29, 2026 08:30

inomdzhon reviewed Jul 1, 2026

View reviewed changes

inomdzhon reviewed Jul 2, 2026

View reviewed changes

Comment thread packages/vkui/src/components/ContentCard/ContentCard.tsx Outdated

vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jul 10, 2026

vkcom-publisher closed this Jul 18, 2026

inomdzhon reopened this Jul 21, 2026

SevereCloud added 2 commits July 22, 2026 10:41

feat: add render prop

4bf9a91

review

4691a5f

SevereCloud force-pushed the SevereCloud/feat/add-render-prop branch from d19c3d3 to 4691a5f Compare July 22, 2026 07:50

SevereCloud requested a review from inomdzhon July 22, 2026 07:56

inomdzhon approved these changes Jul 22, 2026

View reviewed changes

Uh oh!

Conversation

SevereCloud commented Jun 10, 2026 • edited by inomdzhon Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Описание

Release notes

Улучшения

Uh oh!

github-actions Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👀 Docs deployed

📦 Package ✅

Uh oh!

github-actions Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

e2e tests

Uh oh!

andres-kovalev Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

SevereCloud Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

inomdzhon Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

inomdzhon Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vkcom-publisher commented Jul 18, 2026

Uh oh!

inomdzhon commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SevereCloud commented Jun 10, 2026 •

edited by inomdzhon

Loading

github-actions Bot commented Jun 10, 2026 •

edited

Loading

github-actions Bot commented Jun 10, 2026 •

edited

Loading

codecov Bot commented Jun 10, 2026 •

edited

Loading

github-actions Bot commented Jun 10, 2026 •

edited

Loading

github-actions Bot commented Jun 10, 2026 •

edited

Loading

inomdzhon commented Jul 22, 2026 •

edited

Loading