feat: add i18n for DynamicComponent (#4018)

Co-authored-by: alan <alan@lnbits.com>

lnbits/static/js/init-app.js

@@ -27,6 +27,14 @@ const DynamicComponent = {
             name: r.name,
             component: async () => {
               await LNbits.utils.loadTemplate(r.template)
+              if (r.i18n) {
+                const locale =
+                  window.i18n?.global?.locale?.value ??
+                  window.i18n?.global?.locale ??
+                  window.g.locale ??
+                  'en'
+                await LNbits.utils.loadExtI18n(r.i18n, locale)
+              }
               await LNbits.utils.loadScript(r.component)
               return window[r.name]
             }
@@ -151,6 +159,30 @@ window.i18n = new VueI18n.createI18n({
   fallbackLocale: 'en',
   messages: window.localisation
 })
+;(function () {
+  let _applying = false
+  let _target = null
+  Vue.watch(
+    () => window.i18n.global.locale,
+    async (locale, prevLocale) => {
+      if (_applying || !LNbits.utils._extI18nDirs.size) return
+      _target = locale
+      _applying = true
+      window.i18n.global.locale = prevLocale
+      _applying = false
+      await Promise.all(
+        [...LNbits.utils._extI18nDirs].map(dir =>
+          LNbits.utils.loadExtI18n(dir, locale)
+        )
+      )
+      if (_target !== locale) return
+      _applying = true
+      window.i18n.global.locale = locale
+      _applying = false
+    },
+    {flush: 'sync'}
+  )
+})()
 
 window.app.mixin({
   data() {

lnbits/static/js/utils.js

@@ -323,6 +323,20 @@ window._lnbitsUtils = {
     converter.setOption('simpleLineBreaks', true)
     return converter.makeHtml(text)
   },
+  _extI18nDirs: new Set(),
+  _extI18nLoaded: {},
+  loadExtI18n(dir, locale) {
+    this._extI18nDirs.add(dir)
+    const loaded = (this._extI18nLoaded[dir] ??= {})
+    if (loaded[locale]) return loaded[locale]
+    loaded[locale] = this.loadScript(`${dir}/${locale}.js`).catch(() => {
+      if (locale !== 'en') {
+        loaded['en'] ??= this.loadScript(`${dir}/en.js`).catch(() => {})
+        return loaded['en']
+      }
+    })
+    return loaded[locale]
+  },
   async decryptLnurlPayAES(success_action, preimage) {
     let keyb = new Uint8Array(
       preimage.match(/[\da-f]{2}/gi).map(h => parseInt(h, 16))