create-packer 1.45.8 → 1.45.10

package/package.json

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

package/template/lib/workspace/tsconfig.node.json

@@ -8,7 +8,7 @@
         "strictNullChecks": true,
         "target": "ESNext",
         "noImplicitAny": false,
-        "moduleResolution": "bundler",
+        "moduleResolution": "node",
         "sourceMap": false,
         "declaration": true,
         "outDir": "lib",

package/template/web-app/react-rsbuild/shared/styles/index.ts

@@ -1 +1 @@
-export * as theme from './theme.css'
+export * from './theme.css'

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

@@ -1,3 +1,3 @@
 import { createTheme } from '@vanilla-extract/css'
 
-export const [classes, vars] = createTheme({})
+export const [themeClass, themeVars] = createTheme({})

package/template/web-app/react-vite/shared/styles/index.ts

@@ -1 +1 @@
-export * as theme from './theme.css'
+export * from './theme.css'

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

@@ -1,3 +1,3 @@
 import { createTheme } from '@vanilla-extract/css'
 
-export const [classes, vars] = createTheme({})
+export const [themeClass, themeVars] = createTheme({})

package/template/web-extension/entrypoints/content/global.css.ts

@@ -0,0 +1,5 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { createGlobalStyle } from '@/shared/styles'
+import { classNameSpace } from './constants'
+
+globalStyle(classNameSpace, createGlobalStyle())

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

@@ -1,10 +1,11 @@
-import { CONTENT_MATCHES } from '@/shared/content'
+import { CONTENT_MATCHES, contentMessage } from '@/shared/content'
 import { Common } from './modules'
 
 export default defineContentScript({
     runAt: 'document_idle',
     matches: CONTENT_MATCHES,
     main: () => {
+        contentMessage.onMessage('CONNECT', () => true)
         Common.insert()
     }
 })

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

@@ -1,10 +1,5 @@
-import { GlobalStyle } from '@/shared/styles'
-import { classNameSpace } from '@/entrypoints/content/constants'
+import '@/entrypoints/content/global.css'
 
 export default function Home() {
-    return (
-        <>
-            <GlobalStyle nameSpace={classNameSpace} />
-        </>
-    )
+    return <></>
 }

package/template/web-extension/entrypoints/popup/global.css.ts

@@ -0,0 +1,4 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { createGlobalStyle } from '@/shared/styles'
+
+globalStyle('body', createGlobalStyle())

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

@@ -1,13 +1,12 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { AppContext } from '@/shared/components'
-import { GlobalStyle } from '@/shared/styles'
 import Popup from './popup'
+import './global.css'
 
 createRoot(document.getElementById('root') as HTMLElement).render(
     <StrictMode>
         <AppContext.Root>
-            <GlobalStyle />
             <Popup />
         </AppContext.Root>
     </StrictMode>

package/template/web-extension/package.json

@@ -26,6 +26,7 @@
     },
     "dependencies": {
         "@tanstack/react-query": "5.51.15",
+        "@vanilla-extract/css": "1.17.4",
         "@webext-core/messaging": "2.2.0",
         "axios": "1.7.9",
         "define-zustand": "3.4.0",
@@ -34,7 +35,6 @@
         "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"
     },
@@ -48,9 +48,9 @@
         "@types/qs": "6.9.7",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
+        "@vanilla-extract/vite-plugin": "5.1.1",
         "@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",

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

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

package/template/web-extension/shared/content/message.ts

@@ -2,28 +2,53 @@ import { defineExtensionMessaging } from '@webext-core/messaging'
 import { CONTENT_MATCHES } from './constant'
 
 export type messageType = {
-    test: () => string
+    CONNECT: () => true
 }
 
 export const { sendMessage, onMessage } = defineExtensionMessaging<messageType>()
-export async function sendToAllContent<A extends keyof messageType>(
-    action: A,
-    data?: Parameters<messageType[A]>[0]
-) {
-    const tabs = await chrome.tabs.query({ url: CONTENT_MATCHES })
-    const result = await Promise.all(
+
+export async function connectableTabs(tabQueryInfo?: chrome.tabs.QueryInfo) {
+    const tabs = await chrome.tabs.query({
+        ...tabQueryInfo,
+        url: tabQueryInfo?.url || CONTENT_MATCHES
+    })
+    const result = await Promise.allSettled(
         tabs.map(tab => {
-            return sendMessage(action, data as never, { tabId: tab.id! })
+            return sendMessage('CONNECT', void 0, { tabId: tab.id! }).then(res => ({
+                data: res,
+                tab
+            }))
         })
     )
-    return result
+    return result?.filter(o => o.status === 'fulfilled').map(o => o.value.tab)
 }
 
-export async function sendToCurrentContent<A extends keyof messageType>(
+export async function sendToContent<A extends keyof messageType>(
     action: A,
-    data?: Parameters<messageType[A]>[0]
+    options: {
+        data?: Parameters<messageType[A]>[0]
+        url?: string[]
+        target: 'first' | 'last' | 'all' | 'current'
+    }
 ) {
-    const tabs = await chrome.tabs.query({ active: true, url: CONTENT_MATCHES })
-    const result = await sendMessage(action, data as never, { tabId: tabs[0].id! })
+    let tabs = await connectableTabs({ url: options?.url })
+    switch (options.target) {
+        case 'current':
+            tabs = tabs.filter(tab => tab.active)
+            break
+        case 'first':
+            tabs = tabs.slice(0, 1)
+            break
+        case 'last':
+            tabs = tabs.slice(-1)
+            break
+        default:
+            break
+    }
+    const result = await Promise.all(
+        tabs.map(tab => {
+            return sendMessage(action, options.data as never, { tabId: tab.id! })
+        })
+    )
     return result
 }

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

@@ -0,0 +1,7 @@
+import { GlobalStyleRule } from '@vanilla-extract/css'
+
+export function createGlobalStyle(): GlobalStyleRule {
+    return {
+        margin: 0
+    }
+}

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

@@ -1,2 +1,2 @@
-export * from './theme.styled'
-export * from './global-style'
+export * from './global.css'
+export * from './theme.css'

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

@@ -0,0 +1,3 @@
+import { createTheme } from '@vanilla-extract/css'
+
+export const [themeClass, themeVars] = createTheme({})

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

@@ -1,9 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="./.wxt/wxt.d.ts" />
 
-import 'styled-components'
-import { themeType } from './shared/styles'
-
 declare global {
     interface ImportMetaEnv {
         readonly VITE_API_HOST: string
@@ -15,7 +12,3 @@ declare global {
         readonly env: ImportMetaEnv
     }
 }
-
-declare module 'styled-components' {
-    export interface DefaultTheme extends themeType {}
-}

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

@@ -1,6 +1,7 @@
 import { defineConfig, UserManifestFn } from 'wxt'
 import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
 import pkgJson from './package.json'
 
 const manifest: UserManifestFn = () => {
@@ -29,24 +30,7 @@ export default defineConfig({
     runner: { disabled: true },
     imports: { eslintrc: { enabled: 9 } },
     vite: ({ mode }) => ({
-        plugins: [
-            svgr(),
-            react({
-                babel: {
-                    plugins: [
-                        [
-                            'babel-plugin-styled-components',
-                            {
-                                ssr: false,
-                                displayName: false,
-                                fileName: false,
-                                transpileTemplateLiterals: false
-                            }
-                        ]
-                    ]
-                }
-            })
-        ] as any,
+        plugins: [vanillaExtractPlugin(), svgr(), react()] as any,
         resolve: {
             alias: {
                 '@': __dirname

package/template/web-extension/shared/popup/index.ts

@@ -1 +0,0 @@
-export * as popupMessage from './message'

package/template/web-extension/shared/popup/message.ts

@@ -1,7 +0,0 @@
-import { defineExtensionMessaging } from '@webext-core/messaging'
-
-export type messageType = {
-    test: () => string
-}
-
-export const { sendMessage, onMessage } = defineExtensionMessaging<messageType>()

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

@@ -1,9 +0,0 @@
-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,47 +0,0 @@
-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