create-packer 1.44.2 → 1.45.1

package/package.json

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

package/template/cli/package.json

@@ -28,7 +28,6 @@
         "chalk": "5.3.0",
         "commander": "8.1.0",
         "fs-extra": "10.0.0",
-        "lodash": "4.17.21",
         "ora": "8.1.0"
     },
     "devDependencies": {

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

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

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

@@ -1,6 +1,7 @@
 import { DependencyList, useEffect, useMemo } from 'react'
 import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
-import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+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'

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

@@ -1,19 +1,19 @@
-import { FunctionComponent } from 'react'
-import { Outlet } from 'react-router'
-import { last } from 'lodash-es'
-import { routeType, useMatchRoutes } from '@/domain/router'
-
-export interface propsType {
-    Index: FunctionComponent
-    rootId: routeType['id']
-}
-
-export const Root: FunctionComponent<propsType> = ({ Index, rootId }) => {
-    const matchRoutes = useMatchRoutes()
-
-    if (last(matchRoutes)?.id === rootId) {
-        return <Index />
-    }
-
-    return <Outlet />
-}
+import { FunctionComponent } from 'react'
+import { Outlet } from 'react-router'
+import { last } from 'es-toolkit'
+import { routeType, useMatchRoutes } from '@/domain/router'
+
+export interface propsType {
+    Index: FunctionComponent
+    rootId: routeType['id']
+}
+
+export const Root: FunctionComponent<propsType> = ({ Index, rootId }) => {
+    const matchRoutes = useMatchRoutes()
+
+    if (last(matchRoutes)?.id === rootId) {
+        return <Index />
+    }
+
+    return <Outlet />
+}

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

@@ -1,22 +1,22 @@
-import { FunctionComponent } from 'react'
-import { Outlet } from 'react-router'
-import { useMount } from 'react-use'
-import { last } from 'lodash-es'
-import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
-
-export interface propsType {
-    rootId: routeType['id']
-    homeId: routeType['id']
-}
-export const Root: FunctionComponent<propsType> = props => {
-    const matchRoutes = useMatchRoutes()
-    const navigate = useRouter(state => state.navigate)
-
-    useMount(() => {
-        if (last(matchRoutes)?.id === props.rootId) {
-            navigate({ id: props.homeId })
-        }
-    })
-
-    return <Outlet />
-}
+import { FunctionComponent } from 'react'
+import { Outlet } from 'react-router'
+import { useMount } from 'react-use'
+import { last } from 'es-toolkit'
+import { useMatchRoutes, useRouter, routeType } from '@/domain/router'
+
+export interface propsType {
+    rootId: routeType['id']
+    homeId: routeType['id']
+}
+export const Root: FunctionComponent<propsType> = props => {
+    const matchRoutes = useMatchRoutes()
+    const navigate = useRouter(state => state.navigate)
+
+    useMount(() => {
+        if (last(matchRoutes)?.id === props.rootId) {
+            navigate({ id: props.homeId })
+        }
+    })
+
+    return <Outlet />
+}

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

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

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

@@ -1,11 +1,12 @@
-import { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

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

@@ -1,6 +1,7 @@
 import { DependencyList, useEffect, useMemo } from 'react'
 import { useMatches, useSearchParams, NavigateOptions, createBrowserRouter } from 'react-router'
-import { assign, isArray, reduce, get, map, split, omit, cloneDeep, last, forEach } from 'lodash-es'
+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'

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

@@ -1,80 +1,79 @@
-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 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: ['production', 'analyse'].includes(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/scripts/createChunks.ts

@@ -1,11 +1,12 @@
-import { concat, forEach, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

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

@@ -1,16 +1,12 @@
-import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite'
-import stylelint from 'vite-plugin-stylelint'
 import checker from 'vite-plugin-checker'
 import { visualizer } from 'rollup-plugin-visualizer'
-import { includes } from 'lodash-es'
 import { createChunks } from './scripts'
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '')
     const plugins: any[] = [
-        stylelint({ cache: false, include: ['**/*.{css,scss,sass,less,styl,ts,tsx}'] }),
         checker({
             enableBuild: false,
             typescript: true,
@@ -26,7 +22,7 @@ export default defineConfig(({ mode }) => {
     return {
         plugins,
         esbuild: {
-            drop: includes(['production', 'analyse'], mode) ? ['console', 'debugger'] : []
+            drop: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
         },
         build: {
             sourcemap: mode === 'analyse',

package/template/web-app/vue/domain/app/createComponentInstance.ts

@@ -1,14 +1,13 @@
 import { createVNode, render, VNodeChild } from 'vue'
-import { assign, keys } from 'lodash-es'
 import app from './app'
 
 const store = new Map()
 
 function reset(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    keys(oldObj).forEach(k => {
+    Object.keys(oldObj).forEach(k => {
         oldObj[k] = void 0
     })
-    assign(oldObj, newObj)
+    Object.assign(oldObj, newObj)
 }
 
 export function createComponentInstance<

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

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

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

@@ -1,11 +1,12 @@
-import { concat, forEach, includes, isArray, isRegExp, keys, remove, size } from 'lodash-es'
+import { isRegExp, remove } from 'es-toolkit'
+import { concat, forEach, forOwn, isArray, size } from 'es-toolkit/compat'
 import pkg from '../package.json'
 
 export function createChunks(chunks: { [key: string]: Array<string | RegExp> }) {
-    const vendor = keys(pkg.dependencies)
+    const vendor = Object.keys(pkg.dependencies)
     const result: { [key: string]: string[] } = {}
 
-    forEach(chunks, (values, key) => {
+    forOwn(chunks, (values, key) => {
         if (!isArray(result[key])) {
             result[key] = []
         }

package/template/web-app/vue/shared/hooks/useList.ts

@@ -1,5 +1,6 @@
 import { ref, reactive, computed, unref } from 'vue'
-import { cloneDeep, assign, pick, isNil, size, max } from 'lodash-es'
+import { cloneDeep, pick, isNil } from 'es-toolkit'
+import { assign, size, max } from 'es-toolkit/compat'
 
 export interface configType<ListItem, P> {
     /**

package/template/web-app/vue/shared/hooks/useVisible.ts

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

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

@@ -1,69 +1,68 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import svgLoader from 'vite-svg-loader'
-import mockDevServer from 'vite-plugin-mock-dev-server'
-import checker from 'vite-plugin-checker'
-import tailwindcss from '@tailwindcss/vite'
-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[] = [
-        tailwindcss(),
-        mockDevServer({
-            include: ['**/*.mock.{ts,js}']
-        }),
-        vueJsx({
-            enableObjectSlots: false
-        }),
-        vue(),
-        checker({
-            enableBuild: false,
-            typescript: true,
-            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
-        }),
-        svgLoader()
-    ]
-
-    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({
-                        vue: ['vue', 'vue-router']
-                    })
-                }
-            }
-        },
-        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 vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import svgLoader from 'vite-svg-loader'
+import mockDevServer from 'vite-plugin-mock-dev-server'
+import checker from 'vite-plugin-checker'
+import tailwindcss from '@tailwindcss/vite'
+import { visualizer } from 'rollup-plugin-visualizer'
+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(),
+        mockDevServer({
+            include: ['**/*.mock.{ts,js}']
+        }),
+        vueJsx({
+            enableObjectSlots: false
+        }),
+        vue(),
+        checker({
+            enableBuild: false,
+            typescript: true,
+            eslint: { useFlatConfig: true, lintCommand: 'eslint', dev: { logLevel: ['error'] } }
+        }),
+        svgLoader()
+    ]
+
+    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: ['production', 'analyse'].includes(mode) ? ['console', 'debugger'] : []
+        },
+        build: {
+            sourcemap: mode === 'analyse',
+            reportCompressedSize: mode === 'analyse',
+            rollupOptions: {
+                output: {
+                    manualChunks: createChunks({
+                        vue: ['vue', 'vue-router']
+                    })
+                }
+            }
+        },
+        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-rsbuild/domain/app/createComponentInstance.ts

@@ -1,14 +1,13 @@
 import { createVNode, render, VNodeChild } from 'vue'
-import { assign, keys } from 'lodash-es'
 import app from './app'
 
 const store = new Map()
 
 function reset(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    keys(oldObj).forEach(k => {
+    Object.keys(oldObj).forEach(k => {
         oldObj[k] = void 0
     })
-    assign(oldObj, newObj)
+    Object.assign(oldObj, newObj)
 }
 
 export function createComponentInstance<

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

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

package/template/web-app/vue-rsbuild/shared/hooks/useList.ts

@@ -1,5 +1,6 @@
 import { ref, reactive, computed, unref } from 'vue'
-import { cloneDeep, assign, pick, isNil, size, max } from 'lodash-es'
+import { cloneDeep, pick, isNil } from 'es-toolkit'
+import { assign, size, max } from 'es-toolkit/compat'
 
 export interface configType<ListItem, P> {
     /**

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

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

package/template/web-extension/entrypoints/content/domain/app/tools/insertApp.tsx

@@ -1,58 +1,56 @@
-import { CSSProperties, ReactNode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { forEach, isFunction } from 'lodash-es'
-import { AppContext } from '@/shared/components'
-import { classNameSpace } from '@/entrypoints/content/constants'
-
-export enum insertAppStatus {
-    success,
-    target_not_exist,
-    root_existed
-}
-export interface insertAppResultType {
-    rootEle: HTMLElement | undefined | null
-    result: boolean
-    status: insertAppStatus
-}
-export function insertApp<T extends HTMLElement>(
-    target: T | null | undefined,
-    option: {
-        insert?: (rootEle: HTMLElement, target: T) => void
-        reactNode: ReactNode
-        isReplace?: boolean
-        rootId: string
-        rootStyle?: CSSProperties
-    }
-) {
-    const result: insertAppResultType = {
-        result: false,
-        rootEle: void 0,
-        status: insertAppStatus.success
-    }
-    const rootId = `${import.meta.env.VITE_APP_ID}_${option.rootId}`
-    if (!target) {
-        result.status = insertAppStatus.target_not_exist
-        return result
-    }
-    result.rootEle = document.createElement('div')
-    result.rootEle.className = classNameSpace
-    result.rootEle.id = rootId
-    forEach(option.rootStyle, (value, key) => {
-        result.rootEle!.style[key as any] = value as never
-    })
-    const oldRootEle = target.querySelector?.(`#${rootId}`)
-    if (!option.isReplace && oldRootEle) {
-        result.status = insertAppStatus.root_existed
-        return result
-    }
-    oldRootEle?.remove()
-    if (isFunction(option.insert)) {
-        option.insert(result.rootEle, target)
-    } else {
-        target.appendChild(result.rootEle)
-    }
-    const root = createRoot(result.rootEle)
-    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
-    result.result = true
-    return result
-}
+import { CSSProperties, ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { isFunction } from 'es-toolkit'
+import { AppContext } from '@/shared/components'
+import { classNameSpace } from '@/entrypoints/content/constants'
+
+export enum insertAppStatus {
+    success,
+    target_not_exist,
+    root_existed
+}
+export interface insertAppResultType {
+    rootEle: HTMLElement | undefined | null
+    result: boolean
+    status: insertAppStatus
+}
+export function insertApp<T extends HTMLElement>(
+    target: T | null | undefined,
+    option: {
+        insert?: (rootEle: HTMLElement, target: T) => void
+        reactNode: ReactNode
+        isReplace?: boolean
+        rootId: string
+        rootStyle?: CSSProperties
+    }
+) {
+    const result: insertAppResultType = {
+        result: false,
+        rootEle: void 0,
+        status: insertAppStatus.success
+    }
+    const rootId = `${import.meta.env.VITE_APP_ID}_${option.rootId}`
+    if (!target) {
+        result.status = insertAppStatus.target_not_exist
+        return result
+    }
+    result.rootEle = document.createElement('div')
+    result.rootEle.className = classNameSpace
+    result.rootEle.id = rootId
+    Object.assign(result.rootEle!.style, option.rootStyle)
+    const oldRootEle = target.querySelector?.(`#${rootId}`)
+    if (!option.isReplace && oldRootEle) {
+        result.status = insertAppStatus.root_existed
+        return result
+    }
+    oldRootEle?.remove()
+    if (isFunction(option.insert)) {
+        option.insert(result.rootEle, target)
+    } else {
+        target.appendChild(result.rootEle)
+    }
+    const root = createRoot(result.rootEle)
+    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
+    result.result = true
+    return result
+}

package/template/web-extension/postcss.config.cjs

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

package/template/web-extension/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-extension/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-extension/shared/styles/theme.styled.ts

@@ -1,47 +1,47 @@
-import { CSSProperties } from 'react'
-import { isString } from 'lodash-es'
-
-export const theme = {
-    tools: {
-        ellipsis: () => ({
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-        }),
-        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 }),
-        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 | 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
-            } satisfies CSSProperties
-        }
-    }
-}
-export type themeType = typeof theme
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+
+export const theme = {
+    tools: {
+        ellipsis: () => ({
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }),
+        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 }),
+        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 | 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
+            } satisfies CSSProperties
+        }
+    }
+}
+export type themeType = typeof theme