create-packer 1.26.4 → 1.28.0

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

@@ -1,77 +1,78 @@
-{
-    "name": "react-vite",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "prepare": "husky install",
-        "dev": "vite",
-        "build": "tsc --noEmit && vite build",
-        "build:analyse": "tsc --noEmit && vite build --mode analyse",
-        "preview": "vite preview",
-        "up:vite": "pnpm up vite @vitejs/* -L",
-        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
-        "lint": "tsc --noEmit && eslint **/*.{tsx,ts,jsx,js} --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less}",
-        "lint:fix": "eslint **/*.{tsx,ts,jsx,js} --fix && stylelint **/*.{css,scss,less} --fix",
-        "cz": "cz",
-        "push": "npm run commit && git push",
-        "commit": "git add . && npm run cz"
-    },
-    "dependencies": {
-        "1k-types": "1.1.2",
-        "axios": "1.3.6",
-        "define-zustand": "3.1.0",
-        "immer": "10.0.1",
-        "lodash-es": "4.17.21",
-        "qs": "6.11.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "react-router-dom": "6.14.0",
-        "react-use": "17.4.0",
-        "zustand": "4.4.1"
-    },
-    "devDependencies": {
-        "@commitlint/cli": "17.6.1",
-        "@commitlint/config-conventional": "17.6.1",
-        "@commitlint/cz-commitlint": "17.5.0",
-        "@types/lodash-es": "4.17.7",
-        "@types/mockjs": "1.0.7",
-        "@types/node": "18.16.0",
-        "@types/qs": "6.9.7",
-        "@types/react": "18.0.38",
-        "@types/react-dom": "18.0.11",
-        "@typescript-eslint/eslint-plugin": "6.17.0",
-        "@typescript-eslint/parser": "6.17.0",
-        "@vitejs/plugin-react": "4.2.0",
-        "autoprefixer": "10.4.14",
-        "commitizen": "4.3.0",
-        "cssnano": "6.0.0",
-        "eslint": "8.39.0",
-        "eslint-import-resolver-typescript": "3.5.5",
-        "eslint-plugin-import": "2.27.5",
-        "eslint-plugin-prettier": "5.0.0",
-        "eslint-plugin-react": "7.32.2",
-        "eslint-plugin-react-hooks": "4.6.0",
-        "husky": "8.0.3",
-        "inquirer": "8",
-        "mockjs": "1.1.0",
-        "postcss": "8.4.23",
-        "postcss-import": "15.1.0",
-        "postcss-nesting": "11.2.2",
-        "prettier": "3.0.0",
-        "rollup-plugin-visualizer": "5.9.2",
-        "stylelint": "15.7.0",
-        "stylelint-config-standard": "33.0.0",
-        "tailwindcss": "3.3.1",
-        "typescript": "5.3.3",
-        "vite": "4.3.1",
-        "vite-plugin-checker": "0.6.2",
-        "vite-plugin-mock-dev-server": "1.2.1",
-        "vite-plugin-svgr": "3.2.0"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "react-vite",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "husky install",
+        "dev": "vite",
+        "build": "tsc --noEmit && vite build",
+        "build:analyse": "tsc --noEmit && vite build --mode analyse",
+        "preview": "vite preview",
+        "up:vite": "pnpm up vite @vitejs/* vite-plugin-* -L",
+        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
+        "lint": "tsc --noEmit && eslint **/*.{tsx,ts,jsx,js} --no-error-on-unmatched-pattern && stylelint **/*.{css,scss,less}",
+        "lint:fix": "eslint **/*.{tsx,ts,jsx,js} --fix && stylelint **/*.{css,scss,less} --fix",
+        "cz": "cz",
+        "push": "npm run commit && git push",
+        "commit": "git add . && npm run cz"
+    },
+    "dependencies": {
+        "1k-types": "1.1.2",
+        "axios": "1.3.6",
+        "define-zustand": "3.1.0",
+        "immer": "10.0.1",
+        "lodash-es": "4.17.21",
+        "qs": "6.11.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router-dom": "6.14.0",
+        "react-use": "17.5.0",
+        "zustand": "4.4.1"
+    },
+    "devDependencies": {
+        "@commitlint/cli": "17.6.1",
+        "@commitlint/config-conventional": "17.6.1",
+        "@commitlint/cz-commitlint": "17.5.0",
+        "@nabla/vite-plugin-eslint": "2.0.2",
+        "@types/lodash-es": "4.17.7",
+        "@types/mockjs": "1.0.7",
+        "@types/node": "18.16.0",
+        "@types/qs": "6.9.7",
+        "@types/react": "18.0.38",
+        "@types/react-dom": "18.0.11",
+        "@typescript-eslint/eslint-plugin": "7.0.2",
+        "@typescript-eslint/parser": "7.0.2",
+        "@vitejs/plugin-react": "4.2.1",
+        "autoprefixer": "10.4.14",
+        "commitizen": "4.3.0",
+        "cssnano": "6.0.0",
+        "eslint": "8.56.0",
+        "eslint-import-resolver-typescript": "3.6.1",
+        "eslint-plugin-import": "2.29.1",
+        "eslint-plugin-prettier": "5.1.3",
+        "eslint-plugin-react": "7.33.2",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "husky": "8.0.3",
+        "inquirer": "8",
+        "mockjs": "1.1.0",
+        "postcss": "8.4.35",
+        "postcss-import": "16.0.1",
+        "postcss-nesting": "12.0.3",
+        "prettier": "3.2.5",
+        "rollup-plugin-visualizer": "5.9.2",
+        "stylelint": "16.2.1",
+        "stylelint-config-standard-scss": "13.0.0",
+        "tailwindcss": "3.3.1",
+        "typescript": "5.3.3",
+        "vite": "4.5.2",
+        "vite-plugin-mock-dev-server": "1.4.7",
+        "vite-plugin-stylelint": "5.3.1",
+        "vite-plugin-svgr": "4.2.0"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

package/template/web-app/react/pages/home/home.css

@@ -1 +1 @@
-
+

package/template/web-app/react/pages/home/home.mock.ts

@@ -1,16 +1,16 @@
-import Mock from 'mockjs'
-import { defineMock } from '@/mockUtils'
-import { API } from '@/shared/service'
-export default defineMock([
-    {
-        url: API.HOME_DATA,
-        body: Mock.mock({
-            'data|10': [
-                {
-                    name: '@string',
-                    age: '@natural'
-                }
-            ]
-        })
-    }
-])
+import Mock from 'mockjs'
+import { defineMock } from '@/mockUtils'
+import { API } from '@/shared/service'
+export default defineMock([
+    {
+        url: API.HOME_DATA,
+        body: Mock.mock({
+            'data|10': [
+                {
+                    name: '@string',
+                    age: '@natural'
+                }
+            ]
+        })
+    }
+])

package/template/web-app/react/pages/home/home.tsx

@@ -1,13 +1,13 @@
-import './home.css'
-import { useEffect } from 'react'
-import { request, API } from '@/shared/service'
-
-export default function Home() {
-    useEffect(() => {
-        request.post(API.HOME_DATA).then(({ data }) => {
-            console.log('data', data)
-        })
-    }, [])
-
-    return <div className={'flex justify-center items-center'}>sdfs</div>
-}
+import './home.css'
+import { useEffect } from 'react'
+import { request, API } from '@/shared/service'
+
+export default function Home() {
+    useEffect(() => {
+        request.post(API.HOME_DATA).then(({ data }) => {
+            console.log('data', data)
+        })
+    }, [])
+
+    return <div className={'flex justify-center items-center'}>sdfs</div>
+}

package/template/web-app/react/pages/home/index.ts

@@ -1 +1 @@
-export { default } from './home'
+export { default } from './home'

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

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

package/template/web-app/react/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/postcss.config.cjs

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

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

@@ -1,26 +1,26 @@
-import { concat, forEach, includes, isArray, isRegExp, keys, remove, size } from 'lodash-es'
-import pkg from '../package.json'
-
-export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
-    const result: { [key: string]: string[] } = {}
-
-    forEach(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 { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import pkg from '../package.json'
+
+export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
+    const vendor = keys(pkg.dependencies)
+    const result: { [key: string]: string[] } = {}
+
+    forEach(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/scripts/index.ts

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

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

@@ -0,0 +1,30 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { RouteObject } from 'react-router-dom'
+
+export type routeType = Omit<RouteObject, 'children' | 'id'> & {
+    id: string
+    meta?: {
+        title?: string
+        /** 只在当前路由才显示的小提示 */
+        tip?: string
+    }
+    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/shared/hooks/defineRouter/deineRouter.tsx

@@ -0,0 +1,160 @@
+import { DependencyList, useEffect, useMemo } from 'react'
+import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router-dom'
+import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+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[]
+        }),
+        getter: {
+            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: (getState, action) => {
+            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)
+                action.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/shared/hooks/defineRouter/index.ts

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

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

@@ -1,5 +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 { 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/web-app/react/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 }
+}