refactor: lodash-es instead of lodash (#3345)

* refactor: lodash-es instead of lodash

* chore: update common

* chore: remove packageManager

package.json

@@ -121,7 +121,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/estree": "1.0.6",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/lodash": "4.17.13",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.7.0",
     "@types/raf": "^3.4.0",
     "@types/react": "~18.2.0",
@@ -208,7 +208,7 @@
     "classnames": "~2.5.1",
     "dayjs": "1.11.10",
     "hoist-non-react-statics": "~3.3.2",
-    "lodash": "~4.17.15",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "raf": "~3.4.1",
     "react-is": "^18.2.0",

script/init-component/index.js

@@ -13,7 +13,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const _ = require('lodash');
+const { startCase, camelCase, template } = require('lodash-es');
 const config = require('./config');
 
 const cwdPath = process.cwd();
@@ -29,13 +29,13 @@ function createFile(path, data = '', desc) {
 }
 
 function getPascalCase(name) {
-  return _.startCase(_.camelCase(name)).replace(/ /g, '');
+  return startCase(camelCase(name)).replace(/ /g, '');
 }
 
 function outputFileWithTemplate(item, component, desc, _d) {
   const tplPath = path.resolve(__dirname, `./tpl/${item.template}`);
   let data = fs.readFileSync(tplPath).toString();
-  const compiled = _.template(data);
+  const compiled = template(data);
   data = compiled({
     component,
     PascalCaseComponent: getPascalCase(component),

script/rollup.config.js

@@ -215,7 +215,7 @@ const umdConfig = {
     banner,
     format: 'umd',
     exports: 'named',
-    globals: { react: 'React', lodash: '_' },
+    globals: { react: 'React' },
     sourcemap: true,
     file: `dist/${name}.js`,
   },
@@ -234,7 +234,7 @@ const umdMinConfig = {
     banner,
     format: 'umd',
     exports: 'named',
-    globals: { react: 'React', lodash: '_' },
+    globals: { react: 'React' },
     sourcemap: true,
     file: `dist/${name}.min.js`,
   },

site/src/components/codesandbox/content.js

@@ -80,11 +80,11 @@ export const pkgContent = JSON.stringify(
       'react-scripts': '^5.0.0',
       '@types/react': orgPkg.devDependencies['@types/react'],
       '@types/react-dom': orgPkg.devDependencies['@types/react-dom'],
-      lodash: orgPkg.dependencies.lodash,
+      'lodash-es': orgPkg.dependencies['lodash-es'],
     },
     devDependencies: {
       typescript: '^4.4.4',
-      '@types/lodash': orgPkg.devDependencies['@types/lodash'],
+      '@types/lodash-es': orgPkg.devDependencies['@types/lodash-es'],
     },
     scripts: {
       start: 'react-scripts start',

src/_util/dom.ts

@@ -1,5 +1,5 @@
 import raf from 'raf';
-import isString from 'lodash/isString';
+import { isString } from 'lodash-es';
 import { easeInOutCubic, EasingFunction } from './easing';
 import { ScrollContainer, ScrollContainerElement } from '../common';
 

src/_util/helper.ts

@@ -1,4 +1,4 @@
-import camelCase from 'lodash/camelCase';
+import { camelCase } from 'lodash-es';
 
 export function omit(obj: object, fields: string[]): object {
   const shallowCopy = {

src/_util/parseTNode.ts

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import { TNode } from '../common';
 import log from '../_common/js/log';
 

src/affix/Affix.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import { StyledProps, ScrollContainerElement } from '../common';
 import { TdAffixProps } from './type';
 import { getScrollContainer } from '../_util/dom';

src/anchor/Anchor.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
 import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import isFunction from 'lodash/isFunction';
+import { isEmpty , isFunction } from 'lodash-es';
 import { StyledProps } from '../common';
 import { TdAnchorProps } from './type';
 import useConfig from '../hooks/useConfig';

src/auto-complete/HighlightOption.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import escapeRegExp from 'lodash/escapeRegExp';
+import { escapeRegExp } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 
 export interface TdHighlightOptionProps {

src/auto-complete/OptionList.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react';
 import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-import escapeRegExp from 'lodash/escapeRegExp';
+import { isFunction , escapeRegExp } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 import log from '../_common/js/log';
 import { CommonClassNameType } from '../hooks/useCommonClassName';

src/auto-complete/_example/filter.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Space, AutoComplete } from 'tdesign-react';
 import type { AutoCompleteProps } from 'tdesign-react';
-import escapeRegExp from 'lodash/escapeRegExp';
+import { escapeRegExp } from 'lodash-es';
 
 const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
 

src/breadcrumb/BreadcrumbItem.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import useCommonClassName from '../hooks/useCommonClassName';

src/cascader/Cascader.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import pick from 'lodash/pick';
-import omit from 'lodash/omit';
+import { pick , omit } from 'lodash-es';
 import Panel from './components/Panel';
 import SelectInput from '../select-input';
 import FakeArrow from '../common/FakeArrow';

src/cascader/CascaderPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import pick from 'lodash/pick';
+import { pick } from 'lodash-es';
 import classNames from 'classnames';
 import Panel from './components/Panel';
 import { TdCascaderProps } from './interface';

src/cascader/components/Item.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react';
 
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import TLoading from '../../loading';
 import Checkbox from '../../checkbox';
 

src/cascader/core/effect.ts

@@ -1,6 +1,4 @@
-import isNumber from 'lodash/isNumber';
-import isFunction from 'lodash/isFunction';
-import cloneDeep from 'lodash/cloneDeep';
+import { isNumber , isFunction , cloneDeep } from 'lodash-es';
 import { TreeNode, CascaderContextType, TdCascaderProps, TreeNodeValue, TreeNodeModel } from '../interface';
 import { getFullPathLabel, getTreeValue } from './helper';
 

src/cascader/core/helper.ts

@@ -1,4 +1,4 @@
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash-es';
 import {
   TreeNode,
   CascaderContextType,

src/cascader/hooks.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 
-import isEqual from 'lodash/isEqual';
-import isFunction from 'lodash/isFunction';
+import { isEqual , isFunction } from 'lodash-es';
 
 import TreeStore from '../_common/js/tree-v1/tree-store';
 import { getTreeValue, getCascaderValue, isEmptyValues, isValueInvalid } from './core/helper';

src/checkbox/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import isNumber from 'lodash/isNumber';
+import { isNumber } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 import { CheckContext, CheckContextValue, CheckProps } from '../common/Check';
 import { CheckboxGroupValue, CheckboxOption, CheckboxOptionObj, TdCheckboxGroupProps, TdCheckboxProps } from './type';

src/color-picker/components/panel/format/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import upperCase from 'lodash/upperCase';
+import { upperCase } from 'lodash-es';
 import Select from '../../../../select';
 import FormatInput from './inputs';
 import Color from '../../../../_common/js/color-picker/color';

src/color-picker/components/panel/format/inputs.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import Color from '../../../../_common/js/color-picker/color';
 import Input from '../../../../input';
 import InputNumber from '../../../../input-number';

src/color-picker/components/panel/linear-gradient.tsx

@@ -1,5 +1,5 @@
 import React, { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash-es';
 import classNames from 'classnames';
 import useClassName from '../../hooks/useClassNames';
 import { genGradientPoint, gradientColors2string } from '../../../_common/js/color-picker/color';

src/common/Check.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext, MouseEvent, ChangeEvent } from 'react';
 import classNames from 'classnames';
-import isBoolean from 'lodash/isBoolean';
+import { isBoolean } from 'lodash-es';
 import { omit } from '../_util/helper';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';

src/config-provider/ConfigContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import defaultLocale from '../locale/zh_CN';
 import defaultConfig from '../_common/js/global-config/default-config';
 import { GlobalConfigProvider } from './type';

src/config-provider/ConfigProvider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import _mergeWith from 'lodash/mergeWith';
+import { mergeWith as _mergeWith } from 'lodash-es';
 import ConfigContext, { defaultGlobalConfig, Config } from './ConfigContext';
 import { GlobalConfigProvider } from './type';
 

src/config-provider/_example/calendar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, Calendar } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/date-picker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, DatePicker, DateRangePicker, Space } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/dialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, DialogCard, Space } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/global.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, Space } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/others.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import {
   ConfigProvider,
   Form,

src/config-provider/_example/pagination.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, Pagination } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/popconfirm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, Popconfirm, Button, Space } from 'tdesign-react';
 import enConfig from 'tdesign-react/es/locale/en_US';
 

src/config-provider/_example/table.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import { ConfigProvider, Table, Space } from 'tdesign-react';
 import { ChevronRightIcon, CaretDownSmallIcon } from 'tdesign-icons-react';
 import enConfig from 'tdesign-react/es/locale/en_US';

src/date-picker/DatePicker.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
-import isDate from 'lodash/isDate';
+import { isDate } from 'lodash-es';
 import useConfig from '../hooks/useConfig';
 import { StyledProps } from '../common';
 import { TdDatePickerProps, PresetDate, DateMultipleValue, DateValue } from './type';

src/date-picker/hooks/useDisableDate.ts

@@ -1,4 +1,4 @@
-import isObject from 'lodash/isObject';
+import { isObject } from 'lodash-es';
 import type { TdDatePickerProps, TdDateRangePickerProps } from '../type';
 import { isEnabledDate } from '../../_common/js/date-picker/utils';
 

src/date-picker/hooks/useSingle.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-react';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
-import omit from 'lodash/omit';
+import { omit } from 'lodash-es';
 import useConfig from '../../hooks/useConfig';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import { TdDatePickerProps } from '../type';

src/date-picker/panel/RangePanel.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import useConfig from '../../hooks/useConfig';
 import { StyledProps } from '../../common';
 import PanelContent from './PanelContent';

src/date-picker/panel/SinglePanel.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import useConfig from '../../hooks/useConfig';
 import { StyledProps } from '../../common';
 import PanelContent from './PanelContent';

src/date-picker/utils.ts

@@ -1,4 +1,4 @@
-import isNil from 'lodash/isNil';
+import { isNil } from 'lodash-es';
 import { parseToDayjs } from '../_common/js/date-picker/format';
 
 // 用于头部日期切换修正

src/descriptions/Descriptions.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import isArray from 'lodash/isArray';
-import assign from 'lodash/assign';
+import { isArray , assign } from 'lodash-es';
 import { TdDescriptionItemProps, TdDescriptionsProps } from './type';
 import { descriptionItemDefaultProps, descriptionsDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';

src/dialog/DialogCard.tsx

@@ -1,8 +1,6 @@
 import React, { forwardRef, isValidElement } from 'react';
 import classNames from 'classnames';
-import isString from 'lodash/isString';
-import isObject from 'lodash/isObject';
-import isFunction from 'lodash/isFunction';
+import { isString , isObject , isFunction } from 'lodash-es';
 import {
   CloseIcon as TdCloseIcon,
   InfoCircleFilledIcon as TdInfoCircleFilledIcon,

src/drawer/Drawer.tsx

@@ -1,8 +1,6 @@
 import React, { forwardRef, useState, useEffect, useImperativeHandle, useRef, useMemo, isValidElement } from 'react';
 import classnames from 'classnames';
-import isString from 'lodash/isString';
-import isObject from 'lodash/isObject';
-import isFunction from 'lodash/isFunction';
+import { isString , isObject , isFunction } from 'lodash-es';
 
 import { CSSTransition } from 'react-transition-group';
 import { CloseIcon as TdCloseIcon } from 'tdesign-icons-react';

src/dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { isValidElement, useState } from 'react';
 import classNames from 'classnames';
-import omit from 'lodash/omit';
+import { omit } from 'lodash-es';
 import { DropdownOption, TdDropdownProps } from './type';
 import { StyledProps } from '../common';
 import Popup, { PopupVisibleChangeContext } from '../popup';

src/dropdown/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import { ChevronRightIcon as TdIconChevronRight } from 'tdesign-icons-react';
 import useConfig from '../hooks/useConfig';
 import { DropdownProps } from './Dropdown';