Add support for data-module to enable pages with scripts to work in e…

…nhanced navigation mode
NetCoreTemplates · Oct 28, 2023 · 0bbbd3b · 0bbbd3b
1 parent f073837
commit 0bbbd3b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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()
+    }
+}