Add attribute scrubbing to documentation for blazor:elementreference

[GeertvanHorrik]

I am trying to render Blazor components, but Blazor adds the "blazor:elementreference" attribute which changes every time we run the tests using bUnit.

Generated code:

<span style="font-size: 12px; text-align: center; margin: 0 auto; display: table" blazor:onclick="1" blazor:elementreference="e35f1ea4-22ae-4c45-8d3b-4f6f07877f10">Test value</span>

In this case, this result is rendered by the following code:

<Blazorise.Text Style="@TextStyle">@Text</Blazorise.Text>

Before submitting a potential PR to update the docs, would you be interested in this?

HtmlPrettyPrint.All(nodes => nodes.ScrubAttributes("blazor:elementreference"));

[SimonCropp]

shouldnt this be scrubbed by default?

[GeertvanHorrik]

I would vote yes

[biohazard999]

Given i faced the same problem there are 2 scrubbers i found helpful:

VerifierSettings.ScrubInlineGuids();

will replace the blazor:elementreference value. Good enough for most stuff.

second one is remove noise when you don't care about event's or those special blazor attributes at all (but just passing down some parameters to a child component and make sure they got propagated:

Thanks ChatGPT for the solution:

        // Add custom scrubber for blazor:xxx attributes
        VerifierSettings.ScrubLinesWithReplace(s =>
        {
            if(!s.Contains("blazor:"))
            {
                return s;
            }

            // Use regex to match and remove any blazor:oninput attribute
            // For example, it will match 'blazor:oninput="some value"' and remove it.
            // Remove all blazor event attributes (e.g., blazor:onclick, blazor:oninput, etc.)
            var scrubbed = Regex.Replace(s, @"(\s*)blazor:[a-zA-Z]+\s*=\s*""[^""]*""", "");

            return scrubbed;
        });

which would be equivalent to

        HtmlPrettyPrint.All(nodes => nodes.ScrubAttributes(a => a.Name.StartsWith("blazor:")));

Because it depends on your testing scenario i would vote for several extension methods:

• ScrubBlazorElementReference
• ScrubBlazorEvent("blazor:oninput") or ScrubBlazorEvent("oninput") (second just prepends the blazor:)
• ScrubBlazorEvents()