[Feature] RenderFragment files

[bzd3y]

I'm not sure how to mark this as a feature request and there doesn't seem to be a Discussion section on this repository.

I'd like to propose a feature to support Component RenderFragments in separate files. For example, a component named Component with a RenderFragment member (I think this member could actually be implied rather than needing to be explicitly defined) named SomeRenderFragment might have 3 files:

Component.razor
    - Component.razor.cs
    - Component.SomeRenderFragment.razor

It seems like something like this could help with composition and inheritance of components, as well as just making it easier to define render fragments. It would also add some precision to source control history.

[davidwengier]

@bzd3y It's not clear to me what would go in the renderfragment file and how it would be used. Could you expand your example a little?

[bzd3y]

It's just a Razor file with any other Razor content that a Razor component might (re)use. The idea here is just to take away the ceremony around defining a RenderFragment to be used by a component, especially when it isn't an incoming [Parameter] used for templating.

SomeComponent.TheRenderFragment.razor:

@* If the member is compiler generated then there probably needs to be some way to specify the type, like one of the following: *@
@inherits RenderFragment<string> @* maybe conceptually true, but not technically true *@
@typeparam string @* again, maybe conceptually true, but not true in the way it is currently used *@
@context string @* something new *@
@type string @* something new *@
@param string @* something new *@
@model string @* like in MVC Razor, so it might make the most sense *@

<p>This component would like to report that: @context</p>

Currently this would be done with:

• repeating the code in both places
• a separate component and all the ceremony and overhead that goes with it
• defining a RenderFragment manually with C# code, which can be rather awkward.

SomeComponent.razor:

<div>
    @if (somethingIsTrue)
    {
        @TheRenderFragment("Something is true.")
    }
    else
    {
        <strong>@TheRenderFragment("Something is false!")</strong>
    }
<div>

SomeComponent.cs

public partial class SomeComponent : ComponentBase
{
   protected virtual RazorComponent<string> TheRenderFragment { get; set; } // this could just be implicit and generated by the compiler.
}

It might be useful to allow it to (also) be explicitly defined so that the developer could indicate the exact modifier keywords they want as well as simplify indicating the type used by the RenderFragment.

Also, notice it isn't a [Parameter] (though I can't think of a reason why it couldn't be). But that is because this proposal is less about templating and more about reusability within (or outside, but maybe I'd be getting greedy there) a component. If the developer did specify it as a [Parameter] then any content they define would just serve as the default template contents.

Finally, it would be useful, if not necessary, for the RenderFragment to have access to the component itself (unless the developer defines it as static?), though I don't know how the existing internals work well enough to know how feasible that is.

An example of a component that derives from SomeComponent.

SomeDerivedComponent.razor:

@inherits SomeComponent

<p>A list of what we know:</p>
<ul>
    @if (somethingIsTrue)
    {
        <li>@TheRenderFragment("Something is true.")</li>
        <li><s>@TheRenderFragment("Something is false!")</s></li>
    }
    else
    {
        <li><s>@TheRenderFragment("Something is true.")</s></li>
        <li>@TheRenderFragment("Something is false!")</li>
    }
<ul>

Obviously the above can already be done, but this is an (overly simplified) example of what somebody might want to do with RenderFragments. Further, the developer could override TheRenderFragment with its own "SomeDerivedComponent.TheRazorFragment.razor" with different content, like:

@inherits RenderFragment<string>
@* we're going to use divs now, because we are inside of lis and don't want paragraphs for whatever reason *@
<div>This component would like to report that: @context</div>

An alternate or, ideally, additional proposal:

@fragment TheRenderFragment(string text)
{
    <p>This component would like to report that: @text</p>
}

<div>
    @if(somethingIsTrue)
    {
        @TheRenderFragment("Something is true.")
    }
    else
    {
        <strong>@TheRenderFragment("Something is false!")</strong>
    }
<div>

I think the above would accomplish the goal proposal for the most part. The only advantage that separate files might have seems to be for source control, like improving precision in history and maybe avoiding merge conflicts, etc.