build(frontend): migrate js to ts

frontend/components.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    Button: typeof import('./src/components/ui/Button.vue')['default']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    Highlights: typeof import('./src/components/Highlights.vue')['default']
+    IconBillCheck: typeof import('./src/components/icons/IconBillCheck.vue')['default']
+    IconGithub: typeof import('./src/components/icons/IconGithub.vue')['default']
+    IconHeart: typeof import('./src/components/icons/IconHeart.vue')['default']
+    IconMagicStick: typeof import('./src/components/icons/IconMagicStick.vue')['default']
+    IconPalette: typeof import('./src/components/icons/IconPalette.vue')['default']
+    IconTelegram: typeof import('./src/components/icons/IconTelegram.vue')['default']
+    IconTwitch: typeof import('./src/components/icons/IconTwitch.vue')['default']
+    IconValory: typeof import('./src/components/icons/IconValory.vue')['default']
+    IconValoryBG: typeof import('./src/components/icons/IconValoryBG.vue')['default']
+    Input: typeof import('./src/components/ui/Input.vue')['default']
+    LanguageSwitcher: typeof import('./src/components/ui/LanguageSwitcher.vue')['default']
+    Overlay: typeof import('./src/components/Overlay.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Switch: typeof import('./src/components/ui/Switch.vue')['default']
+  }
+}

frontend/index.html

@@ -40,6 +40,6 @@
       Enable JavaScript to enjoy all the features of this app.
     </noscript>
     <div id="app"></div>
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

frontend/package.json

@@ -31,6 +31,7 @@
     "postcss-uncss": "^0.17.0",
     "query-string": "^8.1.0",
     "set-interval-async": "^3.0.3",
+    "typescript": "^5.7.2",
     "uncss": "^0.17.3",
     "v-click-outside": "^3.2.0",
     "vue-i18n": "9",
@@ -41,8 +42,9 @@
     "@plugin-web-update-notification/vite": "^1.6.6",
     "@rushstack/eslint-patch": "^1.3.3",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.6.2",
     "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/runtime-dom": "^3.5.13",
     "autoprefixer": "^10.4.16",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.0.0",
@@ -55,6 +57,7 @@
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.11",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^2.1.10"
   }
 }

frontend/src/App.vue

@@ -1,21 +1,23 @@
-<script setup>
-import Highlights from '@/components/Highlights.vue'
-import { LoadingOutlined } from '@ant-design/icons-vue'
-import { ref } from 'vue'
-import { h } from 'vue'
-import { useRouter } from 'vue-router'
+<script setup lang="ts">
+import Highlights from '@/components/Highlights.vue';
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { ref, h } from 'vue';
+import { useRouter } from 'vue-router';
 
-const isRouterReady = ref(false)
-const router = useRouter()
+const isRouterReady = ref<boolean>(false);
 
-router.isReady().finally(() => (isRouterReady.value = true))
+const router = useRouter();
+
+router.isReady().finally(() => {
+  isRouterReady.value = true;
+});
 
 const indicator = h(LoadingOutlined, {
   style: {
-    fontSize: '36px'
+    fontSize: '36px',
   },
-  spin: true
-})
+  spin: true,
+});
 </script>
 
 <template>

frontend/src/components/Footer.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import IconGithub from '@/components/icons/IconGithub.vue'
 import IconHeart from '@/components/icons/IconHeart.vue'
 import IconTelegram from '@/components/icons/IconTelegram.vue'

frontend/src/components/Highlights.vue

@@ -1,4 +1,4 @@
-<script setup></script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="blicks">

frontend/src/components/Overlay.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import IconValory from '@/components/icons/IconValory.vue'
 </script>
 

frontend/src/components/ui/Button.vue

@@ -1,16 +1,11 @@
-<script setup>
-defineProps({
-  variant: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  type: {
-    type: String
-  }
-})
+<script setup lang="ts">
+interface ButtonProps {
+  variant?: string;
+  disabled?: boolean;
+  type?: string;
+}
+
+defineProps<ButtonProps>();
 </script>
 
 <template>

frontend/src/components/ui/Input.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps(['modelValue', 'placeholder'])
 </script>
 

frontend/src/components/ui/LanguageSwitcher.vue

@@ -1,10 +1,15 @@
-<script setup>
-import { useLocalStorage } from '@vueuse/core'
-import { NConfigProvider, NDropdown, darkTheme } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core';
+import { NConfigProvider, NDropdown, NButton, darkTheme } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 
-const { locale, availableLocales } = useI18n()
-const localStorageLocale = useLocalStorage('valoryLocale', 'en')
+const { locale, availableLocales } = useI18n<{ locale: string; availableLocales: string[] }>();
+const localStorageLocale = useLocalStorage<string>('valoryLocale', 'en');
+
+const handleSelectLocale = (selectedLocale: string) => {
+  locale.value = selectedLocale;
+  localStorageLocale.value = selectedLocale;
+};
 </script>
 
 <template>
@@ -19,12 +24,7 @@ const localStorageLocale = useLocalStorage('valoryLocale', 'en')
           }))
         "
         size="medium"
-        @select="
-          (l) => {
-            locale = l
-            localStorageLocale = l
-          }
-        "
+        @select="handleSelectLocale"
       >
         <n-button circle quaternary style="padding: 5px; font-size: 25px">
           <Icon :icon="`flag:${$t('flag')}-4x3`" width="18" height="18" />

frontend/src/components/ui/Switch.vue

@@ -1,35 +1,49 @@
-<script setup>
-const emits = defineEmits(['update:checked', 'updateCheckboxGroup'])
-const props = defineProps({
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue';
+
+const emits = defineEmits<{
+  (event: 'update:checked', checked: boolean): void;
+  (event: 'updateCheckboxGroup', payload: { optionId: string; checked: boolean }): void;
+}>();
+
+const props = defineProps<{
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  group?: boolean;
+  id?: string;
+}>({
   name: {
     type: String,
-    default: ''
+    default: '',
   },
   value: {
     type: String,
-    default: ''
+    default: '',
   },
   checked: {
     type: Boolean,
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: false,
   },
   group: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
-const handleClick = (event) => {
+const handleClick = (event: Event) => {
+  const target = event.target as HTMLInputElement;
   if (props.group) {
-    emits('updateCheckboxGroup', { optionId: props.id, checked: event.target.checked })
+    emits('updateCheckboxGroup', { optionId: props.id ?? '', checked: target.checked });
   } else {
-    emits('update:checked', event.target.checked)
+    emits('update:checked', target.checked);
   }
-}
+};
 </script>
 
 <template>
@@ -41,7 +55,7 @@ const handleClick = (event) => {
       :value="value"
       :checked="checked"
       :disabled="disabled"
-      @input="handleClick($event)"
+      @input="handleClick"
     />
   </div>
 </template>

frontend/src/i18n.ts

@@ -0,0 +1,16 @@
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import { useLocalStorage } from '@vueuse/core';
+import { createI18n, I18nOptions } from 'vue-i18n';
+
+type MessageSchema = typeof messages;
+type Locale = keyof MessageSchema;
+
+const locale = useLocalStorage<Locale>('valoryLocale', 'en');
+
+export const i18n = createI18n<I18nOptions & { messages: MessageSchema }, Locale>({
+  legacy: false,
+  locale: locale.value,
+  fallbackLocale: 'en',
+  messages,
+  globalInjection: true,
+});

frontend/src/main.ts

@@ -0,0 +1,19 @@
+import App from '@/App.vue';
+import { i18n } from '@/i18n';
+import router from '@/router';
+import { Icon } from '@iconify/vue';
+import { createPinia } from 'pinia';
+import { createApp } from 'vue';
+
+const app = createApp(App);
+
+app
+  .use(createPinia())
+  .use(i18n)
+  .use(router)
+  .component('Icon', Icon)
+  .mount('#app');
+
+document.body.addEventListener('plugin_web_update_notice', () => {
+  window.location.reload();
+});

frontend/src/router/index.ts

@@ -0,0 +1,36 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('@/views/HomeView.vue'),
+  },
+  {
+    path: '/editor',
+    name: 'editor',
+    component: () => import('@/views/EditorView.vue'),
+  },
+  {
+    path: '/overlay/:overlayID',
+    name: 'overlay',
+    component: () => import('@/views/OverlayView.vue'),
+    props: (route) => ({ overlayID: route.params.overlayID }),
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('@/views/TestView.vue'),
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/PageNotFoundView.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;