From 9c3f8cd1a5043bc89ce053530cbcd1d51f141ac0 Mon Sep 17 00:00:00 2001 From: pikax Date: Wed, 22 Jul 2020 10:26:27 +0100 Subject: [PATCH 1/5] typed slots --- active-rfcs/0000-typed-slots.md | 53 +++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 active-rfcs/0000-typed-slots.md diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md new file mode 100644 index 00000000..443d81b1 --- /dev/null +++ b/active-rfcs/0000-typed-slots.md @@ -0,0 +1,53 @@ +- Start Date: 2020-07-22 +- Target Major Version: 2.x and 3.x +- Reference Issues: +- Implementation PR: + +# Summary + +Allow to define named `slots` and `argument` in the `typescript` to provide auto-completion and type inference. + +# Basic example + +```ts +// default slot +defineComponent({ + slots: { item: { value: Number } }, +}) + +// named slots +defineComponent({ + slots: { + item: { value: Number }, + }, + // ... +}) +``` + + +# 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? \ No newline at end of file From 87f24cad3ae685451da610108ce52ce99531cf03 Mon Sep 17 00:00:00 2001 From: pikax Date: Wed, 22 Jul 2020 15:13:50 +0100 Subject: [PATCH 2/5] removing the same slot example --- active-rfcs/0000-typed-slots.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md index 443d81b1..d5d527fe 100644 --- a/active-rfcs/0000-typed-slots.md +++ b/active-rfcs/0000-typed-slots.md @@ -1,6 +1,6 @@ - Start Date: 2020-07-22 - Target Major Version: 2.x and 3.x -- Reference Issues: +- Reference Issues: - Implementation PR: # Summary @@ -10,21 +10,16 @@ Allow to define named `slots` and `argument` in the `typescript` to provide auto # Basic example ```ts -// default slot -defineComponent({ - slots: { item: { value: Number } }, -}) - // named slots defineComponent({ slots: { + // slot name `item` item: { value: Number }, }, // ... }) ``` - # Motivation Having type validation when using `slots`. @@ -35,7 +30,6 @@ This will allow to have type inference with using render funcions `h` and it wil 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. @@ -46,8 +40,6 @@ There's `web-types.json` (Jetbrains) that describes the slots. AFAIK no solution # Adoption strategy - - # Unresolved questions -Should we do a pure typescript or allow to do similar prop validation? \ No newline at end of file +Should we do a pure typescript or allow to do similar prop validation? From 4f2f4d0d7d016aa2e444f4e7b90eb5444442053f Mon Sep 17 00:00:00 2001 From: pikax Date: Thu, 23 Jul 2020 08:51:22 +0100 Subject: [PATCH 3/5] update example --- active-rfcs/0000-typed-slots.md | 78 ++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md index d5d527fe..4cdcdd13 100644 --- a/active-rfcs/0000-typed-slots.md +++ b/active-rfcs/0000-typed-slots.md @@ -10,7 +10,6 @@ Allow to define named `slots` and `argument` in the `typescript` to provide auto # Basic example ```ts -// named slots defineComponent({ slots: { // slot name `item` @@ -20,6 +19,83 @@ defineComponent({ }) ``` +This would allow us to do typechecking in the `slot` binding and on when we use that `slot`. + +## 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`. From db06f7c37d104f0ed84c3231139cb79363f9b7f7 Mon Sep 17 00:00:00 2001 From: pikax Date: Fri, 27 Nov 2020 10:18:01 +0000 Subject: [PATCH 4/5] added type only --- active-rfcs/0000-typed-slots.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md index 4cdcdd13..f34fd45f 100644 --- a/active-rfcs/0000-typed-slots.md +++ b/active-rfcs/0000-typed-slots.md @@ -21,6 +21,18 @@ defineComponent({ 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 From 42143124bbd5cb8cad31a1984a1b4f83a92b022d Mon Sep 17 00:00:00 2001 From: Carlos Rodrigues Date: Sat, 13 Mar 2021 15:59:59 +0000 Subject: [PATCH 5/5] chore: add PR reference --- active-rfcs/0000-typed-slots.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/active-rfcs/0000-typed-slots.md b/active-rfcs/0000-typed-slots.md index f34fd45f..f3062b60 100644 --- a/active-rfcs/0000-typed-slots.md +++ b/active-rfcs/0000-typed-slots.md @@ -1,7 +1,7 @@ - Start Date: 2020-07-22 - Target Major Version: 2.x and 3.x - Reference Issues: -- Implementation PR: +- Implementation PR: https://github.com/vuejs/vue-next/pull/2693 # Summary