feat: insert use client automatically at compilations instead of hardcode (#44608)

* feat: remove the hardcode of `use client`

* chore: update `@ant-design/tools`

* test: update

* fix: incorrect dictionary

* chore: update dep

* ci: check use client

* chore: update ci

* fix: should be LIB_DIR

* ci: should only run in dist

* chore: update check tsx files

.github/workflows/test.yml

@@ -188,6 +188,12 @@ jobs:
         if: ${{ matrix.module == 'dist' }}
         run: node ./tests/dekko/dist.test.js
 
+      - name: check use client
+        if: ${{ matrix.module == 'dist' }}
+        run: node ./tests/dekko/use-client.test.js
+        env:
+          LIB_DIR: dist
+
       # dom test
       - name: dom test
         if: ${{ matrix.module == 'dom' }}
@@ -286,6 +292,10 @@ jobs:
 
       - name: check
         run: node ./tests/dekko/lib.test.js
+
+      - name: check use client
+        run: node ./tests/dekko/use-client.test.js
+
     needs: setup
 
   compiled-module-test:

components/affix/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import React, { createRef, forwardRef, useContext } from 'react';
 
 import classNames from 'classnames';

components/alert/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';

components/anchor/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import InternalAnchor from './Anchor';
 import AnchorLink from './AnchorLink';
 

components/app/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React, { useContext } from 'react';

components/auto-complete/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { BaseSelectRef } from 'rc-select';
 import toArray from 'rc-util/lib/Children/toArray';

components/avatar/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { AvatarProps } from './avatar';
 import InternalAvatar from './avatar';

components/back-top/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';

components/badge/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classnames from 'classnames';
 import CSSMotion from 'rc-motion';
 import * as React from 'react';

components/breadcrumb/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Breadcrumb from './Breadcrumb';
 
 export type { BreadcrumbProps } from './Breadcrumb';

components/button/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Button from './button';
 
 export type { SizeType as ButtonSize } from '../config-provider/SizeContext';

components/calendar/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import type { CalendarProps } from './generateCalendar';

components/card/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import InternalCard from './Card';
 import Grid from './Grid';
 import Meta from './Meta';

components/carousel/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import type { Settings } from '@ant-design/react-slick';
 import SlickCarousel from '@ant-design/react-slick';

components/cascader/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';

components/checkbox/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type * as React from 'react';
 import type { CheckboxProps } from './Checkbox';
 import InternalCheckbox from './Checkbox';

components/col/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { Col, type ColProps, type ColSize } from '../grid';
 
 export type { ColProps, ColSize };

components/collapse/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Collapse from './Collapse';
 
 export type { CollapseProps } from './Collapse';

components/color-picker/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import ColorPicker from './ColorPicker';
 
 export type { ColorPickerProps } from './ColorPicker';

components/config-provider/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { createTheme } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';

components/date-picker/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type { Dayjs } from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import genPurePanel from '../_util/PurePanel';

components/descriptions/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 /* eslint-disable react/no-array-index-key */
 import classNames from 'classnames';
 import * as React from 'react';

components/divider/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import * as React from 'react';
 import warning from '../_util/warning';

components/drawer/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
 import RcDrawer from 'rc-drawer';

components/dropdown/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import InternalDropdown from './dropdown';
 import DropdownButton from './dropdown-button';
 

components/empty/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';

components/float-button/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import BackTop from './BackTop';
 import FloatButton from './FloatButton';
 import FloatButtonGroup from './FloatButtonGroup';

components/form/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
 import warning from '../_util/warning';
 import ErrorList, { type ErrorListProps } from './ErrorList';

components/grid/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Col from './col';
 import useInternalBreakpoint from './hooks/useBreakpoint';
 import Row from './row';

components/image/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';

components/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 export type { Breakpoint } from './_util/responsiveObserver';
 export { default as Affix } from './affix';
 export type { AffixProps } from './affix';

components/input-number/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';

components/input/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type * as React from 'react';
 import Group from './Group';
 import type { InputProps, InputRef } from './Input';

components/layout/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import InternalLayout, { Content, Footer, Header } from './layout';
 import Sider from './Sider';
 

components/list/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 // eslint-disable-next-line import/no-named-as-default
 import * as React from 'react';

components/locale/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import * as React from 'react';
 import warning from '../_util/warning';

components/mentions/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import RcMentions from 'rc-mentions';
 import type {

components/menu/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { MenuRef as RcMenuRef } from 'rc-menu';
 import { ItemGroup } from 'rc-menu';
 import * as React from 'react';

components/message/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import { render } from 'rc-util/lib/React/render';
 

components/modal/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { ModalStaticFunctions } from './confirm';
 import confirm, {
   modalGlobalConfig,

components/notification/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import { render } from 'rc-util/lib/React/render';
 

components/pagination/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Pagination from './Pagination';
 
 export type { PaginationConfig, PaginationProps } from './Pagination';

components/popconfirm/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';

components/popover/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import * as React from 'react';
 import type { RenderFunction } from '../_util/getRenderPropValue';

components/progress/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Progress from './progress';
 
 export type { ProgressAriaProps, ProgressProps } from './progress';

components/qr-code/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import classNames from 'classnames';
 import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';

components/radio/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type * as React from 'react';
 import Group from './group';
 import type { RadioProps } from './interface';

components/rate/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import StarFilled from '@ant-design/icons/StarFilled';
 import classNames from 'classnames';
 import RcRate from 'rc-rate';

components/result/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';

components/row/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Row, type RowProps } from '../grid';
 
 export type { RowProps };

components/segmented/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type {
   SegmentedLabeledOption as RcSegmentedLabeledOption,

components/select/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
 import classNames from 'classnames';
 import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';

components/skeleton/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Skeleton from './Skeleton';
 
 export type { SkeletonProps } from './Skeleton';

components/slider/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';

components/space/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';

components/spin/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';

components/statistic/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { CountdownProps } from './Countdown';
 import Countdown from './Countdown';
 import type { StatisticProps } from './Statistic';

components/steps/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';

components/style/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { AliasToken, DerivativeToken } from '../theme/internal';

components/switch/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import RcSwitch from 'rc-switch';

components/table/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { type TablePaginationConfig, type TableProps } from './InternalTable';
 import Table from './Table';
 

components/tabs/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';

components/tag/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';

components/theme/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 /* eslint-disable import/prefer-default-export */
 import getDesignToken from './getDesignToken';
 import type { GlobalToken, MappingAlgorithm } from './interface';

components/time-picker/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { Dayjs } from 'dayjs';
 import * as React from 'react';
 import genPurePanel from '../_util/PurePanel';

components/timeline/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Timeline from './Timeline';
 
 export type { TimelineProps } from './Timeline';

components/tooltip/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { BuildInPlacements } from '@rc-component/trigger';
 import classNames from 'classnames';
 import RcTooltip from 'rc-tooltip';

components/tour/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import RCTour from '@rc-component/tour';
 import classNames from 'classnames';
 import React, { useContext } from 'react';

components/transfer/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { ChangeEvent, CSSProperties } from 'react';
 import React, { useCallback, useContext } from 'react';

components/tree-select/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import classNames from 'classnames';
 import type { BaseSelectRef } from 'rc-select';
 import type { Placement } from 'rc-select/lib/BaseSelect';

components/tree/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import type RcTree from 'rc-tree';
 import type { BasicDataNode } from 'rc-tree';
 import { TreeNode } from 'rc-tree';

components/typography/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Link from './Link';
 import Paragraph from './Paragraph';
 import Text from './Text';

components/upload/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import Dragger from './Dragger';
 import type { UploadProps } from './Upload';
 import InternalUpload, { LIST_IGNORE } from './Upload';

package.json

@@ -161,7 +161,7 @@
   "devDependencies": {
     "@ant-design/compatible": "^5.1.2",
     "@ant-design/happy-work-theme": "^1.0.0",
-    "@ant-design/tools": "^17.0.0",
+    "@ant-design/tools": "^17.3.1",
     "@antv/g6": "^4.8.13",
     "@argos-ci/core": "^0.9.0",
     "@babel/eslint-plugin": "^7.19.1",

tests/dekko/use-client.test.js

@@ -0,0 +1,32 @@
+const $ = require('dekko');
+const chalk = require('chalk');
+const fs = require('fs');
+
+const includeUseClient = (filename) =>
+  fs.readFileSync(filename).toString().includes('"use client"');
+
+if (process.env.LIB_DIR === 'dist') {
+  $('dist/*')
+    .isFile()
+    .assert("doesn't contain use client", (filename) => !includeUseClient(filename));
+} else {
+  $('{es,lib}/index.js')
+    .isFile()
+    .assert('contain use client', (filename) => includeUseClient(filename));
+
+  $('{es,lib}/*/index.js')
+    .isFile()
+    .assert('contain use client', (filename) => includeUseClient(filename));
+
+  // check tsx files
+  $('{es,lib}/typography/*.js')
+    .isFile()
+    .assert('contain use client', (filename) => includeUseClient(filename));
+
+  $('{es,lib}/typography/Base/*.js')
+    .isFile()
+    .assert('contain use client', (filename) => includeUseClient(filename));
+}
+
+// eslint-disable-next-line no-console
+console.log(chalk.green('✨ use client passed!'));