create-packer 1.47.2 → 1.49.0

package/template/web-extension/.wxt/types/paths.d.ts

@@ -1,17 +1,17 @@
-// Generated by wxt
-import "wxt/browser";
-
-declare module "wxt/browser" {
-  export type PublicPath =
-    | ""
-    | "/"
-    | "/background.js"
-    | "/content-scripts/content.js"
-    | "/popup.html"
-    | "/vite.svg"
-  type HtmlPublicPath = Extract<PublicPath, `${string}.html`>
-  export interface WxtRuntime {
-    getURL(path: PublicPath): string;
-    getURL(path: `${HtmlPublicPath}${string}`): string;
-  }
-}
+// Generated by wxt
+import "wxt/browser";
+
+declare module "wxt/browser" {
+  export type PublicPath =
+    | ""
+    | "/"
+    | "/background.js"
+    | "/content-scripts/content.js"
+    | "/popup.html"
+    | "/vite.svg"
+  type HtmlPublicPath = Extract<PublicPath, `${string}.html`>
+  export interface WxtRuntime {
+    getURL(path: PublicPath): string;
+    getURL(path: `${HtmlPublicPath}${string}`): string;
+  }
+}

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

@@ -1,7 +1,7 @@
-// Generated by wxt
-/// <reference types="wxt/vite-builder-env" />
-/// <reference path="./types/paths.d.ts" />
-/// <reference path="./types/i18n.d.ts" />
-/// <reference path="./types/globals.d.ts" />
-/// <reference path="./types/imports-module.d.ts" />
-/// <reference path="./types/imports.d.ts" />
+// Generated by wxt
+/// <reference types="wxt/vite-builder-env" />
+/// <reference path="./types/paths.d.ts" />
+/// <reference path="./types/i18n.d.ts" />
+/// <reference path="./types/globals.d.ts" />
+/// <reference path="./types/imports-module.d.ts" />
+/// <reference path="./types/imports.d.ts" />

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

@@ -50,9 +50,7 @@ export function insertApp<T extends HTMLElement>(
         target.appendChild(result.rootEle)
     }
     const root = createRoot(result.rootEle)
-    root.render(
-        <AppContext.Root classNameSpace={classNameSpace}>{option.reactNode}</AppContext.Root>
-    )
+    root.render(<AppContext.Root>{option.reactNode}</AppContext.Root>)
     result.result = true
     return result
 }

package/template/web-extension/entrypoints/content/index.tsx

@@ -1,6 +1,5 @@
 import { CONTENT_MATCHES, contentMessage } from '@/shared/content'
 import { Common } from './modules'
-import '@/shared/styles/theme.css'
 
 export default defineContentScript({
     runAt: 'document_idle',

package/template/web-extension/entrypoints/content/modules/common/common.tsx

@@ -1,3 +1,9 @@
+import { GlobalStyle } from './view.styled'
+
 export default function Home() {
-    return <></>
+    return (
+        <>
+            <GlobalStyle />
+        </>
+    )
 }

package/template/web-extension/entrypoints/content/modules/common/view.styled.ts

@@ -0,0 +1,10 @@
+import { createGlobalStyle, css } from 'styled-components'
+import { classNameSpace } from '@/entrypoints/content/constants'
+
+export const GlobalStyle = createGlobalStyle(() => {
+    return css`
+        .${classNameSpace} {
+            color: initial;
+        }
+    `
+})

package/template/web-extension/entrypoints/popup/main.tsx

@@ -2,7 +2,6 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { AppContext } from '@/shared/components'
 import Popup from './popup'
-import '@/shared/styles/theme.css'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>

package/template/web-extension/entrypoints/popup/popup.styled.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const StyledRoot = styled.div`
+    ${({ theme }) => theme.tools.flex('center', 'center')}
+`

package/template/web-extension/entrypoints/popup/popup.tsx

@@ -1,3 +1,5 @@
+import { StyledRoot } from './popup.styled'
+
 export default function Home() {
-    return <div className="tw:flex">home</div>
+    return <StyledRoot>home</StyledRoot>
 }

package/template/web-extension/eslint.config.js

@@ -25,7 +25,8 @@ export default tseslint.config([
                 ecmaFeatures: {
                     jsx: true
                 },
-                useJSXTextNode: true
+                useJSXTextNode: true,
+                tsconfigRootDir: import.meta.dirname
             },
             globals: {
                 ...globals.browser,

package/template/web-extension/package.json

@@ -1,85 +1,85 @@
-{
-    "name": "web-extension",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "prepare": "husky",
-        "dev": "wxt",
-        "dev:firefox": "wxt -b firefox",
-        "build": "wxt build",
-        "build_dev": "wxt build --mode dev",
-        "build:firefox": "wxt build -b firefox",
-        "build_dev:firefox": "wxt build -b firefox --mode dev",
-        "zip": "wxt zip",
-        "zip_dev": "wxt zip --mode dev",
-        "zip:firefox": "wxt zip -b firefox",
-        "zip_dev:firefox": "wxt zip -b firefox --mode dev",
-        "postinstall": "wxt prepare",
-        "up:vite": "pnpm up vite @vitejs/* -L",
-        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
-        "lint": "tsc --noEmit && eslint **/*.{tsx,ts} && stylelint **/*.{css,scss,less,ts,tsx}",
-        "lint:fix": "eslint **/*.{tsx,ts} --fix && stylelint **/*.{css,scss,less,ts,tsx} --fix",
-        "cz": "cz",
-        "push": "npm run commit && git push",
-        "commit": "git add . && npm run cz"
-    },
-    "dependencies": {
-        "@tanstack/react-query": "5.51.15",
-        "@webext-core/messaging": "2.2.0",
-        "axios": "1.7.9",
-        "define-zustand": "3.4.0",
-        "es-toolkit": "1.43.0",
-        "immer": "10.0.1",
-        "qs": "6.11.2",
-        "react": "18.3.1",
-        "react-dom": "18.3.1",
-        "tailwindcss": "4.1.4",
-        "type-fest": "4.33.0",
-        "zustand": "5.0.3"
-    },
-    "devDependencies": {
-        "@commitlint/cli": "17.6.1",
-        "@commitlint/config-conventional": "17.6.1",
-        "@commitlint/cz-commitlint": "17.5.0",
-        "@eslint/js": "9.15.0",
-        "@tailwindcss/vite": "4.1.18",
-        "@types/chrome": "0.0.254",
-        "@types/node": "18.16.0",
-        "@types/qs": "6.9.7",
-        "@types/react": "18.3.3",
-        "@types/react-dom": "18.3.0",
-        "@vitejs/plugin-react": "5.1.2",
-        "autoprefixer": "10.4.14",
-        "commitizen": "4.3.0",
-        "cssnano": "6.0.0",
-        "eslint": "9.17.0",
-        "eslint-import-resolver-typescript": "3.7.0",
-        "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-react": "7.37.2",
-        "eslint-plugin-react-hooks": "5.1.0",
-        "globals": "15.12.0",
-        "husky": "9.1.6",
-        "inquirer": "8.1.2",
-        "postcss": "8.4.31",
-        "postcss-import": "15.1.0",
-        "postcss-nesting": "11.2.2",
-        "postcss-scss": "4.0.9",
-        "postcss-styled-syntax": "0.6.4",
-        "prettier": "3.2.5",
-        "rimraf": "5.0.1",
-        "sass": "1.97.1",
-        "stylelint": "16.10.0",
-        "stylelint-config-standard": "36.0.1",
-        "typescript": "5.8.2",
-        "typescript-eslint": "8.28.0",
-        "vite": "7.3.0",
-        "vite-plugin-svgr": "4.5.0",
-        "wxt": "0.20.5"
-    },
-    "config": {
-        "commitizen": {
-            "path": "@commitlint/cz-commitlint"
-        }
-    }
-}
+{
+    "name": "web-extension",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "prepare": "husky",
+        "dev": "wxt",
+        "dev:firefox": "wxt -b firefox",
+        "build": "wxt build",
+        "build_dev": "wxt build --mode dev",
+        "build:firefox": "wxt build -b firefox",
+        "build_dev:firefox": "wxt build -b firefox --mode dev",
+        "zip": "wxt zip",
+        "zip_dev": "wxt zip --mode dev",
+        "zip:firefox": "wxt zip -b firefox",
+        "zip_dev:firefox": "wxt zip -b firefox --mode dev",
+        "postinstall": "wxt prepare",
+        "up:vite": "pnpm up vite @vitejs/* -L",
+        "up:wxt": "pnpm up wxt @webext-core/* -L",
+        "format": "prettier --write \"**/*.{ts,js,tsx,jsx,json,css,scss,less}\"",
+        "lint": "tsc --noEmit && eslint **/*.{tsx,ts} && stylelint **/*.{css,scss,less,ts,tsx}",
+        "lint:fix": "eslint **/*.{tsx,ts} --fix && stylelint **/*.{css,scss,less,ts,tsx} --fix",
+        "cz": "cz",
+        "push": "npm run commit && git push",
+        "commit": "git add . && npm run cz"
+    },
+    "dependencies": {
+        "@tanstack/react-query": "5.51.15",
+        "@webext-core/messaging": "2.3.0",
+        "axios": "1.16.0",
+        "define-zustand": "3.4.0",
+        "es-toolkit": "1.46.1",
+        "immer": "10.0.1",
+        "qs": "6.11.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "styled-components": "6.2.0",
+        "type-fest": "5.6.0",
+        "zustand": "5.0.3"
+    },
+    "devDependencies": {
+        "@commitlint/cli": "17.6.1",
+        "@commitlint/config-conventional": "17.6.1",
+        "@commitlint/cz-commitlint": "17.5.0",
+        "@eslint/js": "9.15.0",
+        "@types/chrome": "0.0.254",
+        "@types/node": "18.16.0",
+        "@types/qs": "6.9.7",
+        "@types/react": "18.3.3",
+        "@types/react-dom": "18.3.0",
+        "@vitejs/plugin-react": "6.0.1",
+        "autoprefixer": "10.4.14",
+        "commitizen": "4.3.0",
+        "cssnano": "6.0.0",
+        "eslint": "9.17.0",
+        "eslint-import-resolver-typescript": "4.4.4",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react-hooks": "5.1.0",
+        "globals": "15.12.0",
+        "husky": "9.1.6",
+        "inquirer": "8.1.2",
+        "postcss": "8.4.31",
+        "postcss-import": "15.1.0",
+        "postcss-nesting": "11.2.2",
+        "postcss-scss": "4.0.9",
+        "postcss-styled-syntax": "0.6.4",
+        "prettier": "3.2.5",
+        "rimraf": "5.0.1",
+        "sass": "1.97.1",
+        "stylelint": "16.10.0",
+        "stylelint-config-standard": "36.0.1",
+        "typescript": "6.0.3",
+        "typescript-eslint": "8.59.2",
+        "vite": "8.0.11",
+        "vite-plugin-svgr": "5.2.0",
+        "wxt": "0.20.20"
+    },
+    "config": {
+        "commitizen": {
+            "path": "@commitlint/cz-commitlint"
+        }
+    }
+}

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

@@ -1,10 +1,16 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ThemeProvider } from 'styled-components'
+import { createTheme } from '@/shared/styles/theme'
 
 const queryClient = new QueryClient()
 
-const AppContext: FunctionComponent<{ children: ReactNode; classNameSpace?: string }> = props => {
-    return <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+const AppContext: FunctionComponent<{ children: ReactNode }> = props => {
+    return (
+        <ThemeProvider theme={createTheme()}>
+            <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+        </ThemeProvider>
+    )
 }
 
 export default AppContext

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react'
+import { isString } from 'es-toolkit'
+import { isNumber } from 'es-toolkit/compat'
+
+export function createTheme() {
+    return {
+        tools: {
+            ellipsis: () => ({
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+            }),
+            lineClamp: (n: number) => {
+                return {
+                    WebkitLineClamp: `${n}`,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    display: '-webkit-box',
+                    wordBreak: 'break-all'
+                } 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 | CSSProperties['gridTemplateRows'],
+                cols: number | CSSProperties['gridTemplateColumns'],
+                gap?: number | string
+            ) => {
+                return {
+                    display: 'grid',
+                    gridTemplateRows: isString(rows) ? rows : `repeat(${rows}, minmax(0, 1fr))`,
+                    gridTemplateColumns: isString(cols) ? cols : `repeat(${cols}, minmax(0, 1fr))`,
+                    gap: isNumber(gap) ? `${gap}px` : gap
+                } satisfies CSSProperties
+            }
+        }
+    }
+}
+export type themeType = ReturnType<typeof createTheme>

package/template/web-extension/tsconfig.json

@@ -1,12 +1,10 @@
 {
     "compilerOptions": {
-        "baseUrl": ".",
         "target": "ESNext",
         "useDefineForClassFields": true,
         "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "allowJs": false,
         "skipLibCheck": true,
-        "esModuleInterop": false,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,

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

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

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

@@ -1,7 +1,6 @@
 import { defineConfig, UserManifestFn } from 'wxt'
 import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'
-import tailwindcss from '@tailwindcss/vite'
 import pkgJson from './package.json'
 
 const manifest: UserManifestFn = () => {
@@ -29,15 +28,34 @@ export default defineConfig({
     manifest,
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
-    vite: ({ mode }) => ({
-        plugins: [tailwindcss(), svgr(), react()] as any,
-        resolve: {
-            alias: {
-                '@': __dirname
+    vite: ({ mode }) => {
+        const isDropConsole = ['production', 'analyse'].includes(mode)
+        return {
+            plugins: [svgr(), react()] as any,
+            resolve: {
+                alias: {
+                    '@': __dirname
+                }
+            },
+            oxc: {
+                plugins: {
+                    styledComponents: {
+                        ssr: false,
+                        displayName: false,
+                        fileName: false,
+                        transpileTemplateLiterals: false
+                    }
+                }
+            },
+            build: {
+                rolldownOptions: {
+                    output: {
+                        minify: {
+                            compress: { dropConsole: isDropConsole, dropDebugger: isDropConsole }
+                        }
+                    }
+                }
             }
-        },
-        esbuild: {
-            drop: mode === 'production' ? ['console', 'debugger'] : []
         }
-    })
+    }
 })

package/template/electron-react/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true
-    },
-    "include": ["scripts", "rsbuild.config.ts", "package.json"]
-}

package/template/electron-vue/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true
-    },
-    "include": ["scripts", "rsbuild.config.ts", "package.json"]
-}

package/template/web-app/react-rsbuild/domain/components/index.ts

@@ -1 +0,0 @@
-export * as App from './app'

package/template/web-app/react-rsbuild/domain/router/router.types.ts

@@ -1,3 +0,0 @@
-import { routeType as $routeType } from '@/shared/hooks'
-
-export type routeType = $routeType

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

@@ -1,10 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true
-    },
-    "include": ["scripts", "rsbuild.config.ts", "package.json"]
-}

package/template/web-app/react-vite/domain/components/index.ts

@@ -1 +0,0 @@
-export * as App from './app'

package/template/web-app/react-vite/domain/router/router.types.ts

@@ -1,3 +0,0 @@
-import { routeType as $routeType } from '@/shared/hooks'
-
-export type routeType = $routeType

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

@@ -1,27 +0,0 @@
-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 = Object.keys(pkg.dependencies)
-    const result: { [key: string]: string[] } = {}
-
-    forOwn(chunks, (values, key) => {
-        if (!isArray(result[key])) {
-            result[key] = []
-        }
-        forEach(values, value => {
-            let modules: string[] = []
-            if (isRegExp(value)) {
-                modules = remove(vendor, name => value.test(name))
-            } else {
-                modules = remove(vendor, name => name === value)
-            }
-            if (size(modules) > 0) {
-                result[key] = concat(result[key], modules)
-            }
-        })
-    })
-    result.vendor = vendor
-    return result
-}

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

@@ -1,27 +0,0 @@
-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 = Object.keys(pkg.dependencies)
-    const result: { [key: string]: string[] } = {}
-
-    forOwn(chunks, (values, key) => {
-        if (!isArray(result[key])) {
-            result[key] = []
-        }
-        forEach(values, value => {
-            let modules: string[] = []
-            if (isRegExp(value)) {
-                modules = remove(vendor, name => value.test(name))
-            } else {
-                modules = remove(vendor, name => name === value)
-            }
-            if (size(modules) > 0) {
-                result[key] = concat(result[key], modules)
-            }
-        })
-    })
-    result.vendor = vendor
-    return result
-}

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

@@ -1,10 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true
-    },
-    "include": ["scripts", "rsbuild.config.ts", "package.json"]
-}

package/template/web-extension/shared/styles/theme.css

@@ -1,4 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" prefix(tw) layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-