Skip to content

Commit 053ea20

Browse files
dniprusnak
dni
and
prusnak
authored
feat: update to Vue3 (lnbits#2677)
* update packages for vue3 * fix make bundle and make checkbundle to include bundle-components * add lnbits/static/bundle-components.js --------- Co-authored-by: Pavol Rusnak <[email protected]>
1 parent 04aefc8 commit 053ea20

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+17548
-9575
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ __bundle__
3535
coverage.xml
3636
node_modules
3737
lnbits/static/bundle.js
38+
lnbits/static/bundle-components.js
3839
lnbits/static/bundle.css
3940
lnbits/static/bundle.min.js.old
4041
lnbits/static/bundle.min.css.old

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
**/lnbits/static/vendor
1212
**/lnbits/static/bundle.*
13+
**/lnbits/static/bundle-components.*
1314
**/lnbits/static/css/*
1415

1516
flake.lock

‎Makefile

+4-7
Original file line numberDiff line numberDiff line change
@@ -103,24 +103,21 @@ sass:
103103

104104
bundle:
105105
npm install
106-
npm run sass
107-
npm run vendor_copy
108-
npm run vendor_json
106+
npm run bundle
109107
poetry run ./node_modules/.bin/prettier -w ./lnbits/static/vendor.json
110-
npm run vendor_bundle_css
111-
npm run vendor_minify_css
112-
npm run vendor_bundle_js
113-
npm run vendor_minify_js
114108

115109
checkbundle:
116110
cp lnbits/static/bundle.min.js lnbits/static/bundle.min.js.old
117111
cp lnbits/static/bundle.min.css lnbits/static/bundle.min.css.old
112+
cp lnbits/static/bundle-components.min.js lnbits/static/bundle-components.min.js.old
118113
make bundle
119114
diff -q lnbits/static/bundle.min.js lnbits/static/bundle.min.js.old || exit 1
120115
diff -q lnbits/static/bundle.min.css lnbits/static/bundle.min.css.old || exit 1
116+
diff -q lnbits/static/bundle-components.min.js lnbits/static/bundle-components.min.js.old || exit 1
121117
@echo "Bundle is OK"
122118
rm lnbits/static/bundle.min.js.old
123119
rm lnbits/static/bundle.min.css.old
120+
rm lnbits/static/bundle-components.min.js.old
124121

125122
install-pre-commit-hook:
126123
@echo "Installing pre-commit hook to git"

‎lnbits/core/templates/core/extensions.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -901,7 +901,7 @@ <h5 class="q-my-sm" v-text="selectedExtensionDetails.name"></h5>
901901
</q-dialog>
902902
{% endblock %} {% block scripts %} {{ window_vars(user) }}
903903
<script>
904-
new Vue({
904+
window.app = Vue.createApp({
905905
el: '#vue',
906906

907907
data: function () {

‎lnbits/core/templates/core/wallet.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ <h6 class="text-subtitle1 q-mt-none q-mb-sm">
154154
<q-card>
155155
<q-card-section class="text-center">
156156
<p v-text="$t('export_to_phone_desc')"></p>
157-
<qrcode
157+
<qrcode-vue
158158
:value="'{{request.base_url}}wallet?usr={{user.id}}&wal={{wallet.id}}'"
159159
:options="{ width: 256 }"
160-
></qrcode>
160+
></qrcode-vue>
161161
</q-card-section>
162162
<q-card-actions class="flex-center q-pb-md">
163163
<q-btn

‎lnbits/core/templates/node/_tab_transactions.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@
5151
>
5252
<a :href="'lightning:' + transactionDetailsDialog.data.bolt11">
5353
<q-responsive :ratio="1" class="q-mx-xl">
54-
<qrcode
54+
<qrcode-vue
5555
:value="'lightning:' + transactionDetailsDialog.data.bolt11.toUpperCase()"
5656
:options="{width: 340}"
5757
class="rounded-borders"
58-
></qrcode>
58+
></qrcode-vue>
5959
</q-responsive>
6060
</a>
6161
<q-btn
@@ -138,11 +138,11 @@
138138
>
139139
<a :href="'lightning:' + props.row.bolt11">
140140
<q-responsive :ratio="1" class="q-mx-xl">
141-
<qrcode
141+
<qrcode-vue
142142
:value="'lightning:' + props.row.bolt11.toUpperCase()"
143143
:options="{width: 340}"
144144
class="rounded-borders"
145-
></qrcode>
145+
></qrcode-vue>
146146
</q-responsive>
147147
</a>
148148
</div>

‎lnbits/core/templates/users/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ <h3 class="text-subtitle q-my-none" v-text="$t('users')"></h3>
2424
</q-btn>
2525
</div>
2626
<q-table
27-
:data="users"
28-
:row-key="usersTableRowKey"
27+
row-key="id"
28+
:rows="users"
2929
:columns="usersTable.columns"
3030
:pagination.sync="usersTable.pagination"
3131
:no-data-label="$t('no_users')"

‎lnbits/helpers.py

+2
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,14 @@ def template_renderer(additional_folders: Optional[List] = None) -> Jinja2Templa
100100
if settings.bundle_assets:
101101
t.env.globals["INCLUDED_JS"] = ["bundle.min.js"]
102102
t.env.globals["INCLUDED_CSS"] = ["bundle.min.css"]
103+
t.env.globals["INCLUDED_COMPONENTS"] = ["bundle-components.min.js"]
103104
else:
104105
vendor_filepath = Path(settings.lnbits_path, "static", "vendor.json")
105106
with open(vendor_filepath) as vendor_file:
106107
vendor_files = json.loads(vendor_file.read())
107108
t.env.globals["INCLUDED_JS"] = vendor_files["js"]
108109
t.env.globals["INCLUDED_CSS"] = vendor_files["css"]
110+
t.env.globals["INCLUDED_COMPONENTS"] = vendor_files["components"]
109111

110112
t.env.globals["WEBPUSH_PUBKEY"] = settings.lnbits_webpush_pubkey
111113

‎lnbits/static/bundle-components.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lnbits/static/bundle.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lnbits/static/bundle.min.js

+29-41
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lnbits/static/js/account.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
new Vue({
1+
window.app = Vue.createApp({
22
el: '#vue',
3-
mixins: [windowMixin],
3+
mixins: [window.windowMixin],
44
data: function () {
55
return {
66
user: null,

‎lnbits/static/js/admin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
new Vue({
1+
window.app = Vue.createApp({
22
el: '#vue',
33
mixins: [windowMixin],
44
data: function () {

‎lnbits/static/js/base.js

+11-16
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
/* globals crypto, moment, Vue, axios, Quasar, _ */
2-
3-
Vue.use(VueI18n)
4-
51
window.LOCALE = 'en'
6-
window.i18n = new VueI18n({
2+
window.i18n = new VueI18n.createI18n({
73
locale: window.LOCALE,
84
fallbackLocale: window.LOCALE,
95
messages: window.localisation
106
})
117

12-
window.EventHub = new Vue()
138
window.LNbits = {
149
api: {
1510
request: function (method, url, apiKey, data) {
@@ -264,12 +259,12 @@ window.LNbits = {
264259
fiat_currency: data.fiat_currency
265260
}
266261

267-
obj.date = Quasar.utils.date.formatDate(
262+
obj.date = Quasar.date.formatDate(
268263
new Date(obj.time * 1000),
269264
'YYYY-MM-DD HH:mm'
270265
)
271266
obj.dateFrom = moment(obj.date).fromNow()
272-
obj.expirydate = Quasar.utils.date.formatDate(
267+
obj.expirydate = Quasar.date.formatDate(
273268
new Date(obj.expiry * 1000),
274269
'YYYY-MM-DD HH:mm'
275270
)
@@ -294,7 +289,7 @@ window.LNbits = {
294289
},
295290
utils: {
296291
confirmDialog: function (msg) {
297-
return Quasar.plugins.Dialog.create({
292+
return Quasar.Dialog.create({
298293
message: msg,
299294
ok: {
300295
flat: true,
@@ -411,14 +406,14 @@ window.LNbits = {
411406
)
412407
.join('\r\n')
413408

414-
var status = Quasar.utils.exportFile(
409+
var status = Quasar.exportFile(
415410
`${fileName || 'table-export'}.csv`,
416411
content,
417412
'text/csv'
418413
)
419414

420415
if (status !== true) {
421-
Quasar.plugins.Notify.create({
416+
Quasar.Notify.create({
422417
message: 'Browser denied file download...',
423418
color: 'negative',
424419
icon: null
@@ -432,16 +427,16 @@ window.LNbits = {
432427
return converter.makeHtml(text)
433428
},
434429
hexToRgb: function (hex) {
435-
return Quasar.utils.colors.hexToRgb(hex)
430+
return Quasar.colors.hexToRgb(hex)
436431
},
437432
hexDarken: function (hex, percent) {
438-
return Quasar.utils.colors.lighten(hex, percent)
433+
return Quasar.colors.lighten(hex, percent)
439434
},
440435
hexAlpha: function (hex, alpha) {
441-
return Quasar.utils.colors.changeAlpha(hex, alpha)
436+
return Quasar.colors.changeAlpha(hex, alpha)
442437
},
443438
getPaletteColor: function (color) {
444-
return Quasar.utils.colors.getPaletteColor(color)
439+
return Quasar.colors.getPaletteColor(color)
445440
}
446441
}
447442
}
@@ -494,7 +489,7 @@ window.windowMixin = {
494489
},
495490
copyText: function (text, message, position) {
496491
var notify = this.$q.notify
497-
Quasar.utils.copyToClipboard(text).then(function () {
492+
Quasar.copyToClipboard(text).then(function () {
498493
notify({
499494
message: message || 'Copied to clipboard!',
500495
position: position || 'bottom'

‎lnbits/static/js/components.js

+24-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/* global _, Vue, moment, LNbits, EventHub, decryptLnurlPayAES */
1+
window.app.component(QrcodeVue)
22

3-
Vue.component('lnbits-fsat', {
3+
window.app.component('lnbits-fsat', {
44
props: {
55
amount: {
66
type: Number,
@@ -15,12 +15,13 @@ Vue.component('lnbits-fsat', {
1515
}
1616
})
1717

18-
Vue.component('lnbits-wallet-list', {
18+
window.app.component('lnbits-wallet-list', {
19+
props: ['balance'],
1920
data: function () {
2021
return {
2122
user: null,
2223
activeWallet: null,
23-
activeBalance: [],
24+
balance: 0,
2425
showForm: false,
2526
walletName: '',
2627
LNBITS_DENOMINATION: LNBITS_DENOMINATION
@@ -74,7 +75,7 @@ Vue.component('lnbits-wallet-list', {
7475
`,
7576
computed: {
7677
wallets: function () {
77-
var bal = this.activeBalance
78+
var bal = this.balance
7879
return this.user.wallets.map(function (obj) {
7980
obj.live_fsat =
8081
bal.length && bal[0] === obj.id
@@ -87,9 +88,6 @@ Vue.component('lnbits-wallet-list', {
8788
methods: {
8889
createWallet: function () {
8990
LNbits.api.createWallet(this.user.wallets[0], this.walletName)
90-
},
91-
updateWalletBalance: function (payload) {
92-
this.activeBalance = payload
9391
}
9492
},
9593
created: function () {
@@ -99,11 +97,11 @@ Vue.component('lnbits-wallet-list', {
9997
if (window.wallet) {
10098
this.activeWallet = LNbits.map.wallet(window.wallet)
10199
}
102-
EventHub.$on('update-wallet-balance', this.updateWalletBalance)
100+
document.addEventListener('updateWalletBalance', this.updateWalletBalance)
103101
}
104102
})
105103

106-
Vue.component('lnbits-extension-list', {
104+
window.app.component('lnbits-extension-list', {
107105
data: function () {
108106
return {
109107
extensions: [],
@@ -169,7 +167,7 @@ Vue.component('lnbits-extension-list', {
169167
}
170168
})
171169

172-
Vue.component('lnbits-manage', {
170+
window.app.component('lnbits-manage', {
173171
props: ['showAdmin', 'showNode', 'showExtensions', 'showUsers'],
174172
methods: {
175173
isActive: function (path) {
@@ -229,9 +227,9 @@ Vue.component('lnbits-manage', {
229227
}
230228
})
231229

232-
Vue.component('lnbits-payment-details', {
230+
window.app.component('lnbits-payment-details', {
233231
props: ['payment'],
234-
mixins: [windowMixin],
232+
mixins: [window.windowMixin],
235233
data: function () {
236234
return {
237235
LNBITS_DENOMINATION: LNBITS_DENOMINATION
@@ -345,7 +343,7 @@ Vue.component('lnbits-payment-details', {
345343
}
346344
})
347345

348-
Vue.component('lnbits-lnurlpay-success-action', {
346+
window.app.component('lnbits-lnurlpay-success-action', {
349347
props: ['payment', 'success_action'],
350348
data() {
351349
return {
@@ -374,26 +372,27 @@ Vue.component('lnbits-lnurlpay-success-action', {
374372
}
375373
})
376374

377-
Vue.component('lnbits-qrcode', {
378-
mixins: [windowMixin],
375+
window.app.component('lnbits-qrcode', {
376+
mixins: [window.windowMixin],
377+
components: {
378+
QrcodeVue
379+
},
379380
props: ['value'],
380-
components: {[VueQrcode.name]: VueQrcode},
381381
data() {
382382
return {
383383
logo: LNBITS_QR_LOGO
384384
}
385385
},
386386
template: `
387387
<div class="qrcode__wrapper">
388-
<qrcode :value="value"
389-
:options="{errorCorrectionLevel: 'Q', width: 800}" class="rounded-borders"></qrcode>
388+
<qrcode-vue :value="value" size="350" class="rounded-borders"></qrcode-vue>
390389
<img class="qrcode__image" :src="logo" alt="..." />
391390
</div>
392391
`
393392
})
394393

395-
Vue.component('lnbits-notifications-btn', {
396-
mixins: [windowMixin],
394+
window.app.component('lnbits-notifications-btn', {
395+
mixins: [window.windowMixin],
397396
props: ['pubkey'],
398397
data() {
399398
return {
@@ -605,8 +604,8 @@ Vue.component('lnbits-notifications-btn', {
605604
}
606605
})
607606

608-
Vue.component('lnbits-dynamic-fields', {
609-
mixins: [windowMixin],
607+
window.app.component('lnbits-dynamic-fields', {
608+
mixins: [window.windowMixin],
610609
props: ['options', 'value'],
611610
data() {
612611
return {
@@ -742,8 +741,8 @@ Vue.component('lnbits-dynamic-fields', {
742741
}
743742
})
744743

745-
Vue.component('lnbits-update-balance', {
746-
mixins: [windowMixin],
744+
window.app.component('lnbits-update-balance', {
745+
mixins: [window.windowMixin],
747746
props: ['wallet_id', 'callback'],
748747
computed: {
749748
denomination() {

‎lnbits/static/js/components/extension-rating.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Vue.component('lnbits-extension-rating', {
1+
window.app.component('lnbits-extension-rating', {
22
name: 'lnbits-extension-rating',
33
props: ['rating'],
44
template: `

‎lnbits/static/js/components/extension-settings.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
Vue.component('lnbits-extension-settings-form', {
1+
window.app.component('lnbits-extension-settings-form', {
22
name: 'lnbits-extension-settings-form',
33
props: ['options', 'adminkey', 'endpoint'],
44
methods: {
5-
updateSettings: async function () {
5+
async updateSettings() {
66
if (!this.settings) {
7-
return Quasar.plugins.Notify.create({
7+
return this.$q.notify({
88
message: 'No settings to update',
99
type: 'negative'
1010
})
@@ -66,7 +66,7 @@ Vue.component('lnbits-extension-settings-form', {
6666
}
6767
})
6868

69-
Vue.component('lnbits-extension-settings-btn-dialog', {
69+
window.app.component('lnbits-extension-settings-btn-dialog', {
7070
name: 'lnbits-extension-settings-btn-dialog',
7171
props: ['options', 'adminkey', 'endpoint'],
7272
template: `

0 commit comments

Comments
 (0)