create-packer 1.46.3 → 1.47.0

package/template/web-app/react-rsbuild/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-rsbuild/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-rsbuild/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-rsbuild/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-rsbuild/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 }
+}

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

@@ -0,0 +1,30 @@
+import { RefObject, useEffect, useRef } from 'react'
+import { useIntersection } from 'react-use'
+import { useSyncState } from './useSyncState'
+
+interface optionsType extends IntersectionObserverInit {
+    dynamicRender?: boolean
+    isClose?: boolean
+}
+export function useLazyRender(ref: RefObject<HTMLElement>, options: optionsType) {
+    const emptyRef = useRef(null)
+    const intersection = useIntersection(options.isClose ? emptyRef : ref, {
+        root: options.root,
+        rootMargin: options.rootMargin,
+        threshold: options.threshold
+    })
+    const [isRenderRef, isRender, setIsRender] = useSyncState(false)
+
+    useEffect(() => {
+        if (options.isClose) {
+            setIsRender(true)
+            return
+        }
+        if (!options.dynamicRender && isRenderRef.current) {
+            return
+        }
+        setIsRender(!!intersection?.isIntersecting)
+    }, [intersection?.isIntersecting, options.isClose, options.dynamicRender])
+
+    return isRender
+}

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

@@ -1,26 +1,26 @@
-import { useEffect, useState, useTransition, DependencyList } from 'react'
-
-/**
- *
- * @param callback
- * @param watches If set, it is autorun callback
- * @returns
- */
-export default function useLowPriorityState<V>(callback: () => V, watches?: DependencyList) {
-    const [value, setValue] = useState<V>(callback)
-    const [loading, startTransition] = useTransition()
-
-    function startLoad() {
-        startTransition(() => {
-            setValue(callback())
-        })
-    }
-
-    useEffect(() => {
-        if (watches) {
-            startLoad()
-        }
-    }, watches)
-
-    return [value, { loading, startLoad }] as const
-}
+import { useEffect, useState, useTransition, DependencyList } from 'react'
+
+/**
+ *
+ * @param callback
+ * @param watches If set, it is autorun callback
+ * @returns
+ */
+export default function useLowPriorityState<V>(callback: () => V, watches?: DependencyList) {
+    const [value, setValue] = useState<V>(callback)
+    const [loading, startTransition] = useTransition()
+
+    function startLoad() {
+        startTransition(() => {
+            setValue(callback())
+        })
+    }
+
+    useEffect(() => {
+        if (watches) {
+            startLoad()
+        }
+    }, watches)
+
+    return [value, { loading, startLoad }] as const
+}

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

@@ -1,15 +1,15 @@
-import { useRef, useState, Dispatch, SetStateAction } from 'react'
-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) as S
-        setState($newState)
-        syncState.current = $newState
-    }
-
-    return [syncState, state, $setState] as const
-}
+import { useRef, useState, Dispatch, SetStateAction } from 'react'
+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) as S
+        setState($newState)
+        syncState.current = $newState
+    }
+
+    return [syncState, state, $setState] as const
+}

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

@@ -1,27 +1,27 @@
-import { useState } from 'react'
-import { isFunction } from 'es-toolkit'
-
-export interface useVisibleConfigType {
-    defaultVisible?: boolean
-    onBeforeShow?: () => Promise<boolean | void>
-    onBeforeHide?: () => Promise<boolean | void>
-}
-export default function useVisible(config?: useVisibleConfigType) {
-    const [visible, setVisible] = useState(config?.defaultVisible ?? false)
-    const onShow = async () => {
-        let isShow: boolean | void = true
-        if (isFunction(config?.onBeforeShow)) {
-            isShow = await config?.onBeforeShow?.()
-        }
-        setVisible(isShow !== false)
-    }
-    const onClose = async () => {
-        let isHide: boolean | void = true
-        if (isFunction(config?.onBeforeHide)) {
-            isHide = await config?.onBeforeHide?.()
-        }
-        setVisible(isHide === false)
-    }
-
-    return { visible, onShow, onClose }
-}
+import { useState } from 'react'
+import { isFunction } from 'es-toolkit'
+
+export interface useVisibleConfigType {
+    defaultVisible?: boolean
+    onBeforeShow?: () => Promise<boolean | void>
+    onBeforeHide?: () => Promise<boolean | void>
+}
+export default function useVisible(config?: useVisibleConfigType) {
+    const [visible, setVisible] = useState(config?.defaultVisible ?? false)
+    const onShow = async () => {
+        let isShow: boolean | void = true
+        if (isFunction(config?.onBeforeShow)) {
+            isShow = await config?.onBeforeShow?.()
+        }
+        setVisible(isShow !== false)
+    }
+    const onClose = async () => {
+        let isHide: boolean | void = true
+        if (isFunction(config?.onBeforeHide)) {
+            isHide = await config?.onBeforeHide?.()
+        }
+        setVisible(isHide === false)
+    }
+
+    return { visible, onShow, onClose }
+}

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

@@ -1 +1 @@
-export const HOME_DATA = '/homeData'
+export const HOME_DATA = '/homeData'

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

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

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

@@ -1,3 +1,3 @@
-export * from './request'
-export * as API from './api'
-export * from './home'
+export * from './request'
+export * as API from './api'
+export * from './home'

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

@@ -1,5 +1,5 @@
-import axios from 'axios'
-
-export const request = axios.create({
-    baseURL: import.meta.env.PUBLIC_BASE_URL + import.meta.env.PUBLIC_API_HOST
-})
+import axios from 'axios'
+
+export const request = axios.create({
+    baseURL: import.meta.env.PUBLIC_BASE_URL + import.meta.env.PUBLIC_API_HOST
+})