feat: move wallet.html to vue component. FINAL DynamicComponent pr (#3559)

lnbits/static/js/init-app.js

@@ -1,144 +1,4 @@
-const DynamicComponent = {
-  props: {
-    fetchUrl: {
-      type: String,
-      required: true
-    },
-    scripts: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      keys: []
-    }
-  },
-  async mounted() {
-    await this.loadDynamicContent()
-  },
-  methods: {
-    async loadScript(src) {
-      return new Promise((resolve, reject) => {
-        const existingScript = document.querySelector(`script[src="${src}"]`)
-        if (existingScript) {
-          existingScript.remove()
-        }
-        const script = document.createElement('script')
-        script.src = src
-        script.async = true
-        script.onload = resolve
-        script.onerror = () =>
-          reject(new Error(`Failed to load script: ${src}`))
-        document.head.appendChild(script)
-      })
-    },
-    async loadDynamicContent() {
-      this.$q.loading.show()
-      try {
-        const cleanUrl = this.fetchUrl.split('#')[0]
-        //grab page content, need to be before loading scripts
-        const response = await fetch(cleanUrl, {
-          credentials: 'include',
-          headers: {
-            Accept: 'text/html',
-            'X-Requested-With': 'XMLHttpRequest'
-          }
-        })
-
-        const html = await response.text()
-
-        // load window variables
-        const parser = new DOMParser()
-        const htmlDocument = parser.parseFromString(html, 'text/html')
-        const inlineScript = htmlDocument.querySelector('#window-vars-script')
-        if (inlineScript) {
-          new Function(inlineScript.innerHTML)() // Execute the script
-        }
-
-        //load scripts defined in the route
-        await this.loadScript('/static/js/base.js')
-        for (const script of this.scripts) {
-          await this.loadScript(script)
-        }
-
-        //housecleaning, remove old component
-        const previousRouteName =
-          this.$router.currentRoute.value.meta.previousRouteName
-        if (
-          previousRouteName &&
-          window.app._context.components[previousRouteName]
-        ) {
-          delete window.app._context.components[previousRouteName]
-        }
-        //load component logic
-        const logicKey = `${this.$route.name}PageLogic`
-        const componentLogic = window[logicKey]
-
-        if (!componentLogic) {
-          throw new Error(
-            `Component logic '${logicKey}' not found. Ensure it is defined in the script.`
-          )
-        }
-
-        //Add mixins
-        componentLogic.mixins = componentLogic.mixins || []
-        if (window.windowMixin) {
-          componentLogic.mixins.push(window.windowMixin)
-        }
-
-        //Build component
-        window.app.component(this.$route.name, {
-          ...componentLogic,
-          template: html // Use the fetched HTML as the template
-        })
-        delete window[logicKey] //dont need this anymore
-        this.$forceUpdate()
-      } catch (error) {
-        console.error('Error loading dynamic content:', error)
-      } finally {
-        this.$q.loading.hide()
-      }
-    }
-  },
-  watch: {
-    $route(to, from) {
-      const validRouteNames = routes.map(route => route.name)
-      if (validRouteNames.includes(to.name)) {
-        this.$router.currentRoute.value.meta.previousRouteName = from.name
-        this.loadDynamicContent()
-      } else {
-        console.log(
-          `Route '${to.name}' is not valid. Leave this one to Fastapi.`
-        )
-      }
-    }
-  },
-  template: `
-      <component :is="$route.name"></component>
-  `
-}
-
 const routes = [
-  {
-    path: '/wallet',
-    name: 'Wallet',
-    component: DynamicComponent,
-    props: route => {
-      let fetchUrl = '/wallet'
-      if (Object.keys(route.query).length > 0) {
-        fetchUrl += '?'
-        for (const [key, value] of Object.entries(route.query)) {
-          fetchUrl += `${key}=${value}&`
-        }
-        fetchUrl = fetchUrl.slice(0, -1) // remove last &
-      }
-      return {
-        fetchUrl,
-        scripts: ['/static/js/wallet.js']
-      }
-    }
-  },
   {
     path: '/node',
     name: 'Node',
@@ -159,6 +19,11 @@ const routes = [
     name: 'Audit',
     component: PageAudit
   },
+  {
+    path: '/wallet',
+    name: 'Wallet',
+    component: PageWallet
+  },
   {
     path: '/wallets',
     name: 'Wallets',
@@ -236,5 +101,4 @@ window.app.use(window.i18n)
 
 window.app.provide('g', g)
 window.app.use(window.router)
-window.app.component('DynamicComponent', DynamicComponent)
 window.app.mount('#vue')