Syntax for writing a dictionary of attributes onto an element

[chanan]

This issue is being opened by request of @SteveSandersonMS Please see the full issue details https://github.com/aspnet/Blazor/issues/735 in the Blazor Repo.

The summary is that will be nice to be able to pass arbitrary attributes from a custom component down to an HTML element. For example:

<MyComponent id="myid" />

in the component render it as:

<button id="myid" />

without having to code every single attribute possible. Not mention allowing attributes such data-* to be passed down.

[SteveSandersonMS]

Edit: @rynowak hijacking this post

Summary

We want to have a feature for splatting arbitrary attributes into an element or component.

This will look like:

    <div @attributes="myAttributes" another="something">...</div>

Status/Items

Preview 6 update: The compiler support (splat operator) didn't make it for VS16.2-preview2. So it's possible to use this feature from components written in C#. We'll add the language feature in preview 7.

• Make last attribute wins work for markup blocks and prerendering
• Add AddMultipleAttributes to render tree builder
• Add a new attribute for gather parameters
• Implement parameter binding for gather parameters
• Add an analyzer for gather parameters
  • Require dictionary-like property
  • Require a single gather parameter per type
• Compiler support for AddMultipleAttributes
• E2E tests
• E2E tests with our form controls

Syntax

Other attributes would be allowed to appear before or after the splat:

    <div foo= "bar" @attributes="myAttributes" another="something">...</div>

Multiple splats are allowed:

    <div foo= "bar" @attributes="myAttributes" another="something" @attributes="myOtherAttributes">...</div>

Attributes and expressions will be evaluated from left to right (as they are today).

Semantics

We should define this feature in terms of an IEnumerable<KeyValuePair<<string, object>>. This means that types like the following would all work:

• Dictionary<string, object>
• List<KeyValuePair<string, object>>

If desired we can also make this work for arbitrary objects by mapping their properties into key-value pairs like we do in ASP.NET Core routing.

As in other languages we should rely on ordering to determine precedence. I propose we follow what typescript does, and allow later attributes to take precedence.

Examples:

@{
    var values = new Dictionary<string, string>()
    {
        { "a", "123" },
        { "b", "456" },
    }
}

<!-- results in <div b="456" a="ABC"></div> -->
<div @attributes=values  a="ABC"></div> 

<!-- results in <div a="123" b="456"></div> -->
<div a="ABC" @attributes=values></div> 

Implementation concerns

We have a choice of how to implement this semantic. Given the following code:

<div a="ABC" @attributes=values></div> 

This will map to something like:

builder.OpenElement(0, "div");
builder.AddAttribute(1, "a" "ABC");
builder.AddMultipleAttributes(2, values);
builder.CloseElement(0, "div");

note: I propose that we do the obvious thing with sequence numbers... We map a single splat to a single render tree builder call and a single sequence number

We have to decide how to do the de-duplication of the duplicate attribute (in this case a). This could be handled by the render tree builder (a) shows up once in the render tree or it could be handled by the renderer (a) shows up twice in the render tree, and the renderer is smart enough to do the right thing.

I'm looking for thoughts and input on which is the better approach.