This needs more testing before merging it, but it just works on my machine.
Dependencies changes
Vue2 -> Vue3
Vue CLI -> Vitejs
Changes
Rewrite vue components in Composition API style(<script setup>).
Remove secondary.html
settings, backgroud, color are wrapped by ref and reactive. They are global reactive now, and watchers are setup to automatically save the new settings, background, color to localstorage once their value changes, so we don't need to manually call localstorage to save them in Setup, Theming pages, just change their value, and let the watchers do the rest.
using new URL(imagepath, import.meta.url).href to deal with static assets(images), so that vitejs can automatically resolve them and copy the corresponding assets to dist dir when build. Otherwise, the assets need to place under the public dir. Note that import.meta.url is module specific, so I've using getImageUrl in some different files.
router history using createWebHashHistory()(hash mode). If using createWebHistory() (html5 mode), the webkit2gtk 2.40+ will raise the SecurityError
getLocal now using the settings.user.language to produce lang, this fix wrong language detection when lightdm.language is a language name string. user.language is a language code(zh_CN.UTF-8 on my archlinux), which comes from lightdm.users. But this may need more test to confirm(maybe user.language is only on my system)
Test
I test it on my arch linux pc, and it just works, below is my machine environment.
this PR upgrade project to Vue 3 + Vitejs.
Note
Dependencies changes
Changes
<script setup>
).settings
,backgroud
,color
are wrapped byref
andreactive
. They are global reactive now, and watchers are setup to automatically save the newsettings
,background
,color
to localstorage once their value changes, so we don't need to manually call localstorage to save them inSetup
,Theming
pages, just change their value, and let the watchers do the rest.new URL(imagepath, import.meta.url).href
to deal with static assets(images), so that vitejs can automatically resolve them and copy the corresponding assets todist
dir when build. Otherwise, the assets need to place under thepublic
dir. Note thatimport.meta.url
is module specific, so I've usinggetImageUrl
in some different files.createWebHashHistory()
(hash mode). If usingcreateWebHistory()
(html5 mode), thewebkit2gtk 2.40+
will raise theSecurityError
getLocal
now using thesettings.user.language
to producelang
, this fix wrong language detection whenlightdm.language
is a language name string.user.language
is a language code(zh_CN.UTF-8
on my archlinux), which comes fromlightdm.users
. But this may need more test to confirm(maybeuser.language
is only on my system)Test
I test it on my arch linux pc, and it just works, below is my machine environment.
Environment