[feat] Update extension builder for 1.4.1 (#3725)

Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/static/js/init-app.js

@@ -106,6 +106,11 @@ const routes = [
     name: 'ExtensionsBuilder',
     component: PageExtensionBuilder
   },
+  {
+    path: '/extensions/builder/preview',
+    name: 'ExtensionsBuilderPreview',
+    component: PageExtensionBuilderPreview
+  },
   {
     path: '/extensions',
     name: 'Extensions',

lnbits/static/js/pages/extensions_builder.js

@@ -288,11 +288,10 @@ window.PageExtensionBuilder = {
           `/api/v1/extension/${stub_ext_id}/releases`
         )
 
-        this.extensionStubVersions = data.sort((a, b) =>
-          a.version < b.version ? 1 : -1
-        )
-        this.extensionData.stub_version = this.extensionStubVersions[0]
-          ? this.extensionStubVersions[0].version
+        this.extensionStubVersions = data
+        const validVersions = data.filter(v => v.is_version_compatible)
+        this.extensionData.stub_version = validVersions[0]
+          ? validVersions[0].version
           : ''
       } catch (error) {
         LNbits.utils.notifyApiError(error)
@@ -311,7 +310,20 @@ window.PageExtensionBuilder = {
         iframeDoc.body.style.transform = 'scale(0.8)'
         iframeDoc.body.style.transformOrigin = 'center top'
       }
-      iframe.src = `/extensions/builder/preview/${this.extensionData.id}?page_name=${previewPageName}`
+
+      let componentName =
+        'Page' +
+        this.extensionData.id
+          .toLowerCase()
+          .split('_')
+          .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+          .join('')
+      if (previewPageName === 'public_page') componentName += 'Public'
+      iframe.src =
+        `/extensions/builder/preview?` +
+        `ext_id=${this.extensionData.id}` +
+        `&page=${previewPageName}` +
+        `&component=${componentName}`
     },
     initBasicData() {
       this.extensionData.owner_data.fields = [

lnbits/static/js/pages/extensions_builder_preview.js

@@ -0,0 +1,46 @@
+window.PageExtensionBuilderPreview = {
+  template: '#page-extension-builder-preview',
+  mixins: [windowMixin],
+  watch: {
+    name: 'reload'
+  },
+  data() {
+    return {
+      extId: '',
+      pageName: '',
+      componentName: null
+    }
+  },
+  methods: {
+    async reload() {
+      await LNbits.utils.loadTemplate(
+        `/extensions/builder/preview/${this.extId}/template?page_name=${this.pageName}`
+      )
+      await LNbits.utils.loadScript(
+        `/extensions/builder/preview/${this.extId}/component?page_name=${this.pageName}`
+      )
+
+      this._component = window[this.componentName]
+      console.log(
+        'LNbits preview reloaded componentName:',
+        this.componentName,
+        !!this._component
+      )
+      this.$forceUpdate()
+    }
+  },
+  async created() {
+    const urlParams = new URLSearchParams(window.location.search)
+    this.extId = urlParams.get('ext_id') || ''
+    this.pageName = urlParams.get('page') || ''
+    this.componentName = urlParams.get('component') || ''
+
+    await this.reload()
+  },
+  render() {
+    if (this._component) {
+      return Vue.h(this._component)
+    }
+    return Vue.h('div', 'Loading...')
+  }
+}

lnbits/static/vendor.json

@@ -45,6 +45,8 @@
     "js/pages/error.js",
     "js/pages/home.js",
     "js/pages/extensions_builder.js",
+    "js/pages/extensions_builder.js",
+    "js/pages/extensions_builder_preview.js",
     "js/pages/extensions.js",
     "js/pages/first-install.js",
     "js/pages/payments.js",