move from vue-cli to vite

was it worth it? no idea
lucas19961 · Apr 26, 2022 · 4b2fab8 · 4b2fab8
1 parent f8ca01b
commit 4b2fab8
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 5,104 deletions.
diff --git a/client-vue/README.md b/client-vue/README.md
@@ -1,26 +1,28 @@
-# client-vue
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-Create a file named `.env.production` in this folder and supply `BASE_URL` and `VUE_APP_BASE_URL` to change the basepath.
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# client-vue
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+Create a file named `.env.production` in this folder and supply `BASE_URL` and `VITE_APP_BASE_URL` to change the basepath.
+
+You can also build it with `yarn run build --base=/my-app/`.
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/client-vue/index.html b/client-vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TwitchAutomator</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/client-vue/package.json b/client-vue/package.json
@@ -1,13 +1,13 @@
 {
   "name": "twitchautomator-client",
-  "version": "0.6.1b",
+  "version": "0.7.0",
   "private": true,
   "homepage": "https://github.com/MrBrax/TwitchAutomator",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "buildwatch": "vue-cli-service build --mode=development --watch"
+    "lint": "vue-tsc --noEmit",
+    "serve": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "buildwatch": "vite preview"
   },
   "dependencies": {
     "@fontsource/roboto": "^4.5.1",
@@ -30,14 +30,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-pwa": "^5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-service": "5.0.4",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vitejs/plugin-vue": "^2.3.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -46,6 +39,8 @@
     "prettier": "^2.5.0",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vue-tsc": "^0.34.10"
   }
 }
diff --git a/client-vue/public/index.html b/client-vue/public/index.html
diff --git a/client-vue/src/assets/style.scss b/client-vue/src/assets/style.scss
@@ -1,17 +1,9 @@
-/*
-$fa-font-path: "./fontawesome/webfonts";
-@import "./fontawesome/scss/fontawesome.scss";
-@import "./fontawesome/scss/solid.scss";
-@import "./fontawesome/scss/regular.scss";
-@import "./fontawesome/scss/brands.scss";
-*/
-
-@import "~normalize.css/normalize";
+@import "normalize.css/normalize";
 // @import "~@fontsource/roboto/scss/mixins";
 
 // @import "~@fontsource/roboto/500.css";
-@import "~@fontsource/roboto/latin.css";
-@import "~@fontsource/roboto-condensed/latin.css";
+@import "@fontsource/roboto/latin.css";
+@import "@fontsource/roboto-condensed/latin.css";
 
 $favourite-base: #356e35;
 $converting-base: #bb15ca;

diff --git a/client-vue/src/components/SideMenu.vue b/client-vue/src/components/SideMenu.vue
@@ -81,10 +81,10 @@ export default defineComponent({
             return streamers.sort((a, b) => a.display_name.localeCompare(b.display_name));
         },
         clientVersion() {
-            return process.env.VUE_APP_VERSION; // injected
+            return import.meta.env.VITE_APP_VERSION; // injected
         },
         verboseClientVersion() {
-            return `${process.env.VUE_APP_VERSION} (${process.env.VUE_APP_BUILDDATE} / ${process.env.VUE_APP_GIT_HASH})`; // injected
+            return `${import.meta.env.VITE_APP_VERSION} (${import.meta.env.VITE_APP_BUILDDATE} / ${import.meta.env.VITE_APP_GIT_HASH})`; // injected
         },
         homepageLink() {
             return pack.homepage;

diff --git a/client-vue/src/components/forms/ToolsBurnForm.vue b/client-vue/src/components/forms/ToolsBurnForm.vue
@@ -11,7 +11,7 @@
             <label class="label">Quality</label>
             <div class="control">
                 <select class="input input-required" name="quality">
-                    <option v-for="quality in twitchQuality" :key="quality">{{ quality }}</option>
+                    <option v-for="quality in VideoQualityArray" :key="quality">{{ quality }}</option>
                 </select>
             </div>
         </div>
@@ -29,10 +29,14 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { VideoQualityArray } from "@common/Defs";
 
 export default defineComponent({
     name: "ToolsBurnForm",
     emits: ["formSuccess"],
+    setup() {
+        return { VideoQualityArray };
+    },
     data() {
         return {
             formStatusText: "Ready",

diff --git a/client-vue/src/core/vod.ts b/client-vue/src/core/vod.ts
@@ -1,4 +1,4 @@
-import { useStore } from "@/store";
+import { useStore } from "../store";
 import { ApiVod } from "../../../common/Api/Client";
 import { MuteStatus } from "../../../common/Defs";
 import { VideoMetadata } from "../../../common/MediaInfo";

diff --git a/client-vue/src/libs/FontAwesomeIcon.vue b/client-vue/src/libs/FontAwesomeIcon.vue
diff --git a/client-vue/src/main.ts b/client-vue/src/main.ts
@@ -6,15 +6,15 @@ import VueAxios from "vue-axios";
 import titleMixin from "./mixins/titleMixin";
 import helpers from "./mixins/helpers";
 import { createPinia } from "pinia";
-import "./registerServiceWorker";
+// import "./registerServiceWorker";
 
 // font-awesome
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import "./assets/style.scss";
 
-if (process.env.BASE_URL !== undefined) {
-    axios.defaults.baseURL = process.env.BASE_URL;
+if (import.meta.env.BASE_URL !== undefined) {
+    axios.defaults.baseURL = import.meta.env.BASE_URL;
 }
 
 createApp(App).use(router).use(createPinia()).use(VueAxios, axios).component("fa", FontAwesomeIcon).mixin(titleMixin).mixin(helpers).mount("#app");
diff --git a/client-vue/src/plugins/font-awesome.ts b/client-vue/src/plugins/font-awesome.ts
diff --git a/client-vue/src/registerServiceWorker.ts b/client-vue/src/registerServiceWorker.ts
@@ -2,8 +2,8 @@
 
 import { register } from "register-service-worker";
 
-if (process.env.NODE_ENV === "production") {
-    register(`${process.env.BASE_URL}service-worker.js`, {
+if (import.meta.env.PROD) {
+    register(`${import.meta.env.BASE_URL}service-worker.js`, {
         ready() {
             console.log("App is being served from cache by a service worker.\n" + "For more details, visit https://goo.gl/AFskqB");
         },

diff --git a/client-vue/src/router/index.ts b/client-vue/src/router/index.ts
@@ -42,7 +42,7 @@ const routes: Array<RouteRecordRaw> = [
 
 const router = createRouter({
     // history: createWebHashHistory(),
-    history: createWebHistory(process.env.BASE_URL),
+    history: createWebHistory(import.meta.env.BASE_URL),
     // history: createWebHistory((window as any).BASE_URL),
     routes,
     scrollBehavior(to, from, savedPosition) {

diff --git a/client-vue/src/shims-vue.d.ts b/client-vue/src/shims-vue.d.ts
@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 /* eslint-disable */
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

diff --git a/client-vue/src/views/AboutView.vue b/client-vue/src/views/AboutView.vue
@@ -268,13 +268,13 @@ export default defineComponent({
     },
     computed: {
         clientVersion() {
-            return process.env.VUE_APP_VERSION; // injected
+            return import.meta.env.VITE_APP_VERSION; // injected
         },
         clientMode() {
-            return process.env.NODE_ENV; // injected
+            return import.meta.env.MODE; // injected
         },
         verboseClientVersion() {
-            return `${process.env.VUE_APP_VERSION} (${process.env.VUE_APP_BUILDDATE} / ${process.env.VUE_APP_GIT_HASH})`; // injected
+            return `${import.meta.env.VITE_APP_VERSION} (${import.meta.env.VITE_APP_BUILDDATE} / ${import.meta.env.VITE_APP_GIT_HASH})`; // injected
         },
     },
     methods: {

diff --git a/client-vue/tsconfig.json b/client-vue/tsconfig.json
@@ -9,12 +9,10 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": true,
     "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
     "paths": {
       "@/*": [
         "src/*"
@@ -39,5 +37,6 @@
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/client-vue/tsconfig.node.json b/client-vue/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/client-vue/vite.config.ts b/client-vue/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { gitDescribeSync } from 'git-describe'
+
+process.env.VITE_APP_VERSION = process.env.npm_package_version
+process.env.VITE_APP_BUILDDATE = new Date().toISOString()
+process.env.VITE_APP_GIT_HASH = gitDescribeSync().hash
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@common': path.resolve(__dirname, '..', 'common'),
+    },
+  },
+})