diff --git a/.changeset/fix-4972-devtools-production.md b/.changeset/fix-4972-devtools-production.md new file mode 100644 index 000000000..3ac76efd8 --- /dev/null +++ b/.changeset/fix-4972-devtools-production.md @@ -0,0 +1,5 @@ +--- +"vee-validate": patch +--- + +Fix Vue Devtools code being included in production builds (#4972) diff --git a/packages/vee-validate/src/devtools.ts b/packages/vee-validate/src/devtools.ts index d5bfb1ebe..2d53a4ea8 100644 --- a/packages/vee-validate/src/devtools.ts +++ b/packages/vee-validate/src/devtools.ts @@ -4,41 +4,49 @@ import { PathState, PrivateFieldContext, PrivateFormContext } from './types'; import { isClient, keysOf, setInPath, throttle } from './utils'; import { isObject } from '../../shared'; -const DEVTOOLS_FORMS: Record = {}; -const DEVTOOLS_FIELDS: Record = {}; - -const INSPECTOR_ID = 'vee-validate-inspector'; - -const COLORS = { - error: 0xbd4b4b, - success: 0x06d77b, - unknown: 0x54436b, - white: 0xffffff, - black: 0x000000, - blue: 0x035397, - purple: 0xb980f0, - orange: 0xf5a962, - gray: 0xbbbfca, -}; +let DEVTOOLS_FORMS: Record; +let DEVTOOLS_FIELDS: Record; + +let INSPECTOR_ID: string; + +let COLORS: Record; let SELECTED_NODE: | { type: 'pathState'; form: PrivateFormContext; state: PathState } | { type: 'form'; form: PrivateFormContext & { _vm?: ComponentInternalInstance | null } } | { type: 'field'; field: PrivateFieldContext & { _vm?: ComponentInternalInstance | null } } - | null = null; + | null; /** * Plugin API */ let API: any; +if (__DEV__) { + DEVTOOLS_FORMS = {}; + DEVTOOLS_FIELDS = {}; + INSPECTOR_ID = 'vee-validate-inspector'; + COLORS = { + error: 0xbd4b4b, + success: 0x06d77b, + unknown: 0x54436b, + white: 0xffffff, + black: 0x000000, + blue: 0x035397, + purple: 0xb980f0, + orange: 0xf5a962, + gray: 0xbbbfca, + }; + SELECTED_NODE = null; +} + async function installDevtoolsPlugin(app: App) { if (__DEV__) { if (!isClient) { return; } - const devtools = await import('@vue/devtools-api'); + const devtools = await import(/* @vite-ignore */ '@vue/devtools-api'); devtools.setupDevtoolsPlugin( { id: 'vee-validate-devtools-plugin', @@ -167,13 +175,15 @@ async function installDevtoolsPlugin(app: App) { } } -export const refreshInspector = throttle(() => { - setTimeout(async () => { - await nextTick(); - API?.sendInspectorState(INSPECTOR_ID); - API?.sendInspectorTree(INSPECTOR_ID); - }, 100); -}, 100); +export const refreshInspector = __DEV__ + ? throttle(() => { + setTimeout(async () => { + await nextTick(); + API?.sendInspectorState(INSPECTOR_ID); + API?.sendInspectorTree(INSPECTOR_ID); + }, 100); + }, 100) + : () => {}; export function registerFormWithDevTools(form: PrivateFormContext) { if (!__DEV__ || !isClient) {