create-packer 1.46.4 → 1.47.1

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

@@ -23,7 +23,7 @@
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
-        "es-toolkit": "1.39.8",
+        "es-toolkit": "1.43.0",
         "immer": "10.0.1",
         "qs": "6.11.2",
         "react": "18.3.1",
@@ -44,7 +44,7 @@
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
-        "@vitejs/plugin-react": "5.0.1",
+        "@vitejs/plugin-react": "5.1.2",
         "autoprefixer": "10.4.14",
         "commitizen": "4.3.0",
         "cssnano": "6.0.0",
@@ -65,9 +65,9 @@
         "stylelint-config-standard": "36.0.1",
         "typescript": "5.8.2",
         "typescript-eslint": "8.15.0",
-        "vite": "7.1.3",
-        "vite-plugin-checker": "0.10.2",
-        "vite-plugin-mock-dev-server": "1.9.3",
+        "vite": "7.3.0",
+        "vite-plugin-checker": "0.12.0",
+        "vite-plugin-mock-dev-server": "2.0.7",
         "vite-plugin-svgr": "4.5.0"
     },
     "config": {

package/template/web-app/react-vite/pages/index.tsx

@@ -1,18 +1,18 @@
-import { useEffect } from 'react'
-import { Outlet, useLocation } from 'react-router'
-import { useRouter, routerIds } from '@/domain/router'
-
-const Layout = () => {
-    const location = useLocation()
-    const navigate = useRouter(state => state.navigate)
-
-    useEffect(() => {
-        if (location.pathname === '/') {
-            navigate({ id: routerIds.home })
-        }
-    }, [location])
-
-    return <Outlet />
-}
-
-export default Layout
+import { useEffect } from 'react'
+import { Outlet, useLocation } from 'react-router'
+import { useRouter, routerIds } from '@/domain/router'
+
+const Layout = () => {
+    const location = useLocation()
+    const navigate = useRouter(state => state.navigate)
+
+    useEffect(() => {
+        if (location.pathname === '/') {
+            navigate({ id: routerIds.home })
+        }
+    }, [location])
+
+    return <Outlet />
+}
+
+export default Layout

package/template/web-app/react-vite/pages/not-found.tsx

@@ -1,3 +1,3 @@
-export default function NotFound() {
-    return <div>404</div>
-}
+export default function NotFound() {
+    return <div>404</div>
+}

package/template/web-app/react-vite/postcss.config.cjs

@@ -1,8 +1,8 @@
-module.exports = {
-    plugins: {
-        'postcss-import': {},
-        'postcss-nesting': {},
-        autoprefixer: {},
-        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
-    }
-}
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'postcss-nesting': {},
+        autoprefixer: {},
+        ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+    }
+}

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

@@ -1,27 +1,27 @@
-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 = Object.keys(pkg.dependencies)
-    const result: { [key: string]: string[] } = {}
-
-    forOwn(chunks, (values, key) => {
-        if (!isArray(result[key])) {
-            result[key] = []
-        }
-        forEach(values, value => {
-            let modules: string[] = []
-            if (isRegExp(value)) {
-                modules = remove(vendor, name => value.test(name))
-            } else {
-                modules = remove(vendor, name => name === value)
-            }
-            if (size(modules) > 0) {
-                result[key] = concat(result[key], modules)
-            }
-        })
-    })
-    result.vendor = vendor
-    return result
-}
+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 = Object.keys(pkg.dependencies)
+    const result: { [key: string]: string[] } = {}
+
+    forOwn(chunks, (values, key) => {
+        if (!isArray(result[key])) {
+            result[key] = []
+        }
+        forEach(values, value => {
+            let modules: string[] = []
+            if (isRegExp(value)) {
+                modules = remove(vendor, name => value.test(name))
+            } else {
+                modules = remove(vendor, name => name === value)
+            }
+            if (size(modules) > 0) {
+                result[key] = concat(result[key], modules)
+            }
+        })
+    })
+    result.vendor = vendor
+    return result
+}

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

@@ -1 +1 @@
-export * from './createChunks'
+export * from './createChunks'

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

@@ -1,33 +1,33 @@
-import { FunctionComponent, ReactNode } from 'react'
-import { RouteObject } from 'react-router'
-
-export type routeType = Omit<RouteObject, 'children' | 'id'> & {
-    id: string
-    meta?: {
-        title?: string
-        /** 只在当前路由才显示的小提示 */
-        tip?: string
-    }
-    /** 静态配置，便于回退 */
-    unauthorizedOrigin?: boolean
-    /** 动态使用，用于程序校验 */
-    unauthorized?: boolean
-    query?: () => Record<string, any>
-    menu?: {
-        hidden?: boolean
-        icon?: FunctionComponent
-        label?: ReactNode
-    }
-    children?: routeType[]
-}
-
-export type editableRouteType = Omit<routeType, 'element' | 'errorElement' | 'children'>
-
-export interface routerFactoryArgType {
-    basename: string
-    routes: routeType[]
-}
-
-export type routeByIdType = Omit<routeType, 'children'> & {
-    pos: string
-}
+import { FunctionComponent, ReactNode } from 'react'
+import { RouteObject } from 'react-router'
+
+export type routeType = Omit<RouteObject, 'children' | 'id'> & {
+    id: string
+    meta?: {
+        title?: string
+        /** 只在当前路由才显示的小提示 */
+        tip?: string
+    }
+    /** 静态配置，便于回退 */
+    unauthorizedOrigin?: boolean
+    /** 动态使用，用于程序校验 */
+    unauthorized?: boolean
+    query?: () => Record<string, any>
+    menu?: {
+        hidden?: boolean
+        icon?: FunctionComponent
+        label?: ReactNode
+    }
+    children?: routeType[]
+}
+
+export type editableRouteType = Omit<routeType, 'element' | 'errorElement' | 'children'>
+
+export interface routerFactoryArgType {
+    basename: string
+    routes: routeType[]
+}
+
+export type routeByIdType = Omit<routeType, 'children'> & {
+    pos: string
+}

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

@@ -1,161 +1,161 @@
-import { DependencyList, useEffect, useMemo } from 'react'
-import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
-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'
-
-export default function defineRouter(router: ReturnType<typeof createBrowserRouter>) {
-    const useRouter = defineStore({
-        state: () => ({
-            routes: cloneDeep(router.routes) as routeType[]
-        }),
-        getters: {
-            routesById: state => {
-                return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
-                    return reduce(
-                        routes,
-                        (result, { children, ...route }, i) => {
-                            const $route: routeByIdType = {
-                                ...route,
-                                pos: parentRoute?.pos ? `${parentRoute?.pos}-${i}` : `${i}`
-                            }
-                            if (parentRoute) {
-                                $route.path = `${
-                                    parentRoute.path === '/' ? '' : parentRoute.path
-                                }/${$route.path}`
-                            }
-                            result[$route.id] = $route
-                            if (isArray(children)) {
-                                assign(result, flat(children, $route))
-                            }
-                            return result
-                        },
-                        {} as Record<string, routeByIdType>
-                    )
-                })(state.routes)
-            }
-        },
-        actions: (setState, getState) => {
-            function posToLodashPath(pos: string) {
-                if (pos) {
-                    return `[${split(pos, '-').join('].children[')}]`
-                }
-                return ''
-            }
-
-            function updateRoute(id: routeType['id'], updator: (route: editableRouteType) => void) {
-                const { routesById, routes } = getState()
-                const newRoutes = cloneDeep(routes)
-                const path = posToLodashPath(routesById[id].pos)
-                const route: routeType = get(newRoutes, path)
-                const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
-                updator(newRoute)
-                assign(route, newRoute)
-                setState({ routes: newRoutes })
-            }
-            function getRoute(id: routeType['id'], path?: string | string[]) {
-                const { routesById } = getState()
-                const route = routesById[id]
-                if (path) {
-                    return get(route, path)
-                }
-                return route
-            }
-
-            function genRouteUrl(id: routeType['id'], query?: Record<string, any>) {
-                const path = getRoute(id, 'path')
-                if (path) {
-                    const { origin } = window.location
-                    let url = origin + router.basename + path
-                    url += query ? `?${stringify(query)}` : ''
-                    return url
-                }
-                return void 0
-            }
-
-            function openRoute(id: routeType['id'], query?: Record<string, any>) {
-                const url = genRouteUrl(id, query)
-                if (url) {
-                    window.open(url)
-                }
-            }
-
-            function reloadRoute(id: routeType['id'], query?: Record<string, any>) {
-                const url = genRouteUrl(id, query)
-                if (url) {
-                    window.location.replace(url)
-                }
-            }
-
-            function navigate(
-                to: { id: routeType['id']; query?: Record<string, any> },
-                opts?: NavigateOptions
-            ) {
-                return router.navigate(
-                    {
-                        pathname: getRoute(to.id, 'path'),
-                        search: to.query ? stringify(to.query) : ''
-                    },
-                    opts
-                )
-            }
-
-            return {
-                navigate,
-                getRoute,
-                genRouteUrl,
-                openRoute,
-                reloadRoute,
-                updateRoute
-            }
-        }
-    })
-    function useQuery<Q>() {
-        const [params] = useSearchParams()
-        const query = parse(params.toString())
-
-        return query as Q
-    }
-
-    function useMatchRoutes(): routeType[] {
-        const matches = useMatches()
-        const getRoute = useRouter(state => state.getRoute)
-        return useMemo(() => map(matches, o => getRoute(o.id)), [matches])
-    }
-
-    /**
-     * @description 验证器返回false则无权限
-     */
-    function useRoutePermission(
-        config: {
-            redirectRouteId: string
-            validator: (currentRoute?: routeType) => boolean
-        },
-        deps: DependencyList
-    ) {
-        const matchRoutes = useMatchRoutes()
-        const currentRoute = last(matchRoutes)
-        const updateRoute = useRouter(state => state.updateRoute)
-        const navigate = useRouter(state => state.navigate)
-        const routesById = useRouter(state => state.routesById)
-
-        useEffect(() => {
-            forEach(routesById, route => {
-                updateRoute(route.id, route => {
-                    route.unauthorized = !config.validator(route)
-                })
-            })
-        }, deps)
-
-        useEffect(() => {
-            const result = config.validator(currentRoute)
-            if (!result && config.redirectRouteId) {
-                navigate({ id: config.redirectRouteId }, { replace: true })
-            }
-        }, [currentRoute?.id, ...deps])
-    }
-
-    return { useRouter, useQuery, useMatchRoutes, useRoutePermission }
-}
+import { DependencyList, useEffect, useMemo } from 'react'
+import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
+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'
+
+export default function defineRouter(router: ReturnType<typeof createBrowserRouter>) {
+    const useRouter = defineStore({
+        state: () => ({
+            routes: cloneDeep(router.routes) as routeType[]
+        }),
+        getters: {
+            routesById: state => {
+                return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
+                    return reduce(
+                        routes,
+                        (result, { children, ...route }, i) => {
+                            const $route: routeByIdType = {
+                                ...route,
+                                pos: parentRoute?.pos ? `${parentRoute?.pos}-${i}` : `${i}`
+                            }
+                            if (parentRoute) {
+                                $route.path = `${
+                                    parentRoute.path === '/' ? '' : parentRoute.path
+                                }/${$route.path}`
+                            }
+                            result[$route.id] = $route
+                            if (isArray(children)) {
+                                assign(result, flat(children, $route))
+                            }
+                            return result
+                        },
+                        {} as Record<string, routeByIdType>
+                    )
+                })(state.routes)
+            }
+        },
+        actions: (setState, getState) => {
+            function posToLodashPath(pos: string) {
+                if (pos) {
+                    return `[${split(pos, '-').join('].children[')}]`
+                }
+                return ''
+            }
+
+            function updateRoute(id: routeType['id'], updator: (route: editableRouteType) => void) {
+                const { routesById, routes } = getState()
+                const newRoutes = cloneDeep(routes)
+                const path = posToLodashPath(routesById[id].pos)
+                const route: routeType = get(newRoutes, path)
+                const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
+                updator(newRoute)
+                assign(route, newRoute)
+                setState({ routes: newRoutes })
+            }
+            function getRoute(id: routeType['id'], path?: string | string[]) {
+                const { routesById } = getState()
+                const route = routesById[id]
+                if (path) {
+                    return get(route, path)
+                }
+                return route
+            }
+
+            function genRouteUrl(id: routeType['id'], query?: Record<string, any>) {
+                const path = getRoute(id, 'path')
+                if (path) {
+                    const { origin } = window.location
+                    let url = origin + router.basename + path
+                    url += query ? `?${stringify(query)}` : ''
+                    return url
+                }
+                return void 0
+            }
+
+            function openRoute(id: routeType['id'], query?: Record<string, any>) {
+                const url = genRouteUrl(id, query)
+                if (url) {
+                    window.open(url)
+                }
+            }
+
+            function reloadRoute(id: routeType['id'], query?: Record<string, any>) {
+                const url = genRouteUrl(id, query)
+                if (url) {
+                    window.location.replace(url)
+                }
+            }
+
+            function navigate(
+                to: { id: routeType['id']; query?: Record<string, any> },
+                opts?: NavigateOptions
+            ) {
+                return router.navigate(
+                    {
+                        pathname: getRoute(to.id, 'path'),
+                        search: to.query ? stringify(to.query) : ''
+                    },
+                    opts
+                )
+            }
+
+            return {
+                navigate,
+                getRoute,
+                genRouteUrl,
+                openRoute,
+                reloadRoute,
+                updateRoute
+            }
+        }
+    })
+    function useQuery<Q>() {
+        const [params] = useSearchParams()
+        const query = parse(params.toString())
+
+        return query as Q
+    }
+
+    function useMatchRoutes(): routeType[] {
+        const matches = useMatches()
+        const getRoute = useRouter(state => state.getRoute)
+        return useMemo(() => map(matches, o => getRoute(o.id)), [matches])
+    }
+
+    /**
+     * @description 验证器返回false则无权限
+     */
+    function useRoutePermission(
+        config: {
+            redirectRouteId: string
+            validator: (currentRoute?: routeType) => boolean
+        },
+        deps: DependencyList
+    ) {
+        const matchRoutes = useMatchRoutes()
+        const currentRoute = last(matchRoutes)
+        const updateRoute = useRouter(state => state.updateRoute)
+        const navigate = useRouter(state => state.navigate)
+        const routesById = useRouter(state => state.routesById)
+
+        useEffect(() => {
+            forEach(routesById, route => {
+                updateRoute(route.id, route => {
+                    route.unauthorized = !config.validator(route)
+                })
+            })
+        }, deps)
+
+        useEffect(() => {
+            const result = config.validator(currentRoute)
+            if (!result && config.redirectRouteId) {
+                navigate({ id: config.redirectRouteId }, { replace: true })
+            }
+        }, [currentRoute?.id, ...deps])
+    }
+
+    return { useRouter, useQuery, useMatchRoutes, useRoutePermission }
+}

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

@@ -1,2 +1,2 @@
-export { default as defineRouter } from './deineRouter'
-export * from './defineRouter.types'
+export { default as defineRouter } from './deineRouter'
+export * from './defineRouter.types'

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

@@ -1,6 +1,7 @@
-export { default as useLoadingAction } from './useLoadingAction'
-export { default as useInterval } from './useInterval'
-export { default as useVisible } from './useVisible'
-export { default as useLowPriorityState } from './useLowPriorityState'
-export * from './useSyncState'
-export * from './defineRouter'
+export { default as useInterval } from './useInterval'
+export { default as useVisible } from './useVisible'
+export { default as useLowPriorityState } from './useLowPriorityState'
+export * from './useSyncState'
+export * from './defineRouter'
+export * from './useDebounceFn'
+export * from './useLazyRender'

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

@@ -0,0 +1,37 @@
+import { useCallback, DependencyList, useState } from 'react'
+import { useSyncState } from './useSyncState'
+
+interface optionsType {
+    /**
+     * @description 开启后会等待loading结束才可以继续执行
+     * @default true
+     */
+    debounce?: boolean
+}
+
+export function useDebounceFn<C extends (...arg: any) => Promise<any>>(
+    callback: C | undefined,
+    deps: DependencyList,
+    options?: optionsType
+) {
+    const [loadingSync, loading, setLoading] = useSyncState(false)
+    const [error, setError] = useState<Error | null>(null)
+    const debounce = options?.debounce ?? true
+
+    const handle = useCallback(async (...arg: any) => {
+        if (debounce && loadingSync.current) {
+            return
+        }
+        try {
+            setLoading(true)
+            setError(null)
+            return await callback?.(...arg)
+        } catch (e: any) {
+            setError(e)
+        } finally {
+            setLoading(false)
+        }
+    }, deps) as C
+
+    return [handle, { loading, error }] as const
+}

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

@@ -1,26 +1,26 @@
-import { useState } from 'react'
-import { useInterval as useRUInterval } from 'react-use'
-
-interface actionsType {
-    start: () => void
-    stop: () => void
-}
-export default function useInterval(
-    cb: (actions: actionsType) => Promise<void> | void,
-    delay: number
-): actionsType {
-    const [startInterval, setStartInterval] = useState(false)
-    const start: actionsType['start'] = () => {
-        setStartInterval(true)
-    }
-    const stop: actionsType['stop'] = () => {
-        setStartInterval(false)
-    }
-    useRUInterval(
-        async () => {
-            cb({ start, stop })
-        },
-        startInterval ? delay : null
-    )
-    return { start, stop }
-}
+import { useState } from 'react'
+import { useInterval as useRUInterval } from 'react-use'
+
+interface actionsType {
+    start: () => void
+    stop: () => void
+}
+export default function useInterval(
+    cb: (actions: actionsType) => Promise<void> | void,
+    delay: number
+): actionsType {
+    const [startInterval, setStartInterval] = useState(false)
+    const start: actionsType['start'] = () => {
+        setStartInterval(true)
+    }
+    const stop: actionsType['stop'] = () => {
+        setStartInterval(false)
+    }
+    useRUInterval(
+        async () => {
+            cb({ start, stop })
+        },
+        startInterval ? delay : null
+    )
+    return { start, stop }
+}