diff --git a/text/593-spreadable-arguments.md b/text/593-spreadable-arguments.md new file mode 100644 index 0000000000..086ff6fe98 --- /dev/null +++ b/text/593-spreadable-arguments.md @@ -0,0 +1,107 @@ +- Start Date: 2019-06-05 +- Relevant Team(s): Ember.js +- RFC PR: https://github.com/emberjs/rfcs/pull/593 +- Tracking: (leave this empty) + +# Forwarding Component Arguments with Spreadable Arguments + +## Summary + +Currently it is possible to forward element attributes and modifiers into child components using the spread-like +`...attributes` syntax. This RFC proposes adding a similar syntax and functionality for component arguments: `...@arguments`. + +## Motivation + +Spreadable Arguments, or `"Splarguments"`, will allow less verbose component templates, especially where the verbosity only makes the template harder to read. +Having the ability to spread arguments would make reading deeply nested component invocations much cleaner and nicer. + + +For example, given the following invocation: +```hbs + +``` +...and the following layout for the `Foo` component: +```hbs + +``` +... and the following layout for the `Bar` component: +```hbs +
{{@foo}}
+``` +Ember will render the following HTML content: +```html +
bar
+``` + +An additional benefit of Spreadable Arguments is that it can reduce the maintenance burden of components used today. +A great use case to showcase this is when a component is wrapped by another component. Currently we have to explicitely forward every argument to the child component: + +```hbs + +``` +This is very verbose and doesn't provide any benefits to the reader of the template. Having to pass all of these arguments down the component tree becomes annoying to read and hard to maintain. Imagine if we now have to add a new argument, `@arg3` to our `Foo` component. We would need to go through *every* single component invocation that is wrapping `Foo`. + + +An example of this wrapping pattern can be shown using a branded `Button` component. This component has many specific components that wrap the base component to provide button "types". + +Button Type Components: +```hbs + +