create-packer 1.28.0 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-packer",
-  "version": "1.28.0",
+  "version": "1.30.0",
   "main": "index.js",
   "repository": "https://github.com/kevily/create-packer",
   "author": "1k <bug_zero@163.com>",

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

@@ -24,7 +24,6 @@
         "postcss": "8.4.35",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "tailwindcss": "3.3.3",
         "typescript": "5.3.3"
     },
     "devDependencies": {

package/template/web-app/next/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
         autoprefixer: {}
     }
 }

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

@@ -1,7 +1,9 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": ["prettier"],
+    "plugins": [
+        "prettier"
+    ],
     "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
@@ -51,12 +53,32 @@
                     "type"
                 ],
                 "pathGroups": [
-                    { "pattern": "react", "group": "external", "position": "before" },
-                    { "pattern": "react-dom/*", "group": "external", "position": "before" },
-                    { "pattern": "react-router", "group": "external", "position": "before" },
-                    { "pattern": "react-router-dom", "group": "external", "position": "before" }
+                    {
+                        "pattern": "react",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-dom/*",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-router",
+                        "group": "external",
+                        "position": "before"
+                    },
+                    {
+                        "pattern": "react-router-dom",
+                        "group": "external",
+                        "position": "before"
+                    }
                 ],
-                "pathGroupsExcludedImportTypes": ["react", "react-router", "react-router-dom"]
+                "pathGroupsExcludedImportTypes": [
+                    "react",
+                    "react-router",
+                    "react-router-dom"
+                ]
             }
         ],
         "no-case-declarations": "off",
@@ -70,7 +92,12 @@
                 "ignoreParameters": true
             }
         ],
-        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ],
         "@typescript-eslint/member-delimiter-style": 0,
         "@typescript-eslint/class-name-casing": 0,
         "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -89,4 +116,4 @@
         ],
         "no-constant-condition": "off"
     }
-}
+}

package/template/web-app/react/domain/app/components/app.tsx

@@ -1,5 +1,6 @@
 import { StrictMode, useLayoutEffect } from 'react'
 import { RouterProvider } from 'react-router-dom'
+import { ThemeProvider } from '@/shared/theme'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
 
@@ -15,7 +16,9 @@ const App = () => {
 
     return (
         <StrictMode>
-            <RouterProvider router={routerInstance} />
+            <ThemeProvider>
+                <RouterProvider router={routerInstance} />
+            </ThemeProvider>
         </StrictMode>
     )
 }

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

@@ -18,16 +18,17 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "1k-types": "1.1.2",
+        "1k-types": "1.2.0",
         "axios": "1.3.6",
-        "define-zustand": "3.1.0",
+        "define-zustand": "3.1.1",
         "immer": "10.0.1",
         "lodash-es": "4.17.21",
         "qs": "6.11.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "react-router-dom": "6.14.0",
         "react-use": "17.5.0",
+        "styled-components": "6.1.11",
         "zustand": "4.4.1"
     },
     "devDependencies": {
@@ -63,7 +64,6 @@
         "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",

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

@@ -1,7 +1,13 @@
-import './home.css'
 import { useEffect } from 'react'
+import { styled } from 'styled-components'
 import { request, API } from '@/shared/service'
 
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
+
 export default function Home() {
     useEffect(() => {
         request.post(API.HOME_DATA).then(({ data }) => {
@@ -9,5 +15,5 @@ export default function Home() {
         })
     }, [])
 
-    return <div className={'flex justify-center items-center'}>sdfs</div>
+    return <Wrapper className={'flex justify-center items-center'}>sdfs</Wrapper>
 }

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

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

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

@@ -8,6 +8,9 @@ export type routeType = Omit<RouteObject, 'children' | 'id'> & {
         /** 只在当前路由才显示的小提示 */
         tip?: string
     }
+    /** 静态配置，便于回退 */
+    unauthorizedOrigin?: boolean
+    /** 动态使用，用于程序校验 */
     unauthorized?: boolean
     query?: () => Record<string, any>
     menu?: {

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

@@ -1,160 +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 }
-}
+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/theme/index.ts

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

package/template/web-app/react/shared/theme/theme.components.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactNode } from 'react'
+import { ThemeProvider as ThemeProviderComponent } from 'styled-components'
+import { theme } from './theme.styles'
+
+export const ThemeProvider: FunctionComponent<{ children: ReactNode }> = props => {
+    return <ThemeProviderComponent theme={theme}>{props.children}</ThemeProviderComponent>
+}

package/template/web-app/react/shared/theme/theme.d.ts

@@ -0,0 +1,8 @@
+// import original module declarations
+import 'styled-components'
+import { themeType } from './theme.styles'
+
+// and extend them!
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
+}

package/template/web-app/react/shared/theme/theme.styles.ts

@@ -0,0 +1,7 @@
+export const theme = {
+    color: {
+        black: '#000'
+    }
+}
+
+export type themeType = typeof theme

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

@@ -3,7 +3,11 @@
         "baseUrl": ".",
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ],
         "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": false,
@@ -19,10 +23,22 @@
         "noEmit": true,
         "jsx": "react-jsx",
         "paths": {
-            "@/*": ["./*"]
+            "@/*": [
+                "./*"
+            ]
         }
     },
-    "include": ["**/*.ts", "**/*.tsx"],
-    "exclude": ["scripts", "vite.config.ts"],
-    "references": [{ "path": "./tsconfig.node.json" }]
-}
+    "include": [
+        "**/*.ts",
+        "**/*.tsx"
+    ],
+    "exclude": [
+        "scripts",
+        "vite.config.ts"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/template/web-app/react-webpack/domain/app/components/app.tsx

@@ -1,5 +1,6 @@
 import { StrictMode, useLayoutEffect } from 'react'
 import { RouterProvider } from 'react-router-dom'
+import { ThemeProvider } from '@/shared/theme'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
 
@@ -15,7 +16,9 @@ const App = () => {
 
     return (
         <StrictMode>
-            <RouterProvider router={routerInstance} />
+            <ThemeProvider>
+                <RouterProvider router={routerInstance} />
+            </ThemeProvider>
         </StrictMode>
     )
 }

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

@@ -19,18 +19,18 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
-        "1k-types": "1.1.2",
+        "1k-types": "1.2.0",
         "axios": "1.6.7",
-        "define-zustand": "3.1.0",
+        "define-zustand": "3.1.1",
         "immer": "10.0.3",
         "lodash-es": "4.17.21",
         "qs": "6.11.2",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "react-router-dom": "6.14.0",
         "react-use": "17.5.0",
-        "tailwindcss": "3.4.1",
-        "zustand": "4.5.1"
+        "styled-components": "6.1.11",
+        "zustand": "4.4.1"
     },
     "devDependencies": {
         "@commitlint/cli": "18.6.1",

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

@@ -1,6 +1,11 @@
-import styles from './home.module.css'
+import { styled } from 'styled-components'
+
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
 
 export default function Home() {
-    console.log('1', 1)
-    return <div className={styles.root}>sdsddds</div>
+    return <Wrapper>sdfs</Wrapper>
 }

package/template/web-app/react-webpack/postcss.config.js

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