feat: add use client directive (#7702)

package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-compiler": "0.0.0-experimental-56229e1-20240813",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-server-components": "^1.2.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "husky": "^9.1.6",
     "jest": "^29.7.0",

packages/vkui/.eslintrc.js

@@ -16,7 +16,7 @@ if (!E2E_TEST || !E2E_PLAYGROUND_HELPERS) {
 
 module.exports = {
   root: false,
-  extends: ['plugin:react-hooks/recommended'],
+  extends: ['plugin:react-hooks/recommended', 'plugin:react-server-components/recommended'],
   plugins: ['import', '@project-tools/vkui', 'unicorn'],
   parserOptions: {
     project: './tsconfig.eslint.json',
@@ -177,6 +177,7 @@ module.exports = {
             ],
           },
         ],
+        'react-server-components/use-client': 'off',
       },
     },
 
@@ -186,6 +187,7 @@ module.exports = {
         'no-restricted-properties': 'off',
         'no-restricted-globals': 'off',
         'react/display-name': 'off',
+        'react-server-components/use-client': 'off',
       },
     },
 
@@ -215,6 +217,7 @@ module.exports = {
             ],
           },
         ],
+        'react-server-components/use-client': 'off',
       },
     },
 
@@ -244,6 +247,7 @@ module.exports = {
             ],
           },
         ],
+        'react-server-components/use-client': 'off',
       },
     },
 
@@ -252,6 +256,7 @@ module.exports = {
       rules: {
         'import/no-default-export': 'off',
         '@typescript-eslint/consistent-type-assertions': 'off',
+        'react-server-components/use-client': 'off',
       },
     },
   ],

packages/vkui/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useObjectMemo } from '../../hooks/useObjectMemo';

packages/vkui/src/components/Accordion/AccordionContent.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';

packages/vkui/src/components/Accordion/AccordionSummary.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';
 import { callMultiple } from '../../lib/callMultiple';

packages/vkui/src/components/ActionSheet/ActionSheet.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';

packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';

packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';

packages/vkui/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';

packages/vkui/src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 

packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { getSizeX, isCompactByViewHeight, isCompactByViewWidth } from '../../lib/adaptivity';
 import type { HasChildren } from '../../types';

packages/vkui/src/components/Alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';

packages/vkui/src/components/Alert/AlertAction.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';

packages/vkui/src/components/Alert/AlertActions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';

packages/vkui/src/components/Alert/AlertTypography.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasChildren } from '../../types';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useAppearance } from '../../hooks/useAppearance';
 import { useIsClient } from '../../hooks/useIsClient';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';

packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadge.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';

packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import {

packages/vkui/src/components/Banner/Banner.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';

packages/vkui/src/components/BaseGallery/BaseGallery.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';

packages/vkui/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';

packages/vkui/src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';

packages/vkui/src/components/Calendar/Calendar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { isSameDay, isSameMonth } from 'date-fns';

packages/vkui/src/components/CalendarDay/CalendarDay.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';

packages/vkui/src/components/CalendarDays/CalendarDays.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { isSameDay, isSameMonth } from 'date-fns';

packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   Icon12Dropdown,

packages/vkui/src/components/CalendarRange/CalendarRange.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   addMonths,

packages/vkui/src/components/CalendarTime/CalendarTime.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { setHours, setMinutes } from 'date-fns';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';

packages/vkui/src/components/CardGrid/CardGrid.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';

packages/vkui/src/components/CardScroll/CardScroll.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useDOM } from '../../lib/dom';

packages/vkui/src/components/Cell/Cell.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';

packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   Icon20CheckBoxOff,

packages/vkui/src/components/Cell/CellDragger/CellDragger.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import {

packages/vkui/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   Icon20CheckBoxIndetermanate,

packages/vkui/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { Tappable } from '../../Tappable/Tappable';

packages/vkui/src/components/ChipsInput/ChipsInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useExternRef } from '../../hooks/useExternRef';
 import { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';
 import type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';

packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Cancel } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';

packages/vkui/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';

packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type MouseEventHandler } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';

packages/vkui/src/components/Clickable/Clickable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useFocusVisible } from '../../hooks/useFocusVisible';

packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';

packages/vkui/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
 import {

packages/vkui/src/components/ContentBadge/ContentBadgeSlotIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';

packages/vkui/src/components/CustomScrollView/ScrollX.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { stopPropagation } from '../../lib/utils';

packages/vkui/src/components/CustomScrollView/ScrollY.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { stopPropagation } from '../../lib/utils';

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';

packages/vkui/src/components/CustomSelect/CustomSelectClearButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Cancel } from '@vkontakte/icons';
 import { stopPropagation } from '../../lib/utils';

packages/vkui/src/components/CustomSelect/CustomSelectInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';

packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Done } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';

packages/vkui/src/components/DateInput/DateInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';

packages/vkui/src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { leadingZero } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';

packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';

packages/vkui/src/components/DropZone/DropZone.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { callMultiple } from '../../lib/callMultiple';

packages/vkui/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   Icon20ChevronUp,

packages/vkui/src/components/Epic/Epic.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { getNavId } from '../../lib/getNavId';

packages/vkui/src/components/Epic/ScrollSaver.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasChildren } from '../../types';