feat(Utility): add custom changed.bb.theme event (#5709)

* refactor: 主题切换改为 JS 框架完成

* refactor: 异步支持

* refactor: 精简代码提高可读性

* refactor: 重构代码降低版本要求

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs

@@ -29,10 +29,6 @@ public partial class Pre
     [NotNull]
     private CodeSnippetService? CodeSnippetService { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProviderService { get; set; }
-
     /// <summary>
     /// 获得/设置 子组件 CodeFile 为空时生效
     /// </summary>
@@ -71,16 +67,6 @@ public partial class Pre
 
     private string? CopiedText { get; set; }
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
-    }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -203,12 +189,4 @@ private string FindCodeSnippetByName(string code)
 
     [GeneratedRegex(@"<Tips[\s\S]*>[\s\S]*?</Tips>")]
     private static partial Regex TipsRegex();
-
-    private async Task OnThemeChanged(string themeName)
-    {
-        if (themeName == "light" || themeName == "dark")
-        {
-            await InvokeVoidAsync("switchTheme", themeName);
-        }
-    }
 }

src/BootstrapBlazor.Server/Components/Components/Pre.razor.js

@@ -1,4 +1,4 @@
-import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export async function init(id, title, assetRoot) {
@@ -48,6 +48,15 @@ export async function init(id, title, assetRoot) {
             preElement.style.maxHeight = `${preHeight}px`
         })
     }
+
+    registerBootstrapBlazorModule('Pre', id, () => {
+        EventHandler.on(document, 'changed.bb.theme', updateTheme);
+    });
+}
+
+const updateTheme = e => {
+    const theme = e.theme;
+    switchTheme(theme);
 }
 
 export async function highlight(id) {
@@ -96,7 +105,12 @@ export function dispose(id) {
         return
     }
 
-    EventHandler.off(el, 'click', '.btn-copy')
-    EventHandler.off(el, 'click', '.btn-plus')
-    EventHandler.off(el, 'click', '.btn-minus')
+    EventHandler.off(el, 'click', '.btn-copy');
+    EventHandler.off(el, 'click', '.btn-plus');
+    EventHandler.off(el, 'click', '.btn-minus');
+
+    const { Pre } = window.BootstrapBlazor;
+    Pre.dispose(id, () => {
+        EventHandler.off(document, 'changed.bb.theme', updateTheme);
+    });
 }

src/BootstrapBlazor/wwwroot/modules/base-popover.js

@@ -17,7 +17,7 @@ const Popover = {
                 initCallback: null,
                 hideCallback: null
             },
-            ...(config ?? {})
+            ...(config || {})
         }
         const createPopover = () => {
             if (!popover.isDisabled()) {

src/BootstrapBlazor/wwwroot/modules/utility.js

@@ -1,4 +1,6 @@
-const vibrate = () => {
+import EventHandler from "./event-handler.js"
+
+const vibrate = () => {
     if ('vibrate' in window.navigator) {
         window.navigator.vibrate([200, 100, 200])
         const handler = window.setTimeout(function () {
@@ -754,6 +756,7 @@ export function setTheme(theme, sync) {
         })
         saveTheme(theme);
     }
+    EventHandler.trigger(document, 'changed.bb.theme', { theme: theme });
 }
 
 export function setActiveTheme(el, activeItem) {