feat: vite upgrade from 4.4 to 6.2 & add vitest@2.1.1

package.json

@@ -12,6 +12,7 @@
     "dev": "cd site && vite --force",
     "site": "cd site && vite build",
     "site:preview": "cd site && vite build --mode preview && cd ../_site && cp index.html 404.html",
+    "test": "vitest",
     "prebuild": "rimraf es/* lib/* dist/* esm/*",
     "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc",
     "build:analyze": "cross-env NODE_ENV=production ANALYZE=true rollup -c script/rollup.config.js && npm run build:tsc",
@@ -30,8 +31,7 @@
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "eslint --fix --ext .ts,.tsx .",
     "generate:entry": "node ./script/generate-entry.js",
-    "prepare": "husky",
-    "test": "echo 'test to do'"
+    "prepare": "husky"
   },
   "files": [
     "esm",
@@ -100,6 +100,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/cz-commitlint": "^19.2.0",
+    "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -120,6 +121,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "express": "^4.17.3",
     "gray-matter": "^4.0.3",
+    "happy-dom": "^20.0.11",
     "highlight.js": "^11.11.1",
     "husky": "^9.0.11",
     "less": "^4.2.2",
@@ -149,9 +151,10 @@
     "tdesign-theme-generator": "^1.0.16",
     "ts-node": "^10.9.1",
     "typescript": "^5.8.2",
-    "vite": "^4.4.5",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite": "^6.2.0",
+    "vite-plugin-pwa": "^1.2.0",
     "vite-plugin-tdoc": "^2.0.4",
+    "vitest": "^2.1.1",
     "workbox-precaching": "^7.1.0"
   }
 }

script/rollup.config.js

@@ -38,19 +38,19 @@ const banner = `/**
 // 获取分析插件
 const getAnalyzePlugins = (buildType = 'umd') => {
   if (!isAnalyze && buildType !== 'umd') return [];
-  
+
   const plugins = [];
-  
+
   // 基础分析器 - 控制台输出
   plugins.push(
     analyzer({
       limit: 10,
       summaryOnly: false,
       hideDeps: false,
       showExports: true,
-    })
+    }),
   );
-  
+
   // 可视化分析器 - 生成 HTML 报告
   if (isAnalyze || buildType === 'umd') {
     plugins.push(
@@ -62,9 +62,9 @@ const getAnalyzePlugins = (buildType = 'umd') => {
         gzipSize: true,
         brotliSize: true,
         projectRoot: resolve(__dirname, '..'),
-      })
+      }),
     );
-    
+
     // 生成多种格式的报告
     if (buildType === 'umd') {
       plugins.push(
@@ -85,14 +85,25 @@ const getAnalyzePlugins = (buildType = 'umd') => {
           gzipSize: true,
           brotliSize: true,
           projectRoot: resolve(__dirname, '..'),
-        })
+        }),
       );
     }
   }
-  
+
   return plugins;
 };
 
+// 处理?inline后缀
+const inlineResolver = {
+  name: 'inline-resolver',
+  resolveId(source, importer) {
+    if (source.endsWith('?inline')) {
+      return this.resolve(source.replace('?inline', ''), importer, { skipSelf: true });
+    }
+    return null;
+  },
+};
+
 const input = 'src/index-lib.ts';
 const inputList = [
   'src/**/*.ts',
@@ -106,6 +117,7 @@ const inputList = [
 
 const getPlugins = ({ env, isProd = false, ignoreLess = false } = {}) => {
   const plugins = [
+    inlineResolver,
     nodeResolve(),
     commonjs(),
     esbuild({
@@ -197,7 +209,7 @@ const getPlugins = ({ env, isProd = false, ignoreLess = false } = {}) => {
 
 const cssConfig = {
   input: ['src/style/index.js'],
-  plugins: [multiInput(), styles({ mode: 'extract' })],
+  plugins: [inlineResolver, multiInput(), styles({ mode: 'extract' })],
   output: {
     banner,
     dir: 'lib/',
@@ -208,7 +220,7 @@ const cssConfig = {
 
 const umdCssConfig = {
   input: ['src/style/index.js'],
-  plugins: [multiInput(), styles({ mode: 'extract' })],
+  plugins: [inlineResolver, multiInput(), styles({ mode: 'extract' })],
   output: {
     banner,
     dir: 'dist/',

src/affix/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/affix/_index.less';
+import styles from '../../_common/style/web/components/affix/_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/alert/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/alert/_index.less';
+import styles from '../../_common/style/web/components/alert/_index.less?inline';
 
 export const styleSheet = css`
     ${styles}

src/attachments/attachments.tsx

@@ -7,10 +7,9 @@ import { Component, createRef, tag } from 'omi';
 import { getClassPrefix } from '../_util/classname';
 import classname from '../_util/classname';
 import { setExportparts } from '../_util/dom';
+import styles from './style/attachments.less?inline';
 import { TdAttachmentsProps } from './type';
 
-import styles from './style/attachments.less';
-
 const className = `${getClassPrefix()}-attachment`;
 @tag('t-attachments')
 export default class Attachments extends Component<TdAttachmentsProps> {

src/attachments/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from './_index.less';
+import styles from './_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/avatar/style/index.ts

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
-import avatarStyle from '../../_common/style/web/components/avatar/_index.less';
-import wcStyles from './wc.less';
+import avatarStyle from '../../_common/style/web/components/avatar/_index.less?inline';
+import wcStyles from './wc.less?inline';
 
 export const styleSheet = css`
   ${avatarStyle}

src/back-top/style/index.js

@@ -1,6 +1,6 @@
 import { css, globalCSS } from 'omi';
 
-import backTopStyle from '../../_common/style/web/components/back-top/_index.less';
+import backTopStyle from '../../_common/style/web/components/back-top/_index.less?inline';
 
 export const styleSheet = css`
   ${backTopStyle}

src/badge/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/badge/_index.less';
+import styles from '../../_common/style/web/components/badge/_index.less?inline';
 
 export const styleSheet = css`
     ${styles}

src/breadcrumb/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/breadcrumb/_index.less';
+import styles from '../../_common/style/web/components/breadcrumb/_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/button/__tests__/button.test.ts

@@ -0,0 +1,86 @@
+import '../button';
+
+import { hasClassName, render } from '@test/utils';
+import { expect, vi } from 'vitest';
+
+describe('Button Component', () => {
+  it('should be rendered', async () => {
+    const el = await render('<t-button>click me</t-button>');
+    expect(el).toBeDefined();
+    expect(el.tagName.toLowerCase()).toBe('t-button');
+    expect(el.textContent).toBe('click me');
+  });
+
+  it('props.disabled works fine', async () => {
+    // default
+    const el1 = await render('<t-button>Text</t-button>');
+    const shadowRoot1 = el1.shadowRoot;
+    const btn1 = shadowRoot1?.querySelector('button');
+    expect(hasClassName(btn1, 't-is-disabled')).toBe(false);
+
+    // disabled = true
+    const el2 = await render('<t-button disabled>Text</t-button>');
+    const shadowRoot2 = el2.shadowRoot;
+    const btn2 = shadowRoot2?.querySelector('button');
+    expect(hasClassName(btn2, 't-is-disabled')).toBe(true);
+  });
+
+  it('disabled button should not trigger', async () => {
+    const clickHandler = vi.fn();
+    const el = await render('<t-button disabled>Text</t-button>');
+    el.addEventListener('click', clickHandler);
+    const btn = el.shadowRoot?.querySelector('button');
+    btn?.click();
+    expect(clickHandler).not.toHaveBeenCalled();
+  });
+
+  ['default', 'primary', 'danger', 'warning', 'success'].forEach((theme) => {
+    it(`theme="${theme} works fine`, async () => {
+      const el = await render(`<t-button theme="${theme}">Theme</t-button>`);
+      const btn = el.shadowRoot?.querySelector('button');
+      expect(hasClassName(btn, `t-button--theme-${theme}`)).toBe(true);
+    });
+  });
+
+  ['base', 'outline', 'dashed', 'text'].forEach((variant) => {
+    it(`variant="${variant} works fine`, async () => {
+      const el = await render(`<t-button variant="${variant}">variant</t-button>`);
+      const btn = el.shadowRoot?.querySelector('button');
+      expect(hasClassName(btn, `t-button--variant-${variant}`)).toBe(true);
+    });
+  });
+
+  it('props.icon works fine', async () => {
+    const el = await render('<t-button>with icon</t-button>');
+    const iconE = document.createElement('span');
+    iconE.className = 'test-icon';
+    iconE.textContent = '🎄';
+    (el as any).icon = iconE;
+    expect(el.shadowRoot?.querySelector('slot[name="icon"]')).toBeDefined();
+  });
+
+  it('props.suffix works fine', async () => {
+    const el = await render('<t-button>with icon</t-button>');
+    const btn = el.shadowRoot?.querySelector('button');
+    // button 子元素顺序
+    const children = Array.from(btn?.children || []);
+    const childClasses = children.map((child) => child.className);
+    // 验证顺序: icon slot, text, suffix
+    const textIndex = childClasses.findIndex((child) => child.includes('button__text'));
+    expect(textIndex).toBeGreaterThan(-1);
+  });
+
+  it('props.block works fine', async () => {
+    const el = await render('<t-button block>block</t-button>');
+    const btn = el.shadowRoot?.querySelector('button');
+    expect(hasClassName(btn, 't-size-full-width')).toBe(true);
+  });
+
+  it('props.loading works fine', async () => {
+    const el = await render('<t-button loading>loaidng</t-button>');
+    const iconSlot = el.shadowRoot?.querySelector('slot[name="icon"]');
+    expect(iconSlot).toBeDefined();
+    const btn = el.shadowRoot?.querySelector('button');
+    expect(hasClassName(btn, 't-is-loading'));
+  });
+});

src/button/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/button/_index.less';
+import styles from '../../_common/style/web/components/button/_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/card/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from '../../_common/style/web/components/card/_index.less';
+import styles from '../../_common/style/web/components/card/_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/chat-action/action.tsx

@@ -13,10 +13,9 @@ import { getClassPrefix } from '../_util/classname';
 import { setExportparts } from '../_util/dom';
 import { type ChatComment } from '../chat-engine';
 import { MessagePlugin } from '../message';
+import styles from './style/action.less?inline';
 import { TdChatActionItem, TdChatActionProps, TdChatActionsName } from './type';
 
-import styles from './style/action.less';
-
 const className = `${getClassPrefix()}-chat-actions`;
 
 export const DefaultChatMessageActionsName = ['replay', 'copy', 'good', 'bad', 'share'] as TdChatActionsName[];

src/chat-action/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from './_index.less';
+import styles from './_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/chat-loading/loading.tsx

@@ -5,10 +5,9 @@ import { Component, createRef, tag } from 'omi';
 import { getClassPrefix } from '../_util/classname';
 import classname from '../_util/classname';
 import { setExportparts } from '../_util/dom';
+import styles from './style/loading.less?inline';
 import { TdChatLoadingProps } from './type';
 
-import styles from './style/loading.less';
-
 const className = `${getClassPrefix()}-chat-loading`;
 @tag('t-chat-loading')
 export default class Loading extends Component<TdChatLoadingProps> {

src/chat-loading/style/index.js

@@ -1,7 +1,7 @@
 import { css, globalCSS } from 'omi';
 
 // 为了做主题切换
-import styles from './_index.less';
+import styles from './_index.less?inline';
 
 export const styleSheet = css`
   ${styles}

src/chat-message/auto-scroll.tsx

@@ -5,8 +5,7 @@ import { throttle } from 'lodash-es';
 import { Component, createRef, tag } from 'omi';
 
 import { getClassPrefix } from '../_util/classname';
-
-import styles from '../chatbot/style/auto-scroll.less';
+import styles from '../chatbot/style/auto-scroll.less?inline';
 
 const className = `${getClassPrefix()}-scroll`;
 

src/chat-message/chat-item.tsx

@@ -37,10 +37,9 @@ import { renderReasoning } from './content/reasoning-content';
 import { renderSearch } from './content/search-content';
 import { renderSuggestion } from './content/suggestion-content';
 import { renderThinking } from './content/thinking-content';
+import styles from './style/chat-item.less?inline';
 import type { TdChatMessageActionName, TdChatMessageProps } from './type';
 
-import styles from './style/chat-item.less';
-
 const className = `${getClassPrefix()}-chat__item`;
 
 type ChatMessageProps = TdChatMessageProps;

src/chat-message/content/attachment-content.tsx

@@ -5,8 +5,7 @@ import { Component, tag } from 'omi';
 import { getClassPrefix } from '../../_util/classname';
 import { type AttachmentItem } from '../../chat-engine';
 import { TdAttachmentItem } from '../../filecard';
-
-import styles from '../style/chat-item.less';
+import styles from '../style/chat-item.less?inline';
 
 const className = `${getClassPrefix()}-chat__item`;