build: upgrade vite to v5, vitest to v2, typescript to v5 (#3115)

* build(upgrade vite vitest version): upgrade: Vite & Vitest & typescript version

* fix: common conflict

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

package.json

@@ -20,6 +20,7 @@
     "CHANGELOG.md"
   ],
   "sideEffects": [
+    "src/**/style/**",
     "dist/*",
     "site/*",
     "es/**/style/**",
@@ -121,21 +122,21 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/estree": "0.0.50",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/lodash": "4.14.182",
-    "@types/node": "^17.0.21",
+    "@types/lodash": "4.17.9",
+    "@types/node": "^22.7.0",
     "@types/raf": "^3.4.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/react-is": "^18.2.0",
     "@types/react-transition-group": "^4.4.2",
-    "@types/rimraf": "^3.0.2",
+    "@types/rimraf": "^4.0.5",
     "@types/testing-library__jest-dom": "5.14.2",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
-    "@vitejs/plugin-react": "^1.3.2",
-    "@vitest/coverage-c8": "^0.28.5",
-    "@vitest/coverage-istanbul": "^0.24.1",
-    "@vitest/ui": "^0.24.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "autoprefixer": "^10.4.0",
     "babel-polyfill": "^6.26.0",
     "camelcase": "^6.2.1",
@@ -173,7 +174,7 @@
     "react-element-to-jsx-string": "^15.0.0",
     "react-router-dom": "^6.2.2",
     "resize-observer-polyfill": "^1.5.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.0.1",
     "rollup": "^2.74.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-esbuild": "^4.9.1",
@@ -192,12 +193,12 @@
     "tdesign-theme-generator": "^1.0.0",
     "ts-morph": "^13.0.02",
     "ts-node": "^10.4.0",
-    "typescript": "~4.5.4",
-    "vite": "^2.9.15",
-    "vite-plugin-istanbul": "^5.0.0",
-    "vite-plugin-pwa": "^0.12.8",
-    "vite-plugin-tdoc": "^2.0.1",
-    "vitest": "^0.24.1",
+    "typescript": "5.6.2",
+    "vite": "^5.4.7",
+    "vite-plugin-istanbul": "^6.0.2",
+    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-tdoc": "^2.0.4",
+    "vitest": "^2.1.1",
     "workbox-precaching": "^7.0.0"
   },
   "dependencies": {

site/pwaConfig.js

@@ -1,6 +1,9 @@
 export default {
   strategies: 'injectManifest',
-  includeAssets: ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png'],  
+  includeAssets: ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png'], 
+  injectManifest: {
+    maximumFileSizeToCacheInBytes: 5000000
+  }, 
   manifest: {
     name: 'TDesign for React',
     short_name: 'TDesign',

site/src/components/Demo.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Button from 'tdesign-react/button';
 import { Link, useLocation } from 'react-router-dom';
 
-export const demoFiles = import.meta.globEager('../../../src/**/_example/*.tsx');
+export const demoFiles = import.meta.glob('../../../src/**/_example/*.tsx', { eager: true });
 
 const demoObject = {};
 Object.keys(demoFiles).forEach((key) => {

site/src/components/Playground.jsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import Button from 'tdesign-react/button';
 import 'tdesign-react/style/index.js';
 
-const demoFiles = import.meta.globEager('../../../src/**/_example/*.jsx');
+const demoFiles = import.meta.glob('../../../src/**/_example/*.jsx', { eager: true });
 const demoObject = {};
 const componentList = new Set();
 Object.keys(demoFiles).forEach((key) => {

src/_common

@@ -1 +1 @@
-Subproject commit ddf8006355ee1a42a91b7c10f090389071bc7eaf
+Subproject commit 7033aea8c26f5619c2e8ed44325a94752920a2bb

src/avatar/__tests__/__snapshots__/vitest-avatar.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Avatar Component > props.children works fine 1`] = `
 <div>

src/back-top/__tests__/__snapshots__/vitest-back-top.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BackTop Component > props.children works fine 1`] = `
 <div>

src/button/__tests__/__snapshots__/vitest-button.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button Component > props.block works fine 1`] = `
 <div>

src/date-picker/__tests__/date-picker-panel.test.tsx

@@ -1,20 +1,18 @@
-import MockDate from 'mockdate';
 import React from 'react';
 import dayjs from 'dayjs';
 
 import { render, vi, fireEvent } from '@test/utils';
 
 import { DatePickerPanel } from '..';
-// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
-MockDate.set('2023-09-01');
 
 describe('DatePickerPanel', () => {
   beforeEach(() => {
-    MockDate.set('2023-09-01');
+    const mockDate = new Date(2023, 8, 1);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    MockDate.reset();
+    vi.useRealTimers();
   });
 
   test('value props', async () => {

src/date-picker/__tests__/date-picker.test.tsx

@@ -1,4 +1,3 @@
-import MockDate from 'mockdate';
 import React from 'react';
 import dayjs from 'dayjs';
 import { BrowseIcon, LockOnIcon } from 'tdesign-icons-react';
@@ -7,16 +6,15 @@ import { render, fireEvent, waitFor, vi } from '@test/utils';
 
 import DatePicker from '..';
 import type { DateValue } from '../type';
-// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
-MockDate.set('2022-08-27');
 
 describe('DatePicker', () => {
   beforeEach(() => {
-    MockDate.set('2022-08-27');
+    const mockDate = new Date(2022, 7, 27);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    MockDate.reset();
+    vi.useRealTimers();
   });
 
   test('clearable', async () => {

src/date-picker/__tests__/date-range-picker-panel.test.tsx

@@ -1,20 +1,18 @@
-import MockDate from 'mockdate';
 import React from 'react';
 import dayjs from 'dayjs';
 
 import { render, vi, fireEvent, waitFor } from '@test/utils';
 
 import { DateRangePickerPanel } from '..';
-// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
-MockDate.set('2023-09-01');
 
 describe('DateRangePickerPanel', () => {
   beforeEach(() => {
-    MockDate.set('2023-09-01');
+    const mockDate = new Date(2023, 8, 1);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    MockDate.reset();
+    vi.useRealTimers();
   });
 
   test('value props', async () => {

src/date-picker/__tests__/date-range-picker.test.tsx

@@ -1,4 +1,3 @@
-import MockDate from 'mockdate';
 import React from 'react';
 import { BrowseIcon, LockOnIcon } from 'tdesign-icons-react';
 import dayjs from 'dayjs';
@@ -7,17 +6,15 @@ import { render, fireEvent, act, waitFor, vi } from '@test/utils';
 
 import { DateRangePicker } from '..';
 
-// 固定时间，当使用 new Date() 时，返回固定时间，防止“当前时间”的副作用影响，导致 snapshot 变更，mockdate 插件见 https://github.com/boblauer/MockDate
-MockDate.set('2022-08-27');
-
 describe('DateRangePicker', () => {
   beforeEach(() => {
     vi.useFakeTimers();
-    MockDate.set('2022-08-27');
+    const mockDate = new Date(2022, 7, 27);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    MockDate.reset();
+    vi.useRealTimers();
   });
 
   it('clearable', async () => {

src/divider/__tests__/__snapshots__/vitest-divider.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Divider Component > props.align is equal to center 1`] = `
 <div>

src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Guide Component > GuideStep.body works fine 1`] = `
 <body

src/image-viewer/_example/albumIcons.tsx

@@ -26,7 +26,7 @@ const ImageViewerIconList = ({
   onClick,
 }: {
   list: Array<{ label: string }>;
-  onClick: ({ label: string }, index: number) => void;
+  onClick: ({ label }, index: number) => void;
 }) => (
   <ul style={{ padding: '2px' }}>
     {list.map((it, index) => (

src/image/__tests__/__snapshots__/vitest-image.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Image Component > props.fit is equal to contain 1`] = `
 <img

src/input/__tests__/__snapshots__/vitest-input.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input Component > props.align is equal to center 1`] = `
 <div

src/link/__tests__/__snapshots__/vitest-link.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Link Component > props.children works fine 1`] = `
 <div>

src/radio/__tests__/__snapshots__/vitest-radio.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio Component > props.checked is equal to true 1`] = `
 <div>

src/table/__tests__/__snapshots__/pagination.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BaseTable Pagination > locale data pagination controlled > both pagination.pageSize and pagination.current changed 1`] = `
 NodeList [

src/table/__tests__/__snapshots__/vitest-table.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BaseTable Component > props.showHeader: BaseTable contains element \`thead\` 1`] = `
 <div>

src/timeline/__tests__/__snapshots__/vitest-timeline.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TimelineItem Component > props.children works fine 1`] = `
 <div>

src/tree/__tests__/tree.test.tsx

@@ -211,7 +211,7 @@ describe('Tree test', () => {
     expect(nodeOpenItems.length).toBe(1);
   });
 
-  test('props.line', async () => {
+  describe('Test props.line', async () => {
     const data = [
       {
         label: '第1一段',
@@ -253,18 +253,18 @@ describe('Tree test', () => {
         line: <span className="custom-line">line</span>,
       });
       await mockDelay(300);
-      expect(container.querySelectorAll('.custom-line').length).toBe(4);
+      expect(container.querySelectorAll('.custom-line').length).toBe(6);
     });
 
     it('wehen props.line is a customized function, it works fine', async () => {
-      const line: any = (prams) => <span className="custom-line">{prams}</span>;
+      const line: any = () => <span className="custom-line"></span>;
       const { container } = await renderTreeWithProps({
         data,
         expandAll: true,
         line,
       });
       await mockDelay(300);
-      expect(container.querySelectorAll('.custom-line').length).toBe(4);
+      expect(container.querySelectorAll('.custom-line').length).toBe(6);
     });
   });
   test('when props.icon is a validElement, it works fine', async () => {

src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Upload Component > props.draggable: theme=image & draggable=true, fail file render fine 1`] = `
 <div>

tsconfig.json

@@ -11,7 +11,6 @@
     "lib": ["esnext", "dom"],
     "importHelpers": true,
     "allowSyntheticDefaultImports": true,
-    "suppressImplicitAnyIndexErrors": true,
     "baseUrl": "./",
     "paths": {
       "tdesign-react": ["src"],