feat(types): Add Exposed template to SetupContext #13177

michaelcozzolino · 2025-04-08T20:56:35Z

This PR allows the possibility to type expose when using defineComponent with composition api

export const UseVirtualList = defineComponent(
  <T = any>(props: {msg: T}, { slots, expose }: SetupContext<EmitsOptions, SlotsType<{}>, { index: number }>,
  ) => {
        ...
        const index = 2
        expose({index})
})

I added the template wherever it would be needed.
i'm not sure if in packages/runtime-core/src/componentOptions.ts at line 142 it's needed as well, as i already see an Exposed template, but doesn't look like having the type for the one in SetupContext. let me know if everything is fine

Summary by CodeRabbit

New Features
- Improved type safety for exposed properties in components defined with a setup function, allowing explicit control over which properties are accessible on the component instance.
Tests
- Added new tests to verify correct typing and accessibility of properties exposed via the setup function, ensuring non-exposed properties are not accessible.

github-actions · 2025-04-09T00:10:41Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38.1 kB	34.4 kB
vue.global.prod.js	158 kB	58.3 kB	51.9 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.1 kB	16.6 kB
createApp	54.4 kB	21.2 kB	19.4 kB
createSSRApp	58.6 kB	22.9 kB	20.9 kB
defineCustomElement	59.2 kB	22.7 kB	20.7 kB
overall	68.5 kB	26.3 kB	24 kB

pkg-pr-new · 2025-04-09T00:10:52Z

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13177

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13177

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13177

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13177

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13177

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13177

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13177

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13177

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13177

vue

npm i https://pkg.pr.new/vue@13177

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13177

commit: bd8c78d

jh-leong · 2025-04-09T02:15:53Z

Thanks for the PR!

Could you please add test cases for this change in:

packages-private/dts-test/defineComponent.test-d.tsx
packages-private/dts-test/functionalComponent.test-d.tsx

This would help verify the type behavior.

michaelcozzolino · 2025-04-12T19:34:08Z

Thanks for the PR!

Could you please add test cases for this change in:

packages-private/dts-test/defineComponent.test-d.tsx

packages-private/dts-test/functionalComponent.test-d.tsx

This would help verify the type behavior.

I added a test, but i was able to achieve the goal just partially, the expose keys seem to be typed properly, but the values are not typed at all, do you have any suggestions?

edison1105 · 2025-04-17T07:26:29Z

@michaelcozzolino
Could you please fix the test failing?

coderabbitai · 2025-04-26T10:01:15Z

Walkthrough

The changes introduce enhanced type safety and explicit typing for component property exposure in a component-based framework. New generic parameters are added to core types and function overloads to allow precise specification of which properties are exposed to component instances, both in options objects and setup functions. The test suite is expanded to verify that only explicitly exposed properties are accessible on component instances and that typings reflect these constraints. These adjustments impact type declarations for component definitions, setup contexts, and functional components, supporting stricter and more expressive public API contracts.

Changes

File(s)	Change Summary
`packages/runtime-core/src/apiDefineComponent.ts`	Added a generic parameter `Exposed` to `DefineSetupFnComponent` and related `defineComponent` overloads. Updated the setup function context and return types to reflect exposed properties, and allowed explicit exposure via an `expose` array in the options object.
`packages/runtime-core/src/component.ts`	Introduced a generic `Exposed` parameter to `FunctionalComponent` and an `expose` property for explicit exposure. Generalized the `SetupContext` type and its `expose` method to allow more precise typing of exposed properties.
`packages-private/dts-test/defineComponent.test-d.tsx`	Renamed the "expose typing" test suite to "expose typing w/ options object". Added a new test suite "expose typing w/ setup function" to verify that only explicitly exposed properties are accessible on the component instance and that typings are enforced accordingly.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component
    participant SetupFunction
    participant Instance

    User->>Component: defineComponent({ setup(ctx) { ctx.expose({a, b}) } })
    Component->>SetupFunction: Call setup with SetupContext (expose method)
    SetupFunction->>SetupFunction: Call ctx.expose({a, b})
    SetupFunction-->>Component: Return setup result
    Component->>Instance: Create instance with exposed properties a, b
    User->>Instance: Access instance.a / instance.b (allowed)
    User->>Instance: Access instance.c (TypeScript error)

Poem

In the warren of types, a new tunnel appears,
Where only the chosen are seen by your peers.
Expose with precision, let typings be tight,
Now bunnies and coders can sleep well at night.
With setup and options, the contract is clear—
Only what’s exposed shall ever hop near! 🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a23fb59 and 3f6d453.

📒 Files selected for processing (3)

packages-private/dts-test/defineComponent.test-d.tsx (2 hunks)
packages/runtime-core/src/apiDefineComponent.ts (3 hunks)
packages/runtime-core/src/component.ts (3 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

packages-private/dts-test/defineComponent.test-d.tsx (3)

packages/runtime-core/src/apiDefineComponent.ts (1)

defineComponent (327-337)

packages/runtime-core/src/componentEmits.ts (1)

EmitsOptions (41-41)

packages/runtime-core/src/index.ts (1)

h (109-109)

packages/runtime-core/src/apiDefineComponent.ts (5)

packages/runtime-core/src/component.ts (2)

SetupContext (280-291)

ComponentOptions (275-275)

packages/runtime-core/src/index.ts (10)

SetupContext (262-262)

RenderFunction (281-281)

ComponentOptions (276-276)

DefineSetupFnComponent (272-272)

EmitsToProps (294-294)

PublicProps (273-273)

defineComponent (63-63)

EmitsOptions (292-292)

SlotsType (314-314)

ComponentObjectPropsOptions (319-319)

packages/runtime-core/src/componentOptions.ts (2)

RenderFunction (108-108)

ComponentOptions (239-294)

packages/runtime-core/src/componentEmits.ts (2)

EmitsToProps (43-58)

EmitsOptions (41-41)

packages/runtime-core/src/componentProps.ts (1)

ComponentObjectPropsOptions (47-49)

🪛 Biome (1.9.4)

packages-private/dts-test/defineComponent.test-d.tsx

[error] 1643-1643: Don't use 'String' as a type.

Use lowercase primitives for consistency.
Safe fix: Use 'string' instead