create-packer 1.44.0 → 1.44.2

package/package.json

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

package/template/web-app/react-rsbuild/domain/app/app.model.ts

@@ -2,6 +2,6 @@ import { defineStore } from 'define-zustand'
 
 export const useApp = defineStore({
     state: () => ({}),
-    getter: {},
+    getters: {},
     actions: () => ({})
 })

package/template/web-app/react-rsbuild/domain/router/components/route-layout.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react'
 import { Outlet } from 'react-router'
-import { last } from 'lodash-es'
+import { last } from 'es-toolkit'
 import { routeType, useMatchRoutes } from '@/domain/router'
 
 export interface propsType {

package/template/web-app/react-rsbuild/domain/router/components/sub-route-outlet.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import { Outlet } from 'react-router'
 import { useMount } from 'react-use'
-import { last } from 'lodash-es'
+import { last } from 'es-toolkit'
 import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
 
 export interface propsType {

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

@@ -21,9 +21,9 @@
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -45,7 +45,6 @@
         "@rsbuild/plugin-type-check": "1.2.1",
         "@rsdoctor/rspack-plugin": "0.4.13",
         "@tailwindcss/postcss": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

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

@@ -10,7 +10,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
         state: () => ({
             routes: cloneDeep(router.routes) as routeType[]
         }),
-        getter: {
+        getters: {
             routesById: state => {
                 return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
                     return reduce(
@@ -36,7 +36,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 })(state.routes)
             }
         },
-        actions: (getState, action) => {
+        actions: (setState, getState) => {
             function posToLodashPath(pos: string) {
                 if (pos) {
                     return `[${split(pos, '-').join('].children[')}]`
@@ -52,7 +52,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
                 updator(newRoute)
                 assign(route, newRoute)
-                action.setState({ routes: newRoutes })
+                setState({ routes: newRoutes })
             }
             function getRoute(id: routeType['id'], path?: string | string[]) {
                 const { routesById } = getState()

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

@@ -1,12 +1,12 @@
 import { useRef, useState, Dispatch, SetStateAction } from 'react'
-import { isFunction } from 'lodash-es'
+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
+        const $newState = (isFunction(newState) ? newState(state) : newState) as S
         setState($newState)
         syncState.current = $newState
     }

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { isFunction } from 'lodash-es'
+import { isFunction } from 'es-toolkit'
 
 export interface useVisibleConfigType {
     defaultVisible?: boolean

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

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

package/template/web-app/react-vite/domain/app/app.model.ts

@@ -2,6 +2,6 @@ import { defineStore } from 'define-zustand'
 
 export const useApp = defineStore({
     state: () => ({}),
-    getter: {},
+    getters: {},
     actions: () => ({})
 })

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

@@ -1,22 +1,22 @@
-import { FunctionComponent, ReactNode } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { request } from '@/shared/service'
-
-const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            queryFn: async ({ queryKey }) => {
-                const { data } = await request.get(queryKey[0] as string, {
-                    params: queryKey[1]
-                })
-                return data
-            }
-        }
-    }
-})
-export interface propsType {
-    children: ReactNode
-}
-export const Root: FunctionComponent<propsType> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
-}
+import { FunctionComponent, ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { request } from '@/shared/service'
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            queryFn: async ({ queryKey }) => {
+                const { data } = await request.get(queryKey[0] as string, {
+                    params: queryKey[1]
+                })
+                return data
+            }
+        }
+    }
+})
+export interface propsType {
+    children: ReactNode
+}
+export const Root: FunctionComponent<propsType> = props => {
+    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+}

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

@@ -1,24 +1,24 @@
-import { useLayoutEffect, Suspense } from 'react'
-import { RouterProvider } from 'react-router/dom'
-import { request } from '@/shared/service'
-import { routerInstance } from '@/domain/router'
-import * as AppContext from './app-context'
-
-export const Root = () => {
-    useLayoutEffect(() => {
-        request.interceptors.response.use(
-            res => res,
-            error => {
-                console.log(error)
-            }
-        )
-    }, [])
-
-    return (
-        <AppContext.Root>
-            <Suspense fallback={<>loading...</>}>
-                <RouterProvider router={routerInstance} />
-            </Suspense>
-        </AppContext.Root>
-    )
-}
+import { useLayoutEffect, Suspense } from 'react'
+import { RouterProvider } from 'react-router/dom'
+import { request } from '@/shared/service'
+import { routerInstance } from '@/domain/router'
+import * as AppContext from './app-context'
+
+export const Root = () => {
+    useLayoutEffect(() => {
+        request.interceptors.response.use(
+            res => res,
+            error => {
+                console.log(error)
+            }
+        )
+    }, [])
+
+    return (
+        <AppContext.Root>
+            <Suspense fallback={<>loading...</>}>
+                <RouterProvider router={routerInstance} />
+            </Suspense>
+        </AppContext.Root>
+    )
+}

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

@@ -20,9 +20,9 @@
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -40,7 +40,6 @@
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
         "@tailwindcss/vite": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

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

@@ -10,7 +10,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
         state: () => ({
             routes: cloneDeep(router.routes) as routeType[]
         }),
-        getter: {
+        getters: {
             routesById: state => {
                 return (function flat(routes: routeType[], parentRoute?: routeByIdType) {
                     return reduce(
@@ -36,7 +36,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 })(state.routes)
             }
         },
-        actions: (getState, action) => {
+        actions: (setState, getState) => {
             function posToLodashPath(pos: string) {
                 if (pos) {
                     return `[${split(pos, '-').join('].children[')}]`
@@ -52,7 +52,7 @@ export default function defineRouter(router: ReturnType<typeof createBrowserRout
                 const newRoute = cloneDeep(omit(route, ['element', 'errorElement', 'children']))
                 updator(newRoute)
                 assign(route, newRoute)
-                action.setState({ routes: newRoutes })
+                setState({ routes: newRoutes })
             }
             function getRoute(id: routeType['id'], path?: string | string[]) {
                 const { routesById } = getState()

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

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

package/template/web-app/react-vite/vite-env.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-plugin-svgr/client" />
-
-interface ImportMetaEnv {
-    readonly VITE_BASE_URL: string
-    readonly VITE_API_HOST: string
-    // 更多环境变量...
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_BASE_URL: string
+    readonly VITE_API_HOST: string
+    // 更多环境变量...
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

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

@@ -1,80 +1,80 @@
-import { defineConfig, loadEnv } from 'vite'
-import react from '@vitejs/plugin-react'
-import svgr from 'vite-plugin-svgr'
-import mockDevServer from 'vite-plugin-mock-dev-server'
-import checker from 'vite-plugin-checker'
-import { visualizer } from 'rollup-plugin-visualizer'
-import { includes } from 'lodash-es'
-import tailwindcss from '@tailwindcss/vite'
-import { createChunks } from './scripts'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    const env = loadEnv(mode, process.cwd(), '')
-    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
-    const plugins: any[] = [
-        tailwindcss(),
-        svgr(),
-        mockDevServer({
-            include: ['**/*.mock.{ts,js}']
-        }),
-        checker({
-            enableBuild: false,
-            typescript: true,
-            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
-        }),
-        react({
-            babel: {
-                plugins: [
-                    [
-                        'babel-plugin-styled-components',
-                        {
-                            ssr: false,
-                            displayName: false,
-                            fileName: false,
-                            transpileTemplateLiterals: false
-                        }
-                    ]
-                ]
-            }
-        })
-    ]
-
-    if (mode === 'analyse') {
-        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
-    }
-
-    return {
-        base: env.VITE_BASE_URL,
-        plugins,
-        resolve: {
-            alias: {
-                '@': __dirname
-            }
-        },
-        esbuild: {
-            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
-        },
-        build: {
-            sourcemap: mode === 'analyse',
-            reportCompressedSize: mode === 'analyse',
-            rollupOptions: {
-                output: {
-                    manualChunks: createChunks({
-                        react: ['react', 'react-dom']
-                    })
-                }
-            }
-        },
-        server: {
-            host: '0.0.0.0',
-            proxy: {
-                [proxyBaseUrl]: {
-                    target: 'http://127.0.0.1',
-                    changeOrigin: true,
-                    rewrite: path => path.replace(proxyBaseUrl, '')
-                }
-            }
-        }
-    }
-})
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+import mockDevServer from 'vite-plugin-mock-dev-server'
+import checker from 'vite-plugin-checker'
+import { visualizer } from 'rollup-plugin-visualizer'
+import { includes } from 'lodash-es'
+import tailwindcss from '@tailwindcss/vite'
+import { createChunks } from './scripts'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '')
+    const proxyBaseUrl = env.VITE_BASE_URL + env.VITE_API_HOST
+    const plugins: any[] = [
+        tailwindcss(),
+        svgr(),
+        mockDevServer({
+            include: ['**/*.mock.{ts,js}']
+        }),
+        checker({
+            enableBuild: false,
+            typescript: true,
+            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
+        }),
+        react({
+            babel: {
+                plugins: [
+                    [
+                        'babel-plugin-styled-components',
+                        {
+                            ssr: false,
+                            displayName: false,
+                            fileName: false,
+                            transpileTemplateLiterals: false
+                        }
+                    ]
+                ]
+            }
+        })
+    ]
+
+    if (mode === 'analyse') {
+        plugins.push(visualizer({ open: true, sourcemap: true, brotliSize: true, gzipSize: true }))
+    }
+
+    return {
+        base: env.VITE_BASE_URL,
+        plugins,
+        resolve: {
+            alias: {
+                '@': __dirname
+            }
+        },
+        esbuild: {
+            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
+        },
+        build: {
+            sourcemap: mode === 'analyse',
+            reportCompressedSize: mode === 'analyse',
+            rollupOptions: {
+                output: {
+                    manualChunks: createChunks({
+                        react: ['react', 'react-dom']
+                    })
+                }
+            }
+        },
+        server: {
+            host: '0.0.0.0',
+            proxy: {
+                [proxyBaseUrl]: {
+                    target: 'http://127.0.0.1',
+                    changeOrigin: true,
+                    rewrite: path => path.replace(proxyBaseUrl, '')
+                }
+            }
+        }
+    }
+})

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

@@ -26,7 +26,6 @@
         "@sveltejs/adapter-auto": "3.3.1",
         "@sveltejs/kit": "2.15.0",
         "@sveltejs/vite-plugin-svelte": "5.0.3",
-        "@types/lodash-es": "4.17.12",
         "commitizen": "4.3.0",
         "cross-env": "7.0.3",
         "cssnano": "6.0.1",
@@ -51,7 +50,7 @@
         "vite-plugin-checker": "0.9.0"
     },
     "dependencies": {
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "svelte": "5.16.0"
     }
 }

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

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "axios": "1.7.9",
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "pinia": "2.3.1",
         "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
@@ -34,7 +34,6 @@
         "@eslint/js": "9.15.0",
         "@faker-js/faker": "8.4.1",
         "@tailwindcss/vite": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/mockjs": "1.0.10",
         "@vitejs/plugin-vue": "5.2.1",
         "@vitejs/plugin-vue-jsx": "4.1.1",

package/template/web-app/vue-rsbuild/package.json

@@ -21,7 +21,7 @@
     },
     "dependencies": {
         "axios": "1.7.9",
-        "lodash-es": "4.17.21",
+        "es-toolkit": "1.37.2",
         "pinia": "2.3.1",
         "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
@@ -40,7 +40,6 @@
         "@rsbuild/plugin-vue": "1.0.7",
         "@rsdoctor/rspack-plugin": "0.4.13",
         "@tailwindcss/postcss": "4.1.4",
-        "@types/lodash-es": "4.17.12",
         "@types/mockjs": "1.0.10",
         "autoprefixer": "10.4.14",
         "commitizen": "4.3.0",

package/template/web-extension/package.json

@@ -28,12 +28,13 @@
         "@tanstack/react-query": "5.51.15",
         "@webext-core/messaging": "2.2.0",
         "axios": "1.7.9",
-        "define-zustand": "3.2.1",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.37.2",
         "immer": "10.0.1",
-        "lodash-es": "4.17.21",
         "qs": "6.11.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
+        "styled-components": "^6.1.17",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -41,10 +42,8 @@
         "@commitlint/cli": "17.6.1",
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
-        "@emotion/babel-plugin": "11.13.5",
         "@eslint/js": "9.15.0",
         "@types/chrome": "0.0.254",
-        "@types/lodash-es": "4.17.12",
         "@types/node": "18.16.0",
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",

package/template/web-extension/shared/components/app-context/view.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react'
-import { ThemeProvider } from '@emotion/react'
+import { ThemeProvider } from 'styled-components'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { theme } from '@/shared/styles'
 

package/template/web-extension/shared/styles/global-style.ts

@@ -0,0 +1,9 @@
+import { createGlobalStyle, css } from 'styled-components'
+
+export const GlobalStyle = createGlobalStyle<{ nameSpace?: string }>(props => {
+    return css`
+        .${props.nameSpace || 'body'} {
+            margin: 0;
+        }
+    `
+})

package/template/web-extension/shared/styles/theme.styled.ts

@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react'
-
 import { isString } from 'lodash-es'
 
 export const theme = {
@@ -9,12 +8,14 @@ export const theme = {
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap'
         }),
-        lineClamp: (n: number) => ({
-            '-webkit-line-clamp': `${n}`,
-            '-webkit-box-orient': 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box'
-        }),
+        lineClamp: (n: number) => {
+            return {
+                WebkitLineClamp: `${n}`,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                display: '-webkit-box'
+            } satisfies CSSProperties
+        },
         size: (s: string) => ({ width: s, height: s }),
         py: (s: string) => ({ paddingTop: s, paddingBottom: s }),
         px: (s: string) => ({ paddingLeft: s, paddingRight: s }),
@@ -33,24 +34,14 @@ export const theme = {
             } satisfies CSSProperties
         },
         /** 数字为元素数量，字符串为对应css的值  */
-        grid: {
-            grid: (rows: number | string, cols: number | string, gap?: number) => ({
+        grid: (rows: number | string, cols: number | string, gap?: number) => {
+            return {
                 display: 'grid',
                 gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
                 gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
                 gap: gap ? `${gap}px` : void 0
-            }),
-            rows: (rows: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
-                rowGap: gap ? `${gap}px` : void 0
-            }),
-            cols: (cols: number | string, gap?: number) => ({
-                display: 'grid',
-                gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
-                columnGap: gap ? `${gap}px` : void 0
-            })
-        } satisfies Record<string, (...args: any) => CSSProperties>
+            } satisfies CSSProperties
+        }
     }
 }
 export type themeType = typeof theme

package/template/web-extension/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
 
-import '@emotion/react'
+import 'styled-components'
 import { themeType } from './shared/styles'
 
 declare global {
@@ -16,6 +16,6 @@ declare global {
     }
 }
 
-declare module '@emotion/react' {
-    export interface Theme extends themeType {}
+declare module 'styled-components' {
+    export interface DefaultTheme extends themeType {}
 }

package/template/web-extension/wxt.config.ts

@@ -33,7 +33,17 @@ export default defineConfig({
             svgr(),
             react({
                 babel: {
-                    plugins: ['@emotion']
+                    plugins: [
+                        [
+                            'babel-plugin-styled-components',
+                            {
+                                ssr: false,
+                                displayName: false,
+                                fileName: false,
+                                transpileTemplateLiterals: false
+                            }
+                        ]
+                    ]
                 }
             })
         ] as any,

package/template/web-extension/shared/styles/global-style.tsx

@@ -1,14 +0,0 @@
-import { FunctionComponent } from 'react'
-import { css, Global } from '@emotion/react'
-
-export const GlobalStyle: FunctionComponent<{ nameSpace?: string }> = props => {
-    return (
-        <Global
-            styles={css`
-                ${props.nameSpace ? '.' + props.nameSpace : 'body'} {
-                    margin: 0;
-                }
-            `}
-        />
-    )
-}