From 430a3acfeb25410d07e0ca48981a6f819762f29d Mon Sep 17 00:00:00 2001 From: sheng zhang <79007994+Arktomson@users.noreply.github.com> Date: Sat, 21 Feb 2026 23:38:42 +0800 Subject: [PATCH] fix: Add `getAppConfig` as an alias to `useAppConfig` (#2144) Co-authored-by: Aaron --- docs/guide/essentials/config/runtime.md | 6 +++--- docs/guide/essentials/wxt-modules.md | 4 ++-- docs/guide/resources/upgrading.md | 4 ++-- packages/analytics/modules/analytics/index.ts | 4 ++-- packages/wxt-demo/src/entrypoints/background.ts | 2 +- .../__snapshots__/auto-imports.test.ts.snap | 4 ++++ packages/wxt/e2e/tests/auto-imports.test.ts | 5 +++-- packages/wxt/src/core/resolve-config.ts | 2 +- packages/wxt/src/utils/app-config.ts | 16 +++++++++++++++- 9 files changed, 33 insertions(+), 14 deletions(-) diff --git a/docs/guide/essentials/config/runtime.md b/docs/guide/essentials/config/runtime.md index d61e4c51..f28be3c9 100644 --- a/docs/guide/essentials/config/runtime.md +++ b/docs/guide/essentials/config/runtime.md @@ -23,12 +23,12 @@ export default defineAppConfig({ This file is committed to the repo, so don't put any secrets here. Instead, use [Environment Variables](/guide/essentials/config/environment-variables) ::: -To access runtime config, WXT provides the `useAppConfig` function: +To access runtime config, WXT provides the `getAppConfig` function: ```ts -import { useAppConfig } from '#imports'; +import { getAppConfig } from '#imports'; -console.log(useAppConfig()); // { theme: "dark" } +console.log(getAppConfig()); // { theme: "dark" } ``` ## Environment Variables in App Config diff --git a/docs/guide/essentials/wxt-modules.md b/docs/guide/essentials/wxt-modules.md index 7a23992d..f8171e8f 100644 --- a/docs/guide/essentials/wxt-modules.md +++ b/docs/guide/essentials/wxt-modules.md @@ -131,7 +131,7 @@ declare module 'wxt/utils/define-app-config' { Runtime options are returned when calling ```ts -const config = useAppConfig(); +const config = getAppConfig(); console.log(config.myModule); ``` @@ -220,7 +220,7 @@ export default defineWxtModule({ const analyticsModuleCode = ` import { createAnalytics } from 'some-module'; - export const analytics = createAnalytics(useAppConfig().analytics); + export const analytics = createAnalytics(getAppConfig().analytics); export const { reportEvent, reportPageView } = analytics; `; diff --git a/docs/guide/resources/upgrading.md b/docs/guide/resources/upgrading.md index 63d781f0..523ae30a 100644 --- a/docs/guide/resources/upgrading.md +++ b/docs/guide/resources/upgrading.md @@ -177,7 +177,7 @@ import { defineContentScript } from 'wxt/sandbox'; // [!code --] import { ContentScriptContext, useAppConfig } from 'wxt/client'; // [!code --] import { storage } from '#imports'; // [!code ++] import { defineContentScript } from '#imports'; // [!code ++] -import { ContentScriptContext, useAppConfig } from '#imports'; // [!code ++] +import { ContentScriptContext, getAppConfig } from '#imports'; // [!code ++] ``` You can combine the imports into a single import statement, but it's easier to just find/replace each statement. @@ -191,7 +191,7 @@ import { storage, // [!code ++] defineContentScript, // [!code ++] ContentScriptContext, // [!code ++] - useAppConfig, // [!code ++] + getAppConfig, // [!code ++] } from '#imports'; // [!code ++] ``` diff --git a/packages/analytics/modules/analytics/index.ts b/packages/analytics/modules/analytics/index.ts index 44f62879..e8236a81 100644 --- a/packages/analytics/modules/analytics/index.ts +++ b/packages/analytics/modules/analytics/index.ts @@ -44,9 +44,9 @@ export default defineWxtModule({ ? clientModuleId : normalizePath(relative(wxtAnalyticsFolder, clientModuleId)) }'; -import { useAppConfig } from '#imports'; +import { getAppConfig } from '#imports'; -export const analytics = createAnalytics(useAppConfig().analytics); +export const analytics = createAnalytics(getAppConfig().analytics); `; addAlias(wxt, '#analytics', wxtAnalyticsIndex); wxt.hook('prepare:types', async (_, entries) => { diff --git a/packages/wxt-demo/src/entrypoints/background.ts b/packages/wxt-demo/src/entrypoints/background.ts index 09626101..ab38f0c3 100644 --- a/packages/wxt-demo/src/entrypoints/background.ts +++ b/packages/wxt-demo/src/entrypoints/background.ts @@ -12,7 +12,7 @@ export default defineBackground({ manifestVersion: import.meta.env.MANIFEST_VERSION, }); - console.log(useAppConfig()); + console.log(getAppConfig()); browser.runtime.getURL('/'); browser.runtime.getURL('/background.js'); diff --git a/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap b/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap index 3a4c6cf7..868663ac 100644 --- a/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap +++ b/packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap @@ -47,6 +47,7 @@ exports[`Auto Imports > eslintrc > "enabled: 8" should output a JSON config file "defineUnlistedScript": true, "defineWxtPlugin": true, "fakeBrowser": true, + "getAppConfig": true, "injectScript": true, "storage": true, "useAppConfig": true @@ -101,6 +102,7 @@ const globals = { "defineUnlistedScript": true, "defineWxtPlugin": true, "fakeBrowser": true, + "getAppConfig": true, "injectScript": true, "storage": true, "useAppConfig": true @@ -164,6 +166,7 @@ exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config f "defineUnlistedScript": true, "defineWxtPlugin": true, "fakeBrowser": true, + "getAppConfig": true, "injectScript": true, "storage": true, "useAppConfig": true @@ -219,6 +222,7 @@ exports[`Auto Imports > eslintrc > should allow customizing the output 1`] = ` "defineUnlistedScript": "readonly", "defineWxtPlugin": "readonly", "fakeBrowser": "readonly", + "getAppConfig": "readonly", "injectScript": "readonly", "storage": "readonly", "useAppConfig": "readonly" diff --git a/packages/wxt/e2e/tests/auto-imports.test.ts b/packages/wxt/e2e/tests/auto-imports.test.ts index 5d1cb143..94ec0eb7 100644 --- a/packages/wxt/e2e/tests/auto-imports.test.ts +++ b/packages/wxt/e2e/tests/auto-imports.test.ts @@ -30,6 +30,7 @@ describe('Auto Imports', () => { const defineUnlistedScript: typeof import('wxt/utils/define-unlisted-script').defineUnlistedScript const defineWxtPlugin: typeof import('wxt/utils/define-wxt-plugin').defineWxtPlugin const fakeBrowser: typeof import('wxt/testing').fakeBrowser + const getAppConfig: typeof import('wxt/utils/app-config').getAppConfig const injectScript: typeof import('wxt/utils/inject-script').injectScript const storage: typeof import('wxt/utils/storage').storage const useAppConfig: typeof import('wxt/utils/app-config').useAppConfig @@ -111,7 +112,7 @@ describe('Auto Imports', () => { declare module '#imports' { export { browser, Browser } from 'wxt/browser'; export { storage, StorageArea, WxtStorage, WxtStorageItem, StorageItemKey, StorageAreaChanges, MigrationError } from 'wxt/utils/storage'; - export { useAppConfig } from 'wxt/utils/app-config'; + export { getAppConfig, useAppConfig } from 'wxt/utils/app-config'; export { ContentScriptContext, WxtWindowEventMap } from 'wxt/utils/content-script-context'; export { createIframeUi, IframeContentScriptUi, IframeContentScriptUiOptions } from 'wxt/utils/content-script-ui/iframe'; export { createIntegratedUi, IntegratedContentScriptUi, IntegratedContentScriptUiOptions } from 'wxt/utils/content-script-ui/integrated'; @@ -196,7 +197,7 @@ describe('Auto Imports', () => { declare module '#imports' { export { browser, Browser } from 'wxt/browser'; export { storage, StorageArea, WxtStorage, WxtStorageItem, StorageItemKey, StorageAreaChanges, MigrationError } from 'wxt/utils/storage'; - export { useAppConfig } from 'wxt/utils/app-config'; + export { getAppConfig, useAppConfig } from 'wxt/utils/app-config'; export { ContentScriptContext, WxtWindowEventMap } from 'wxt/utils/content-script-context'; export { createIframeUi, IframeContentScriptUi, IframeContentScriptUiOptions } from 'wxt/utils/content-script-ui/iframe'; export { createIntegratedUi, IntegratedContentScriptUi, IntegratedContentScriptUiOptions } from 'wxt/utils/content-script-ui/integrated'; diff --git a/packages/wxt/src/core/resolve-config.ts b/packages/wxt/src/core/resolve-config.ts index 770a64c6..b8abe2aa 100644 --- a/packages/wxt/src/core/resolve-config.ts +++ b/packages/wxt/src/core/resolve-config.ts @@ -387,7 +387,7 @@ async function getUnimportOptions( }, { from: 'wxt/utils/app-config', - imports: defineImportsAndTypes(['useAppConfig'], []), + imports: defineImportsAndTypes(['getAppConfig', 'useAppConfig'], []), }, { from: 'wxt/utils/content-script-context', diff --git a/packages/wxt/src/utils/app-config.ts b/packages/wxt/src/utils/app-config.ts index e905d402..c8c0ad77 100644 --- a/packages/wxt/src/utils/app-config.ts +++ b/packages/wxt/src/utils/app-config.ts @@ -3,6 +3,20 @@ import appConfig from 'virtual:app-config'; import type { WxtAppConfig } from './define-app-config'; -export function useAppConfig(): WxtAppConfig { +/** + * Get runtime config defined in `/app.config.ts` + * + * @see https://wxt.dev/guide/essentials/config/runtime.html + */ +export function getAppConfig(): WxtAppConfig { return appConfig; } + +/** + * Alias for {@link getAppConfig}. + * + * @see https://wxt.dev/guide/essentials/config/runtime.html + */ +export function useAppConfig(): WxtAppConfig { + return getAppConfig(); +}