From 385e1b563354f492dbd875938e17ab3ab19dfeac Mon Sep 17 00:00:00 2001 From: Stas Lashmanov Date: Sun, 28 Jun 2020 19:46:17 +0300 Subject: [PATCH 1/2] Rename scoped slots to slots with props --- ...rename-scoped-slots-to-slots-with-props.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md diff --git a/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md b/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md new file mode 100644 index 00000000..031bde57 --- /dev/null +++ b/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md @@ -0,0 +1,104 @@ +- Start Date: 2020-06-28 +- Target Major Version: 3.x +- Reference Issues: +- Implementation PR: + +# Summary + +Refer to Scoped Slots as Slots with props from now on in docs. Refer to Slot Scope as to Slot Props. + +# Motivation + +Scoped Slots were introduced in 2.1 to pass arbitrary data to slot using attributes\props on a slot element +and a `slot-scope` directive on a slot consumer. In 2.6 `slot-scope` was removed in favour of a new `v-slot` directive. The only two remaining places where you can encounter the term *Scope* on a daily basis in Vue 2 are render functions (`this.$scopedSlots`) and docs. In Vue 3 `scopedSlots` do not exist in the render API anymore. + +Scoped Slots is not an easy concept to grasp at first. +Partially because the term *Scope* is not explained in the documentation and is referencing slot implementation details. In particular, the render function API in Vue 2.x is using component props to render slots, so calling it `slotProps` at that time would not be convenient for developers: + +```js +h('SlottedComponent', { + // Slot Props are actually a slot argument, not the prop themselves + slotProps: { + default: ({ title }) => h('div', title) + } +}) +``` + +So Scoped Slots (as an implementation detail) was chosen instead as their name in documentation as well. + +The term *Scope* is also used in the Scoped Styles, but it's not the same scope as in the Scoped Slots, which might as well be confusing for developers. + +---- + +This RFC is focused on changing all references of Scoped Slots to Slots with props and Slot Scope to Slot Props. + +Slot Props was chosen as a new name primarily because the concept of *Props* is already familiar to Vue developers from the very beginning (they appear in Component Basics) and is easy to understand. + +Scoped Slots do actually act as components with props on a high level. +The Slot component can accept props that are then passed down to a consumer via Template Render Context. These props should not be modified by developer and can be reactive (exactly as props). + +Even docs themselves refer to them as to `slotProps`, this example is taken from a Scoped Slots documentation: + +```html + + + +``` + +The distinction between Slots and Scoped Slots is nonexistent in Vue 3 and having a separate name for slot props is confusing because these slots are the same except for having or not having props on them. +Without this distinction it's even harder to justify a concept of Scoped Slots in Vue 3 since it's not even render function related anymore. + +This change would also leave intact current render function API in Vue 3, which is important considering the late stage of Vue 3 development. + +# Detailed design + +Scoped Slots should be referred to as Slots with props or Slot Props when it comes to actual slot props. + +The arguments that the abstract slot component receives should always be referenced as Slot Props. + +Slot Scope should also be called Slot Props. + +---- + +In this example `foo` and `bar` are Slot Props. Previously called Scoped Slot here is now just a Slot or a Slot with props in particular. +```html +
+ +
+``` + +```html +
+ +
+``` + +Slot Scope is now also called Slot Props for convenience. +```html + + {{ slotProps.foo }} + +``` + +Render API left intact. +```js +h('div', [ + this.$slots.default(slotProps) +]) +``` + +```js +h('SlottedComponent', { + default: (slotProps) => slotProps.foo +}) +``` + +# Drawbacks + +Developers familiar with the old term would require some time to switch to the new name and newcomers might be confused with the term that is not explained in the Vue 3 documentation. (might be solved with a hint on Slot Props page with a link to Vue 2.x Scoped Slots docs) + +# Adoption strategy + +Scoped Slots should be replaced in Vue 3 docs prior to the final release From 35a669ab1c1dd7455af9f485bf55107614b02936 Mon Sep 17 00:00:00 2001 From: Stanislav Lashmanov Date: Thu, 2 Jul 2020 06:47:59 +0300 Subject: [PATCH 2/2] Add a point regarding React and Svelte --- active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md b/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md index 031bde57..ed4edb3f 100644 --- a/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md +++ b/active-rfcs/0000-rename-scoped-slots-to-slots-with-props.md @@ -52,6 +52,8 @@ Without this distinction it's even harder to justify a concept of Scoped Slots i This change would also leave intact current render function API in Vue 3, which is important considering the late stage of Vue 3 development. +Lastly, this change will align Vue terminology with React (Render Props) and Svelte (Slot props), which in result would smoothen migration curve for people coming from React or Svelte world. + # Detailed design Scoped Slots should be referred to as Slots with props or Slot Props when it comes to actual slot props.