From bfe3b3a9c3ca495a72818d38c90686b52dcab39f Mon Sep 17 00:00:00 2001
From: Palak Chopra <72378463+ipalakchopra@users.noreply.github.com>
Date: Mon, 23 Sep 2024 17:01:14 +0530
Subject: [PATCH] refactor: make global environment a versioned entity (#4216)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
---
 .../src/components/environments/Selector.vue  | 40 ++++----
 .../src/components/environments/index.vue     | 10 +-
 .../components/environments/my/Details.vue    | 60 +++++++-----
 .../src/components/http/TestResult.vue        | 27 +++---
 .../src/helpers/RequestRunner.ts              | 13 ++-
 .../src/newstore/environments.ts              | 71 +++++++++-----
 .../persistence/__tests__/__mocks__/index.ts  |  8 +-
 .../persistence/__tests__/index.spec.ts       |  2 +-
 .../src/services/persistence/index.ts         | 22 ++---
 .../persistence/validation-schemas/index.ts   |  2 -
 .../src/global-environment/index.ts           | 33 +++++++
 .../src/global-environment/v/0.ts             | 25 +++++
 .../src/global-environment/v/1.ts             | 46 +++++++++
 packages/hoppscotch-data/src/index.ts         |  1 +
 packages/hoppscotch-selfhost-web/package.json |  1 +
 .../environments/environments.platform.ts     | 19 +++-
 pnpm-lock.yaml                                | 95 +++++++++++++------
 17 files changed, 337 insertions(+), 138 deletions(-)
 create mode 100644 packages/hoppscotch-data/src/global-environment/index.ts
 create mode 100644 packages/hoppscotch-data/src/global-environment/v/0.ts
 create mode 100644 packages/hoppscotch-data/src/global-environment/v/1.ts

diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
index 8d618dd15..1f859bc08 100644
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/packages/hoppscotch-common/src/components/environments/Selector.vue
@@ -205,7 +205,7 @@
                 </span>
               </div>
               <div
-                v-for="(variable, index) in globalEnvs"
+                v-for="(variable, index) in globalEnvs.variables"
                 :key="index"
                 class="flex flex-1 space-x-4"
               >
@@ -219,7 +219,10 @@
                   </template>
                 </span>
               </div>
-              <div v-if="globalEnvs.length === 0" class="text-secondaryLight">
+              <div
+                v-if="globalEnvs.variables.length === 0"
+                class="text-secondaryLight"
+              >
                 {{ t("environment.empty_variables") }}
               </div>
             </div>
@@ -292,37 +295,36 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue"
-import IconCheck from "~icons/lucide/check"
-import IconLayers from "~icons/lucide/layers"
-import IconEye from "~icons/lucide/eye"
-import IconEdit from "~icons/lucide/edit"
-import IconGlobe from "~icons/lucide/globe"
+import { useColorMode } from "@composables/theming"
+import { Environment, GlobalEnvironment } from "@hoppscotch/data"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
-import { GQLError } from "~/helpers/backend/GQLClient"
 import { useReadonlyStream, useStream } from "~/composables/stream"
+import { invokeAction } from "~/helpers/actions"
+import { GQLError } from "~/helpers/backend/GQLClient"
+import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
+import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
+import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import {
   environments$,
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
-import { useColorMode } from "@composables/theming"
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { invokeAction } from "~/helpers/actions"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { Environment } from "@hoppscotch/data"
-import { onMounted } from "vue"
 import { useLocalState } from "~/newstore/localstate"
-import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
-import { useService } from "dioc/vue"
 import { WorkspaceService } from "~/services/workspace.service"
 import {
   sortPersonalEnvironmentsAlphabetically,
   sortTeamEnvironmentsAlphabetically,
 } from "~/helpers/utils/sortEnvironmentsAlphabetically"
+import IconCheck from "~icons/lucide/check"
+import IconEdit from "~icons/lucide/edit"
+import IconEye from "~icons/lucide/eye"
+import IconGlobe from "~icons/lucide/globe"
+import IconLayers from "~icons/lucide/layers"
 
 type Scope =
   | {
@@ -600,7 +602,7 @@ const getErrorMessage = (err: GQLError<string>) => {
   }
 }
 
-const globalEnvs = useReadonlyStream(globalEnv$, [])
+const globalEnvs = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 const environmentVariables = computed(() => {
   if (selectedEnv.value.variables) {
diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
index 6fe8b1572..431bbafce 100644
--- a/packages/hoppscotch-common/src/components/environments/index.vue
+++ b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { useReadonlyStream, useStream } from "@composables/stream"
-import { Environment } from "@hoppscotch/data"
+import { Environment, GlobalEnvironment } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
@@ -86,13 +86,13 @@ const environmentType = ref<EnvironmentsChooseType>({
   selectedTeam: undefined,
 })
 
-const globalEnv = useReadonlyStream(globalEnv$, [])
+const globalEnv = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
-const globalEnvironment = computed(() => ({
+const globalEnvironment = computed<GlobalEnvironment>(() => ({
   v: 1 as const,
   id: "Global",
   name: "Global",
-  variables: globalEnv.value,
+  variables: globalEnv.value.variables,
 }))
 
 const isPersonalEnvironmentType = computed(
@@ -252,7 +252,7 @@ defineActionHandler("modals.environment.delete-selected", () => {
 
 const additionalVars = ref<Environment["variables"]>([])
 
-const envVars = () => [...globalEnv.value, ...additionalVars.value]
+const envVars = () => [...globalEnv.value.variables, ...additionalVars.value]
 
 defineActionHandler(
   "modals.global.environment.update",
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 36276b78f..09ec87098 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -133,21 +133,27 @@
 </template>
 
 <script setup lang="ts">
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconDone from "~icons/lucide/check"
-import IconPlus from "~icons/lucide/plus"
-import IconTrash from "~icons/lucide/trash"
-import IconHelpCircle from "~icons/lucide/help-circle"
-import { ComputedRef, computed, ref, watch } from "vue"
-import * as E from "fp-ts/Either"
-import * as A from "fp-ts/Array"
-import * as O from "fp-ts/Option"
-import { pipe, flow } from "fp-ts/function"
-import { Environment, parseTemplateStringE } from "@hoppscotch/data"
+import { useI18n } from "@composables/i18n"
+import { useReadonlyStream } from "@composables/stream"
+import { useColorMode } from "@composables/theming"
+import { useToast } from "@composables/toast"
+import {
+  Environment,
+  GlobalEnvironment,
+  parseTemplateStringE,
+} from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
+import { useService } from "dioc/vue"
+import * as A from "fp-ts/Array"
+import * as E from "fp-ts/Either"
+import * as O from "fp-ts/Option"
+import { flow, pipe } from "fp-ts/function"
+import { ComputedRef, computed, ref, watch } from "vue"
+import { uniqueID } from "~/helpers/utils/uniqueID"
 import {
   createEnvironment,
   environments$,
+  environmentsStore,
   getEnvironment,
   getGlobalVariables,
   globalEnv$,
@@ -155,15 +161,13 @@ import {
   setSelectedEnvironmentIndex,
   updateEnvironment,
 } from "~/newstore/environments"
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
-import { useReadonlyStream } from "@composables/stream"
-import { useColorMode } from "@composables/theming"
-import { environmentsStore } from "~/newstore/environments"
 import { platform } from "~/platform"
-import { useService } from "dioc/vue"
 import { SecretEnvironmentService } from "~/services/secret-environment.service"
-import { uniqueID } from "~/helpers/utils/uniqueID"
+import IconDone from "~icons/lucide/check"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconPlus from "~icons/lucide/plus"
+import IconTrash from "~icons/lucide/trash"
+import IconTrash2 from "~icons/lucide/trash-2"
 
 type EnvironmentVariable = {
   id: number
@@ -257,7 +261,7 @@ const clearIcon = refAutoReset<typeof IconTrash2 | typeof IconDone>(
   1000
 )
 
-const globalVars = useReadonlyStream(globalEnv$, [])
+const globalVars = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 type SelectedEnv = "variables" | "secret"
 
@@ -315,10 +319,20 @@ const liveEnvs = computed(() => {
   }
   return [
     ...vars.value.map((x) => ({ ...x.env, source: editingName.value! })),
-    ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
+    ...globalVars.value.variables.map((x) => ({ ...x, source: "Global" })),
   ]
 })
 
+const workingEnvID = computed(() => {
+  const activeEnv = workingEnv.value
+
+  if (activeEnv && "id" in activeEnv) {
+    return activeEnv.id
+  }
+
+  return uniqueID()
+})
+
 watch(
   () => props.show,
   (show) => {
@@ -329,7 +343,7 @@ watch(
         : "variables"
 
       if (props.editingEnvironmentIndex !== "Global") {
-        editingID.value = workingEnv.value?.id || uniqueID()
+        editingID.value = workingEnvID.value
       }
       vars.value = pipe(
         workingEnv.value?.variables ?? [],
@@ -341,7 +355,7 @@ watch(
               ? secretEnvironmentService.getSecretEnvironmentVariable(
                   props.editingEnvironmentIndex === "Global"
                     ? "Global"
-                    : workingEnv.value?.id,
+                    : workingEnvID.value,
                   index
                 )?.value ?? ""
               : e.value,
@@ -448,7 +462,7 @@ const saveEnvironment = () => {
     })
   } else if (props.editingEnvironmentIndex === "Global") {
     // Editing the Global environment
-    setGlobalEnvVariables(environmentUpdated.variables)
+    setGlobalEnvVariables(environmentUpdated)
     toast.success(`${t("environment.updated")}`)
   } else if (props.editingEnvironmentIndex !== null) {
     const envID =
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index 2d5aaa2a6..3f7fc5312 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -204,27 +204,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref, ref } from "vue"
-import { isEqual } from "lodash-es"
-import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
+import { useReadonlyStream, useStream } from "@composables/stream"
+import { isEqual } from "lodash-es"
+import { computed, ref } from "vue"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 import {
   globalEnv$,
   selectedEnvironmentIndex$,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
-import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 
-import IconTrash2 from "~icons/lucide/trash-2"
-import IconExternalLink from "~icons/lucide/external-link"
 import IconCheck from "~icons/lucide/check"
+import IconExternalLink from "~icons/lucide/external-link"
+import IconTrash2 from "~icons/lucide/trash-2"
 import IconClose from "~icons/lucide/x"
 
-import { useColorMode } from "~/composables/theming"
+import { GlobalEnvironment } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
-import { WorkspaceService } from "~/services/workspace.service"
+import { useColorMode } from "~/composables/theming"
 import { invokeAction } from "~/helpers/actions"
+import { WorkspaceService } from "~/services/workspace.service"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -282,12 +283,7 @@ const selectedEnvironmentIndex = useStream(
   setSelectedEnvironmentIndex
 )
 
-const globalEnvVars = useReadonlyStream(globalEnv$, []) as Ref<
-  Array<{
-    key: string
-    value: string
-  }>
->
+const globalEnvVars = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
 
 const noEnvSelected = computed(
   () => selectedEnvironmentIndex.value.type === "NO_ENV_SELECTED"
@@ -297,7 +293,8 @@ const globalHasAdditions = computed(() => {
   if (!testResults.value?.envDiff.selected.additions) return false
   return (
     testResults.value.envDiff.selected.additions.every(
-      (x) => globalEnvVars.value.findIndex((y) => isEqual(x, y)) !== -1
+      (x) =>
+        globalEnvVars.value.variables.findIndex((y) => isEqual(x, y)) !== -1
     ) ?? false
   )
 })
diff --git a/packages/hoppscotch-common/src/helpers/RequestRunner.ts b/packages/hoppscotch-common/src/helpers/RequestRunner.ts
index 6ac2ac8d7..42bda7523 100644
--- a/packages/hoppscotch-common/src/helpers/RequestRunner.ts
+++ b/packages/hoppscotch-common/src/helpers/RequestRunner.ts
@@ -303,12 +303,15 @@ export function runRESTRequest$(
             tab.value.document.testResults =
               translateToSandboxTestResults(updatedRunResult)
 
-            setGlobalEnvVariables(
-              updateEnvironmentsWithSecret(
-                runResult.right.envs.global,
-                "global"
-              )
+            const globalEnvVariables = updateEnvironmentsWithSecret(
+              runResult.right.envs.global,
+              "global"
             )
+
+            setGlobalEnvVariables({
+              v: 1,
+              variables: globalEnvVariables,
+            })
             if (
               environmentsStore.value.selectedEnvironmentIndex.type === "MY_ENV"
             ) {
diff --git a/packages/hoppscotch-common/src/newstore/environments.ts b/packages/hoppscotch-common/src/newstore/environments.ts
index 69bd09918..3c04da409 100644
--- a/packages/hoppscotch-common/src/newstore/environments.ts
+++ b/packages/hoppscotch-common/src/newstore/environments.ts
@@ -1,4 +1,8 @@
-import { Environment } from "@hoppscotch/data"
+import {
+  Environment,
+  GlobalEnvironment,
+  GlobalEnvironmentVariable,
+} from "@hoppscotch/data"
 import { cloneDeep, isEqual } from "lodash-es"
 import { combineLatest, Observable } from "rxjs"
 import { distinctUntilChanged, map, pluck } from "rxjs/operators"
@@ -19,6 +23,11 @@ export type SelectedEnvironmentIndex =
       environment: Environment
     }
 
+const defaultGlobalEnvironmentState: GlobalEnvironment = {
+  v: 1,
+  variables: [],
+}
+
 const defaultEnvironmentsState = {
   environments: [
     {
@@ -31,7 +40,7 @@ const defaultEnvironmentsState = {
 
   // as a temp fix for identifying global env when syncing
   globalEnvID: undefined as string | undefined,
-  globals: [] as Environment["variables"],
+  globals: defaultGlobalEnvironmentState,
 
   selectedEnvironmentIndex: {
     type: "NO_ENV_SELECTED",
@@ -277,7 +286,7 @@ const dispatchers = defineDispatchers({
       ),
     }
   },
-  setGlobalVariables(_, { entries }: { entries: Environment["variables"] }) {
+  setGlobalVariables(_, { entries }: { entries: GlobalEnvironment }) {
     return {
       globals: entries,
     }
@@ -285,20 +294,26 @@ const dispatchers = defineDispatchers({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   clearGlobalVariables(_store, {}) {
     return {
-      globals: [],
+      globals: defaultGlobalEnvironmentState,
     }
   },
   addGlobalVariable(
     { globals },
-    { entry }: { entry: Environment["variables"][number] }
+    { entry }: { entry: GlobalEnvironmentVariable }
   ) {
     return {
-      globals: [...globals, entry],
+      globals: {
+        ...globals,
+        variables: [...globals.variables, entry],
+      },
     }
   },
   removeGlobalVariable({ globals }, { envIndex }: { envIndex: number }) {
     return {
-      globals: globals.filter((_, i) => i !== envIndex),
+      globals: {
+        ...globals,
+        variables: globals.variables.filter((_, i) => i !== envIndex),
+      },
     }
   },
   updateGlobalVariable(
@@ -306,10 +321,15 @@ const dispatchers = defineDispatchers({
     {
       envIndex,
       updatedEntry,
-    }: { envIndex: number; updatedEntry: Environment["variables"][number] }
+    }: { envIndex: number; updatedEntry: GlobalEnvironmentVariable }
   ) {
     return {
-      globals: globals.map((x, i) => (i !== envIndex ? x : updatedEntry)),
+      globals: {
+        ...globals,
+        variables: globals.variables.map((x, i) =>
+          i !== envIndex ? x : updatedEntry
+        ),
+      },
     }
   },
   setGlobalEnvID(_, { id }: { id: string }) {
@@ -390,12 +410,19 @@ export const aggregateEnvs$: Observable<AggregateEnvironment[]> = combineLatest(
   map(([selectedEnv, globalVars]) => {
     const results: AggregateEnvironment[] = []
 
-    selectedEnv?.variables.forEach(({ key, value, secret }) =>
+    selectedEnv?.variables.forEach((variable) => {
+      const { key, secret } = variable
+      const value = "value" in variable ? variable.value : ""
+
       results.push({ key, value, secret, sourceEnv: selectedEnv.name })
-    )
-    globalVars.forEach(({ key, value, secret }) =>
+    })
+
+    globalVars.variables.forEach((variable) => {
+      const { key, secret } = variable
+      const value = "value" in variable ? variable.value : ""
+
       results.push({ key, value, secret, sourceEnv: "Global" })
-    )
+    })
 
     return results
   }),
@@ -496,7 +523,7 @@ export const aggregateEnvsWithSecrets$: Observable<AggregateEnvironment[]> =
         })
       })
 
-      globalVars.map((x, index) => {
+      globalVars.variables.map((x, index) => {
         let value
         if (x.secret) {
           value = secretEnvironmentService.getSecretEnvironmentVariableValue(
@@ -568,19 +595,19 @@ export function getLegacyGlobalEnvironment(): Environment | null {
   return el ?? null
 }
 
-export function getGlobalVariables(): Environment["variables"] {
-  return environmentsStore.value.globals.map(
-    (env: Environment["variables"][number]) => {
+export function getGlobalVariables(): GlobalEnvironmentVariable[] {
+  return environmentsStore.value.globals.variables.map(
+    (env: GlobalEnvironmentVariable) => {
       if (env.key && "value" in env && !("secret" in env)) {
         return {
-          ...(env as Environment["variables"][number]),
+          ...(env as GlobalEnvironmentVariable),
           secret: false,
         }
       }
 
       return env
     }
-  ) as Environment["variables"]
+  ) as GlobalEnvironmentVariable[]
 }
 
 export function getGlobalVariableID() {
@@ -595,7 +622,7 @@ export function getLocalIndexByEnvironmentID(id: string) {
   return envIndex !== -1 ? envIndex : null
 }
 
-export function addGlobalEnvVariable(entry: Environment["variables"][number]) {
+export function addGlobalEnvVariable(entry: GlobalEnvironmentVariable) {
   environmentsStore.dispatch({
     dispatcher: "addGlobalVariable",
     payload: {
@@ -604,7 +631,7 @@ export function addGlobalEnvVariable(entry: Environment["variables"][number]) {
   })
 }
 
-export function setGlobalEnvVariables(entries: Environment["variables"]) {
+export function setGlobalEnvVariables(entries: GlobalEnvironment) {
   environmentsStore.dispatch({
     dispatcher: "setGlobalVariables",
     payload: {
@@ -631,7 +658,7 @@ export function removeGlobalEnvVariable(envIndex: number) {
 
 export function updateGlobalEnvVariable(
   envIndex: number,
-  updatedEntry: Environment["variables"][number]
+  updatedEntry: GlobalEnvironmentVariable
 ) {
   environmentsStore.dispatch({
     dispatcher: "updateGlobalVariable",
diff --git a/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts b/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
index 862be967a..a12d80cfb 100644
--- a/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/__tests__/__mocks__/index.ts
@@ -1,5 +1,6 @@
 import {
   Environment,
+  GlobalEnvironment,
   HoppCollection,
   RESTReqSchemaVersion,
 } from "@hoppscotch/data"
@@ -115,9 +116,10 @@ export const MQTT_REQUEST_MOCK = {
   clientID: "hoppscotch",
 }
 
-export const GLOBAL_ENV_MOCK: Environment["variables"] = [
-  { key: "test-key", value: "test-value", secret: false },
-]
+export const GLOBAL_ENV_MOCK: GlobalEnvironment = {
+  v: 1,
+  variables: [{ key: "test-key", value: "test-value", secret: false }],
+}
 
 export const VUEX_DATA_MOCK: VUEX_DATA = {
   postwoman: {
diff --git a/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts b/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
index 8fdf0c7e1..94261775e 100644
--- a/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
+++ b/packages/hoppscotch-common/src/services/persistence/__tests__/index.spec.ts
@@ -1469,9 +1469,9 @@ describe("PersistenceService", () => {
         // Invalid shape for `globalEnv`
         const globalEnv = [
           {
-            ...GLOBAL_ENV_MOCK[0],
             // `key` -> `string`
             key: 1,
+            value: "test-value",
           },
         ]
 
diff --git a/packages/hoppscotch-common/src/services/persistence/index.ts b/packages/hoppscotch-common/src/services/persistence/index.ts
index 1be2e08e3..dc8832849 100644
--- a/packages/hoppscotch-common/src/services/persistence/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/index.ts
@@ -2,6 +2,8 @@
 
 import {
   Environment,
+  GlobalEnvironment,
+  GlobalEnvironmentVariable,
   translateToNewGQLCollection,
   translateToNewRESTCollection,
 } from "@hoppscotch/data"
@@ -51,9 +53,9 @@ import {
   performSettingsDataMigrations,
   settingsStore,
 } from "../../newstore/settings"
+import { SecretEnvironmentService } from "../secret-environment.service"
 import {
   ENVIRONMENTS_SCHEMA,
-  GLOBAL_ENV_SCHEMA,
   GQL_COLLECTION_SCHEMA,
   GQL_HISTORY_ENTRY_SCHEMA,
   GQL_TAB_STATE_SCHEMA,
@@ -63,16 +65,15 @@ import {
   REST_COLLECTION_SCHEMA,
   REST_HISTORY_ENTRY_SCHEMA,
   REST_TAB_STATE_SCHEMA,
+  SECRET_ENVIRONMENT_VARIABLE_SCHEMA,
   SELECTED_ENV_INDEX_SCHEMA,
   SETTINGS_SCHEMA,
   SOCKET_IO_REQUEST_SCHEMA,
   SSE_REQUEST_SCHEMA,
-  SECRET_ENVIRONMENT_VARIABLE_SCHEMA,
   THEME_COLOR_SCHEMA,
   VUEX_SCHEMA,
   WEBSOCKET_REQUEST_SCHEMA,
 } from "./validation-schemas"
-import { SecretEnvironmentService } from "../secret-environment.service"
 
 /**
  * This service compiles persistence logic across the codebase
@@ -421,9 +422,8 @@ export class PersistenceService extends Service {
 
     if (globalIndex !== -1) {
       const globalEnv = environmentsData[globalIndex]
-      globalEnv.variables.forEach(
-        (variable: Environment["variables"][number]) =>
-          addGlobalEnvVariable(variable)
+      globalEnv.variables.forEach((variable: GlobalEnvironmentVariable) =>
+        addGlobalEnvVariable(variable)
       )
 
       // Remove global from environments
@@ -627,14 +627,14 @@ export class PersistenceService extends Service {
 
   private setupGlobalEnvsPersistence() {
     const globalEnvKey = "globalEnv"
-    let globalEnvData: z.infer<typeof GLOBAL_ENV_SCHEMA> = JSON.parse(
+    let globalEnvData: GlobalEnvironment = JSON.parse(
       window.localStorage.getItem(globalEnvKey) || "[]"
     )
 
     // Validate data read from localStorage
-    const result = GLOBAL_ENV_SCHEMA.safeParse(globalEnvData)
-    if (result.success) {
-      globalEnvData = result.data
+    const result = GlobalEnvironment.safeParse(globalEnvData)
+    if (result.type === "ok") {
+      globalEnvData = result.value
     } else {
       this.showErrorToast(globalEnvKey)
       window.localStorage.setItem(
@@ -643,7 +643,7 @@ export class PersistenceService extends Service {
       )
     }
 
-    setGlobalEnvVariables(globalEnvData as Environment["variables"])
+    setGlobalEnvVariables(globalEnvData)
 
     globalEnv$.subscribe((vars) => {
       window.localStorage.setItem(globalEnvKey, JSON.stringify(vars))
diff --git a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
index fca7b31c4..04684eb93 100644
--- a/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
+++ b/packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts
@@ -249,8 +249,6 @@ const EnvironmentVariablesSchema = z.union([
   }),
 ])
 
-export const GLOBAL_ENV_SCHEMA = z.array(EnvironmentVariablesSchema)
-
 const OperationTypeSchema = z.enum([
   "subscription",
   "query",
diff --git a/packages/hoppscotch-data/src/global-environment/index.ts b/packages/hoppscotch-data/src/global-environment/index.ts
new file mode 100644
index 000000000..ef1019174
--- /dev/null
+++ b/packages/hoppscotch-data/src/global-environment/index.ts
@@ -0,0 +1,33 @@
+import { InferredEntity, createVersionedEntity } from "verzod"
+
+import { z } from "zod"
+
+import V0_VERSION from "./v/0"
+import V1_VERSION from "./v/1"
+
+const versionedObject = z.object({
+  v: z.number(),
+})
+
+export const GlobalEnvironment = createVersionedEntity({
+  latestVersion: 1,
+  versionMap: {
+    0: V0_VERSION,
+    1: V1_VERSION,
+  },
+  getVersion(data) {
+    const versionCheck = versionedObject.safeParse(data)
+
+    if (versionCheck.success) return versionCheck.data.v
+
+    // For V0 we have to check the schema
+    const result = V0_VERSION.schema.safeParse(data)
+    return result.success ? 0 : null
+  },
+})
+
+export type GlobalEnvironment = InferredEntity<typeof GlobalEnvironment>
+
+export type GlobalEnvironmentVariable = InferredEntity<
+  typeof GlobalEnvironment
+>["variables"][number]
diff --git a/packages/hoppscotch-data/src/global-environment/v/0.ts b/packages/hoppscotch-data/src/global-environment/v/0.ts
new file mode 100644
index 000000000..3b8d3f8ff
--- /dev/null
+++ b/packages/hoppscotch-data/src/global-environment/v/0.ts
@@ -0,0 +1,25 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+
+export const V0_SCHEMA = z.array(
+  z.union([
+    z.object({
+      key: z.string(),
+      value: z.string(),
+      secret: z.literal(false),
+    }),
+    z.object({
+      key: z.string(),
+      secret: z.literal(true),
+    }),
+    z.object({
+      key: z.string(),
+      value: z.string(),
+    }),
+  ])
+)
+
+export default defineVersion({
+  initial: true,
+  schema: V0_SCHEMA,
+})
diff --git a/packages/hoppscotch-data/src/global-environment/v/1.ts b/packages/hoppscotch-data/src/global-environment/v/1.ts
new file mode 100644
index 000000000..19c0ed943
--- /dev/null
+++ b/packages/hoppscotch-data/src/global-environment/v/1.ts
@@ -0,0 +1,46 @@
+import { z } from "zod"
+import { defineVersion } from "verzod"
+import { V0_SCHEMA } from "./0"
+
+export const V1_SCHEMA = z.object({
+  v: z.literal(1),
+  variables: z.array(
+    z.union([
+      z.object({
+        key: z.string(),
+        secret: z.literal(true),
+      }),
+      z.object({
+        key: z.string(),
+        value: z.string(),
+        secret: z.literal(false),
+      }),
+    ])
+  ),
+})
+
+export default defineVersion({
+  initial: false,
+  schema: V1_SCHEMA,
+  up(old: z.infer<typeof V0_SCHEMA>) {
+    const variables = old.map((variable) => {
+      if ("value" in variable) {
+        return {
+          key: variable.key,
+          value: variable.value,
+          secret: false,
+        }
+      }
+
+      return {
+        key: variable.key,
+        secret: true,
+      }
+    })
+
+    return <z.infer<typeof V1_SCHEMA>>{
+      v: 1,
+      variables,
+    }
+  },
+})
diff --git a/packages/hoppscotch-data/src/index.ts b/packages/hoppscotch-data/src/index.ts
index 929e8fc7c..c37534c05 100644
--- a/packages/hoppscotch-data/src/index.ts
+++ b/packages/hoppscotch-data/src/index.ts
@@ -3,3 +3,4 @@ export * from "./graphql"
 export * from "./collection"
 export * from "./rawKeyValue"
 export * from "./environment"
+export * from "./global-environment"
diff --git a/packages/hoppscotch-selfhost-web/package.json b/packages/hoppscotch-selfhost-web/package.json
index 668259fea..a8394cb94 100644
--- a/packages/hoppscotch-selfhost-web/package.json
+++ b/packages/hoppscotch-selfhost-web/package.json
@@ -37,6 +37,7 @@
     "rxjs": "7.8.1",
     "stream-browserify": "3.0.0",
     "util": "0.12.5",
+    "verzod": "0.2.2",
     "vue": "3.3.9",
     "workbox-window": "7.0.0",
     "zod": "3.22.4"
diff --git a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
index a348f10ed..75ba0e59a 100644
--- a/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
+++ b/packages/hoppscotch-selfhost-web/src/platform/environments/environments.platform.ts
@@ -1,4 +1,6 @@
-import { authEvents$, def as platformAuth } from "@platform/auth/auth.platform"
+import * as E from "fp-ts/Either"
+import { entityReference } from "verzod"
+
 import {
   createEnvironment,
   deleteEnvironment,
@@ -9,13 +11,14 @@ import {
   setGlobalEnvVariables,
   updateEnvironment,
 } from "@hoppscotch/common/newstore/environments"
+import { authEvents$, def as platformAuth } from "@platform/auth/auth.platform"
 
-import { EnvironmentsPlatformDef } from "@hoppscotch/common/src/platform/environments"
 import { runGQLSubscription } from "@hoppscotch/common/helpers/backend/GQLClient"
+import { EnvironmentsPlatformDef } from "@hoppscotch/common/src/platform/environments"
 
 import { environnmentsSyncer } from "@platform/environments/environments.sync"
 
-import * as E from "fp-ts/Either"
+import { GlobalEnvironment } from "@hoppscotch/data"
 import { runDispatchWithOutSyncing } from "@lib/sync"
 import {
   createUserGlobalEnvironment,
@@ -99,8 +102,16 @@ async function loadGlobalEnvironments() {
     const globalEnv = res.right.me.globalEnvironments
 
     if (globalEnv) {
+      const globalEnvVariableEntries = JSON.parse(globalEnv.variables)
+
+      const result = entityReference(GlobalEnvironment).safeParse(
+        globalEnvVariableEntries
+      )
+
       runDispatchWithOutSyncing(() => {
-        setGlobalEnvVariables(JSON.parse(globalEnv.variables))
+        setGlobalEnvVariables(
+          result.success ? result.data : globalEnvVariableEntries
+        )
         setGlobalEnvID(globalEnv.id)
       })
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af21abc94..476503e2e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -380,7 +380,7 @@ importers:
         version: 3.2.5
       tsup:
         specifier: 8.0.2
-        version: 8.0.2(@swc/core@1.4.2)(postcss@8.4.40)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))(typescript@5.3.3)
+        version: 8.0.2(@swc/core@1.4.2)(postcss@8.4.32)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))(typescript@5.3.3)
       typescript:
         specifier: 5.3.3
         version: 5.3.3
@@ -789,7 +789,7 @@ importers:
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
       vite-plugin-checker:
         specifier: 0.6.2
-        version: 0.6.2(eslint@8.57.0)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2))
+        version: 0.6.2(eslint@8.57.0)(meow@8.1.2)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2))
       vite-plugin-fonts:
         specifier: 0.7.0
         version: 0.7.0(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -908,7 +908,7 @@ importers:
         version: 2.8.4
       ts-jest:
         specifier: 27.1.5
-        version: 27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5)
+        version: 27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5)
       typescript:
         specifier: 4.9.5
         version: 4.9.5
@@ -1092,7 +1092,7 @@ importers:
         version: 0.14.9(@vue/compiler-sfc@3.3.10)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.21.0
-        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vite:
         specifier: 4.5.0
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
@@ -1101,7 +1101,7 @@ importers:
         version: 1.0.11(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-inspect:
         specifier: 0.7.38
-        version: 0.7.38(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+        version: 0.7.38(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-pages:
         specifier: 0.26.0
         version: 0.26.0(@vue/compiler-sfc@3.3.10)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -1165,6 +1165,9 @@ importers:
       util:
         specifier: 0.12.5
         version: 0.12.5
+      verzod:
+        specifier: 0.2.2
+        version: 0.2.2(zod@3.22.4)
       vue:
         specifier: 3.3.9
         version: 3.3.9(typescript@5.3.2)
@@ -1261,7 +1264,7 @@ importers:
         version: 0.17.4(@vue/compiler-sfc@3.3.10)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.25.2
-        version: 0.25.2(@babel/parser@7.24.5)(rollup@4.17.2)(vue@3.3.9(typescript@5.3.2))
+        version: 0.25.2(@babel/parser@7.24.5)(rollup@3.29.4)(vue@3.3.9(typescript@5.3.2))
       vite:
         specifier: 4.5.0
         version: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
@@ -1273,7 +1276,7 @@ importers:
         version: 1.0.11(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-inspect:
         specifier: 0.7.42
-        version: 0.7.42(rollup@4.17.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
+        version: 0.7.42(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
       vite-plugin-pages:
         specifier: 0.31.0
         version: 0.31.0(@vue/compiler-sfc@3.3.10)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))
@@ -1315,7 +1318,7 @@ importers:
         version: 0.1.0(vue@3.3.9(typescript@4.9.3))
       '@intlify/unplugin-vue-i18n':
         specifier: 1.2.0
-        version: 1.2.0(rollup@2.79.1)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
+        version: 1.2.0(rollup@3.29.4)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
       '@types/cors':
         specifier: 2.8.13
         version: 2.8.13
@@ -1381,7 +1384,7 @@ importers:
         version: 0.14.9(@vue/compiler-sfc@3.2.45)(vue-template-compiler@2.7.16)
       unplugin-vue-components:
         specifier: 0.21.0
-        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+        version: 0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue:
         specifier: 3.3.9
         version: 3.3.9(typescript@4.9.3)
@@ -15971,11 +15974,11 @@ snapshots:
 
   '@intlify/shared@9.8.0': {}
 
-  '@intlify/unplugin-vue-i18n@1.2.0(rollup@2.79.1)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))':
+  '@intlify/unplugin-vue-i18n@1.2.0(rollup@3.29.4)(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))':
     dependencies:
       '@intlify/bundle-utils': 7.5.1(vue-i18n@9.2.2(vue@3.3.9(typescript@4.9.3)))
       '@intlify/shared': 9.13.1
-      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@vue/compiler-sfc': 3.3.10
       debug: 4.3.4(supports-color@9.4.0)
       fast-glob: 3.3.2
@@ -24512,12 +24515,12 @@ snapshots:
       postcss: 8.4.32
       ts-node: 10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.2)
 
-  postcss-load-config@4.0.2(postcss@8.4.40)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3)):
+  postcss-load-config@4.0.2(postcss@8.4.32)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.2
     optionalDependencies:
-      postcss: 8.4.40
+      postcss: 8.4.32
       ts-node: 10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3)
 
   postcss-merge-longhand@7.0.2(postcss@8.4.40):
@@ -26142,7 +26145,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5):
+  ts-jest@27.1.5(@babel/core@7.24.5)(@types/jest@27.5.2)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.7.0(@types/node@17.0.45)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@17.0.45)(typescript@4.9.5)))(typescript@4.9.5):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
@@ -26157,6 +26160,7 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.24.5
       '@types/jest': 27.5.2
+      babel-jest: 29.7.0(@babel/core@7.24.5)
 
   ts-jest@29.0.5(@babel/core@7.24.5)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.5))(jest@29.4.1(@types/node@18.11.10)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.11.10)(typescript@4.9.3)))(typescript@4.9.3):
     dependencies:
@@ -26362,7 +26366,7 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tsup@8.0.2(@swc/core@1.4.2)(postcss@8.4.40)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))(typescript@5.3.3):
+  tsup@8.0.2(@swc/core@1.4.2)(postcss@8.4.32)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))(typescript@5.3.3):
     dependencies:
       bundle-require: 4.1.0(esbuild@0.19.12)
       cac: 6.7.14
@@ -26372,7 +26376,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 4.0.2(postcss@8.4.40)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))
+      postcss-load-config: 4.0.2(postcss@8.4.32)(ts-node@10.9.1(@swc/core@1.4.2)(@types/node@18.18.8)(typescript@5.3.3))
       resolve-from: 5.0.0
       rollup: 4.17.2
       source-map: 0.8.0-beta.0
@@ -26380,7 +26384,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.4.2
-      postcss: 8.4.40
+      postcss: 8.4.32
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
@@ -26601,7 +26605,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(vue@3.3.9(typescript@4.9.3))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       '@antfu/utils': 0.5.2
       '@rollup/pluginutils': 4.2.1
@@ -26612,7 +26616,7 @@ snapshots:
       magic-string: 0.26.7
       minimatch: 5.1.6
       resolve: 1.22.8
-      unplugin: 0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+      unplugin: 0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue: 3.3.9(typescript@4.9.3)
     optionalDependencies:
       '@babel/parser': 7.24.5
@@ -26623,7 +26627,7 @@ snapshots:
       - vite
       - webpack
 
-  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin-vue-components@0.21.0(@babel/parser@7.24.5)(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue@3.3.9(typescript@4.9.5))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       '@antfu/utils': 0.5.2
       '@rollup/pluginutils': 4.2.1
@@ -26634,7 +26638,7 @@ snapshots:
       magic-string: 0.26.7
       minimatch: 5.1.6
       resolve: 1.22.8
-      unplugin: 0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
+      unplugin: 0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2))
       vue: 3.3.9(typescript@4.9.5)
     optionalDependencies:
       '@babel/parser': 7.24.5
@@ -26645,6 +26649,25 @@ snapshots:
       - vite
       - webpack
 
+  unplugin-vue-components@0.25.2(@babel/parser@7.24.5)(rollup@3.29.4)(vue@3.3.9(typescript@5.3.2)):
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      chokidar: 3.6.0
+      debug: 4.3.4(supports-color@9.4.0)
+      fast-glob: 3.3.2
+      local-pkg: 0.4.3
+      magic-string: 0.30.10
+      minimatch: 9.0.4
+      resolve: 1.22.8
+      unplugin: 1.10.1
+      vue: 3.3.9(typescript@5.3.2)
+    optionalDependencies:
+      '@babel/parser': 7.24.5
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
   unplugin-vue-components@0.25.2(@babel/parser@7.24.5)(rollup@4.17.2)(vue@3.3.9(typescript@5.3.2)):
     dependencies:
       '@antfu/utils': 0.7.7
@@ -26664,7 +26687,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin@0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin@0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       acorn: 8.11.3
       chokidar: 3.6.0
@@ -26672,11 +26695,11 @@ snapshots:
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       esbuild: 0.20.2
-      rollup: 2.79.1
+      rollup: 3.29.4
       vite: 3.2.4(@types/node@18.18.8)(sass@1.58.0)(terser@5.31.0)
       webpack: 5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)
 
-  unplugin@0.7.2(esbuild@0.20.2)(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
+  unplugin@0.7.2(esbuild@0.20.2)(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(webpack@5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)):
     dependencies:
       acorn: 8.11.3
       chokidar: 3.6.0
@@ -26684,7 +26707,7 @@ snapshots:
       webpack-virtual-modules: 0.4.6
     optionalDependencies:
       esbuild: 0.20.2
-      rollup: 2.79.1
+      rollup: 3.29.4
       vite: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
       webpack: 5.91.0(@swc/core@1.4.2)(esbuild@0.20.2)
 
@@ -26829,7 +26852,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.6.2(eslint@8.57.0)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2)):
+  vite-plugin-checker@0.6.2(eslint@8.57.0)(meow@8.1.2)(optionator@0.9.4)(typescript@5.3.2)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0))(vue-tsc@1.8.24(typescript@5.3.2)):
     dependencies:
       '@babel/code-frame': 7.24.2
       ansi-escapes: 4.3.2
@@ -26851,6 +26874,7 @@ snapshots:
       vscode-uri: 3.0.8
     optionalDependencies:
       eslint: 8.57.0
+      meow: 8.1.2
       optionator: 0.9.4
       typescript: 5.3.2
       vue-tsc: 1.8.24(typescript@5.3.2)
@@ -26896,10 +26920,25 @@ snapshots:
     dependencies:
       vite: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
 
-  vite-plugin-inspect@0.7.38(rollup@2.79.1)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
+  vite-plugin-inspect@0.7.38(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
     dependencies:
       '@antfu/utils': 0.7.7
-      '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      debug: 4.3.4(supports-color@9.4.0)
+      error-stack-parser-es: 0.1.1
+      fs-extra: 11.2.0
+      open: 9.1.0
+      picocolors: 1.0.0
+      sirv: 2.0.4
+      vite: 4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  vite-plugin-inspect@0.7.42(rollup@3.29.4)(vite@4.5.0(@types/node@18.18.8)(sass@1.69.5)(terser@5.31.0)):
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       debug: 4.3.4(supports-color@9.4.0)
       error-stack-parser-es: 0.1.1
       fs-extra: 11.2.0