create-packer 1.45.20 → 1.46.0

package/template/electron-react/renderer/shared/hooks/defineRouter/deineRouter.tsx

@@ -0,0 +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 }
+}

package/template/electron-react/renderer/shared/hooks/defineRouter/index.ts

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

package/template/electron-react/renderer/shared/hooks/index.ts

@@ -0,0 +1,6 @@
+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'

package/template/electron-react/renderer/shared/hooks/useInterval.ts

@@ -0,0 +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 }
+}

package/template/electron-react/renderer/shared/hooks/useLoadingAction.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState, DependencyList, useRef } from 'react'
+
+export default function useLoadingAction<C extends (...arg: any) => Promise<any> | any>(
+    callback: C,
+    deps: DependencyList,
+    debounce = true
+) {
+    const [loading, setLoading] = useState(false)
+    const loadingSync = useRef(loading)
+    function $setLoading(loading: boolean) {
+        setLoading(loading)
+        loadingSync.current = loading
+    }
+    const action = useCallback(async (...arg: any) => {
+        if (debounce && loadingSync.current) {
+            return
+        }
+        try {
+            $setLoading(true)
+            return await callback(...arg)
+        } finally {
+            $setLoading(false)
+        }
+    }, deps) as C
+
+    return [loading, action] as const
+}

package/template/electron-react/renderer/shared/hooks/useLowPriorityState.ts

@@ -0,0 +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
+}

package/template/electron-react/renderer/shared/hooks/useSyncState.ts

@@ -0,0 +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
+}

package/template/electron-react/renderer/shared/hooks/useVisible.ts

@@ -0,0 +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 }
+}

package/template/electron-react/renderer/shared/service/api.ts

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

package/template/electron-react/renderer/shared/service/home.ts

@@ -0,0 +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 || [])]
+    })
+}

package/template/electron-react/renderer/shared/service/index.ts

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

package/template/electron-react/renderer/shared/service/request.ts

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

package/template/electron-react/renderer/shared/styles/global.ts

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react'
+
+export const globalCss = css`
+    body {
+        margin: 0;
+    }
+`

package/template/electron-react/renderer/shared/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './global'
+export * from './theme'

package/template/electron-react/renderer/shared/styles/theme.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export const theme = {
+    text: {
+        xs: { fontSize: '12px', lineHeight: '20px' },
+        sm: { fontSize: '14px', lineHeight: '22px' },
+        base: { fontSize: '16px', lineHeight: '24px' },
+        lg: { fontSize: '18px', lineHeight: '26px' },
+        xl: { fontSize: '20px', lineHeight: '28px' },
+        '2xl': { fontSize: '24px', lineHeight: '32px' },
+        '3xl': { fontSize: '28px', lineHeight: '40px' },
+        '4xl': { fontSize: '32px', lineHeight: '44px' }
+    } satisfies Record<string, CSSProperties>,
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        lineClamp: (n: number) => ({
+            '-webkit-line-clamp': `${n}`,
+            '-webkit-box-orient': 'vertical',
+            overflow: 'hidden',
+            display: '-webkit-box'
+        }),
+        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 | CSSProperties['gridTemplateRows'],
+            cols: number | CSSProperties['gridTemplateColumns'],
+            gap?: number | string
+        ) => {
+            return {
+                display: 'grid',
+                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                gap: isNumber(gap) ? `${gap}px` : gap
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme

package/template/electron-react/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "strictPropertyInitialization": false,
+        "strictNullChecks": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
+        "paths": {
+            "@/*": ["./*"]
+        }
+    },
+    "include": ["**/*.ts", "**/*.tsx"],
+    "exclude": ["scripts", "rsbuild.config.ts"],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/template/electron-react/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true
+    },
+    "include": ["scripts", "rsbuild.config.ts", "package.json"]
+}

package/template/electron-vue/package.json

@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "axios": "1.7.9",
-        "electron-debug": "^4.1.0",
+        "electron-debug": "4.1.0",
         "es-toolkit": "1.39.8",
         "pinia": "3.0.3",
         "tailwindcss": "4.1.4",
@@ -57,7 +57,7 @@
         "cross-env": "7.0.3",
         "cssnano": "6.0.0",
         "electron": "38.1.2",
-        "electron-builder": "^26.0.12",
+        "electron-builder": "26.0.12",
         "eslint": "9.17.0",
         "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",

package/template/electron-vue/preload/index.ts

@@ -1 +1 @@
-export * from './toolr'
+export * from './tools'

package/template/electron-vue/preload/tools.ts

@@ -0,0 +1,26 @@
+import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
+
+export type Channels = 'ipc-example'
+
+const electronHandler = {
+    ipcRenderer: {
+        sendMessage(channel: Channels, ...args: unknown[]) {
+            ipcRenderer.send(channel, ...args)
+        },
+        on(channel: Channels, func: (...args: unknown[]) => void) {
+            const subscription = (_event: IpcRendererEvent, ...args: unknown[]) => func(...args)
+            ipcRenderer.on(channel, subscription)
+
+            return () => {
+                ipcRenderer.removeListener(channel, subscription)
+            }
+        },
+        once(channel: Channels, func: (...args: unknown[]) => void) {
+            ipcRenderer.once(channel, (_event, ...args) => func(...args))
+        }
+    }
+}
+
+contextBridge.exposeInMainWorld('electron', electronHandler)
+
+export type ElectronHandler = typeof electronHandler

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

@@ -1,10 +1,10 @@
 import { defineConfig, loadEnv } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
+import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { pluginEslint } from '@rsbuild/plugin-eslint'
 import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'
-import { pluginSvgr } from '@rsbuild/plugin-svgr'
 import { createChunks } from './scripts'
 
 export default defineConfig(({ envMode, command }) => {

package/template/electron-vue/configs/clean.ts

@@ -1,10 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { rimrafSync } from 'rimraf'
-import { OUTPUT_ROOT } from './config'
-
-const foldersToRemove = [path.join(process.cwd(), OUTPUT_ROOT)]
-
-foldersToRemove.forEach(folder => {
-    if (fs.existsSync(folder)) rimrafSync(folder)
-})