feat(volar/jsx-directive): support expose for vapor functional components (#997)

zhiyuanzmj · web-flow · commit 8f876de9cc4e · 2025-09-23T19:57:48.000+08:00
* fix(volar/jsx-directive): unwrap exposed for vapor functional components

* chore: add test

* chore: update

* chore: update

* fix: typecheck

* chore: remove NonNullable

* fix: exclude __ctx

* chore: update
diff --git a/packages/volar/src/jsx-directive/context.ts b/packages/volar/src/jsx-directive/context.ts
@@ -18,13 +18,14 @@ export function resolveCtxMap(
 ): Map<import('typescript').Node, string> {
   if (ctxNodeMap.size) {
     options.codes.push(`
-type __VLS_IsAny<T> = 0 extends 1 & T ? true : false; type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+type __VLS_PrettifyGlobal<T> = { [K in keyof T as K]: T[K] } & {};
 declare function __VLS_asFunctionalComponent<
   T,
   K = T extends new (...args: any) => any ? InstanceType<T> : unknown,
 >(
   t: T,
-  instance?: K,
 ): T extends new (...args: any) => any
   ? (
       props: (K extends { $props: infer Props }
@@ -35,27 +36,29 @@ declare function __VLS_asFunctionalComponent<
       ctx?: any,
     ) => JSX.Element & {
       __ctx: {
-        attrs?: Record<string, any>,
+        attrs: Record<string, any>,
         props: (K extends { $props: infer Props }
           ? Props
           : K extends { props: infer Props }
             ? Props
             : any),
-        slots?: K extends { $slots: infer Slots }
+        slots: K extends { $slots: infer Slots }
           ? Slots
           : K extends { slots: infer Slots }
             ? Slots
             : any
-        emit?: K extends { $emit: infer Emit }
+        emit: K extends { $emit: infer Emit }
           ? Emit
           : K extends { emit: infer Emit }
             ? Emit
             : any
-        exposed: K extends { exposed: infer Exposed }
-          ? keyof NonNullable<Exposed> extends never
-            ? K
-            : import('vue').ShallowUnwrapRef<Exposed>
-          : K
+        expose: (
+          exposed: K extends { exposeProxy: infer Exposed }
+            ? string extends keyof NonNullable<Exposed>
+              ? K
+              : Exposed
+            : K,
+        ) => void
       }
     }
   : T extends () => any
@@ -82,7 +85,15 @@ declare function __VLS_getFunctionalComponentCtx<T, K, const S>(
   ? { expose: (exposed: (typeof __VLS_nativeElements)[S]) => any }
     : '__ctx' extends keyof __VLS_PickNotAny<K, {}> 
       ? K extends { __ctx?: infer Ctx } ? Ctx : never
-      : T extends (props: infer P, ctx: infer Ctx) => any ? { props: P } & Ctx
+      : T extends (props: infer P, ctx: { expose: (exposed: infer Exposed) => void } & infer Ctx) => any 
+        ? Ctx & {
+            props: P,
+            expose: (
+              exposed: __VLS_PrettifyGlobal<
+                import('vue').ShallowUnwrapRef<Exposed>
+              >,
+            ) => void,
+          }
         : {};\n`)
   }
 
diff --git a/packages/volar/src/jsx-directive/v-on.ts b/packages/volar/src/jsx-directive/v-on.ts
@@ -39,8 +39,7 @@ type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
       [K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never
     }
   >
->;
-type __VLS_PrettifyGlobal<T> = { [K in keyof T as K]: T[K]; } & {};\n`)
+>;\n`)
 }
 
 export function transformOnWithModifiers(
diff --git a/packages/volar/src/jsx-ref.ts b/packages/volar/src/jsx-ref.ts
@@ -22,7 +22,7 @@ function transformRef({
       codes.replaceRange(
         initializer.expression.end,
         initializer.expression.end,
-        `<Parameters<NonNullable<typeof __VLS_ctx_${name.text}['expose']>>[0] | null>`,
+        `<Parameters<typeof __VLS_ctx_${name.text}['expose']>[0] | null>`,
       )
     }
   }
diff --git a/playground/vue3/src/examples/jsx-ref/index.vue b/playground/vue3/src/examples/jsx-ref/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { expectTypeOf } from 'expect-type'
-import { defineComponent } from 'vue'
+import { defineComponent, ref, type Ref } from 'vue'
 import { useRef } from 'vue-macros/runtime'
 import Comp from './comp.vue'
 
@@ -10,9 +10,20 @@ const Comp1 = defineComponent({
   },
 })
 
+const VaporComp = (
+  _: any,
+  { expose }: { expose: (exposed: { foo: Ref<number> }) => void },
+) => {
+  expose({
+    foo: ref(1),
+  })
+  return <div />
+}
+
 const comp = useRef()
 let comp1 = $(useRef())
 const comp2 = $(useRef())
+const vaporCompRef = useRef()
 
 defineRender(
   <>
@@ -24,6 +35,9 @@ defineRender(
 
     <a ref={$$(comp2)} />
     {expectTypeOf<[HTMLAnchorElement | null | undefined]>([comp2])}
+
+    <VaporComp ref={vaporCompRef} />
+    {expectTypeOf<number | null | undefined>(vaporCompRef.value?.foo)}
   </>,
 )
 </script>

Original file line number	Diff line number	Diff line change
`@@ -39,8 +39,7 @@ type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<`
`39`	`39`	`[K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never`
`40`	`40`	`}`
`41`	`41`	`>`
`42`		`->;`
`43`		-type __VLS_PrettifyGlobal<T> = { [K in keyof T as K]: T[K]; } & {};\n`)
	`42`	+>;\n`)
`44`	`43`	`}`
`45`	`44`
`46`	`45`	`export function transformOnWithModifiers(`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ function transformRef({`
`22`	`22`	`codes.replaceRange(`
`23`	`23`	`initializer.expression.end,`
`24`	`24`	`initializer.expression.end,`
`25`		- `<Parameters<NonNullable<typeof __VLS_ctx_${name.text}['expose']>>[0] \| null>`,
	`25`	+ `<Parameters<typeof __VLS_ctx_${name.text}['expose']>[0] \| null>`,
`26`	`26`	`)`
`27`	`27`	`}`
`28`	`28`	`}`