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

* refactor: lodash-es instead of lodash

* refactor: lodash-es instead of lodash

* chore: fix site

* chore: fix site

* chore: fix site

* chore: update rollup config

* chore(eslint): restricted import lodash

* fix: import setStyle path

.eslintrc

@@ -76,7 +76,13 @@
           "match": false
         }
       }
-    ]
+    ],
+    "no-restricted-imports": ["error", {
+      "paths": [{
+        "name": "lodash",
+        "message": "Please use lodash-es instead."
+      }]
+    }]
   },
   "overrides": [
     {

package.json

@@ -91,7 +91,7 @@
     "@use-gesture/vanilla": "^10.3.0",
     "@vueuse/core": "10.7.0",
     "dayjs": "^1.10.7",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "tdesign-icons-vue-next": "^0.3.4",
     "validator": "^13.5.1"
   },
@@ -117,7 +117,7 @@
     "@rollup/plugin-url": "^6.0.0",
     "@soerenmartius/vue3-clipboard": "^0.1.1",
     "@types/jest": "^28.1.6",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "18.8.0",
     "@types/prismjs": "^1.16.2",
     "@types/validator": "^13.6.3",
@@ -134,6 +134,7 @@
     "@vue/test-utils": "2.4.1",
     "autoprefixer": "^10.2.4",
     "axios": "^1.7.2",
+    "camelcase": "~6.3.0",
     "commitizen": "^4.2.3",
     "concurrently": "^6.5.1",
     "cross-env": "^7.0.3",

scripts/rollup.config.js

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

scripts/test/generate-coverage.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const camelCase = require('lodash/camelCase');
+const { camelCase } = require('lodash-es');
 
 const DomParser = require('dom-parser');
 const parser = new DomParser();

scripts/test/generate-demo-test.js

@@ -1,7 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const camelCase = require('lodash/camelCase');
-const upperFirst = require('lodash/upperFirst');
+const { camelCase, upperFirst } = require('lodash-es');
 
 function resolveCwd(...args) {
   args.unshift(process.cwd());
@@ -24,12 +23,12 @@ const CONFIG = {
   'tdesign-mobile-react': {
     sourcePath: path.resolve(__dirname, resolveCwd('src')),
     targetPath: path.resolve(__dirname, resolveCwd('src')),
-    defaultTemplate: 'import { mount } from \'@vue/test-utils\';',
+    defaultTemplate: "import { mount } from '@vue/test-utils';",
   },
   'tdesign-mobile-vue': {
     sourcePath: path.resolve(__dirname, resolveCwd('src')),
     targetPath: path.resolve(__dirname, resolveCwd(`src`)),
-    defaultTemplate: 'import { mount } from \'@vue/test-utils\';',
+    defaultTemplate: "import { mount } from '@vue/test-utils';",
   },
 };
 
@@ -45,10 +44,10 @@ ${defaultTemplate}
 
 function filterFileFunction(files) {
   // 过滤非 vue jsx 文件
-  const fileType = ['vue', 'jsx']
-  return files.filter(item => {
-    return fileType.includes(item.substr(item.lastIndexOf('.') + 1, item.length))
-  })
+  const fileType = ['vue', 'jsx'];
+  return files.filter((item) => {
+    return fileType.includes(item.substr(item.lastIndexOf('.') + 1, item.length));
+  });
 }
 
 function getKeyFunction(component) {
@@ -78,8 +77,8 @@ function outputOneComponentTestFile(component, demoFiles) {
     demos.push(`  ${name},`);
   });
   if (fixedDateComponentList.includes(component)) {
-    imports.unshift('import MockDate from \'mockdate\';\n');
-    imports.push('\nMockDate.set(\'2020-12-28\');');
+    imports.unshift("import MockDate from 'mockdate';\n");
+    imports.push("\nMockDate.set('2020-12-28');");
   }
 
   demos.push('};');

site/web/plugin-tdoc/md-to-vue.js

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
-import camelCase from 'lodash/camelCase';
+import camelCase from 'camelcase';
 
 import testCoverage from '../test-coverage';
 

src/badge/badge.tsx

@@ -1,6 +1,5 @@
 import { defineComponent, computed } from 'vue';
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
+import { isNumber, isString } from 'lodash-es';
 import config from '../config';
 import BadgeProps from './props';
 import { usePrefixClass } from '../hooks/useClass';

src/checkbox/hooks/setCheckAllStatus.ts

@@ -1,6 +1,6 @@
 // 计算全选按钮的状态
 import { computed, ref, ComputedRef, Ref } from 'vue';
-import intersection from 'lodash/intersection';
+import { intersection } from 'lodash-es';
 
 export const setCheckAllStatus = (optionList: Ref<any[]>, innerValue: Ref, checkedSet: ComputedRef) => {
   const { isArray } = Array;

src/config-provider/context.ts

@@ -1,7 +1,5 @@
 import { InjectionKey, ComputedRef } from 'vue';
-import _mergeWith from 'lodash/mergeWith';
-import merge from 'lodash/merge';
-import isArray from 'lodash/isArray';
+import { merge, mergeWith as _mergeWith, isArray } from 'lodash-es';
 import defaultConfig from '../_common/js/global-config/mobile/default-config';
 import defaultZhLocale from '../_common/js/global-config/mobile/locale/zh_CN';
 import { GlobalConfigProvider } from './type';

src/config-provider/demos/other-en.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import enConfig from 'tdesign-mobile-vue/es/locale/en_US';
 
 // 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置

src/config-provider/demos/table-en.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import enConfig from 'tdesign-mobile-vue/es/locale/en_US';
 
 const columns = [

src/config-provider/useConfig.ts

@@ -1,7 +1,5 @@
 import { computed, h, inject, getCurrentInstance, ref, provide } from 'vue';
-import isFunction from 'lodash/isFunction';
-import cloneDeep from 'lodash/cloneDeep';
-import isString from 'lodash/isString';
+import { cloneDeep, isFunction, isString } from 'lodash-es';
 
 import { defaultGlobalConfig, configProviderInjectKey, mergeWith } from './context';
 import { GlobalConfigProvider } from './type';

src/date-time-picker/date-time-picker.tsx

@@ -3,7 +3,7 @@ import dayjs, { Dayjs, UnitType } from 'dayjs';
 import weekday from 'dayjs/plugin/weekday';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import objectSupport from 'dayjs/plugin/objectSupport';
-import isArray from 'lodash/isArray';
+import { isArray } from 'lodash-es';
 
 import config from '../config';
 import DateTimePickerProps from './props';

src/date-time-picker/shared.ts

@@ -1,4 +1,4 @@
-import isArray from 'lodash/isArray';
+import { isArray } from 'lodash-es';
 
 export const getMeaningColumn = (mode: string | string[]) => {
   const arr = ['year', 'month', 'date', 'hour', 'minute', 'second'];

src/dialog/dialog.tsx

@@ -1,8 +1,6 @@
 import { CloseIcon } from 'tdesign-icons-vue-next';
 import { computed, defineComponent } from 'vue';
-import get from 'lodash/get';
-import isString from 'lodash/isString';
-import isObject from 'lodash/isObject';
+import { get, isString, isObject } from 'lodash-es';
 
 import TButton, { ButtonProps } from '../button';
 import TPopup from '../popup';

src/dropdown-menu/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, reactive, watch, provide } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import { CaretDownSmallIcon, CaretUpSmallIcon } from 'tdesign-icons-vue-next';
-import camelCase from 'lodash/camelCase';
+import { camelCase } from 'lodash-es';
 import config from '../config';
 import {
   context as menuContext,

src/form/__test__/index.test.jsx

@@ -1,7 +1,7 @@
 import { ref, nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import isObject from 'lodash/isObject';
+import { isObject } from 'lodash-es';
 import { FormItem, Form } from '../index.ts';
 import Input from '../../input';
 import Radio, { RadioGroup } from '../../radio';

src/form/form-item.tsx

@@ -11,15 +11,17 @@ import {
   toRefs,
   watch,
 } from 'vue';
-import isArray from 'lodash/isArray';
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
-import isBoolean from 'lodash/isBoolean';
-import cloneDeep from 'lodash/cloneDeep';
-import lodashGet from 'lodash/get';
-import lodashSet from 'lodash/set';
-import isNil from 'lodash/isNil';
-import lodashTemplate from 'lodash/template';
+import {
+  cloneDeep,
+  get as lodashGet,
+  set as lodashSet,
+  isBoolean,
+  isArray,
+  isNil,
+  isNumber,
+  isString,
+  template as lodashTemplate,
+} from 'lodash-es';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
 import { validate } from './form-model';
 

src/form/form-model.ts

@@ -1,12 +1,9 @@
-import isBoolean from 'lodash/isBoolean';
-import isObject from 'lodash/isObject';
-// https://github.com/validatorjs/validator.js
+import { isBoolean, isEmpty, isNumber, isObject } from 'lodash-es';
 
+// https://github.com/validatorjs/validator.js
 import isDate from 'validator/lib/isDate';
 import isEmail from 'validator/lib/isEmail';
-import isEmpty from 'lodash/isEmpty';
 import isURL from 'validator/lib/isURL';
-import isNumber from 'lodash/isNumber';
 
 import {
   CustomValidator,

src/form/form.tsx

@@ -1,8 +1,5 @@
 import { defineComponent, provide, reactive, ref, toRefs } from 'vue';
-import isEmpty from 'lodash/isEmpty';
-import isArray from 'lodash/isArray';
-import isBoolean from 'lodash/isBoolean';
-import isFunction from 'lodash/isFunction';
+import { isArray, isBoolean, isEmpty, isFunction } from 'lodash-es';
 import {
   Data,
   FormResetParams,

src/form/hooks.ts

@@ -1,5 +1,5 @@
 import { Ref, inject, computed, getCurrentInstance } from 'vue';
-import isBoolean from 'lodash/isBoolean';
+import { isBoolean } from 'lodash-es';
 import { TdFormProps } from './type';
 
 export interface FormDisabledProvider {

src/grid/grid-item.tsx

@@ -1,7 +1,5 @@
 import { defineComponent, computed, inject } from 'vue';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
-import isFunction from 'lodash/isFunction';
+import { isFunction, isString, isObject } from 'lodash-es';
 import { Hover } from '../shared';
 import config from '../config';
 import props from './grid-item-props';

src/guide/guide.tsx

@@ -1,12 +1,12 @@
 import { computed, defineComponent, ref, toRefs, h, nextTick, onMounted, watch, Teleport } from 'vue';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import TPopover, { PopoverProps } from '../popover';
 import TPopup, { PopupProps } from '../popup';
 import TButton, { ButtonProps } from '../button';
 import config from '../config';
 import { useVModel } from '../shared';
 import { addClass, getWindowScroll, removeClass } from '../shared/dom';
-import setStyle from '../_common/js/utils/set-style';
+import setStyle from '../_common/js/utils/setStyle';
 import guideProps from './props';
 import { GuideStep, TdGuideProps } from './type';
 import { isFixed, getRelativePosition, getTargetElm, scrollToParentVisibleArea, scrollToElm } from './utils';

src/guide/utils/dom.ts

@@ -1,5 +1,4 @@
-import isString from 'lodash/isString';
-import isFunction from 'lodash/isFunction';
+import { isFunction, isString } from 'lodash-es';
 import { AttachNode } from '../../common';
 import { elementInViewport, getWindowScroll, getWindowSize } from '../../shared/dom';
 /**

src/hooks/icon.tsx

@@ -1,4 +1,4 @@
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import { getCurrentInstance, h } from 'vue';
 
 /**

src/hooks/render-tnode.ts

@@ -1,10 +1,5 @@
 import { h, ComponentPublicInstance, VNode, isVNode } from 'vue';
-import isEmpty from 'lodash/isEmpty';
-import isString from 'lodash/isString';
-import isFunction from 'lodash/isFunction';
-import isObject from 'lodash/isObject';
-import camelCase from 'lodash/camelCase';
-import kebabCase from 'lodash/kebabCase';
+import { camelCase, kebabCase, isEmpty, isFunction, isString, isObject } from 'lodash-es';
 
 export interface JSXRenderContext {
   defaultNode?: VNode | string;

src/hooks/tnode.ts

@@ -1,7 +1,6 @@
 import { h, getCurrentInstance, ComponentInternalInstance, VNode } from 'vue';
-import isFunction from 'lodash/isFunction';
-import camelCase from 'lodash/camelCase';
-import kebabCase from 'lodash/kebabCase';
+import { camelCase, kebabCase, isFunction } from 'lodash-es';
+
 import { getDefaultNode, getParams, OptionsType, JSXRenderContext, getSlotFirst } from './render-tnode';
 
 // 兼容处理插槽名称，同时支持驼峰命名和中划线命名，示例：value-display 和 valueDisplay

src/hooks/useLengthLimit.tsx

@@ -1,6 +1,5 @@
 import { computed, ComputedRef } from 'vue';
-import isNumber from 'lodash/isNumber';
-import isObject from 'lodash/isObject';
+import { isNumber, isObject } from 'lodash-es';
 import log from '../_common/js/log';
 import { getCharacterLength, getUnicodeLength, limitUnicodeMaxLength } from '../_common/js/utils/helper';
 

src/hooks/useTeleport.ts

@@ -1,5 +1,5 @@
 import { computed, Ref, onMounted, ref, watch } from 'vue';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import { getSSRAttach, getAttach } from '../shared/dom';
 import { AttachNode } from '../common';
 

src/indexes/indexes.tsx

@@ -11,7 +11,7 @@ import {
   ComponentPublicInstance,
   nextTick,
 } from 'vue';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
 import IndexesProps from './props';

src/input/input.tsx

@@ -4,7 +4,7 @@ import {
   BrowseOffIcon as TBrowseOffIcon,
   CloseCircleFilledIcon as TCloseCircleFilledIcon,
 } from 'tdesign-icons-vue-next';
-import isFunction from 'lodash/isFunction';
+import { isFunction } from 'lodash-es';
 import config from '../config';
 import InputProps from './props';
 import { InputValue, TdInputProps } from './type';

src/loading/plugin.tsx

@@ -1,5 +1,5 @@
 import { App, Plugin, createApp, defineComponent, h, reactive } from 'vue';
-import merge from 'lodash/merge';
+import { merge } from 'lodash-es';
 import LoadingComponent from './loading';
 import { getAttach, removeClass, addClass } from '../shared/dom';
 import { TdLoadingProps, LoadingInstance, LoadingMethod } from './type';

src/message/message.tsx

@@ -1,7 +1,6 @@
 import { h, ref, computed, watch, defineComponent, toRefs, reactive, nextTick, onMounted, Transition } from 'vue';
 import { CheckCircleFilledIcon, CloseIcon, InfoCircleFilledIcon } from 'tdesign-icons-vue-next';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
+import { isString, isObject } from 'lodash-es';
 
 import Link from '../link';
 import props from './props';

src/notice-bar/notice-bar.tsx

@@ -1,7 +1,6 @@
 import { reactive, ref, toRefs, computed, onMounted, nextTick, defineComponent, watch } from 'vue';
 import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
-import isArray from 'lodash/isArray';
-import isObject from 'lodash/isObject';
+import { isArray, isObject } from 'lodash-es';
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
 import props from './props';
 import { NoticeBarTrigger, NoticeBarMarquee } from './type';