create-packer 1.45.19 → 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/.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.md]
+trim_trailing_whitespace = false

package/template/electron-vue/.env

@@ -0,0 +1,3 @@
+PUBLIC_ENV_MODE=production
+PUBLIC_BASE_URL=/
+PUBLIC_API_HOST=/

package/template/electron-vue/.env.development

@@ -0,0 +1,3 @@
+PUBLIC_ENV_MODE=development
+PUBLIC_BASE_URL=/dev
+PUBLIC_API_HOST=/api

package/template/electron-vue/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+build
+dist-ssr
+*.local
+stats.html
+vite.config.ts.*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.history
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/electron-vue/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit 

package/template/electron-vue/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

package/template/electron-vue/.prettierignore

@@ -0,0 +1,6 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+.history
+dist

package/template/electron-vue/.prettierrc

@@ -0,0 +1,18 @@
+{
+    "overrides": [
+        {
+            "files": ".prettierrc",
+            "options": { "parser": "json" }
+        }
+    ],
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "avoid",
+    "rangeStart": 0
+}

package/template/electron-vue/.stylelintignore

@@ -0,0 +1,4 @@
+node_modules
+/dist
+/.vscode
+/.history

package/template/electron-vue/.stylelintrc

@@ -0,0 +1,35 @@
+{
+    "extends": "stylelint-config-standard-scss",
+    "overrides": [
+        {
+            "files": ["*.html", "**/*.html", "*.vue", "**/*.vue"],
+            "customSyntax": "postcss-html"
+        }
+    ],
+    "rules": {
+        "comment-empty-line-before": "never",
+        "no-empty-source": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["tailwind", "apply", "use", "reference"]
+            }
+        ],
+        "declaration-block-no-redundant-longhand-properties": null,
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": ["global"]
+            }
+        ],
+        "selector-class-pattern": null,
+        "scss/at-rule-no-unknown": [
+            true,
+            {
+                "ignoreAtRules": ["tailwind", "apply", "reference"]
+            }
+        ]
+    }
+}

package/template/electron-vue/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+    "recommendations": [
+        "vue.volar",
+        "vue.vscode-typescript-vue-plugin",
+        "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint",
+        "esbenp.prettier-vscode"
+    ]
+}

package/template/electron-vue/README.md

@@ -0,0 +1,14 @@
+## Vite + Vue3.x + Typescript
+
+### Features
+
+-   Vite
+-   Vue
+-   Typescript
+-   vue-router
+-   pinia
+-   Tailwindcss
+-   Eslint
+-   Prettier
+-   axios
+-   Alias @ to <project_root>/src

package/template/electron-vue/build.config.json

@@ -0,0 +1,40 @@
+{
+    "productName": "ElectronReact",
+    "appId": "org.erb.ElectronReact",
+    "asar": false,
+    "files": ["dist"],
+    "mac": {
+        "target": {
+            "target": "default",
+            "arch": ["arm64", "x64"]
+        },
+        "hardenedRuntime": true,
+        "gatekeeperAssess": true
+    },
+    "dmg": {
+        "contents": [
+            {
+                "x": 130,
+                "y": 220
+            },
+            {
+                "x": 410,
+                "y": 220,
+                "type": "link",
+                "path": "/Applications"
+            }
+        ]
+    },
+    "win": {
+        "target": ["nsis"]
+    },
+    "linux": {
+        "target": ["AppImage"],
+        "category": "Development"
+    },
+    "directories": {
+        "buildResources": "dist",
+        "output": "build"
+    },
+    "extraResources": ["./assets/**"]
+}

package/template/electron-vue/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }