feat(CherryMarkdown): inherits BootstrapModuleComponentBase (#4217)

* refactor: 更新基类复用 JSModule 类

* chore: bump version 8.0.1

* chore: 更新依赖包

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -33,7 +33,7 @@
     <PackageReference Include="BootstrapBlazor.BootstrapIcon" Version="8.0.3" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon.Extensions" Version="8.0.6" />
     <PackageReference Include="BootstrapBlazor.Chart" Version="8.2.3" />
-    <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.0" />
+    <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.1" />
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.7" />
     <PackageReference Include="BootstrapBlazor.DockView" Version="8.1.4-beta01" />

src/Extensions/Components/BootstrapBlazor.CherryMarkdown/BootstrapBlazor.CherryMarkdown.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.0</Version>
+    <Version>8.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/Extensions/Components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor

@@ -1,4 +1,5 @@
 @namespace BootstrapBlazor.Components
-@inherits BootstrapComponentBase
+@inherits BootstrapModuleComponentBase
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.js", JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" @ref="@Element"></div>
+<div @attributes="@AdditionalAttributes" id="@Id"></div>

src/Extensions/Components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.cs

@@ -7,9 +7,9 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-///
+/// CherryMarkdown 组件
 /// </summary>
-public partial class CherryMarkdown : IAsyncDisposable
+public partial class CherryMarkdown
 {
     private CherryMarkdownOption Option { get; } = new();
 
@@ -62,17 +62,6 @@ public partial class CherryMarkdown : IAsyncDisposable
     [Parameter]
     public bool? IsViewer { get; set; }
 
-    [NotNull]
-    private IJSObjectReference? Module { get; set; }
-
-    [NotNull]
-    private DotNetObjectReference<CherryMarkdown>? Interop { get; set; }
-
-    /// <summary>
-    /// 获得/设置 DOM 元素实例
-    /// </summary>
-    private ElementReference Element { get; set; }
-
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -89,6 +78,8 @@ protected override void OnInitialized()
             Option.Editor.DefaultModel = "previewOnly";
             Option.Toolbars.Toolbar = false;
         }
+
+        _lastValue = Value;
     }
 
     /// <summary>
@@ -98,23 +89,21 @@ protected override void OnInitialized()
     /// <returns></returns>
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
-        {
-            // import JavaScript
-            Module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.js");
-            Interop = DotNetObjectReference.Create(this);
-            await Module.InvokeVoidAsync("init", Element, Interop, Option, nameof(Upload));
-        }
-        else
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (Value != _lastValue)
         {
-            if (Value != _lastValue)
-            {
-                _lastValue = Value;
-                await Module.InvokeVoidAsync("update", Element, Value);
-            }
+            _lastValue = Value;
+            await InvokeVoidAsync("update", Id, Value);
         }
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Option, nameof(Upload));
+
     /// <summary>
     /// 文件上传回调
     /// </summary>
@@ -126,12 +115,15 @@ public async Task<string> Upload(CherryMarkdownUploadFile uploadFile)
         var ret = "";
         if (Module != null)
         {
-            var stream = await Module.InvokeAsync<IJSStreamReference>("fetch", Element);
-            using var data = await stream.OpenReadStreamAsync();
-            uploadFile.UploadStream = data;
-            if (OnFileUpload != null)
+            var stream = await InvokeAsync<IJSStreamReference>("fetch", Id);
+            if (stream != null)
             {
-                ret = await OnFileUpload(uploadFile);
+                using var data = await stream.OpenReadStreamAsync();
+                uploadFile.UploadStream = data;
+                if (OnFileUpload != null)
+                {
+                    ret = await OnFileUpload(uploadFile);
+                }
             }
         }
         return ret;
@@ -144,17 +136,17 @@ public async Task<string> Upload(CherryMarkdownUploadFile uploadFile)
     /// <summary>
     /// 更新组件值方法
     /// </summary>
-    /// <param name="vals"></param>
+    /// <param name="values"></param>
     /// <returns></returns>
     [JSInvokable]
-    public async Task Update(string[] vals)
+    public async Task Update(string[] values)
     {
-        if (vals.Length == 2)
+        if (values.Length == 2)
         {
-            var hasChanged = !EqualityComparer<string>.Default.Equals(vals[0], Value);
+            var hasChanged = !EqualityComparer<string>.Default.Equals(values[0], Value);
             if (hasChanged)
             {
-                Value = vals[0];
+                Value = values[0];
                 _lastValue = Value;
 
                 if (ValueChanged.HasDelegate)
@@ -163,10 +155,10 @@ public async Task Update(string[] vals)
                 }
             }
 
-            hasChanged = !EqualityComparer<string>.Default.Equals(vals[1], Html);
+            hasChanged = !EqualityComparer<string>.Default.Equals(values[1], Html);
             if (hasChanged)
             {
-                Html = vals[1];
+                Html = values[1];
                 if (HtmlChanged.HasDelegate)
                 {
                     await HtmlChanged.InvokeAsync(Html);
@@ -181,34 +173,5 @@ public async Task Update(string[] vals)
     /// <param name="method"></param>
     /// <param name="parameters"></param>
     /// <returns></returns>
-    public ValueTask DoMethodAsync(string method, params object[] parameters) => Module.InvokeVoidAsync("invoke", Element, method, parameters);
-
-    #region Dispose
-    /// <summary>
-    /// Dispose 方法
-    /// </summary>
-    /// <param name="disposing"></param>
-    protected virtual async ValueTask DisposeAsync(bool disposing)
-    {
-        if (disposing)
-        {
-            Interop?.Dispose();
-
-            if (Module != null)
-            {
-                await Module.InvokeVoidAsync("dispose", Element);
-                await Module.DisposeAsync();
-            }
-        }
-    }
-
-    /// <summary>
-    /// Dispose 方法
-    /// </summary>
-    public async ValueTask DisposeAsync()
-    {
-        await DisposeAsync(true);
-        GC.SuppressFinalize(this);
-    }
-    #endregion
+    public Task DoMethodAsync(string method, params object[] parameters) => InvokeVoidAsync("invoke", Id, method, parameters);
 }

src/Extensions/Components/BootstrapBlazor.CherryMarkdown/Components/CherryMarkdown/CherryMarkdown.razor.js

@@ -2,11 +2,15 @@
 import { addLink } from '../../../BootstrapBlazor/modules/utility.js'
 import Data from '../../../BootstrapBlazor/modules/data.js'
 
-export async function init(el, invoker, options, callback) {
+export async function init(id, invoker, options, callback) {
     await addLink('./_content/BootstrapBlazor.CherryMarkdown/css/cherry-markdown.min.css')
 
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
     const md = {}
-    Data.set(el, md)
+    Data.set(id, md)
 
     md._invoker = invoker
     md._invokerMethod = callback
@@ -51,18 +55,18 @@ export async function init(el, invoker, options, callback) {
     });
 }
 
-export function update(el, val) {
-    const md = Data.get(el)
+export function update(id, val) {
+    const md = Data.get(id)
     md._editor.setMarkdown(val, true)
 }
 
-export function fetch(el) {
-    const md = Data.get(el)
+export function fetch(id) {
+    const md = Data.get(id)
     return md._file
 }
 
-export function invoke(el, method, parameters) {
-    const md = Data.get(el)
+export function invoke(id, method, parameters) {
+    const md = Data.get(id)
     if (method.indexOf('.') < 0) {
         md._editor[method](...parameters)
     }
@@ -79,6 +83,6 @@ export function invoke(el, method, parameters) {
     md._invoker.invokeMethodAsync('Update', [val, html]);
 }
 
-export function dispose(el) {
-    Data.remove(el)
+export function dispose(id) {
+    Data.remove(id)
 }