diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md new file mode 100644 index 00000000..f3062b60 --- /dev/null +++ b/active-rfcs/0000-typed-slots.md @@ -0,0 +1,133 @@ +- Start Date: 2020-07-22 +- Target Major Version: 2.x and 3.x +- Reference Issues: +- Implementation PR: https://github.com/vuejs/vue-next/pull/2693 + +# Summary + +Allow to define named `slots` and `argument` in the `typescript` to provide auto-completion and type inference. + +# Basic example + +```ts +defineComponent({ + slots: { + // slot name `item` + item: { value: Number }, + }, + // ... +}) +``` + +This would allow us to do typechecking in the `slot` binding and on when we use that `slot`. + +## Type only + +```ts +defineComponent({ + slots: null as { + // slot name `item` + item: { value: SlotType } + }, + // ... +}) +``` + +## SFC + +```vue + + + +``` + +## Render function + +```ts +export default defineComponent({ + slots: { + top: null, // no value + item: Object as () => { item: { value: number }; i: number }, + }, + setup(_, { slots }) { + const items = Array.from({ length: 10 }).map((_, value) => ({ value })) + + return () => { + return h('div', [ + //slots.top({a: 1}), // type error no args expected + //slots.random({a: 1}), // type error no slot defined + slots.top(), + items.map((item, i) => h('div', slots.item && slots.item({ item, i }))), + ]) + } + }, +}) +``` + +## Usage + +When we use those component we would be able to check if the slot exists and infer the type + +## SFC + +```vue + +``` + +# Motivation + +Having type validation when using `slots`. + +This will allow to have type inference with using render funcions `h` and it will allow extensions (`vetur`, etc) to be able to provide the correct types on `SFC` + +# Detailed design + +Implementation will be similar to `emit` typings. This can also be used at the run-time to validate the slot as we do with props. + +# Drawbacks + +This is optional, for large applications this will be useful. + +# Alternatives + +There's `web-types.json` (Jetbrains) that describes the slots. AFAIK no solution for `Vetur` + +# Adoption strategy + +# Unresolved questions + +Should we do a pure typescript or allow to do similar prop validation?