From 97a0f3bca531dd83e6c859dec1a9c3b10e4510a8 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 17 May 2022 17:40:40 +0400
Subject: [PATCH 1/4] Add fragment component RFC
---
active-rfcs/0000-fragment-component.md | 59 ++++++++++++++++++++++++++
1 file changed, 59 insertions(+)
create mode 100644 active-rfcs/0000-fragment-component.md
diff --git a/active-rfcs/0000-fragment-component.md b/active-rfcs/0000-fragment-component.md
new file mode 100644
index 00000000..357f980c
--- /dev/null
+++ b/active-rfcs/0000-fragment-component.md
@@ -0,0 +1,59 @@
+- Start Date: 2022-05-17
+- Target Major Version: 3.x
+- Reference Issues:
+- Implementation PR:
+
+# Summary
+
+Add `fragment` built-in component that acts as a `<template>` empty wrapper tag.
+
+# Basic example
+
+## Conditional wrapper component
+
+```html
+<template>
+ <WrapperComponent v-if="shouldWrap">
+ <img src="cat.jpg" alt="Cat" />
+ </WrapperComponent>
+ <img v-else src="cat.jpg" alt="Cat" />
+</template>
+```
+
+## `Fragment` component
+
+```html
+<template>
+ <component :is="shouldWrap ? WrapperComponent : 'fragment'">
+ <img src="cat.jpg" alt="Cat" />
+ </component>
+</template>
+```
+
+# Motivation
+
+There are cases when some markup should be conditionally wrapped within a tag\component or not wrapped at all. Right now you have 2 options on how to deal with that: either duplicate the markup or extract that code into a separate component. Both are not ideal: duplicate code is invisibly coupled (changes in one copy should be reflected in all other copies), extracting into component is cumbersome. It gets more tedious when you have multiple of those cases in a single component.
+
+# Detailed design
+
+`<component is="fragment">` should be compiled into `h('fragment')`. Vue renderer should be updated accordingly to support rendering fragments that way.
+
+# Drawbacks
+
+Possibly a duplicate of `<template>` tag functionality. See **Unresolved questions** section.
+
+# Alternatives
+
+Another approach could be to add suppoort for `null` or `undefined` as the `<component>` `is` attribute.
+
+# Adoption strategy
+
+This is not a breaking change. All the exisiting components that already define a `Fragment` component should continue to function without any issues.
+
+# Unresolved questions
+
+Should we allow for `<fragment>` tag to work the same way?
+
+Should it be `<>` instead of `<fragment>`?
+
+Would that conflict with the `<template>` tag?
From 652bd25aca235547114ca2a04dc74a241e761a2c Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <stasvarenkin@gmail.com>
Date: Tue, 17 May 2022 16:48:31 +0300
Subject: [PATCH 2/4] Update 0000-fragment-component.md
---
active-rfcs/0000-fragment-component.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/active-rfcs/0000-fragment-component.md b/active-rfcs/0000-fragment-component.md
index 357f980c..6d0d188c 100644
--- a/active-rfcs/0000-fragment-component.md
+++ b/active-rfcs/0000-fragment-component.md
@@ -38,6 +38,8 @@ There are cases when some markup should be conditionally wrapped within a tag\co
`<component is="fragment">` should be compiled into `h('fragment')`. Vue renderer should be updated accordingly to support rendering fragments that way.
+`<component is="fragment">foo</component>` should produce only `foo` as a render result.
+
# Drawbacks
Possibly a duplicate of `<template>` tag functionality. See **Unresolved questions** section.
From 24e8fd81877410d6ccabd3bd15e8c7b1d7512455 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <stasvarenkin@gmail.com>
Date: Tue, 17 May 2022 16:59:31 +0300
Subject: [PATCH 3/4] Update 0000-fragment-component.md
---
active-rfcs/0000-fragment-component.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/active-rfcs/0000-fragment-component.md b/active-rfcs/0000-fragment-component.md
index 6d0d188c..cadfdd23 100644
--- a/active-rfcs/0000-fragment-component.md
+++ b/active-rfcs/0000-fragment-component.md
@@ -40,6 +40,8 @@ There are cases when some markup should be conditionally wrapped within a tag\co
`<component is="fragment">foo</component>` should produce only `foo` as a render result.
+Custom directives applied to a `fragment` component should be discarded.
+
# Drawbacks
Possibly a duplicate of `<template>` tag functionality. See **Unresolved questions** section.
From d247ff3a37a2565148156d2758b2cb87e6713909 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <stasvarenkin@gmail.com>
Date: Tue, 17 May 2022 22:14:42 +0300
Subject: [PATCH 4/4] Add a case for custom directives
---
active-rfcs/0000-fragment-component.md | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/active-rfcs/0000-fragment-component.md b/active-rfcs/0000-fragment-component.md
index cadfdd23..70f807d5 100644
--- a/active-rfcs/0000-fragment-component.md
+++ b/active-rfcs/0000-fragment-component.md
@@ -34,6 +34,16 @@ Add `fragment` built-in component that acts as a `<template>` empty wrapper tag.
There are cases when some markup should be conditionally wrapped within a tag\component or not wrapped at all. Right now you have 2 options on how to deal with that: either duplicate the markup or extract that code into a separate component. Both are not ideal: duplicate code is invisibly coupled (changes in one copy should be reflected in all other copies), extracting into component is cumbersome. It gets more tedious when you have multiple of those cases in a single component.
+You might also want to create your own kind of `fragment` component. But it will recieve all the custom directives from the parent, which will result in errors.
+
+Example:
+
+```html
+<component :is="shouldWrap ? 'div' : 'MyFragmentComponent'" v-custom-directive>
+ <img src="cat.jpg" alt="Cat">
+</component>
+```
+
# Detailed design
`<component is="fragment">` should be compiled into `h('fragment')`. Vue renderer should be updated accordingly to support rendering fragments that way.