move to vite

tamland · Feb 19, 2025 · e5afdb5 · e5afdb5
1 parent b58626c
commit e5afdb5
Show file tree

Hide file tree

Showing 21 changed files with 629 additions and 4,782 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
     'space-before-function-paren': ['error', 'never'],
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
   },
   overrides: [
     {

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,8 +21,8 @@ jobs:
 
     - name: Build
       run: |
-        export VUE_APP_BUILD=$VERSION
-        export VUE_APP_BUILD_DATE=$(date --iso-8601)
+        export VITE_BUILD=$VERSION
+        export VITE_BUILD_DATE=$(date --iso-8601)
         yarn build
 
     - name: Upload artifact

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -21,8 +21,8 @@ jobs:
 
     - name: Build
       run: |
-        export VUE_APP_BUILD=$VERSION
-        export VUE_APP_BUILD_DATE=$(date --iso-8601)
+        export VITE_BUILD=$VERSION
+        export VITE_BUILD_DATE=$(date --iso-8601)
         yarn build
 
     - name: Build docker image

diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000" />
+    <link rel="icon" href="/icon.svg">
+    <link rel=manifest href="/manifest.webmanifest">
+    <script src="/env.js"></script>
+    <title>Airsonic (refix)</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@iconify-icons/bi": "^1.2.2",
@@ -25,21 +25,23 @@
     "@types/lodash-es": "^4.17.6",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
+    "@vitejs/plugin-vue2": "^2.3.3",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.13.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^9.5.1",
+    "rollup-plugin-bundle-analyzer": "^1.6.6",
     "sass": "^1.34.0",
     "sass-loader": "^13.0.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^6.1.0",
+    "vite-plugin-checker": "^0.8.0",
+    "vue-tsc": "^2.2.2"
   },
   "postcss": {
     "plugins": {

diff --git a/public/index.html b/public/index.html
diff --git a/src/app/About.vue b/src/app/About.vue
@@ -53,8 +53,8 @@
       }
     },
     computed: {
-      build: () => process.env.VUE_APP_BUILD,
-      buildDate: () => process.env.VUE_APP_BUILD_DATE,
+      build: () => import.meta.env.VITE_BUILD,
+      buildDate: () => import.meta.env.VITE_BUILD_DATE,
       url: () => 'https://github.com/tamland/airsonic-refix'
     },
   })

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -1,7 +1,3 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
 declare module '*.svg';
 declare module 'md5-es';
 declare module 'vue-slider-component';

diff --git a/src/player/ProgressBar.vue b/src/player/ProgressBar.vue
@@ -45,7 +45,7 @@
   })
 </script>
 <style lang="scss" scoped>
-  @import '~vue-slider-component/theme/material.css';
+  @use 'vue-slider-component/theme/material.css';
 
   .vue-slider {
     height: 4px !important;

diff --git a/src/shared/api.ts b/src/shared/api.ts
@@ -1,5 +1,5 @@
 import { AuthService } from '@/auth/service'
-import { map, max, orderBy, sumBy, uniq, uniqBy } from 'lodash-es'
+import { map, max, orderBy, sumBy, uniqBy } from 'lodash-es'
 import { toQueryString } from '@/shared/utils'
 
 export type AlbumSort =

diff --git a/src/shared/components/IconReplayGainAlbum.vue b/src/shared/components/IconReplayGainAlbum.vue
@@ -3,7 +3,7 @@
        width="1em" height="1em" fill="currentColor"
        viewBox="0 0 24 24"
        class="icon bi">
-    <text x="0" y="50%" dominant-baseline="central"  font-family="Arial, sans-serif" font-weight="bold" font-size="16" fill="currentColor">R</text>
+    <text x="0" y="50%" dominant-baseline="central" font-family="Arial, sans-serif" font-weight="bold" font-size="16" fill="currentColor">R</text>
     <text x="52%" y="72%" dominant-baseline="central" font-family="Arial, sans-serif" font-weight="bold" font-size="13" fill="currentColor">A</text>
   </svg>
 </template>
diff --git a/src/shared/components/IconReplayGainTrack.vue b/src/shared/components/IconReplayGainTrack.vue
@@ -3,7 +3,7 @@
        width="1em" height="1em" fill="currentColor"
        viewBox="0 0 24 24"
        class="icon bi">
-    <text x="0" y="50%" dominant-baseline="central"  font-family="Arial, sans-serif" font-weight="bold" font-size="16" fill="currentColor">R</text>
+    <text x="0" y="50%" dominant-baseline="central" font-family="Arial, sans-serif" font-weight="bold" font-size="16" fill="currentColor">R</text>
     <text x="52%" y="72%" dominant-baseline="central" font-family="Arial, sans-serif" font-weight="bold" font-size="13" fill="currentColor">T</text>
   </svg>
 </template>
diff --git a/src/shared/components/Slider.vue b/src/shared/components/Slider.vue
@@ -37,7 +37,7 @@
   })
 </script>
 <style lang="scss" scoped>
-  @import '~vue-slider-component/theme/material.css';
+  @use 'vue-slider-component/theme/material.css';
 
   .vue-slider {
     cursor: pointer;

diff --git a/src/shared/router.ts b/src/shared/router.ts
@@ -23,7 +23,7 @@ export function setupRouter(auth: AuthService) {
   const router = new Router({
     mode: 'history',
     linkExactActiveClass: 'active',
-    base: process.env.BASE_URL,
+    base: import.meta.env.BASE_URL,
     routes: [
       {
         path: '/',

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -1,5 +1,5 @@
 import MD5 from 'md5-es'
-import { Artist, Track } from '@/shared/api'
+import { Track } from '@/shared/api'
 
 export function randomString(): string {
   let arr = new Uint8Array(16)

diff --git a/src/style/main.scss b/src/style/main.scss
@@ -117,4 +117,4 @@ a.active {
 }
 
 @import './nav-underlined';
-@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,14 +11,10 @@
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
     "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
+    "baseUrl": "./src",
+    "types": ["vite/client"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["./*"]
     },
     "lib": [
       "esnext",
@@ -27,6 +23,9 @@
       "scripthost"
     ]
   },
+  "vueCompilerOptions": {
+    "skipTemplateCodegen": true
+  },
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue2'
+import { fileURLToPath, URL } from 'node:url'
+import autoprefixer from 'autoprefixer'
+import checker from 'vite-plugin-checker'
+import bundleAnalyzer from 'rollup-plugin-bundle-analyzer'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    checker({
+      vueTsc: true,
+      eslint: {
+        lintCommand: 'eslint . --ext .vue,.ts,.js --ignore-path .gitignore',
+      },
+    }),
+    bundleAnalyzer({
+      analyzerMode: 'static',
+      reportFilename: 'report.html'
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['mixed-decls', 'color-functions', 'global-builtin', 'import']
+      }
+    },
+    postcss: {
+      plugins: [
+        autoprefixer()
+      ]
+    }
+  }
+})
diff --git a/vue.config.js b/vue.config.js