create-packer 1.44.1 → 1.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.44.1",
+  "version": "1.45.0",
   "main": "index.js",
   "repository": "https://github.com/kevily/create-packer",
   "author": "1k <bug_zero@163.com>",

package/template/web-app/react-rsbuild/domain/app/app.model.ts

@@ -2,6 +2,6 @@ import { defineStore } from 'define-zustand'
 
 export const useApp = defineStore({
     state: () => ({}),
-    getter: {},
+    getters: {},
     actions: () => ({})
 })

package/template/web-app/react-rsbuild/domain/router/components/route-layout.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react'
 import { Outlet } from 'react-router'
-import { last } from 'lodash-es'
+import { last } from 'es-toolkit'
 import { routeType, useMatchRoutes } from '@/domain/router'
 
 export interface propsType {

package/template/web-app/react-rsbuild/domain/router/components/sub-route-outlet.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import { Outlet } from 'react-router'
 import { useMount } from 'react-use'
-import { last } from 'lodash-es'
+import { last } from 'es-toolkit'
 import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
 
 export interface propsType {

package/template/web-app/react-rsbuild/package.json

@@ -21,9 +21,9 @@
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -45,7 +45,6 @@
         "@rsbuild/plugin-type-check": "1.2.1",
         "@rsdoctor/rspack-plugin": "0.4.13",
         "@tailwindcss/postcss": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

package/template/web-app/react-rsbuild/shared/hooks/defineRouter/deineRouter.tsx

@@ -1,6 +1,7 @@
 import { DependencyList, useEffect, useMemo } from 'react'
 import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
-import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+import { omit, cloneDeep, last } from 'es-toolkit'
+import { assign, isArray, reduce, get, map, split, forEach } from 'es-toolkit/compat'
 import { stringify, parse } from 'qs'
 import { defineStore } from 'define-zustand'
 import { routeByIdType, routeType, editableRouteType } from './defineRouter.types'
@@ -10,7 +11,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
         state: () => ({
             routes: cloneDeep(router.routes) as routeType[]
         }),
-        getter: {
+        getters: {
             routesById: state => {
                 return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
                     return reduce(
@@ -36,7 +37,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 })(state.routes)
             }
         },
-        actions: (getState, action) => {
+        actions: (setState, getState) => {
             function posToLodashPath(pos: string) {
                 if (pos) {
                     return `[${split(pos, '-').join('].children[')}]`
@@ -52,7 +53,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
                 updator(newRoute)
                 assign(route, newRoute)
-                action.setState({ routes: newRoutes })
+                setState({ routes: newRoutes })
             }
             function getRoute(id: routeType['id'], path?: string | string[]) {
                 const { routesById } = getState()

package/template/web-app/react-rsbuild/shared/hooks/useSyncState.ts

@@ -1,12 +1,12 @@
 import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export function useSyncState<S>(initialState: S | (() => S)) {
     const [state, setState] = useState(initialState)
     const syncState = useRef<S>(state)
 
     const $setState: Dispatch<SetStateAction<S>> = newState => {
-        const $newState = isFunction(newState) ? newState(state) : newState
+        const $newState = (isFunction(newState) ? newState(state) : newState) as S
         setState($newState)
         syncState.current = $newState
     }

package/template/web-app/react-rsbuild/shared/hooks/useVisible.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

package/template/web-app/react-rsbuild/shared/service/home.ts

@@ -1,7 +1,7 @@
-import { useQuery, UndefinedInitialDataOptions } from '@tanstack/react-query'
+import { useQuery, QueryOptions } from '@tanstack/react-query'
 import { HOME_DATA } from './api'
 
-export const useHomeData = (options?: UndefinedInitialDataOptions) => {
+export const useHomeData = (options?: QueryOptions) => {
     return useQuery({
         ...options,
         queryKey: [HOME_DATA, ...(options?.queryKey || [])]

package/template/web-app/react-vite/domain/app/app.model.ts

@@ -2,6 +2,6 @@ import { defineStore } from 'define-zustand'
 
 export const useApp = defineStore({
     state: () => ({}),
-    getter: {},
+    getters: {},
     actions: () => ({})
 })

package/template/web-app/react-vite/domain/app/components/app-context.tsx

@@ -1,22 +1,22 @@
-import { FunctionComponent, ReactNode } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { request } from '@/shared/service'
-
-const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            queryFn: async ({ queryKey }) => {
-                const { data } = await request.get(queryKey[0] as string, {
-                    params: queryKey[1]
-                })
-                return data
-            }
-        }
-    }
-})
-export interface propsType {
-    children: ReactNode
-}
-export const Root: FunctionComponent<propsType> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
-}
+import { FunctionComponent, ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { request } from '@/shared/service'
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            queryFn: async ({ queryKey }) => {
+                const { data } = await request.get(queryKey[0] as string, {
+                    params: queryKey[1]
+                })
+                return data
+            }
+        }
+    }
+})
+export interface propsType {
+    children: ReactNode
+}
+export const Root: FunctionComponent<propsType> = props => {
+    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+}

package/template/web-app/react-vite/domain/app/components/app.tsx

@@ -1,24 +1,24 @@
-import { useLayoutEffect, Suspense } from 'react'
-import { RouterProvider } from 'react-router/dom'
-import { request } from '@/shared/service'
-import { routerInstance } from '@/domain/router'
-import * as AppContext from './app-context'
-
-export const Root = () => {
-    useLayoutEffect(() => {
-        request.interceptors.response.use(
-            res => res,
-            error => {
-                console.log(error)
-            }
-        )
-    }, [])
-
-    return (
-        <AppContext.Root>
-            <Suspense fallback={<>loading...</>}>
-                <RouterProvider router={routerInstance} />
-            </Suspense>
-        </AppContext.Root>
-    )
-}
+import { useLayoutEffect, Suspense } from 'react'
+import { RouterProvider } from 'react-router/dom'
+import { request } from '@/shared/service'
+import { routerInstance } from '@/domain/router'
+import * as AppContext from './app-context'
+
+export const Root = () => {
+    useLayoutEffect(() => {
+        request.interceptors.response.use(
+            res => res,
+            error => {
+                console.log(error)
+            }
+        )
+    }, [])
+
+    return (
+        <AppContext.Root>
+            <Suspense fallback={<>loading...</>}>
+                <RouterProvider router={routerInstance} />
+            </Suspense>
+        </AppContext.Root>
+    )
+}

package/template/web-app/react-vite/domain/router/components/route-layout.tsx

@@ -1,19 +1,19 @@
-import { FunctionComponent } from 'react'
-import { Outlet } from 'react-router'
-import { last } from 'lodash-es'
-import { routeType, useMatchRoutes } from '@/domain/router'
-
-export interface propsType {
-    Index: FunctionComponent
-    rootId: routeType['id']
-}
-
-export const Root: FunctionComponent<propsType> = ({ Index, rootId }) => {
-    const matchRoutes = useMatchRoutes()
-
-    if (last(matchRoutes)?.id === rootId) {
-        return <Index />
-    }
-
-    return <Outlet />
-}
+import { FunctionComponent } from 'react'
+import { Outlet } from 'react-router'
+import { last } from 'es-toolkit'
+import { routeType, useMatchRoutes } from '@/domain/router'
+
+export interface propsType {
+    Index: FunctionComponent
+    rootId: routeType['id']
+}
+
+export const Root: FunctionComponent<propsType> = ({ Index, rootId }) => {
+    const matchRoutes = useMatchRoutes()
+
+    if (last(matchRoutes)?.id === rootId) {
+        return <Index />
+    }
+
+    return <Outlet />
+}

package/template/web-app/react-vite/domain/router/components/sub-route-outlet.tsx

@@ -1,22 +1,22 @@
-import { FunctionComponent } from 'react'
-import { Outlet } from 'react-router'
-import { useMount } from 'react-use'
-import { last } from 'lodash-es'
-import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
-
-export interface propsType {
-    rootId: routeType['id']
-    homeId: routeType['id']
-}
-export const Root: FunctionComponent<propsType> = props => {
-    const matchRoutes = useMatchRoutes()
-    const navigate = useRouter(state => state.navigate)
-
-    useMount(() => {
-        if (last(matchRoutes)?.id === props.rootId) {
-            navigate({ id: props.homeId })
-        }
-    })
-
-    return <Outlet />
-}
+import { FunctionComponent } from 'react'
+import { Outlet } from 'react-router'
+import { useMount } from 'react-use'
+import { last } from 'es-toolkit'
+import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
+
+export interface propsType {
+    rootId: routeType['id']
+    homeId: routeType['id']
+}
+export const Root: FunctionComponent<propsType> = props => {
+    const matchRoutes = useMatchRoutes()
+    const navigate = useRouter(state => state.navigate)
+
+    useMount(() => {
+        if (last(matchRoutes)?.id === props.rootId) {
+            navigate({ id: props.homeId })
+        }
+    })
+
+    return <Outlet />
+}

package/template/web-app/react-vite/package.json

@@ -20,9 +20,9 @@
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -40,7 +40,6 @@
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
         "@tailwindcss/vite": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

package/template/web-app/react-vite/scripts/createChunks.ts

@@ -1,11 +1,12 @@
-import { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

package/template/web-app/react-vite/shared/hooks/defineRouter/deineRouter.tsx

@@ -1,6 +1,7 @@
 import { DependencyList, useEffect, useMemo } from 'react'
 import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
-import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+import { omit, cloneDeep, last } from 'es-toolkit'
+import { assign, isArray, reduce, get, map, split, forEach } from 'es-toolkit/compat'
 import { stringify, parse } from 'qs'
 import { defineStore } from 'define-zustand'
 import { routeByIdType, routeType, editableRouteType } from './defineRouter.types'
@@ -10,7 +11,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
         state: () => ({
             routes: cloneDeep(router.routes) as routeType[]
         }),
-        getter: {
+        getters: {
             routesById: state => {
                 return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
                     return reduce(
@@ -36,7 +37,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 })(state.routes)
             }
         },
-        actions: (getState, action) => {
+        actions: (setState, getState) => {
             function posToLodashPath(pos: string) {
                 if (pos) {
                     return `[${split(pos, '-').join('].children[')}]`
@@ -52,7 +53,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
                 updator(newRoute)
                 assign(route, newRoute)
-                action.setState({ routes: newRoutes })
+                setState({ routes: newRoutes })
             }
             function getRoute(id: routeType['id'], path?: string | string[]) {
                 const { routesById } = getState()

package/template/web-app/react-vite/shared/hooks/useSyncState.ts

@@ -1,12 +1,12 @@
 import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export function useSyncState<S>(initialState: S | (() => S)) {
     const [state, setState] = useState(initialState)
     const syncState = useRef<S>(state)
 
     const $setState: Dispatch<SetStateAction<S>> = newState => {
-        const $newState = isFunction(newState) ? newState(state) : newState
+        const $newState = (isFunction(newState) ? newState(state) : newState) as S
         setState($newState)
         syncState.current = $newState
     }

package/template/web-app/react-vite/shared/hooks/useVisible.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

package/template/web-app/react-vite/shared/service/home.ts

@@ -1,7 +1,7 @@
-import { useQuery, UndefinedInitialDataOptions } from '@tanstack/react-query'
+import { useQuery, QueryOptions } from '@tanstack/react-query'
 import { HOME_DATA } from './api'
 
-export const useHomeData = (options?: UndefinedInitialDataOptions) => {
+export const useHomeData = (options?: QueryOptions) => {
     return useQuery({
         ...options,
         queryKey: [HOME_DATA, ...(options?.queryKey || [])]

package/template/web-app/react-vite/vite-env.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-plugin-svgr/client" />
-
-interface ImportMetaEnv {
-    readonly VITE_BASE_URL: string
-    readonly VITE_API_HOST: string
-    // 更多环境变量...
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_BASE_URL: string
+    readonly VITE_API_HOST: string
+    // 更多环境变量...
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

package/template/web-app/react-vite/vite.config.ts

@@ -4,7 +4,6 @@ import svgr from 'vite-plugin-svgr'
 import mockDevServer from 'vite-plugin-mock-dev-server'
 import checker from 'vite-plugin-checker'
 import { visualizer } from 'rollup-plugin-visualizer'
-import { includes } from 'lodash-es'
 import tailwindcss from '@tailwindcss/vite'
 import { createChunks } from './scripts'
 
@@ -53,7 +52,7 @@ export default defineConfig(({ mode }) => {
             }
         },
         esbuild: {
-            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
+            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
         },
         build: {
             sourcemap: mode === 'analyse',

package/template/web-app/svelte/package.json

@@ -26,7 +26,6 @@
         "@sveltejs/adapter-auto": "3.3.1",
         "@sveltejs/kit": "2.15.0",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
-        "@types/lodash-es": "4.17.12",
         "commitizen": "4.3.0",
         "cross-env": "7.0.3",
         "cssnano": "6.0.1",
@@ -51,7 +50,7 @@
         "vite-plugin-checker": "0.9.0"
     },
     "dependencies": {
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "svelte": "5.16.0"
     }
 }

package/template/web-app/svelte/scripts/createChunks.ts

@@ -1,11 +1,12 @@
-import { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

package/template/web-app/svelte/vite.config.ts

@@ -1,16 +1,12 @@
-import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite'
-import stylelint from 'vite-plugin-stylelint'
 import checker from 'vite-plugin-checker'
 import { visualizer } from 'rollup-plugin-visualizer'
-import { includes } from 'lodash-es'
 import { createChunks } from './scripts'
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '')
     const plugins: any[] = [
-        stylelint({ cache: false, include: ['**/*.{css,scss,sass,less,styl,ts,tsx}'] }),
         checker({
             enableBuild: false,
             typescript: true,
@@ -26,7 +22,7 @@ export default defineConfig(({ mode }) => {
     return {
         plugins,
         esbuild: {
-            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
+            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
         },
         build: {
             sourcemap: mode === 'analyse',

package/template/web-app/vue/domain/app/createComponentInstance.ts

@@ -1,14 +1,13 @@
 import { createVNode, render, VNodeChild } from 'vue'
-import { assign, keys } from 'lodash-es'
 import app from './app'
 
 const store = new Map()
 
 function reset(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    keys(oldObj).forEach(k => {
+    Object.keys(oldObj).forEach(k => {
         oldObj[k] = void 0
     })
-    assign(oldObj, newObj)
+    Object.assign(oldObj, newObj)
 }
 
 export function createComponentInstance<

package/template/web-app/vue/package.json

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "axios": "1.7.9",
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "pinia": "2.3.1",
         "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
@@ -34,7 +34,6 @@
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
         "@tailwindcss/vite": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/mockjs": "1.0.10",
         "@vitejs/plugin-vue": "5.2.1",
         "@vitejs/plugin-vue-jsx": "4.1.1",

package/template/web-app/vue/scripts/createChunks.ts

@@ -1,11 +1,12 @@
-import { concat, forEach, includes, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

package/template/web-app/vue/shared/hooks/useList.ts

@@ -1,5 +1,6 @@
 import { ref, reactive, computed, unref } from 'vue'
-import { cloneDeep, assign, pick, isNil, size, max } from 'lodash-es'
+import { cloneDeep, pick, isNil } from 'es-toolkit'
+import { assign, size, max } from 'es-toolkit/compat'
 
 export interface configType<ListItem, P> {
     /**

package/template/web-app/vue/shared/hooks/useVisible.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

package/template/web-app/vue/vite.config.ts

@@ -1,69 +1,68 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import svgLoader from 'vite-svg-loader'
-import mockDevServer from 'vite-plugin-mock-dev-server'
-import checker from 'vite-plugin-checker'
-import tailwindcss from '@tailwindcss/vite'
-import { visualizer } from 'rollup-plugin-visualizer'
-import { includes } from 'lodash-es'
-import { createChunks } from './scripts'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, process.cwd(), '')
-    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
-    const plugins: any[] = [
-        tailwindcss(),
-        mockDevServer({
-            include: ['**/*.mock.{ts,js}']
-        }),
-        vueJsx({
-            enableObjectSlots: false
-        }),
-        vue(),
-        checker({
-            enableBuild: false,
-            typescript: true,
-            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
-        }),
-        svgLoader()
-    ]
-
-    if (mode === 'analyse') {
-        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
-    }
-    return {
-        base: env.VITE_BASE_URL,
-        plugins,
-        resolve: {
-            alias: {
-                '@': __dirname
-            }
-        },
-        esbuild: {
-            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
-        },
-        build: {
-            sourcemap: mode === 'analyse',
-            reportCompressedSize: mode === 'analyse',
-            rollupOptions: {
-                output: {
-                    manualChunks: createChunks({
-                        vue: ['vue', 'vue-router']
-                    })
-                }
-            }
-        },
-        server: {
-            host: '0.0.0.0',
-            proxy: {
-                [proxyBaseUrl]: {
-                    target: 'http://127.0.0.1',
-                    changeOrigin: true,
-                    rewrite: path => path.replace(proxyBaseUrl, '')
-                }
-            }
-        }
-    }
-})
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import svgLoader from 'vite-svg-loader'
+import mockDevServer from 'vite-plugin-mock-dev-server'
+import checker from 'vite-plugin-checker'
+import tailwindcss from '@tailwindcss/vite'
+import { visualizer } from 'rollup-plugin-visualizer'
+import { createChunks } from './scripts'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '')
+    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
+    const plugins: any[] = [
+        tailwindcss(),
+        mockDevServer({
+            include: ['**/*.mock.{ts,js}']
+        }),
+        vueJsx({
+            enableObjectSlots: false
+        }),
+        vue(),
+        checker({
+            enableBuild: false,
+            typescript: true,
+            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
+        }),
+        svgLoader()
+    ]
+
+    if (mode === 'analyse') {
+        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
+    }
+    return {
+        base: env.VITE_BASE_URL,
+        plugins,
+        resolve: {
+            alias: {
+                '@': __dirname
+            }
+        },
+        esbuild: {
+            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
+        },
+        build: {
+            sourcemap: mode === 'analyse',
+            reportCompressedSize: mode === 'analyse',
+            rollupOptions: {
+                output: {
+                    manualChunks: createChunks({
+                        vue: ['vue', 'vue-router']
+                    })
+                }
+            }
+        },
+        server: {
+            host: '0.0.0.0',
+            proxy: {
+                [proxyBaseUrl]: {
+                    target: 'http://127.0.0.1',
+                    changeOrigin: true,
+                    rewrite: path => path.replace(proxyBaseUrl, '')
+                }
+            }
+        }
+    }
+})

package/template/web-app/vue-rsbuild/domain/app/createComponentInstance.ts

@@ -1,14 +1,13 @@
 import { createVNode, render, VNodeChild } from 'vue'
-import { assign, keys } from 'lodash-es'
 import app from './app'
 
 const store = new Map()
 
 function reset(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    keys(oldObj).forEach(k => {
+    Object.keys(oldObj).forEach(k => {
         oldObj[k] = void 0
     })
-    assign(oldObj, newObj)
+    Object.assign(oldObj, newObj)
 }
 
 export function createComponentInstance<

package/template/web-app/vue-rsbuild/package.json

@@ -21,7 +21,7 @@
     },
     "dependencies": {
         "axios": "1.7.9",
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "pinia": "2.3.1",
         "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
@@ -40,7 +40,6 @@
         "@rsbuild/plugin-vue": "1.0.7",
         "@rsdoctor/rspack-plugin": "0.4.13",
         "@tailwindcss/postcss": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/mockjs": "1.0.10",
         "autoprefixer": "10.4.14",
         "commitizen": "4.3.0",

package/template/web-app/vue-rsbuild/shared/hooks/useList.ts

@@ -1,5 +1,6 @@
 import { ref, reactive, computed, unref } from 'vue'
-import { cloneDeep, assign, pick, isNil, size, max } from 'lodash-es'
+import { cloneDeep, pick, isNil } from 'es-toolkit'
+import { assign, size, max } from 'es-toolkit/compat'
 
 export interface configType<ListItem, P> {
     /**

package/template/web-app/vue-rsbuild/shared/hooks/useVisible.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

package/template/web-extension/entrypoints/content/domain/app/tools/insertApp.tsx

@@ -1,58 +1,56 @@
-import { CSSProperties, ReactNode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { forEach, isFunction } from 'lodash-es'
-import { AppContext } from '@/shared/components'
-import { classNameSpace } from '@/entrypoints/content/constants'
-
-export enum insertAppStatus {
-    success,
-    target_not_exist,
-    root_existed
-}
-export interface insertAppResultType {
-    rootEle: HTMLElement | undefined | null
-    result: boolean
-    status: insertAppStatus
-}
-export function insertApp<T extends HTMLElement>(
-    target: T | null | undefined,
-    option: {
-        insert?: (rootEle: HTMLElement, target: T) => void
-        reactNode: ReactNode
-        isReplace?: boolean
-        rootId: string
-        rootStyle?: CSSProperties
-    }
-) {
-    const result: insertAppResultType = {
-        result: false,
-        rootEle: void 0,
-        status: insertAppStatus.success
-    }
-    const rootId = `${import.meta.env.VITE_APP_ID}_${option.rootId}`
-    if (!target) {
-        result.status = insertAppStatus.target_not_exist
-        return result
-    }
-    result.rootEle = document.createElement('div')
-    result.rootEle.className = classNameSpace
-    result.rootEle.id = rootId
-    forEach(option.rootStyle, (value, key) => {
-        result.rootEle!.style[key as any] = value as never
-    })
-    const oldRootEle = target.querySelector?.(`#${rootId}`)
-    if (!option.isReplace && oldRootEle) {
-        result.status = insertAppStatus.root_existed
-        return result
-    }
-    oldRootEle?.remove()
-    if (isFunction(option.insert)) {
-        option.insert(result.rootEle, target)
-    } else {
-        target.appendChild(result.rootEle)
-    }
-    const root = createRoot(result.rootEle)
-    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
-    result.result = true
-    return result
-}
+import { CSSProperties, ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { isFunction } from 'es-toolkit'
+import { AppContext } from '@/shared/components'
+import { classNameSpace } from '@/entrypoints/content/constants'
+
+export enum insertAppStatus {
+    success,
+    target_not_exist,
+    root_existed
+}
+export interface insertAppResultType {
+    rootEle: HTMLElement | undefined | null
+    result: boolean
+    status: insertAppStatus
+}
+export function insertApp<T extends HTMLElement>(
+    target: T | null | undefined,
+    option: {
+        insert?: (rootEle: HTMLElement, target: T) => void
+        reactNode: ReactNode
+        isReplace?: boolean
+        rootId: string
+        rootStyle?: CSSProperties
+    }
+) {
+    const result: insertAppResultType = {
+        result: false,
+        rootEle: void 0,
+        status: insertAppStatus.success
+    }
+    const rootId = `${import.meta.env.VITE_APP_ID}_${option.rootId}`
+    if (!target) {
+        result.status = insertAppStatus.target_not_exist
+        return result
+    }
+    result.rootEle = document.createElement('div')
+    result.rootEle.className = classNameSpace
+    result.rootEle.id = rootId
+    Object.assign(result.rootEle!.style, option.rootStyle)
+    const oldRootEle = target.querySelector?.(`#${rootId}`)
+    if (!option.isReplace && oldRootEle) {
+        result.status = insertAppStatus.root_existed
+        return result
+    }
+    oldRootEle?.remove()
+    if (isFunction(option.insert)) {
+        option.insert(result.rootEle, target)
+    } else {
+        target.appendChild(result.rootEle)
+    }
+    const root = createRoot(result.rootEle)
+    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
+    result.result = true
+    return result
+}

package/template/web-extension/package.json

@@ -28,9 +28,9 @@
         "@tanstack/react-query": "5.51.15",
         "@webext-core/messaging": "2.2.0",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -44,7 +44,6 @@
         "@commitlint/cz-commitlint": "17.5.0",
         "@eslint/js": "9.15.0",
         "@types/chrome": "0.0.254",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

package/template/web-extension/shared/hooks/useSyncState.ts

@@ -1,12 +1,12 @@
 import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export function useSyncState<S>(initialState: S | (() => S)) {
     const [state, setState] = useState(initialState)
     const syncState = useRef<S>(state)
 
     const $setState: Dispatch<SetStateAction<S>> = newState => {
-        const $newState = isFunction(newState) ? newState(state) : newState
+        const $newState = (isFunction(newState) ? newState(state) : newState) as S
         setState($newState)
         syncState.current = $newState
     }

package/template/web-extension/shared/hooks/useVisible.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

package/template/web-extension/shared/styles/theme.styled.ts

@@ -1,47 +1,47 @@
-import { CSSProperties } from 'react'
-import { isString } from 'lodash-es'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        lineClamp: (n: number) => {
-            return {
-                WebkitLineClamp: `${n}`,
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden',
-                display: '-webkit-box'
-            } satisfies CSSProperties
-        },
-        size: (s: string) => ({ width: s, height: s }),
-        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
-        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
-        my: (s: string) => ({ marginTop: s, marginBottom: s }),
-        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
-        flex: (
-            align: CSSProperties['alignItems'],
-            justify: CSSProperties['justifyContent'],
-            vertical?: boolean
-        ) => {
-            return {
-                display: 'flex',
-                alignItems: align,
-                justifyContent: justify,
-                flexDirection: vertical ? 'column' : 'row'
-            } satisfies CSSProperties
-        },
-        /** 数字为元素数量，字符串为对应css的值  */
-        grid: (rows: number | string, cols: number | string, gap?: number) => {
-            return {
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                gap: gap ? `${gap}px` : void 0
-            } satisfies CSSProperties
-        }
-    }
-}
-export type themeType = typeof theme
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+
+export const theme = {
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => {
+            return {
+                WebkitLineClamp: `${n}`,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                display: '-webkit-box'
+            } satisfies CSSProperties
+        },
+        size: (s: string) => ({ width: s, height: s }),
+        py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
+        px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
+        my: (s: string) => ({ marginTop: s, marginBottom: s }),
+        mx: (s: string) => ({ marginLeft: s, marginRight: s }),
+        flex: (
+            align: CSSProperties['alignItems'],
+            justify: CSSProperties['justifyContent'],
+            vertical?: boolean
+        ) => {
+            return {
+                display: 'flex',
+                alignItems: align,
+                justifyContent: justify,
+                flexDirection: vertical ? 'column' : 'row'
+            } satisfies CSSProperties
+        },
+        /** 数字为元素数量，字符串为对应css的值  */
+        grid: (rows: number | string, cols: number | string, gap?: number) => {
+            return {
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: gap ? `${gap}px` : void 0
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme