[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

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

size-limit report 📦

Path	Size
JS	382.19 KB (-0.07% 🔽)
JS (gzip)	122.38 KB (+0.01% 🔺)
JS (brotli)	101.47 KB (+0.13% 🔺)
JS import Div (tree shaking)	1.47 KB (0%)
CSS	342.09 KB (-0.04% 🔽)
CSS (gzip)	49.32 KB (-0.01% 🔽)
CSS (brotli)	40 KB (+0.15% 🔺)

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 d7e603c

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

Codecov Report

Attention: Patch coverage is 98.46154% with 2 lines in your changes missing coverage. Please review.

Project coverage is 95.13%. Comparing base (ebb46a5) to head (d7e603c).

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

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7739      +/-   ##
==========================================
- Coverage   95.17%   95.13%   -0.04%     
==========================================
  Files         376      377       +1     
  Lines       11041    11027      -14     
  Branches     3664     3661       -3     
==========================================
- Hits        10508    10491      -17     
- Misses        533      536       +3

Flag	Coverage Δ
unittests	`95.13% <98.46%> (-0.04%)`	⬇️

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.

inomdzhon

Как всегда, шикарная работа 👏 👏 👏

Отметил несколько моментов, но на первый взгляд то, что нужно 👍

Также:

нужно ребейзнуть master – там Appearance стал ColorScheme;
нужно в доке Stylegude тоже указать vkui и vkui__root классы в HTML;
нужно будет сразу глянуть почему скриншоты поплыли и не нужно ли из-за ошибок в них всё переделывать

packages/vkui/src/components/AppRoot/AppRootStyleContainer.tsx

packages/vkui/src/components/AppRoot/AppRootStyleContainer.module.css

packages/vkui/src/components/AppRoot/ModalPopoutPortal.tsx

packages/vkui/src/components/PopoutRoot/PopoutRoot.tsx

packages/vkui/src/components/AppRoot/AppRootPortal.tsx

packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx

inomdzhon

Спасибо за правки 🙏 Зарезолвил комменты, а те, что открыты, можешь сам закрыть, оставил их, чтобы было видно где ответил

В Styleguide нужно стили подправить, правый контент не на всю высоту

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

Props stays, but unused. Will remove later

Instead of in-app-after-content

This reverts commit 64bdcfb.

inomdzhon reviewed Oct 22, 2024

View reviewed changes

andrey-medvedev-vk force-pushed the mendrew/7529/AppRoot-ssr branch from 84d05ce to 91f7915 Compare October 30, 2024 10:22

inomdzhon reviewed Oct 31, 2024

View reviewed changes

andrey-medvedev-vk added 20 commits November 1, 2024 14:14

Move most of common.css styles to AppRoot

bde7ffd

Create PortalRoot on demand

6d31125

Reuse AppRoot styles in AppRootPortal to share same tokens

Use transformForPositionFixedElements only on AppRoot

d1c7378

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

Don't render PortalRoot when usePortal is passed

cc47b9d

Simplify logic of helper functions like shouldUsePortal resolvePortalContainer

Remove useIsClient from AppRootPortal

a764344

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

dab8e44

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

Create ModalPopoutPortal to keep previous logic of SplitLayout

3048206

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

724b120

Render popouts and modals in portal

6017c5a

Components like Alert/ScreenSpinner/ActionSheet and ModalRootDesktop

Apply required changes to VKUI examples

b508819

Avoid object assign with spread if possible

c95d4c5

Better wording explanation of AppRootStyleContainer

dc04242

Remove modal/popout from SplitLayout

436494a

Props stays, but unused. Will remove later

Mark ModalPopoutPortal private

2da7361

Use SplitLayout value in usePortal

eb4b38c

Instead of in-app-after-content

Just use SplitLayout host ref as mount point for modals/popouts

6b03656

Improve comment about AppRootPortal unmount

a5d4f1e

Trying to avoid extra divs whenever possible

1a53aa6

Use more explicit name for disablePortal logic

2072d20

andrey-medvedev-vk added 5 commits November 1, 2024 14:14

Correct playwright index.html classes

1fe8a66

Let ModalCard render without portal in e2e

32e8824

Revert "Remove modal/popout from SplitLayout"

a06b743

This reverts commit 64bdcfb.

Keep render modal/popout if they are passed

e062251

Allow to control usePortal in ModalRootDesktop

d7e603c

andrey-medvedev-vk force-pushed the mendrew/7529/AppRoot-ssr branch from d95c854 to d7e603c Compare November 1, 2024 11:15

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 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

codesandbox-ci bot commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

codecov bot commented Oct 11, 2024 •

edited

Loading

inomdzhon left a comment

inomdzhon left a comment

	/* 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 • edited Loading

Описание

Изменения

Release notes

github-actions bot commented Oct 11, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented Oct 11, 2024 • edited Loading

github-actions bot commented Oct 11, 2024 • edited Loading

e2e tests

github-actions bot commented Oct 11, 2024 • edited Loading

👀 Docs deployed

codecov bot commented Oct 11, 2024 • edited Loading

Codecov Report

inomdzhon left a comment

Choose a reason for hiding this comment

inomdzhon left a comment

Choose a reason for hiding this comment

andrey-medvedev-vk commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

codesandbox-ci bot commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

github-actions bot commented Oct 11, 2024 •

edited

Loading

codecov bot commented Oct 11, 2024 •

edited

Loading