[MarkdownSection] Optimize to minimize number of calls to OnContentCo…

…nverted (#2092) * reduce number of renders * optimize to a single call to OnContentConverted * clean up code for optimization * fixes page to show table after a single call to OnFreshTableOfContents * rerender contents when markdown source is changed * reduce number of renders * optimize to a single call to OnContentConverted * clean up code for optimization * fixes page to show table after a single call to OnFreshTableOfContents * rerender contents when markdown source is changed * resolve pr comments --------- Co-authored-by: Vincent Baaij <[email protected]> Co-authored-by: Denis Voituron <[email protected]>
microsoft · May 29, 2024 · f60fc4b · f60fc4b
1 parent 3181105
commit f60fc4b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 31 deletions.
diff --git a/examples/Demo/Shared/Components/MarkdownSection.razor.cs b/examples/Demo/Shared/Components/MarkdownSection.razor.cs
@@ -7,9 +7,10 @@ namespace FluentUI.Demo.Shared.Components;
 
 public partial class MarkdownSection : FluentComponentBase
 {
-    private string? _content;
-    private bool _raiseContentConverted;
     private IJSObjectReference _jsModule = default!;
+    private bool _markdownChanged = false;
+    private string? _content;
+    private string? _fromAsset;
 
     [Inject]
     protected IJSRuntime JSRuntime { get; set; } = default!;
@@ -21,34 +22,39 @@ public partial class MarkdownSection : FluentComponentBase
     /// Gets or sets the Markdown content 
     /// </summary>
     [Parameter]
-    public string? Content { get; set; }
+    public string? Content
+    {
+        get => _content;
+        set
+        {
+            if (_content is not null && !_content.Equals(value))
+            {
+                _markdownChanged = true;
+            }
+            _content = value;
+        }
+    }
 
     /// <summary>
     /// Gets or sets asset to read the Markdown from
     /// </summary>
     [Parameter]
-    public string? FromAsset { get; set; }
-
-    [Parameter]
-    public EventCallback OnContentConverted { get; set; }
-
-    public string? InternalContent
+    public string? FromAsset
     {
-        get => _content;
+        get => _fromAsset;
         set
         {
-            _content = value;
-            HtmlContent = ConvertToMarkupString(_content);
-
-            if (OnContentConverted.HasDelegate)
+            if (_fromAsset is not null && !_fromAsset.Equals(value))
             {
-                OnContentConverted.InvokeAsync();
+                _markdownChanged = true;
             }
-            _raiseContentConverted = true;
-            StateHasChanged();
+            _fromAsset = value;
         }
     }
 
+    [Parameter]
+    public EventCallback OnContentConverted { get; set; }
+
     public MarkupString HtmlContent { get; private set; }
 
     protected override void OnInitialized()
@@ -57,36 +63,53 @@ protected override void OnInitialized()
         {
             throw new ArgumentException("You need to provide either Content or FromAsset parameter");
         }
-
-        InternalContent = Content;
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            if (!string.IsNullOrEmpty(FromAsset))
-            {
-                InternalContent = await StaticAssetService.GetAsync(FromAsset);
-            }
-            // add highlight for any code blocks
+            // import code for highlighting code blocks
             _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                 "./_content/FluentUI.Demo.Shared/Components/MarkdownSection.razor.js");
-            await _jsModule.InvokeVoidAsync("highlight");
-            await _jsModule.InvokeVoidAsync("addCopyButton");
         }
 
-        if (_raiseContentConverted)
+        if (firstRender || _markdownChanged)
         {
-            _raiseContentConverted = false;
+            _markdownChanged = false;
+
+            // create markup from markdown source
+            HtmlContent = await MarkdownToMarkupStringAsync();
+            StateHasChanged();
+
+            // notify that content converted from markdown 
             if (OnContentConverted.HasDelegate)
             {
                 await OnContentConverted.InvokeAsync();
             }
-
+            await _jsModule.InvokeVoidAsync("highlight");
+            await _jsModule.InvokeVoidAsync("addCopyButton");
         }
     }
 
+    /// <summary>
+    /// Converts markdown, provided in Content or from markdown file stored as a static asset, to MarkupString for rendering.
+    /// </summary>
+    /// <returns>MarkupString</returns>
+    private async Task<MarkupString> MarkdownToMarkupStringAsync()
+    {
+        string? markdown;
+        if (string.IsNullOrEmpty(FromAsset))
+        {
+            markdown = Content;
+        }
+        else
+        {
+            markdown = await StaticAssetService.GetAsync(FromAsset);
+        }
+
+        return ConvertToMarkupString(markdown);
+    }
     private static MarkupString ConvertToMarkupString(string? value)
     {
         if (!string.IsNullOrWhiteSpace(value))

diff --git a/examples/Demo/Shared/Pages/Design/DesignTokensPage.razor b/examples/Demo/Shared/Pages/Design/DesignTokensPage.razor
@@ -6,7 +6,7 @@
 
 <MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/DesignTokens.md" OnContentConverted="RefreshTableOfContents" />
 
-@if (refreshCount > 3)
+@if (refreshCount > 0)
 {
     <OfficeColorTable />
 }
@@ -20,6 +20,6 @@
     private async Task RefreshTableOfContents()
     {
         await OnRefreshTableOfContents.InvokeAsync();
-        refreshCount++; ;
+        refreshCount++;
     }
 }