create-packer 1.36.0 → 1.37.2

package/package.json

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

package/template/web-extension/.wxt/eslintrc-auto-import.json

@@ -0,0 +1,21 @@
+{
+  "globals": {
+    "ContentScriptContext": true,
+    "InvalidMatchPattern": true,
+    "MatchPattern": true,
+    "browser": true,
+    "createIframeUi": true,
+    "createIntegratedUi": true,
+    "createShadowRootUi": true,
+    "defineAppConfig": true,
+    "defineBackground": true,
+    "defineConfig": true,
+    "defineContentScript": true,
+    "defineUnlistedScript": true,
+    "defineWxtPlugin": true,
+    "fakeBrowser": true,
+    "injectScript": true,
+    "storage": true,
+    "useAppConfig": true
+  }
+}

package/template/web-extension/.wxt/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@": [".."],
+      "@/*": ["../*"],
+      "~": [".."],
+      "~/*": ["../*"],
+      "@@": [".."],
+      "@@/*": ["../*"],
+      "~~": [".."],
+      "~~/*": ["../*"]
+    }
+  },
+  "include": [
+    "../**/*",
+    "./wxt.d.ts"
+  ],
+  "exclude": ["../dist"]
+}

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

@@ -0,0 +1,15 @@
+// Generated by wxt
+interface ImportMetaEnv {
+  readonly MANIFEST_VERSION: 2 | 3;
+  readonly BROWSER: string;
+  readonly CHROME: boolean;
+  readonly FIREFOX: boolean;
+  readonly SAFARI: boolean;
+  readonly EDGE: boolean;
+  readonly OPERA: boolean;
+  readonly COMMAND: "build" | "serve";
+  readonly ENTRYPOINT: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

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

@@ -0,0 +1,81 @@
+// Generated by wxt
+import "wxt/browser";
+
+declare module "wxt/browser" {
+  /**
+   * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+   */
+  interface GetMessageOptions {
+    /**
+     * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+     */
+    escapeLt?: boolean
+  }
+
+  export interface WxtI18n extends I18n.Static {
+    /**
+     * The extension or app ID; you might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.
+     * Note: You can't use this message in a manifest file.
+     *
+     * "<browser.runtime.id>"
+     */
+    getMessage(
+      messageName: "@@extension_id",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    /**
+     * "<browser.i18n.getUiLocale()>"
+     */
+    getMessage(
+      messageName: "@@ui_locale",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    /**
+     * The text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Japanese.
+     *
+     * "<ltr|rtl>"
+     */
+    getMessage(
+      messageName: "@@bidi_dir",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    /**
+     * If the @@bidi_dir is "ltr", then this is "rtl"; otherwise, it's "ltr".
+     *
+     * "<rtl|ltr>"
+     */
+    getMessage(
+      messageName: "@@bidi_reversed_dir",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    /**
+     * If the @@bidi_dir is "ltr", then this is "left"; otherwise, it's "right".
+     *
+     * "<left|right>"
+     */
+    getMessage(
+      messageName: "@@bidi_start_edge",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    /**
+     * If the @@bidi_dir is "ltr", then this is "right"; otherwise, it's "left".
+     *
+     * "<right|left>"
+     */
+    getMessage(
+      messageName: "@@bidi_end_edge",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+    getMessage(
+      messageName: "@@extension_id" | "@@ui_locale" | "@@bidi_dir" | "@@bidi_reversed_dir" | "@@bidi_start_edge" | "@@bidi_end_edge",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;
+  }
+}

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

@@ -0,0 +1,21 @@
+// Generated by wxt
+export {}
+declare global {
+  const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
+  const InvalidMatchPattern: typeof import('wxt/sandbox')['InvalidMatchPattern']
+  const MatchPattern: typeof import('wxt/sandbox')['MatchPattern']
+  const browser: typeof import('wxt/browser')['browser']
+  const createIframeUi: typeof import('wxt/client')['createIframeUi']
+  const createIntegratedUi: typeof import('wxt/client')['createIntegratedUi']
+  const createShadowRootUi: typeof import('wxt/client')['createShadowRootUi']
+  const defineAppConfig: typeof import('wxt/sandbox')['defineAppConfig']
+  const defineBackground: typeof import('wxt/sandbox')['defineBackground']
+  const defineConfig: typeof import('wxt')['defineConfig']
+  const defineContentScript: typeof import('wxt/sandbox')['defineContentScript']
+  const defineUnlistedScript: typeof import('wxt/sandbox')['defineUnlistedScript']
+  const defineWxtPlugin: typeof import('wxt/sandbox')['defineWxtPlugin']
+  const fakeBrowser: typeof import('wxt/testing')['fakeBrowser']
+  const injectScript: typeof import('wxt/client')['injectScript']
+  const storage: typeof import('wxt/storage')['storage']
+  const useAppConfig: typeof import('wxt/client')['useAppConfig']
+}

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

@@ -0,0 +1,15 @@
+// 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

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

package/template/web-extension/entrypoints/background/index.ts

@@ -0,0 +1 @@
+export default defineBackground(() => {})

package/template/web-extension/{content_script → entrypoints/content}/domain/app/tools/insertApp.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import { isFunction } from 'lodash-es'
 import { Nullable } from '1k-types'
 import { AppContext } from '@/shared/components'
-import { classNameSpace } from '@/content_script/constants'
+import { classNameSpace } from '@/entrypoints/content/constants'
 
 export enum insertAppStatus {
     success,

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

@@ -0,0 +1,12 @@
+import { Common } from './modules'
+
+export default defineContentScript({
+    run_at: 'document_start',
+    matches: [
+        'https://developer.chrome.com/docs/extensions/*',
+        'https://developer.chrome.com/docs/webstore/*'
+    ],
+    main: () => {
+        Common.insert()
+    }
+})

package/template/web-extension/{content_script → entrypoints/content}/modules/common/common.tsx

@@ -1,5 +1,5 @@
 import { GlobalStyle } from '@/shared/styles'
-import { classNameSpace } from '@/content_script/constants'
+import { classNameSpace } from '@/entrypoints/content/constants'
 
 export default function Home() {
     return (

package/template/web-extension/{content_script → entrypoints/content}/modules/common/insert.tsx

@@ -1,4 +1,4 @@
-import { insertApp } from '@/content_script/domain/app'
+import { insertApp } from '@/entrypoints/content/domain/app'
 import Common from './common'
 
 export function insert() {

package/template/web-extension/{popup/popup.html → entrypoints/popup/index.html}

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>

package/template/web-extension/package.json

@@ -5,9 +5,17 @@
     "type": "module",
     "scripts": {
         "prepare": "husky install",
-        "dev": "vite",
-        "build": "tsc --noEmit && vite build",
-        "preview": "vite preview",
+        "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": "biome format --write",
         "lint": "tsc --noEmit && eslint **/*.{tsx,ts} && stylelint **/*.{css,scss,less}",
@@ -34,7 +42,6 @@
         "@commitlint/cli": "17.6.1",
         "@commitlint/config-conventional": "17.6.1",
         "@commitlint/cz-commitlint": "17.5.0",
-        "@crxjs/vite-plugin": "2.0.0-beta.22",
         "@rollup/plugin-eslint": "9.0.5",
         "@types/chrome": "0.0.254",
         "@types/lodash-es": "4.17.7",
@@ -68,7 +75,8 @@
         "typescript": "5.5.2",
         "vite": "5.3.3",
         "vite-plugin-stylelint": "5.3.1",
-        "vite-plugin-svgr": "4.2.0"
+        "vite-plugin-svgr": "4.2.0",
+        "wxt": "0.19.11"
     },
     "config": {
         "commitizen": {

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

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from 'react'
 import { ThemeProvider } from 'styled-components'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { theme } from 'shared/styles'
+import { theme } from '@/shared/styles'
 
 const queryClient = new QueryClient()
 

package/template/web-extension/tsconfig.json

@@ -3,11 +3,7 @@
         "baseUrl": ".",
         "target": "ESNext",
         "useDefineForClassFields": true,
-        "lib": [
-            "DOM",
-            "DOM.Iterable",
-            "ESNext"
-        ],
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "allowJs": false,
         "skipLibCheck": true,
         "esModuleInterop": false,
@@ -23,19 +19,11 @@
         "noEmit": true,
         "jsx": "react-jsx",
         "paths": {
-            "@/*": [
-                "./*"
-            ]
+            "@/*": ["./*"]
         }
     },
-    "include": [
-        "**/*.ts",
-        "**/*.tsx"
-    ],
-    "exclude": [
-        "scripts",
-        "vite.config.ts"
-    ],
+    "include": ["**/*.ts", "**/*.tsx", ".wxt/wxt.d.ts"],
+    "exclude": ["scripts"],
     "references": [
         {
             "path": "./tsconfig.node.json"

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

@@ -0,0 +1,46 @@
+import { defineConfig, UserManifestFn } from 'wxt'
+import react from '@vitejs/plugin-react'
+import stylelint from 'vite-plugin-stylelint'
+import eslint from '@rollup/plugin-eslint'
+import svgr from 'vite-plugin-svgr'
+import pkgJson from './package.json'
+
+const manifest: UserManifestFn = () => {
+    const host_permissions: string[] = []
+
+    return {
+        manifest_version: 3,
+        name: 'Hello Extensions',
+        description: 'Base Level Extension',
+        version: pkgJson.version,
+        action: {
+            default_icon: 'vite.svg'
+        },
+        host_permissions
+    }
+}
+
+export default defineConfig({
+    outDir: 'dist',
+    zip: {
+        name: 'webExtension',
+        artifactTemplate: '{{name}}@{{version}}-{{mode}}-{{browser}}.zip'
+    },
+    manifest,
+    vite: ({ mode }) => ({
+        plugins: [
+            svgr(),
+            stylelint({ cache: false, include: ['**/*.{css,scss,sass,less,styl,vue,svelte}'] }),
+            eslint({ include: ['**/*.{ts,tsx,js,jsx}'] }),
+            react()
+        ] as any,
+        resolve: {
+            alias: {
+                '@': __dirname
+            }
+        },
+        esbuild: {
+            drop: mode === 'production' ? ['console', 'debugger'] : []
+        }
+    })
+})

package/template/web-extension/content_script/index.tsx

@@ -1,3 +0,0 @@
-import { Common } from './modules'
-
-Common.insert()

package/template/web-extension/defineManifest.ts

@@ -1,32 +0,0 @@
-import { defineManifest } from '@crxjs/vite-plugin'
-import pkgJson from './package.json'
-
-interface argType {
-    mode: string
-}
-export default function ({ mode }: argType) {
-    const host_permissions: string[] = []
-    return defineManifest({
-        manifest_version: 3,
-        name: 'Hello Extensions',
-        description: 'Base Level Extension',
-        version: pkgJson.version,
-        action: {
-            default_popup: 'popup/popup.html',
-            default_icon: 'vite.svg'
-        },
-        host_permissions,
-        content_scripts: [
-            {
-                js: ['content_script/index.tsx'],
-                matches: [
-                    'https://developer.chrome.com/docs/extensions/*',
-                    'https://developer.chrome.com/docs/webstore/*'
-                ]
-            }
-        ],
-        background: {
-            service_worker: 'background/index.ts'
-        }
-    })
-}

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

@@ -1,46 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import stylelint from 'vite-plugin-stylelint'
-import eslint from '@rollup/plugin-eslint'
-import { crx } from '@crxjs/vite-plugin'
-import svgr from 'vite-plugin-svgr'
-import defineManifest from './defineManifest'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-    return {
-        plugins: [
-            svgr(),
-            stylelint({ cache: false, include: ['**/*.{css,scss,sass,less,styl,ts,tsx}'] }),
-            eslint({ include: ['**/*.{ts,tsx,js,jsx}'] }),
-            react({
-                babel: {
-                    plugins: [
-                        [
-                            'babel-plugin-styled-components',
-                            {
-                                ssr: false,
-                                displayName: false,
-                                fileName: false,
-                                transpileTemplateLiterals: false
-                            }
-                        ]
-                    ]
-                }
-            }),
-            crx({ manifest: defineManifest({ mode }) })
-        ],
-        resolve: {
-            alias: {
-                '@': __dirname
-            }
-        },
-        esbuild: {
-            drop: mode === 'production' ? ['console', 'debugger'] : []
-        },
-        server: {
-            host: '0.0.0.0',
-            port: 30001
-        }
-    }
-})