[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations #7739

andrey-medvedev-vk · 2024-10-11T16:00:35Z

close [BREAKING CHANGE][SSR]: отказаться от выставления CSS классов в рантайме #7529

Описание

Убираем мутацию body из AppRoot.

В том числе избавляемся от добавления в body portalRoot при первом рендере.

Изменения

AppRoot больше не выставляет самостоятельно классы .vkui на html теге и .vkui__root на точке монтирования VKUI.
Вместо этого предлагается выставлять эти теги пользователю самостоятельно, либо применить стили, подобные которым мы теперь используем в .vkui и .vkui__root. В основном они нужны для того, чтобы у body убрать браузерные отступы и сделать так, чтобы VKUI занимало всё пространство контейнера.

VKUI/packages/vkui/src/styles/common.css

Lines 1 to 17 in 84d05ce

    
           /* stylelint-disable-next-line selector-max-type */ 
        
           /* Оставить и предложить утанавливать на html vkui и на root vkui__root */ 
        
           /* и подключать этот css файл */ 
        
           /* stylelint-disable-next-line selector-max-type */ 
        
           .vkui > body, 
        
           .vkui, 
        
           .vkui__root { 
        
             margin: 0; 
        
             padding: 0; 
        
             block-size: 100%; 
        
           } 
        
           .vkui__root { 
        
             /* чтобы можно было ограничить размеры приложения 
        
              * извне с помощью max-height, max-width */ 
        
             max-inline-size: inherit; 
        
             max-block-size: inherit;

Все классы и токены, требуемые VKUI, которые раньше вешались на body теперь вешаются на контейнер AppRoot. Так как AppRoot это точка входа в VKUI приложение такой подход приемлем.
Чтобы компоненты, рендерящиеся через порталы вне DOM дерева AppRoot, тоже имели доступ к токенам и стилям AppRoot был создан компонент AppRootStyleContainer. Он используется как в AppRoot, так и как обертка для порталов, в компоненте AppRootPortal.
AppRootStyleContainer через контекст знает какой сейчас режим (mode), какой appearance, поэтому в модалках и других плавающих элементах всегда будет применена верная цветовая схема и токены.
AppRootPortal был переработан.
- Упрощены проверки cвязанные с usePortal свойством.
- portalRoot контейнер для модалок в режиме embedded, лежащий как последний дочерний элемент body, больше не создается при первом рендере. Он создаётся в body только если модалку или поповер надо отрендерить, и продолжает жить в DOM пока AppRoot не размонтируется. Используется как точка монтирования всем модалками и поповерами, если надо отредерить что-то вне DOM дерева AppRoot.
- Доработана логика рендера модалок и попаутов в режиме full. Они теперь всегда рендеряться по умолчанию через портал в специальный контейнер внутри SplitLayout, после основного контента. Рендер через портал позволяет избавится от ещё одно появляющегося при первом рендере DOM элемента, если необходимо использовать модалки.
- Убраны пропы popout и modal из SplitLayout.
  Так как модалки и попауты (Alert, ScreenSpinner, ActionSheet) рендеряться через портал в то же место что и раньше, то надобность в явной передаче ModalRoot и popout в SplitLayout отпадает.
  Это позволяет избавить пользователей от необходимости обязательно передавать ModalRoot в SplitLayout и держать стейт переключения модалок на уровне SplitLayout.
  Теперь ModalRoot можно объявить в любой части приложения, как и Alert, ScreenSpinner и ActionSheet.
  Также можно иметь несколько ModalRoot если требудется по смыслу разделить модалки.
- Появилось новое значение свойства usePortal для рендеринга через портал в SplitLayout за контентом.

Release notes

Reuse AppRoot styles in AppRootPortal to share same tokens

We don't need to use it on portals as modals will disappear

Simplify logic of helper functions like shouldUsePortal resolvePortalContainer

As it creates unnesessary rerender and can't work with creation of portalRoot dom element on demand

To avoid rendering modal/popout in SplitLayout during SSR and after hydration

We keep render ModalRoot in the SplitLayout container right after content, but now we use portal for it. It means now, that users can put ModalRoot anywhere in the app, they are not limited by SplitLayout modal prop Styles from PopoutRoot about modal fixed layout and z-index are moved directly to ModalRoot AppPortalWrapper from SplitLayout

In full mode we render Modal/Popout right after content In other modes we render Modal/Popout as a child of the body

Components like Alert/ScreenSpinner/ActionSheet and ModalRootDesktop

github-actions · 2024-10-11T16:03:18Z

size-limit report 📦

Path	Size
JS	386.09 KB (-0.04% 🔽)
JS (gzip)	116.8 KB (-0.05% 🔽)
JS (brotli)	95.99 KB (-0.02% 🔽)
JS import Div (tree shaking)	1.46 KB (0%)
CSS	332.68 KB (-0.04% 🔽)
CSS (gzip)	41.68 KB (-0.13% 🔽)
CSS (brotli)	33.1 KB (+0.17% 🔺)

codesandbox-ci · 2024-10-11T16:03:39Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

github-actions · 2024-10-11T16:06:34Z

e2e tests

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

github-actions · 2024-10-11T16:06:43Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 84d05ce

codecov · 2024-10-11T16:07:33Z

Codecov Report

Attention: Patch coverage is 99.21875% with 1 line in your changes missing coverage. Please review.

Project coverage is 95.12%. Comparing base (6b5a24f) to head (84d05ce).
Report is 15 commits behind head on master.

Files with missing lines	Patch %	Lines
packages/vkui/src/components/AppRoot/AppRoot.tsx	94.44%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7739      +/-   ##
==========================================
- Coverage   95.14%   95.12%   -0.02%     
==========================================
  Files         383      385       +2     
  Lines       11343    11338       -5     
  Branches     3718     3720       +2     
==========================================
- Hits        10792    10785       -7     
- Misses        551      553       +2

Flag	Coverage Δ
unittests	`95.12% <99.21%> (-0.02%)`	⬇️

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

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

andrey-medvedev-vk added 11 commits October 4, 2024 16:16

Move most of common.css styles to AppRoot

ef27f31

Create PortalRoot on demand

b40f394

Reuse AppRoot styles in AppRootPortal to share same tokens

Use transformForPositionFixedElements only on AppRoot

f2e2638

We don't need to use it on portals as modals will disappear

Don't render PortalRoot when usePortal is passed

0af508c

Simplify logic of helper functions like shouldUsePortal resolvePortalContainer

Remove useIsClient from AppRootPortal

1cdb438

As it creates unnesessary rerender and can't work with creation of portalRoot dom element on demand

Use AppRootPortal directly in the ModalRoot/PopoutRoot/ActionSheet

2eced1a

To avoid rendering modal/popout in SplitLayout during SSR and after hydration

Create ModalPopoutPortal to keep previous logic of SplitLayout

efeeba8

In full mode we render Modal/Popout right after content In other modes we render Modal/Popout as a child of the body

Use ModalPopoutPortal in Alert and ActionSheet

5fc39b7

Render popouts and modals in portal

1812193

Components like Alert/ScreenSpinner/ActionSheet and ModalRootDesktop

Apply required changes to VKUI examples

84d05ce

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations #7739

[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations #7739

andrey-medvedev-vk commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

codesandbox-ci bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

codecov bot commented Oct 11, 2024

	/* stylelint-disable-next-line selector-max-type */
	/* Оставить и предложить утанавливать на html vkui и на root vkui__root */
	/* и подключать этот css файл */
	/* stylelint-disable-next-line selector-max-type */
	.vkui > body,
	.vkui,
	.vkui__root {
	margin: 0;
	padding: 0;
	block-size: 100%;
	}

	.vkui__root {
	/* чтобы можно было ограничить размеры приложения
	* извне с помощью max-height, max-width */
	max-inline-size: inherit;
	max-block-size: inherit;

[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations #7739

Are you sure you want to change the base?

[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations #7739

Conversation

andrey-medvedev-vk commented Oct 11, 2024

Описание

Изменения

Release notes

github-actions bot commented Oct 11, 2024

size-limit report 📦

codesandbox-ci bot commented Oct 11, 2024

github-actions bot commented Oct 11, 2024

e2e tests

github-actions bot commented Oct 11, 2024

👀 Docs deployed

codecov bot commented Oct 11, 2024

Codecov Report