feat: migrate to vue 3 + vite (#2553)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>

.github/workflows/deploy-netlify.yml

@@ -22,6 +22,9 @@ jobs:
         run: mv packages/hoppscotch-app/.env.example packages/hoppscotch-app/.env
 
       - name: Build Site
+        env:
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_SENTRY_ENVIRONMENT: production
         run: pnpm run generate
 
       # Deploy the production site with netlify-cli

.github/workflows/deploy-staging-netlify.yml

@@ -21,18 +21,20 @@ jobs:
 
       - name: Build Site
         env:
-          GA_ID: ${{ secrets.STAGING_GA_ID }}
-          GTM_ID: ${{ secrets.STAGING_GTM_ID }}
-          API_KEY: ${{ secrets.STAGING_FB_API_KEY }}
-          AUTH_DOMAIN: ${{ secrets.STAGING_FB_AUTH_DOMAIN }}
-          DATABASE_URL: ${{ secrets.STAGING_FB_DATABASE_URL }}
-          PROJECT_ID: ${{ secrets.STAGING_FB_PROJECT_ID }}
-          STORAGE_BUCKET: ${{ secrets.STAGING_FB_STORAGE_BUCKET }}
-          MESSAGING_SENDER_ID: ${{ secrets.STAGING_FB_MESSAGING_SENDER_ID }}
-          APP_ID: ${{ secrets.STAGING_FB_APP_ID }}
-          BASE_URL: ${{ secrets.STAGING_BASE_URL }}
-          BACKEND_GQL_URL: ${{ secrets.STAGING_BACKEND_GQL_URL }}
-          BACKEND_WS_URL: ${{ secrets.STAGING_BACKEND_WS_URL }}
+          VITE_GA_ID: ${{ secrets.STAGING_GA_ID }}
+          VITE_GTM_ID: ${{ secrets.STAGING_GTM_ID }}
+          VITE_API_KEY: ${{ secrets.STAGING_FB_API_KEY }}
+          VITE_AUTH_DOMAIN: ${{ secrets.STAGING_FB_AUTH_DOMAIN }}
+          VITE_DATABASE_URL: ${{ secrets.STAGING_FB_DATABASE_URL }}
+          VITE_PROJECT_ID: ${{ secrets.STAGING_FB_PROJECT_ID }}
+          VITE_STORAGE_BUCKET: ${{ secrets.STAGING_FB_STORAGE_BUCKET }}
+          VITE_MESSAGING_SENDER_ID: ${{ secrets.STAGING_FB_MESSAGING_SENDER_ID }}
+          VITE_APP_ID: ${{ secrets.STAGING_FB_APP_ID }}
+          VITE_BASE_URL: ${{ secrets.STAGING_BASE_URL }}
+          VITE_BACKEND_GQL_URL: ${{ secrets.STAGING_BACKEND_GQL_URL }}
+          VITE_BACKEND_WS_URL: ${{ secrets.STAGING_BACKEND_WS_URL }}
+          VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          VITE_SENTRY_ENVIRONMENT: staging
         run: pnpm run generate
 
       # Deploy the staging site with netlify-cli

.gitignore

@@ -107,6 +107,3 @@ tests/*/videos
 
 # Local Netlify folder
 .netlify
-
-# Andrew's crazy Volar shim generator
-shims-volar.d.ts

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=false

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "vue.volar",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "csstools.postcss",
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur"
+  ]
+}

netlify.toml

@@ -60,3 +60,18 @@
   to = "https://company.hoppscotch.io/announcements"
   status = 301
   force = true
+
+[[redirects]]
+  from = "/robots.txt"
+  to = "/robots.txt"
+  status = 200
+
+[[redirects]]
+  from = "/sitemap.xml"
+  to = "/sitemap.xml"
+  status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

packages/codemirror-lang-graphql/package.json

@@ -17,12 +17,12 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@codemirror/highlight": "^0.19.8",
-    "@codemirror/language": "^0.19.10",
-    "@lezer/lr": "^0.15.8"
+    "@codemirror/language": "^6.2.0",
+    "@lezer/highlight": "^1.0.0",
+    "@lezer/lr": "^1.2.0"
   },
   "devDependencies": {
-    "@lezer/generator": "^0.15.4",
+    "@lezer/generator": "^1.1.0",
     "mocha": "^9.2.2",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",

packages/codemirror-lang-graphql/src/index.js

@@ -7,7 +7,7 @@ import {
   foldInside,
   delimitedIndent,
 } from "@codemirror/language"
-import { styleTags, tags as t } from "@codemirror/highlight"
+import { styleTags, tags as t } from "@lezer/highlight"
 
 export const GQLLanguage = LRLanguage.define({
   parser: parser.configure({

packages/hoppscotch-app/.env.example

@@ -1,22 +1,26 @@
 # Google Analytics ID
-GA_ID=UA-61422507-4
+VITE_GA_ID=UA-61422507-4
 
 # Google Tag Manager ID
-GTM_ID=GTM-NMKVBMV
+VITE_GTM_ID=GTM-NMKVBMV
 
 # Firebase config
-API_KEY=AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM
-AUTH_DOMAIN=postwoman-api.firebaseapp.com
-DATABASE_URL=https://postwoman-api.firebaseio.com
-PROJECT_ID=postwoman-api
-STORAGE_BUCKET=postwoman-api.appspot.com
-MESSAGING_SENDER_ID=421993993223
-APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
-MEASUREMENT_ID=G-BBJ3R80PJT
+VITE_API_KEY=AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM
+VITE_AUTH_DOMAIN=postwoman-api.firebaseapp.com
+VITE_DATABASE_URL=https://postwoman-api.firebaseio.com
+VITE_PROJECT_ID=postwoman-api
+VITE_STORAGE_BUCKET=postwoman-api.appspot.com
+VITE_MESSAGING_SENDER_ID=421993993223
+VITE_APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
+VITE_MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
-BASE_URL=https://hoppscotch.io
+VITE_BASE_URL=https://hoppscotch.io
 
 # Backend URLs
-BACKEND_GQL_URL=https://api.hoppscotch.io/graphql
-BACKEND_WS_URL=wss://api.hoppscotch.io/graphql
+VITE_BACKEND_GQL_URL=https://api.hoppscotch.io/graphql
+VITE_BACKEND_WS_URL=wss://api.hoppscotch.io/graphql
+
+# Sentry (Optional)
+# VITE_SENTRY_DSN: <Sentry DSN here>
+# VITE_SENTRY_ENVIRONMENT: <Sentry environment value here>

packages/hoppscotch-app/.eslintrc.js

@@ -1,3 +1,6 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
 module.exports = {
   root: true,
   env: {
@@ -10,25 +13,31 @@ module.exports = {
     requireConfigFile: false,
   },
   extends: [
-    "@nuxtjs",
-    "@nuxtjs/eslint-config-typescript",
-    "prettier/prettier",
-    "eslint:recommended",
-    "plugin:vue/recommended",
+    "@vue/typescript/recommended",
+    "plugin:vue/vue3-recommended",
     "plugin:prettier/recommended",
-    "plugin:nuxt/recommended",
   ],
-  ignorePatterns: ["helpers/backend/graphql.ts"],
-  plugins: ["vue", "nuxt", "prettier"],
+  ignorePatterns: [
+    "static/**/*",
+    "./helpers/backend/graphql.ts",
+    "**/*.d.ts",
+    "types/**/*",
+  ],
+  plugins: ["vue", "prettier"],
   // add your custom rules here
   rules: {
     semi: [2, "never"],
     "import/named": "off", // because, named import issue with typescript see: https://github.com/typescript-eslint/typescript-eslint/issues/154
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-console": "off",
+    "no-debugger": process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
+    "prettier/prettier":
+      process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
     "vue/multi-word-component-names": "off",
+    "vue/no-side-effects-in-computed-properties": "off",
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "import/default": "off",
     "no-undef": "off",
     // localStorage block
@@ -50,7 +59,4 @@ module.exports = {
       },
     ],
   },
-  globals: {
-    $nuxt: true,
-  },
 }