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,colorare wrapped byrefandreactive. They are global reactive now, and watchers are setup to automatically save the newsettings,background,colorto localstorage once their value changes, so we don't need to manually call localstorage to save them inSetup,Themingpages, just change their value, and let the watchers do the rest.new URL(imagepath, import.meta.url).hrefto deal with static assets(images), so that vitejs can automatically resolve them and copy the corresponding assets todistdir when build. Otherwise, the assets need to place under thepublicdir. Note thatimport.meta.urlis module specific, so I've usinggetImageUrlin some different files.createWebHashHistory()(hash mode). If usingcreateWebHistory()(html5 mode), thewebkit2gtk 2.40+will raise theSecurityErrorgetLocalnow using thesettings.user.languageto producelang, this fix wrong language detection whenlightdm.languageis a language name string.user.languageis a language code(zh_CN.UTF-8on my archlinux), which comes fromlightdm.users. But this may need more test to confirm(maybeuser.languageis only on my system)Test
I test it on my arch linux pc, and it just works, below is my machine environment.
Environment