create-packer 1.43.13 → 1.44.0

package/package.json

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

package/template/lib/workspace/packages/ts/package.json

@@ -16,7 +16,7 @@
     ],
     "license": "ISC",
     "devDependencies": {
-        "@vitest/coverage-v8": "2.0.5",
+        "@vitest/coverage-v8": "3.1.2",
         "eslint": "9.17.0",
         "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
@@ -25,6 +25,6 @@
         "stylelint-config-standard-scss": "13.0.0",
         "typescript": "5.8.2",
         "typescript-eslint": "8.15.0",
-        "vitest": "2.0.5"
+        "vitest": "3.1.2"
     }
 }

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

@@ -1,10 +1,22 @@
 import { FunctionComponent, ReactNode } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { theme } from '@/shared/theme'
+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 <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
 }

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

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, Suspense } from 'react'
 import { RouterProvider } from 'react-router/dom'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
-import { GlobalStyle } from '../app.styled'
 import * as AppContext from './app-context'
 
 export const Root = () => {
@@ -17,8 +16,9 @@ export const Root = () => {
 
     return (
         <AppContext.Root>
-            <GlobalStyle />
-            <RouterProvider router={routerInstance} />
+            <Suspense fallback={<>loading...</>}>
+                <RouterProvider router={routerInstance} />
+            </Suspense>
         </AppContext.Root>
     )
 }

package/template/web-app/react-rsbuild/domain/app/startApp.tsx

@@ -1,6 +1,6 @@
-import { createRoot } from 'react-dom/client'
-import { App } from '@/domain/app'
-
-export default function () {
-    createRoot(document.getElementById('root') as HTMLElement).render(<App.Root />)
-}
+import { createRoot } from 'react-dom/client'
+import { App } from '@/domain/app'
+
+export default function () {
+    createRoot(document.getElementById('root') as HTMLElement).render(<App.Root />)
+}

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

@@ -9,7 +9,6 @@ const routes: routeType[] = [
         path: '/',
         id: ids.root,
         Component: lazy(() => import('@/pages')),
-        hydrateFallbackElement: <>loading...</>,
         children: [
             ...home.routes,
             {

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

@@ -1,28 +1,21 @@
 /// <reference types="@rsbuild/core/types" />
-import 'styled-components'
-import { themeType } from './shared/theme'
 
-declare module 'styled-components' {
-    export interface DefaultTheme extends themeType {}
+interface ImportMetaEnv {
+    readonly PUBLIC_BASE_URL: string
+    readonly PUBLIC_API_HOST: string
+    readonly PUBLIC_ENV_MODE: 'production' | 'development'
 }
-declare global {
-    interface ImportMetaEnv {
-        readonly PUBLIC_BASE_URL: string
-        readonly PUBLIC_API_HOST: string
-        readonly PUBLIC_ENV_MODE: 'production' | 'development'
-    }
 
-    interface ImportMeta {
-        readonly env: ImportMetaEnv
-    }
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
 
-    declare module '*.svg' {
-        const content: string
-        export default content
-    }
+declare module '*.svg' {
+    const content: string
+    export default content
+}
 
-    declare module '*.svg?react' {
-        const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
-        export default ReactComponent
-    }
+declare module '*.svg?react' {
+    const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
+    export default ReactComponent
 }

package/template/web-app/react-rsbuild/main.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" prefix(tw) layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+body {
+    margin: 0;
+}

package/template/web-app/react-rsbuild/main.tsx

@@ -1,3 +1,4 @@
-import { startApp } from '@/domain/app'
-
-startApp()
+import { startApp } from '@/domain/app'
+import './main.css'
+
+startApp()

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

@@ -19,6 +19,7 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
+        "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.2.1",
         "immer": "10.0.1",
@@ -28,7 +29,7 @@
         "react-dom": "18.3.1",
         "react-router": "7.5.0",
         "react-use": "17.5.0",
-        "styled-components": "6.1.11",
+        "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -40,10 +41,10 @@
         "@rsbuild/core": "1.2.19",
         "@rsbuild/plugin-eslint": "1.1.1",
         "@rsbuild/plugin-react": "1.1.1",
-        "@rsbuild/plugin-styled-components": "1.2.1",
         "@rsbuild/plugin-svgr": "1.0.7",
         "@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",
@@ -63,7 +64,6 @@
         "postcss": "8.4.35",
         "postcss-import": "16.0.1",
         "postcss-nesting": "12.0.3",
-        "postcss-styled-syntax": "0.6.4",
         "prettier": "3.2.5",
         "stylelint": "16.10.0",
         "stylelint-config-standard": "36.0.1",

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

@@ -1,11 +1,9 @@
-import { useAsync } from 'react-use'
-import { fetchHomeData } from '@/shared/service'
-import { StyledRoot } from './view.styled'
-
-export default function Home() {
-    const homeData = useAsync(fetchHomeData)
-
-    console.log('data', homeData.value)
-
-    return <StyledRoot>sdfs</StyledRoot>
-}
+import { useHomeData } from '@/shared/service'
+
+export default function Home() {
+    const { data } = useHomeData()
+
+    console.log('data', data)
+
+    return <div className="tw:flex tw:items-center tw:justify-center">sdfs</div>
+}

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

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

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

@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv } from '@rsbuild/core'
 import { pluginReact } from '@rsbuild/plugin-react'
-import { pluginStyledComponents } from '@rsbuild/plugin-styled-components'
 import { pluginEslint } from '@rsbuild/plugin-eslint'
 import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
@@ -10,11 +9,12 @@ import { createChunks } from './scripts'
 
 export default defineConfig(({ envMode, command }) => {
     const { parsed: env } = loadEnv()
+
     return {
         html: {
             template: './index.html',
             title: 'Rsbuild + React + TS',
-            favicon: './shared/assets/react.ico'
+            favicon: './shared/assets/react.svg'
         },
         source: {
             entry: {
@@ -51,12 +51,6 @@ export default defineConfig(({ envMode, command }) => {
                         configType: 'flat'
                     }
                 }),
-            pluginStyledComponents({
-                ssr: false,
-                displayName: false,
-                fileName: false,
-                transpileTemplateLiterals: false
-            }),
             pluginSvgr(),
             pluginReact()
         ],

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

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

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

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "composite": true,
         "module": "ESNext",
-        "moduleResolution": "bundler",
+        "moduleResolution": "node",
         "allowSyntheticDefaultImports": true,
         "resolveJsonModule": true
     },

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

@@ -1,10 +1,22 @@
 import { FunctionComponent, ReactNode } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { theme } from '@/shared/theme'
+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 <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
 }

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

@@ -1,8 +1,7 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, Suspense } from 'react'
 import { RouterProvider } from 'react-router/dom'
 import { request } from '@/shared/service'
 import { routerInstance } from '@/domain/router'
-import { GlobalStyle } from '../app.styled'
 import * as AppContext from './app-context'
 
 export const Root = () => {
@@ -17,8 +16,9 @@ export const Root = () => {
 
     return (
         <AppContext.Root>
-            <GlobalStyle />
-            <RouterProvider router={routerInstance} />
+            <Suspense fallback={<>loading...</>}>
+                <RouterProvider router={routerInstance} />
+            </Suspense>
         </AppContext.Root>
     )
 }

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

@@ -9,7 +9,6 @@ const routes: routeType[] = [
         path: '/',
         id: ids.root,
         Component: lazy(() => import('@/pages')),
-        hydrateFallbackElement: <>loading...</>,
         children: [
             ...home.routes,
             {

package/template/web-app/react-vite/main.css

@@ -0,0 +1,7 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" prefix(tw) layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+body {
+    margin: 0;
+}

package/template/web-app/react-vite/main.tsx

@@ -1,3 +1,4 @@
 import { startApp } from '@/domain/app'
+import './main.css'
 
 startApp()

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

@@ -18,6 +18,7 @@
         "commit": "git add . && npm run cz"
     },
     "dependencies": {
+        "@tanstack/react-query": "5.51.15",
         "axios": "1.7.9",
         "define-zustand": "3.2.1",
         "immer": "10.0.1",
@@ -27,7 +28,7 @@
         "react-dom": "18.3.1",
         "react-router": "7.5.0",
         "react-use": "17.5.0",
-        "styled-components": "6.1.11",
+        "tailwindcss": "4.1.4",
         "type-fest": "4.33.0",
         "zustand": "5.0.3"
     },
@@ -35,8 +36,10 @@
         "@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",
         "@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",
@@ -44,7 +47,6 @@
         "@types/react-dom": "18.3.0",
         "@vitejs/plugin-react": "4.3.4",
         "autoprefixer": "10.4.14",
-        "babel-plugin-styled-components": "2.1.4",
         "commitizen": "4.3.0",
         "cssnano": "6.0.0",
         "eslint": "9.17.0",
@@ -58,7 +60,6 @@
         "postcss": "8.4.35",
         "postcss-import": "16.0.1",
         "postcss-nesting": "12.0.3",
-        "postcss-styled-syntax": "0.6.4",
         "prettier": "3.2.5",
         "rollup-plugin-visualizer": "5.12.0",
         "stylelint": "16.10.0",

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

@@ -1,11 +1,9 @@
-import { useAsync } from 'react-use'
-import { fetchHomeData } from '@/shared/service'
-import { StyledRoot } from './view.styled'
-
-export default function Home() {
-    const homeData = useAsync(fetchHomeData)
-
-    console.log('data', homeData.value)
-
-    return <StyledRoot>sdfs</StyledRoot>
-}
+import { useHomeData } from '@/shared/service'
+
+export default function Home() {
+    const { data } = useHomeData()
+
+    console.log('data', data)
+
+    return <div className="tw:flex tw:items-center tw:justify-center">sdfs</div>
+}

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

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

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

@@ -1,20 +1,12 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
-import 'styled-components'
-import { themeType } from './shared/theme'
 
-declare global {
-    interface ImportMetaEnv {
-        readonly VITE_BASE_URL: string
-        readonly VITE_API_HOST: string
-        // 更多环境变量...
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv
-    }
+interface ImportMetaEnv {
+    readonly VITE_BASE_URL: string
+    readonly VITE_API_HOST: string
+    // 更多环境变量...
 }
 
-declare module 'styled-components' {
-    export interface DefaultTheme extends themeType {}
+interface ImportMeta {
+    readonly env: ImportMetaEnv
 }

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

@@ -1,78 +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 { 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[] = [
-        svgr(),
-        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
-                        }
-                    ]
-                ]
-            }
-        }),
-        mockDevServer({
-            include: ['**/*.mock.{ts,js}']
-        })
-    ]
-
-    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/vue/domain/app/components/app.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { router, routerNames } from '@/router'
+import { router, routerNames } from '@/domain/router'
 
 router.beforeEach(async to => {
     if (!Object.values(routerNames).includes(to.name as string)) {