From 4b7170625d0bc93b26a3343aeda98850c1138f82 Mon Sep 17 00:00:00 2001
From: czhlin <56159557+czhlin@users.noreply.github.com>
Date: Wed, 24 Sep 2025 17:12:25 +0800
Subject: [PATCH] fix(types): widen directive arg type from string to any
 (#13758)

closes #13757
---
 .../dts-test/directives.test-d.ts             | 28 +++++++++++++++++--
 packages/runtime-core/src/apiCreateApp.ts     |  4 +--
 packages/runtime-core/src/directives.ts       | 18 ++++++------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages-private/dts-test/directives.test-d.ts b/packages-private/dts-test/directives.test-d.ts
index 6a478b673d..f31c2b93aa 100644
--- a/packages-private/dts-test/directives.test-d.ts
+++ b/packages-private/dts-test/directives.test-d.ts
@@ -13,7 +13,7 @@ type ExtractBinding<T> = T extends (
 declare function testDirective<
   Value,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 >(): ExtractBinding<Directive<any, Value, Modifiers, Arg>>
 
 describe('vmodel', () => {
@@ -44,7 +44,7 @@ describe('custom', () => {
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<number, 'a' | 'b', 'Argx'>())
 
@@ -52,7 +52,29 @@ describe('custom', () => {
     value: number
     oldValue: number | null
     arg?: 'Arg'
-    modifiers: Record<'a' | 'b', boolean>
+    modifiers: Partial<Record<'a' | 'b', boolean>>
     // @ts-expect-error
   }>(testDirective<string, 'a' | 'b', 'Arg'>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b', HTMLElement>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+    // @ts-expect-error
+  }>(testDirective<number, 'a' | 'b', string>())
+
+  expectType<{
+    value: number
+    oldValue: number | null
+    arg?: HTMLElement
+    modifiers: Partial<Record<'a' | 'b', boolean>>
+  }>(testDirective<number, 'a' | 'b'>())
 })
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index b69a1ccd54..e3aa33283b 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -50,7 +50,7 @@ export interface App<HostElement = any> {
     HostElement = any,
     Value = any,
     Modifiers extends string = string,
-    Arg extends string = string,
+    Arg = any,
   >(
     name: string,
   ): Directive<HostElement, Value, Modifiers, Arg> | undefined
@@ -58,7 +58,7 @@ export interface App<HostElement = any> {
     HostElement = any,
     Value = any,
     Modifiers extends string = string,
-    Arg extends string = string,
+    Arg = any,
   >(
     name: string,
     directive: Directive<HostElement, Value, Modifiers, Arg>,
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index 5897b39df8..36ff26f20f 100644
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -28,14 +28,14 @@ import { pauseTracking, resetTracking, traverse } from '@vue/reactivity'
 export interface DirectiveBinding<
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > {
   instance: ComponentPublicInstance | Record<string, any> | null
   value: Value
   oldValue: Value | null
   arg?: Arg
   modifiers: DirectiveModifiers<Modifiers>
-  dir: ObjectDirective<any, Value>
+  dir: ObjectDirective<any, Value, Modifiers, Arg>
 }
 
 export type DirectiveHook<
@@ -43,7 +43,7 @@ export type DirectiveHook<
   Prev = VNode<any, HostElement> | null,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = (
   el: HostElement,
   binding: DirectiveBinding<Value, Modifiers, Arg>,
@@ -54,7 +54,7 @@ export type DirectiveHook<
 export type SSRDirectiveHook<
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = (
   binding: DirectiveBinding<Value, Modifiers, Arg>,
   vnode: VNode,
@@ -64,7 +64,7 @@ export interface ObjectDirective<
   HostElement = any,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > {
   /**
    * @internal without this, ts-expect-error in directives.test-d.ts somehow
@@ -99,14 +99,14 @@ export type FunctionDirective<
   HostElement = any,
   V = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > = DirectiveHook<HostElement, any, V, Modifiers, Arg>
 
 export type Directive<
   HostElement = any,
   Value = any,
   Modifiers extends string = string,
-  Arg extends string = string,
+  Arg = any,
 > =
   | ObjectDirective<HostElement, Value, Modifiers, Arg>
   | FunctionDirective<HostElement, Value, Modifiers, Arg>
@@ -125,8 +125,8 @@ export function validateDirectiveName(name: string): void {
 export type DirectiveArguments = Array<
   | [Directive | undefined]
   | [Directive | undefined, any]
-  | [Directive | undefined, any, string]
-  | [Directive | undefined, any, string | undefined, DirectiveModifiers]
+  | [Directive | undefined, any, any]
+  | [Directive | undefined, any, any, DirectiveModifiers]
 >
 
 /**
-- 
2.47.3