From 0bbbd3b2dcda45d9f86e2d3024a4f3b0bb14c436 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Sat, 28 Oct 2023 21:00:27 +0800
Subject: [PATCH] Add support for data-module to enable pages with scripts to
 work in enhanced navigation mode

---
 .../Account/Manage/EnableAuthenticator.razor   | 14 +-------------
 MyApp/wwwroot/mjs/app.mjs                      | 18 ++++++++++++++++--
 .../Account/Manage/EnableAuthenticator.mjs     | 12 ++++++++++++
 3 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs

diff --git a/MyApp/Pages/Account/Manage/EnableAuthenticator.razor b/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
index 7274a15..da675a8 100644
--- a/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
+++ b/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
@@ -24,7 +24,7 @@ else
 {
     <h3 class="@Css.H3">Configure authenticator app</h3>
 
-    <div class="max-w-xl">
+    <div class="max-w-xl" data-module="pages/Account/Manage/EnableAuthenticator.mjs">
         <StatusMessage />
         <div>
             <p>To use an authenticator app go through the following steps:</p>
@@ -79,18 +79,6 @@ else
             </ol>
         </div>
     </div>
-    <script src="lib/js/qrcode.min.js"></script>
-    <script>
-    (() => {
-        function render() {
-            new QRCode(document.getElementById("qrCode"), document.getElementById('qrCodeData').getAttribute('data-url'))
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            Blazor.addEventListener('enhancedload', render)
-        })
-        render()
-    })()
-    </script>
 }
 
 @code {
diff --git a/MyApp/wwwroot/mjs/app.mjs b/MyApp/wwwroot/mjs/app.mjs
index d28293b..b114e06 100644
--- a/MyApp/wwwroot/mjs/app.mjs
+++ b/MyApp/wwwroot/mjs/app.mjs
@@ -72,13 +72,12 @@ export function mount(sel, component, props) {
 
 async function mountApp(el, props) {
     let appPath = el.getAttribute('data-component')
-    if (!appPath.startsWith('/')) {
+    if (!appPath.startsWith('/') && !appPath.startsWith('.')) {
         appPath = `../${appPath}`
     }
 
     const module = await import(appPath)
     unmount(el)
-    //console.log('vue-app', el.id, appPath, module, props)
     mount(el, module.default, props)
 }
 
@@ -138,6 +137,21 @@ export function mountAll(opt) {
 
         mount(el, component, props)
     })
+    $$('[data-module]').forEach(async el => {
+        let modulePath = el.getAttribute('data-module')
+        if (!modulePath) return
+        if (!modulePath.startsWith('/') && !modulePath.startsWith('.')) {
+            modulePath = `../${modulePath}`
+        }
+        try {
+            const module = await import(modulePath)
+            if (typeof module.default?.load == 'function') {
+                module.default.load()
+            }
+        } catch(e) {
+            console.error(`Couldn't load module ${el.getAttribute('data-module')}`, e)
+        }
+    })
 }
 
 /** @param {any} [exports] */
diff --git a/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs b/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
new file mode 100644
index 0000000..69f68e3
--- /dev/null
+++ b/MyApp/wwwroot/pages/Account/Manage/EnableAuthenticator.mjs
@@ -0,0 +1,12 @@
+import { addScript, $1 } from "@servicestack/client"
+const loadJs = addScript('lib/js/qrcode.min.js')
+
+export default {
+    async load() {
+        await loadJs
+        function render() {
+            new QRCode($1("#qrCode"), $1('#qrCodeData').getAttribute('data-url'))
+        }
+        render()
+    }
+}