Update dependencies in package.json and pnpm-lock.yaml, enhance auto-import feature with TypeScript definitions, and improve Webpack integration to avoid type conflicts. Add counter functionality to HomePage component in playground.

Author: cklwblove

package.json

@@ -72,7 +72,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "unplugin-auto-import": "19.1.1"
+    "unplugin-auto-import": "20.2.0"
   },
   "peerDevDependencies": {
     "@winner-fed/winjs": "*"

playground/src/pages/index.tsx

@@ -2,14 +2,22 @@ import Smileurl, { ReactComponent as SvgSmile } from '../../smile.svg';
 import winjsJpeg from '../assets/winjs.jpeg';
 
 export default function HomePage() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    console.log('Count changed:', count);
+  }, [count]);
+
   return (
     <div>
       <h2>Hi! Welcome to WinJS!</h2>
+      <p>计数: {count}</p>
+      <button onClick={() => setCount(count + 1)}>增加</button>
       <p>
         <img src={winjsJpeg} width="388" />
       </p>
       <p>
-        <img src={Smileurl} alt="" />
+        <img src={Smileurl} alt="smile" />
         <SvgSmile />
       </p>
       <p>

pnpm-lock.yaml

@@ -66,7 +66,7 @@ export default function Counter() {
 
 模块通过拦截不同打包器的配置钩子，注入 `unplugin-auto-import` 插件：
 
-- **Webpack**: 通过 `api.modifyWebpackConfig` 注入
+- **Webpack**: 通过 `api.chainWebpack` 注入（使用 webpack-chain 避免类型冲突）
 - **Vite**: 通过 `api.modifyViteConfig` 注入
 - **Rsbuild**: 通过 `api.modifyRsbuildConfig` 修改 `tools.rspack` 配置注入
 
@@ -75,3 +75,13 @@ export default function Counter() {
 - `unplugin-auto-import/vite`
 - `unplugin-auto-import/rspack`
 
+### 关键技术点
+
+1. **Webpack 类型兼容性**：由于 WinJS 使用编译后的 webpack 类型，直接使用 `modifyWebpackConfig` 会导致类型冲突。因此使用 `chainWebpack` 和 webpack-chain 来添加插件，避免类型问题。
+
+2. **自动生成文件**：启用 `dts: true` 和 `eslintrc.enabled: true` 后，会自动生成：
+   - `auto-imports.d.ts` - TypeScript 全局类型声明
+   - `.eslintrc-auto-import.json` - ESLint 全局变量配置
+
+3. **动态配置**：根据 `api.userConfig.mpa` 判断是否为 MPA 模式，动态决定是否导入 React Router API。
+

src/features/autoImport/README.md

@@ -58,17 +58,16 @@ export default (api: IApi) => {
 
     return {
       imports,
-      dts: false, // WinJS 会处理类型定义
+      dts: true,
       eslintrc: {
-        enabled: false,
+        enabled: true,
       },
     };
   };
 
-  // Webpack 集成
-  api.modifyWebpackConfig((config) => {
-    config.plugins = config.plugins || [];
-    config.plugins.push(AutoImportWebpack(getAutoImportConfig()));
+  // Webpack 集成 - 使用 chainWebpack 避免类型冲突
+  api.chainWebpack((config) => {
+    config.plugin('auto-import').use(AutoImportWebpack(getAutoImportConfig()));
     return config;
   });