Strongly typed/type safe passing parameters to components during render and rerender

[egil]

Using c# expressions trees to pass parameters to a component during render could make it strongly typed and type safe, avoiding the use of the nameof operator, etc.

The basic idea looks like this:

// MyComponent.razor
@code 
{
    [Parameter] public string Name { get; set; }
    [Parameter] public int Age { get; set; }
}

Test code:

var cut = RenderComponent<MyComponent>(c => c.Name = "asdf", c => c.Age = 42);

I think the signature of RenderComponent then should look like the following... haven't played with expression trees like this before:

T RenderComponent<T>(params Expression<Action<T>>[] parameters)

The RenderComponent method would then translate the expression into a ParameterView with the names and values specified in the lambda.

It would be nice if it was possible to only have to pass one lambda and assign all parameters inside that.

Is this possible? Is it better than the current way to pass parameter?

Input definitely wanted!

[StefH]

Example code (not tested):

New method which accepts c => c.Name == "x", c => c.Age == 42

public IRenderedComponent<TComponent> RenderComponent<TComponent>(params Expression<Func<TComponent, object>>[] parameters) where TComponent : class, IComponent
    {
        var componentParameters = new List<ComponentParameter>();
        foreach (var parameter in parameters)
        {
            if (parameter.Body is UnaryExpression body)
            {
                if (body.Operand is BinaryExpression methodBinaryExpression)
                {
                    if (methodBinaryExpression.Left is MemberExpression left && methodBinaryExpression.Right is ConstantExpression right)
                    {
                        var name = left.Member.Name;
                        var value = right.Value;

                        componentParameters.Add(ComponentParameter.CreateParameter(name, value));
                    }
                }
            }
        }

        return base.RenderComponent<TComponent>(componentParameters.ToArray());
    }

Call it like:

var cut = x.RenderComponent<Com>(c => c.Name == "x", c => c.Age == 42);

Gist:
https://gist.github.com/StefH/6229f0f264aeb68b567e5bf90b960922

[egil]

Nice @StefH. What do you think about that syntax vs. the current one?

[StefH]

Both are fine. (I think?)
The original one can be used if some flexibility is needed, the new one is more restricting.

BTW : I don't know if the original method supports nesting?
Like

ComponentParameter.CreateParameter("Parent.Age", 99);

Because my example can also not yet handle nested objects...

[egil]

Blazor doesn't allow you to set nested properties on parameters natively afaik, so there is no need.

Personally I like it better so far. Nameof is currently required to get something just of semi refactor safe, but types are not checked even with that. This has the advantages of being safe when refactoring a parameter, and if you change the type of the parameter, the compiler will let you know what tests to fix. That will help avoid weird issues and possible false positives. I also think it will help make it easier for intellisense to suggest the right things.

What is more interesting is the more advanced parameter types like EventCallbacks, RenderFragment, and RenderFragment.

Got a good suggestion for dealing with them?

[StefH]

About EventCallbacks, RenderFragment and RenderFragment : can you point me to the code or unit-test how they are used now?

[egil]

Yes of course. The current syntax is described here: https://bunit.egilhansen.com/docs/csharp-based-testing.html#passing-parameters-to-components-during-render

There is an additional Template method, that I have not documented yet it seems: https://github.com/egil/bunit/blob/master/src/ComponentTestFixture.cs#L250 - It abstracts away the render tree builder logic for a more simple func based builder.

[StefH]

I think the example code I provided will not work for events.

Another possible interfaces could be:

// With a sort of builder-pattern
var r2 = x.RenderComponent2<Com>(cb =>
{
    var c = new Com
    {
        Age = 42,
        Name = "n",
        NonGenericCallback = EventCallback.Empty
    };

    cb.Set(c);
});

// Just provide a new instance from the component and copy these values to parameters
var r3 = x.RenderComponent3(new Com
{
    Age = 42,
    Name = "n",
    NonGenericCallback = EventCallback.Empty
});

// Just provide an action to set some values to a new component and copy these values to parameters
var r4 = x.RenderComponent4<Com>(c =>
{
    c.Name = "x";
    c.Age = 42;
    c.NonGenericCallback = EventCallback.Empty;
    c.GenericCallback = new EventCallback<EventArgs>();
});

See https://github.com/StefH/BUnitExamples/blob/master/ConsoleAppBUnit/Program.cs

[egil]

Ok, thanks. I will experiment a little when I am done with the split lib issues. If you want ot submit a PR or continue to experiment, please do.

[EdCharbeneau]

I like the syntax, expressions are really powerful and pretty well understood. They can get a little hectic to write APIs for, but once you understand them it's easy going. I wish you could use them easier in Razor Components but it doesn't quite work the same as it did with HTML Helpers. There's no way to scope models, etc.

In this scenario I like it.

[StefH]

@EdCharbeneau which syntax do you like best?

• r2 - With a sort of builder-pattern
• r3 - Just provide a new instance from the component and copy these values to parameters
• r4 - Just provide an action to set some values to a new component and copy these values to parameters

[egil]

@StefH I am not sure r2 to r4 will work. How would you unset a property/set a property to null?

We need a syntax that allow setting only the specified values, both initially and on re-renders through the SetParametersAndRender method.

The first one where we pass a lambda for each property is still more terse than the current recommended.

[StefH]

What about this:

var builder = new ComponentParameterTypedBuilder<Com>();
builder.Set(c => c.Name, "name");
builder.Set(c => c.Age, 42);

var r5 = x.RenderComponent5(builder);