Merge pull request #176 from zusorio/migrate-to-vite

Migrate from vue cli to vite
slmnio · Mar 9, 2023 · e9b539c · e9b539c
2 parents b5aaf89 + 3214ffe
commit e9b539c
Show file tree

Hide file tree

Showing 28 changed files with 861 additions and 8,108 deletions.
diff --git a/website/.env b/website/.env
@@ -1,5 +1,5 @@
-VUE_APP_DEPLOY_MODE=live
-VUE_APP_DATA_SERVER="https://data.slmn.gg"
+VITE_DEPLOY_MODE=live
+VITE_DATA_SERVER="https://data.slmn.gg"
 
-# VUE_APP_MAIN_DOMAIN="https://dev.slmn.gg"   # for auth returns
-# VUE_APP_MAIN_COOKIE_DOMAIN="dev.slmn.gg"    # no protocol or ports (for cookies)
+# VITE_MAIN_DOMAIN="https://dev.slmn.gg"   # for auth returns
+# VITE_MAIN_COOKIE_DOMAIN="dev.slmn.gg"    # no protocol or ports (for cookies)
diff --git a/website/.env.development b/website/.env.development
@@ -1 +1 @@
-VUE_APP_DEPLOY_MODE=local
+VITE_DEPLOY_MODE=local
diff --git a/website/.env.staging b/website/.env.staging
@@ -1 +1 @@
-VUE_APP_DEPLOY_MODE=staging
+VITE_DEPLOY_MODE=staging
diff --git a/website/.eslintrc.json b/website/.eslintrc.json
@@ -9,8 +9,7 @@
     ],
     "parserOptions": {
         "ecmaVersion": 12,
-        "sourceType": "module",
-        "parser": "babel-eslint"
+        "sourceType": "module"
     },
     "rules": {
         "indent": [

diff --git a/website/babel.config.js b/website/babel.config.js
diff --git a/website/public/index.html → website/index.html b/website/public/index.html → website/index.html
@@ -9,16 +9,18 @@
         document.getElementById("science").dataset.domain += "," + window.location.hostname;
         document.getElementById("science").src = "https://science.slmn.io/science.js";
     </script>
-    <link rel="stylesheet" href="<%= BASE_URL %>assets/initial.css">
-    <link rel="stylesheet" href="<%= BASE_URL %>assets/fa-all.css">
+    <link rel="stylesheet" href="/assets/initial.css">
+    <link rel="stylesheet" href="/assets/fa-all.css">
     <link rel="icon" href="/favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>SLMN.GG</title>
 </head>
 <body>
     <noscript>
-        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        <strong>We're sorry but SLMN.GG doesn't work properly without JavaScript enabled.
             Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+
 </body>
 </html>
diff --git a/website/package.json b/website/package.json
@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve-website": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build-stage": "vue-cli-service build --mode staging"
+    "dev": "vite --port 8080",
+    "build": "vite build",
+    "serve": "vite preview --port 8080",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "build-stage": "vite build --mode staging",
+    "serve-website": "yarn dev"
   },
   "dependencies": {
     "bootstrap-vue": "^2.23.1",
-    "core-js": "^3.6.5",
     "howler": "^2.2.3",
-    "jimp": "^0.16.1",
+    "image-js": "^0.35.3",
     "marked": "^2.1.3",
     "notyf": "^3.10.0",
     "obs-websocket-js": "^5.0.2",
@@ -21,31 +22,23 @@
     "spacetime": "^6.16.0",
     "spacetime-informal": "^0.6.1",
     "timesync": "^1.0.11",
-    "vue": "^2.6.11",
+    "vue": "^2.7",
     "vue-cookies": "^1.8.1",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
-    "vue-server-renderer": "^2.6.12",
     "vue-socket.io-extended": "^4.1.0",
     "vue-youtube-embed": "^2.2.2",
-    "vuex": "^3.6.2",
-    "webpack-merge": "^5.7.3",
-    "webpack-node-externals": "^2.5.2"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^5.1.2",
-    "babel-eslint": "^10.1.0",
     "eslint": "^7.23.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
-    "ngrok": "^4.0.1",
-    "vue-template-compiler": "^2.6.11"
+    "vite": "^4.1.1"
   }
 }
diff --git a/website/src/apps/MinisiteWrapperApp.vue b/website/src/apps/MinisiteWrapperApp.vue
@@ -44,7 +44,8 @@
 import NotFoundPage from "@/views/NotFoundPage";
 import WebsiteNav from "@/components/website/WebsiteNav";
 import { ReactiveThing } from "@/utils/reactive";
-
+import "@/assets/bootstrap.css";
+import "@/assets/app.css";
 export default {
     name: "MinisiteWrapperApp",
     components: {
@@ -74,9 +75,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-@import "~@/assets/bootstrap.css";
-@import "~@/assets/app.css";
-
-</style>
diff --git a/website/src/apps/WebsiteApp.vue b/website/src/apps/WebsiteApp.vue
@@ -7,6 +7,8 @@
 
 <script>
 import WebsiteNav from "@/components/website/WebsiteNav";
+import "@/assets/bootstrap.css";
+import "@/assets/app.css";
 
 export default {
     name: "WebsiteApp",
@@ -20,9 +22,6 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/assets/bootstrap.css";
-@import "~@/assets/app.css";
-
 .nav-link-match {
     color: rgba(255,255,255,0.8) !important;
 }

diff --git a/website/src/components/broadcast/RecoloredHero.vue b/website/src/components/broadcast/RecoloredHero.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Jimp from "jimp/es";
+import { Image } from "image-js";
 import { heroRecolorColors } from "@/utils/theme-styles";
 import { bg, resizedAttachment } from "@/utils/images";
 
@@ -28,12 +28,9 @@ function deHex(hexString) {
 
 async function recolorImage(imageURL, toColor, fromColor) {
     const [from, to] = [fromColor, toColor].map(deHex);
-    const image = await Jimp.read({
-        url: imageURL
-    });
-
+    const image = await Image.load(imageURL);
     // console.log("image width", image.bitmap.width);
-    const frame = image.bitmap.data;
+    const frame = image.data;
 
     const outputFrame = new Uint8Array(frame);// (new Uint8Array(frame)).slice(0, image.bitmap.width * image.bitmap.height * 4);
 
@@ -53,10 +50,10 @@ async function recolorImage(imageURL, toColor, fromColor) {
     // console.log("output is", frame.length, outputFrame.length);
     return {
         pixels: {
-            ...image.bitmap,
+            ...image,
             data: outputFrame
         },
-        width: image.bitmap.width
+        width: image.width
     };
 }
 

diff --git a/website/src/components/website/Markdown.vue b/website/src/components/website/Markdown.vue
@@ -3,8 +3,7 @@
 </template>
 
 <script>
-
-const marked = require("marked");
+import marked from "marked";
 // const renderer = {};
 // renderer.image = (href, title, text) => {
 //     console.log("[image]", href, title, text);

diff --git a/website/src/components/website/TwitchAuthScopeSelector.vue b/website/src/components/website/TwitchAuthScopeSelector.vue
@@ -43,7 +43,7 @@ export default {
     }),
     computed: {
         twitchAuthURL() {
-            return `${process.env.VUE_APP_DATA_SERVER}/twitch_auth/${this.selected.join(" ")}`;
+            return `${import.meta.env.VITE_DATA_SERVER}/twitch_auth/${this.selected.join(" ")}`;
         }
     }
 };

diff --git a/website/src/components/website/WebsiteNav.vue b/website/src/components/website/WebsiteNav.vue
@@ -146,8 +146,7 @@ export default {
             return getMainDomain(this.minisite?.subdomain);
         },
         siteMode() {
-            // console.log("env", process.env);
-            return process.env.VUE_APP_DEPLOY_MODE || process.env.NODE_ENV;
+            return import.meta.env.VITE_DEPLOY_MODE || import.meta.env.NODE_ENV;
         },
         navbarEvents() {
             if (!this.minisite?.id) return [];

diff --git a/website/src/main.js b/website/src/main.js
@@ -59,6 +59,8 @@ Vue.use(VueSocketIOExt, socket, { store });
 
 Vue.config.productionTip = false;
 
+Vue.config.devtools = ["local", "staging"].includes(import.meta.env.VITE_DEPLOY_MODE);
+
 Vue.component("v-style", {
     render: function (createElement) {
         return createElement("style", this.$slots.default);
@@ -126,7 +128,7 @@ if (subdomain) {
 
 const router = new VueRouter({
     mode: "history",
-    base: process.env.BASE_URL,
+    base: import.meta.env.BASE_URL,
     routes
 });
 
@@ -254,7 +256,7 @@ app = new Vue({
             return this.$store.getters.thing(`subdomain-${subdomain}`);
         },
         version() {
-            return process.env?.VUE_APP_SLMNGG_VERSION;
+            return import.meta.env?.VITE_SLMNGG_VERSION;
         },
         authUser() {
             if (!this.auth.user?.airtableID) return null;

diff --git a/website/src/router/auth-redirects.js b/website/src/router/auth-redirects.js
@@ -26,7 +26,7 @@ export default (app, mainDomain) => ([
             setAuthNext(app?.$root, to.query.return || from.fullPath);
 
             const params = {
-                client_id: process.env.VUE_APP_DISCORD_CLIENT_ID,
+                client_id: import.meta.env.VITE_DISCORD_CLIENT_ID,
                 redirect_uri: `${mainDomain}/auth/discord/return`,
                 response_type: "code",
                 scope: ["identify"].join(" ")
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VUE_APP_DEPLOY_MODE=staging
		VITE_DEPLOY_MODE=staging