Feat(front): use modern typescript and vite features

Co-Authored-By: ArneBo <arne@ecobasa.org>
Co-Authored-By: Flupsi <upsiflu@gmail.com>
Co-Authored-By: jon r <jon@allmende.io>

front/.eslintrc.cjs

@@ -6,8 +6,7 @@ module.exports = {
   extends: [
     'plugin:@intlify/vue-i18n/recommended',
     'plugin:vue/vue3-recommended',
-    '@vue/typescript/recommended',
+    '@vue/typescript/recommended'
-    '@vue/standard'
   ],
   globals: {
     SharedArrayBuffer: 'readonly',
@@ -20,8 +19,14 @@ module.exports = {
     ecmaVersion: 2020
   },
   plugins: [
+    'html',
     'vue'
   ],
+  ignorePatterns: [
+    'src/locales/*.json',
+    'dist/',
+    'stats.html'
+  ],
   rules: {
     // NOTE: Nicer for the eye
     'operator-linebreak': ['error', 'before'],
@@ -55,7 +60,10 @@ module.exports = {
     '@typescript-eslint/no-this-alias': 'off',
 
     // TODO (wvffle): Remove after API Client
-    '@typescript-eslint/no-explicit-any': 'off'
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // Configure TypeScript style
+    'comma-dangle': ['error', 'never']
   },
   overrides: [
     {

front/tsconfig.json

@@ -4,12 +4,12 @@
     "baseUrl": ".",
     "sourceMap": true,
     "noUnusedLocals": true,
+    "noImplicitAny": true,
     "experimentalDecorators": true,
     "typeRoots": ["node_modules", "node_modules/@types"],
     "types": [
       "vitest/globals",
       "vite/client",
-      "vue/ref-macros",
       "vite-plugin-pwa/client",
       "unplugin-vue-macros/macros-global"
     ],
@@ -19,8 +19,18 @@
       "~/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "test/**/*.ts"],
+  "include": [
+    "**/*.md",
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "vite.config.ts",
+    "test/**/*.ts",
+    "src/docs/vite.config.ts",
+    "src/docs/**/*.ts",
+    "ui-docs/**/*.md"
+  ],
   "vueCompilerOptions": {
+    "vitePressExtensions": [".md"],
     "plugins": [
       "@vue-macros/volar/define-options",
       "@vue-macros/volar/define-models",

front/vite.config.ts

@@ -1,16 +1,24 @@
 import { visualizer } from 'rollup-plugin-visualizer'
 import { defineConfig, type PluginOption } from 'vite'
 import { VitePWA } from 'vite-plugin-pwa'
-import { resolve } from 'path'
+import { fileURLToPath, URL } from 'node:url'
+import UnoCSS from 'unocss/vite'
 
 import manifest from './pwa-manifest.json'
 
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
 import Vue from '@vitejs/plugin-vue'
 import VueMacros from 'unplugin-vue-macros/vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
+
+// We don't use port but, magically, it is necessary to set it here.
 const port = +(process.env.VUE_PORT ?? 8080)
 
+// To prevent a linter warning, here is a partial Haiku:
+export const exPort = port
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
   envPrefix: ['VUE_', 'TAURI_', 'FUNKWHALE_SENTRY_'],
@@ -25,7 +33,7 @@ export default defineConfig(({ mode }) => ({
 
     // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
     VueI18n({
-      include: resolve(__dirname, './src/locales/**')
+      include: fileURLToPath(new URL('./src/locales/**', import.meta.url))
     }),
 
     // https://github.com/btd/rollup-plugin-visualizer
@@ -43,16 +51,39 @@ export default defineConfig(({ mode }) => ({
         navigateFallback: 'index.html'
       },
       manifest
-    })
+    }),
+
+    // https://github.com/davidmyersdev/vite-plugin-node-polyfills
+    // see: https://github.com/Borewit/music-metadata-browser/issues/836
+    nodePolyfills(),
+
+    // https://unocss.dev/
+    UnoCSS(),
+    vueDevTools()
   ],
   server: {
-    port
+    port: +(process.env.VUE_PORT ?? 8080),
+    watch: {
+      usePolling: true
+    }
   },
   resolve: {
-    alias: {
+    alias: [
-      '#': resolve(__dirname, './src/worker'),
+      { find: '#', replacement: fileURLToPath(new URL('./src/ui/workers', import.meta.url)) },
-      '?': resolve(__dirname, './test'),
+      { find: '?', replacement: fileURLToPath(new URL('./test', import.meta.url)) },
-      '~': resolve(__dirname, './src')
+      { find: '~', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
+    ]
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          $docs: ${!!process.env.VP_DOCS};
+          @use "~/style/_vars" as *;
+          @import "~/style/inc/theme";
+          @import "~/style/funkwhale";
+        `
+      }
     }
   },
   build: {