refactor : migrate components to script setup on ts (#2267)

* refactor: migrate buttons to script setup on ts

* refactor: migrate env components to script setup on ts

* fix: reference sharing when requests are opened from the sidebar

* ci: deploy to prod from actions

* chore: type updation

* chore: update

* refactor: update types

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/button/Primary.vue

@@ -25,7 +25,6 @@
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
-    :type="type"
     role="button"
   >
     <span
@@ -67,79 +66,41 @@
   </SmartLink>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+interface Props {
-
+  to: string
-export default defineComponent({
+  exact: boolean
-  props: {
+  blank: boolean
-    to: {
+  label: string
-      type: String,
+  icon: string
-      default: "",
+  svg: string
-    },
+  color: string
-    exact: {
+  disabled: boolean
-      type: Boolean,
+  loading: boolean
-      default: true,
+  large: boolean
-    },
+  shadow: boolean
-    blank: {
+  reverse: boolean
-      type: Boolean,
+  rounded: boolean
-      default: false,
+  gradient: boolean
-    },
+  outline: boolean
-    label: {
+  shortcut: string[]
-      type: String,
+}
-      default: "",
+withDefaults(defineProps<Props>(), {
-    },
+  to: "",
-    icon: {
+  exact: true,
-      type: String,
+  blank: false,
-      default: "",
+  label: "",
-    },
+  icon: "",
-    svg: {
+  svg: "",
-      type: String,
+  color: "",
-      default: "",
+  disabled: false,
-    },
+  loading: false,
-    color: {
+  large: false,
-      type: String,
+  shadow: false,
-      default: "",
+  reverse: false,
-    },
+  rounded: false,
-    disabled: {
+  gradient: false,
-      type: Boolean,
+  outline: false,
-      default: false,
+  shortcut: () => [],
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    large: {
-      type: Boolean,
-      default: false,
-    },
-    shadow: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-    gradient: {
-      type: Boolean,
-      default: false,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-    shortcut: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: "button",
-    },
-  },
 })
 </script>

packages/hoppscotch-app/components/button/Secondary.vue

@@ -66,71 +66,39 @@
   </SmartLink>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+interface Props {
-
+  to: string
-export default defineComponent({
+  exact: boolean
-  props: {
+  blank: boolean
-    to: {
+  label: string
-      type: String,
+  icon: string
-      default: "",
+  svg: string
-    },
+  color: string
-    exact: {
+  disabled: boolean
-      type: Boolean,
+  loading: boolean
-      default: true,
+  reverse: boolean
-    },
+  rounded: boolean
-    blank: {
+  large: boolean
-      type: Boolean,
+  outline: boolean
-      default: false,
+  shortcut: string[]
-    },
+  filled: boolean
-    label: {
+}
-      type: String,
+withDefaults(defineProps<Props>(), {
-      default: "",
+  to: "",
-    },
+  exact: true,
-    icon: {
+  blank: false,
-      type: String,
+  label: "",
-      default: "",
+  icon: "",
-    },
+  svg: "",
-    svg: {
+  color: "",
-      type: String,
+  disabled: false,
-      default: "",
+  loading: false,
-    },
+  reverse: false,
-    color: {
+  rounded: false,
-      type: String,
+  large: false,
-      default: "",
+  outline: false,
-    },
+  shortcut: () => [],
-    disabled: {
+  filled: false,
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    reverse: {
-      type: Boolean,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-    large: {
-      type: Boolean,
-      default: false,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-    shortcut: {
-      type: Array,
-      default: () => [],
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-  },
 })
 </script>

packages/hoppscotch-app/components/environments/Details.vue

@@ -2,7 +2,7 @@
   <SmartModal
     v-if="show"
     dialog
-    :title="$t(`environment.${action}`)"
+    :title="t(`environment.${action}`)"
     @close="hideModal"
   >
     <template #body>
@@ -20,24 +20,24 @@
             @keyup.enter="saveEnvironment"
           />
           <label for="selectLabelEnvEdit">
-            {{ $t("action.label") }}
+            {{ t("action.label") }}
           </label>
         </div>
         <div class="flex items-center justify-between flex-1">
           <label for="variableList" class="p-4">
-            {{ $t("environment.variable_list") }}
+            {{ t("environment.variable_list") }}
           </label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.clear_all')"
+              :title="t('action.clear_all')"
               :svg="clearIcon"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               svg="plus"
-              :title="$t('add.new')"
+              :title="t('add.new')"
               @click.native="addEnvironmentVariable"
             />
           </div>
@@ -46,7 +46,7 @@
           v-if="evnExpandError"
           class="w-full px-4 py-2 mb-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
         >
-          {{ $t("environment.nested_overflow") }}
+          {{ t("environment.nested_overflow") }}
         </div>
         <div class="border rounded divide-y divide-dividerLight border-divider">
           <div
@@ -57,12 +57,12 @@
             <input
               v-model="variable.key"
               class="flex flex-1 px-4 py-2 bg-transparent"
-              :placeholder="`${$t('count.variable', { count: index + 1 })}`"
+              :placeholder="`${t('count.variable', { count: index + 1 })}`"
               :name="'param' + index"
             />
             <SmartEnvInput
               v-model="variable.value"
-              :placeholder="`${$t('count.value', { count: index + 1 })}`"
+              :placeholder="`${t('count.value', { count: index + 1 })}`"
               :envs="liveEnvs"
               :name="'value' + index"
             />
@@ -70,7 +70,7 @@
               <ButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.remove')"
+                :title="t('action.remove')"
                 svg="trash"
                 color="red"
                 @click.native="removeEnvironmentVariable(index)"
@@ -85,13 +85,13 @@
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
               class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-              :alt="`${$t('empty.environments')}`"
+              :alt="`${t('empty.environments')}`"
             />
             <span class="pb-4 text-center">
-              {{ $t("empty.environments") }}
+              {{ t("empty.environments") }}
             </span>
             <ButtonSecondary
-              :label="`${$t('add.new')}`"
+              :label="`${t('add.new')}`"
               filled
               class="mb-4"
               @click.native="addEnvironmentVariable"
@@ -103,11 +103,11 @@
     <template #footer>
       <span>
         <ButtonPrimary
-          :label="`${$t('action.save')}`"
+          :label="`${t('action.save')}`"
           @click.native="saveEnvironment"
         />
         <ButtonSecondary
-          :label="`${$t('action.cancel')}`"
+          :label="`${t('action.cancel')}`"
           @click.native="hideModal"
         />
       </span>
@@ -115,9 +115,9 @@
   </SmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import clone from "lodash/clone"
-import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
+import { computed, ref, watch } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { Environment, parseTemplateStringE } from "@hoppscotch/data"
 import {
@@ -130,136 +130,144 @@ import {
   setGlobalEnvVariables,
   updateEnvironment,
 } from "~/newstore/environments"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useToast,
+} from "~/helpers/utils/composables"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
-    action: {
-      type: String as PropType<"new" | "edit">,
-      default: "edit",
-    },
-    editingEnvironmentIndex: {
-      type: [Number, String] as PropType<number | "Global" | null>,
-      default: null,
-    },
-    envVars: {
-      type: Function as PropType<() => Environment["variables"]>,
-      default: () => [],
-    },
-  },
-  setup(props) {
-    const globalVars = useReadonlyStream(globalEnv$, [])
 
-    const workingEnv = computed(() => {
+const props = withDefaults(
-      if (props.editingEnvironmentIndex === "Global") {
+  defineProps<{
-        return {
+    show: boolean
-          name: "Global",
+    action: "edit" | "new"
-          variables: getGlobalVariables(),
+    editingEnvironmentIndex: number | "Global" | null
-        } as Environment
+    envVars: () => Environment["variables"]
-      } else if (props.action === "new") {
+  }>(),
-        return {
+  {
-          name: "",
+    show: false,
-          variables: props.envVars(),
+    action: "edit",
-        }
+    editingEnvironmentIndex: null,
-      } else if (props.editingEnvironmentIndex !== null) {
+    envVars: () => [],
-        return getEnviroment(props.editingEnvironmentIndex)
+  }
-      } else {
+)
-        return null
-      }
-    })
 
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const name = ref<string | null>(null)
+const vars = ref([{ key: "", value: "" }])
+const clearIcon = ref("trash-2")
+
+const globalVars = useReadonlyStream(globalEnv$, [])
+
+const workingEnv = computed(() => {
+  if (props.editingEnvironmentIndex === "Global") {
     return {
-      globalVars,
+      name: "Global",
-      workingEnv,
+      variables: getGlobalVariables(),
-      envList: useReadonlyStream(environments$, []) || props.envVars(),
+    } as Environment
-    }
+  } else if (props.action === "new") {
-  },
-  data() {
     return {
-      name: null as string | null,
+      name: "",
-      vars: [] as { key: string; value: string }[],
+      variables: props.envVars(),
-      clearIcon: "trash-2",
     }
-  },
+  } else if (props.editingEnvironmentIndex !== null) {
-  computed: {
+    return getEnviroment(props.editingEnvironmentIndex)
-    evnExpandError(): boolean {
+  } else {
-      for (const variable of this.vars) {
+    return null
-        const result = parseTemplateStringE(variable.value, this.vars)
+  }
-
-        if (E.isLeft(result)) {
-          console.error("error", result.left)
-          return true
-        }
-      }
-      return false
-    },
-    liveEnvs(): Array<{ key: string; value: string; source: string }> {
-      if (this.evnExpandError) {
-        return []
-      }
-
-      if (this.$props.editingEnvironmentIndex === "Global") {
-        return [...this.vars.map((x) => ({ ...x, source: this.name! }))]
-      } else {
-        return [
-          ...this.vars.map((x) => ({ ...x, source: this.name! })),
-          ...this.globalVars.map((x) => ({ ...x, source: "Global" })),
-        ]
-      }
-    },
-  },
-  watch: {
-    show() {
-      this.name = this.workingEnv?.name ?? null
-      this.vars = clone(this.workingEnv?.variables ?? [])
-    },
-  },
-  methods: {
-    clearContent() {
-      this.vars = []
-      this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`)
-      setTimeout(() => (this.clearIcon = "trash-2"), 1000)
-    },
-    addEnvironmentVariable() {
-      this.vars.push({
-        key: "",
-        value: "",
-      })
-    },
-    removeEnvironmentVariable(index: number) {
-      this.vars.splice(index, 1)
-    },
-    saveEnvironment() {
-      if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`)
-        return
-      }
-
-      if (this.action === "new") {
-        createEnvironment(this.name)
-        setCurrentEnvironment(this.envList.length - 1)
-      }
-
-      const environmentUpdated: Environment = {
-        name: this.name,
-        variables: this.vars,
-      }
-
-      if (this.editingEnvironmentIndex === "Global")
-        setGlobalEnvVariables(environmentUpdated.variables)
-      else if (this.action === "new") {
-        updateEnvironment(this.envList.length - 1, environmentUpdated)
-      } else {
-        updateEnvironment(this.editingEnvironmentIndex!, environmentUpdated)
-      }
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
 })
+
+const envList = useReadonlyStream(environments$, []) || props.envVars()
+
+const evnExpandError = computed(() => {
+  for (const variable of vars.value) {
+    const result = parseTemplateStringE(variable.value.toString(), vars.value)
+
+    if (E.isLeft(result)) {
+      console.error("error", result.left)
+      return true
+    }
+  }
+  return false
+})
+
+const liveEnvs = computed(() => {
+  if (evnExpandError) {
+    return []
+  }
+
+  if (props.editingEnvironmentIndex === "Global") {
+    return [...vars.value.map((x) => ({ ...x, source: name.value! }))]
+  } else {
+    return [
+      ...vars.value.map((x) => ({ ...x, source: name.value! })),
+      ...globalVars.value.map((x) => ({ ...x, source: "Global" })),
+    ]
+  }
+})
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      name.value = workingEnv.value?.name ?? null
+      vars.value = clone(workingEnv.value?.variables ?? [])
+    }
+  }
+)
+
+const clearContent = () => {
+  vars.value = []
+  clearIcon.value = "check"
+  toast.success(`${t("state.cleared")}`)
+  setTimeout(() => (clearIcon.value = "trash-2"), 1000)
+}
+
+const addEnvironmentVariable = () => {
+  vars.value.push({
+    key: "",
+    value: "",
+  })
+}
+
+const removeEnvironmentVariable = (index: number) => {
+  vars.value.splice(index, 1)
+}
+
+const saveEnvironment = () => {
+  if (!name.value) {
+    toast.error(`${t("environment.invalid_name")}`)
+    return
+  }
+
+  if (props.action === "new") {
+    createEnvironment(name.value)
+    setCurrentEnvironment(envList.value.length - 1)
+  }
+
+  const environmentUpdated: Environment = {
+    name: name.value,
+    variables: vars.value,
+  }
+
+  if (props.editingEnvironmentIndex === null) return
+  if (props.editingEnvironmentIndex === "Global")
+    setGlobalEnvVariables(environmentUpdated.variables)
+  else if (props.action === "new") {
+    updateEnvironment(envList.value.length - 1, environmentUpdated)
+  } else {
+    updateEnvironment(props.editingEnvironmentIndex!, environmentUpdated)
+  }
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>

packages/hoppscotch-app/components/environments/Environment.vue

@@ -5,13 +5,13 @@
   >
     <span
       class="flex items-center justify-center px-4 cursor-pointer"
-      @click="$emit('edit-environment')"
+      @click="emit('edit-environment')"
     >
       <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
       class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
-      @click="$emit('edit-environment')"
+      @click="emit('edit-environment')"
     >
       <span class="truncate">
         {{ environment.name }}
@@ -29,7 +29,7 @@
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.more')"
+            :title="t('action.more')"
             svg="more-vertical"
           />
         </template>
@@ -48,11 +48,11 @@
           <SmartItem
             ref="edit"
             svg="edit"
-            :label="`${$t('action.edit')}`"
+            :label="`${t('action.edit')}`"
             :shortcut="['E']"
             @click.native="
               () => {
-                $emit('edit-environment')
+                emit('edit-environment')
                 options.tippy().hide()
               }
             "
@@ -60,11 +60,11 @@
           <SmartItem
             ref="duplicate"
             svg="copy"
-            :label="`${$t('action.duplicate')}`"
+            :label="`${t('action.duplicate')}`"
             :shortcut="['D']"
             @click.native="
               () => {
-                duplicateEnvironment()
+                duplicateEnvironments()
                 options.tippy().hide()
               }
             "
@@ -73,7 +73,7 @@
             v-if="!(environmentIndex === 'Global')"
             ref="deleteAction"
             svg="trash-2"
-            :label="`${$t('action.delete')}`"
+            :label="`${t('action.delete')}`"
             :shortcut="['⌫']"
             @click.native="
               () => {
@@ -87,15 +87,17 @@
     </span>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="`${$t('confirm.remove_environment')}`"
+      :title="`${t('confirm.remove_environment')}`"
       @hide-modal="confirmRemove = false"
       @resolve="removeEnvironment"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
+import { Environment } from "@hoppscotch/data"
+import cloneDeep from "lodash/cloneDeep"
 import {
   deleteEnvironment,
   duplicateEnvironment,
@@ -104,47 +106,43 @@ import {
   getGlobalVariables,
   environmentsStore,
 } from "~/newstore/environments"
+import { useI18n, useToast } from "~/helpers/utils/composables"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    environment: { type: Object, default: () => {} },
+
-    environmentIndex: {
+const props = defineProps<{
-      type: [Number, String] as PropType<number | "Global">,
+  environment: Environment
-      default: null,
+  environmentIndex: number | "Global" | null
-    },
+}>()
-  },
+
-  setup() {
+const emit = defineEmits<{
-    return {
+  (e: "edit-environment"): void
-      tippyActions: ref<any | null>(null),
+}>()
-      options: ref<any | null>(null),
+
-      edit: ref<any | null>(null),
+const confirmRemove = ref(false)
-      duplicate: ref<any | null>(null),
+
-      deleteAction: ref<any | null>(null),
+const tippyActions = ref<any | null>(null)
-    }
+const options = ref<any | null>(null)
-  },
+const edit = ref<any | null>(null)
-  data() {
+const duplicate = ref<any | null>(null)
-    return {
+const deleteAction = ref<any | null>(null)
-      confirmRemove: false,
+
-    }
+const removeEnvironment = () => {
-  },
+  if (props.environmentIndex === null) return
-  methods: {
+  if (props.environmentIndex !== "Global")
-    removeEnvironment() {
+    deleteEnvironment(props.environmentIndex)
-      if (this.environmentIndex !== "Global")
+  toast.success(`${t("state.deleted")}`)
-        deleteEnvironment(this.environmentIndex)
+}
-      this.$toast.success(`${this.$t("state.deleted")}`)
+
-    },
+const duplicateEnvironments = () => {
-    duplicateEnvironment() {
+  if (props.environmentIndex === null) return
-      if (this.environmentIndex === "Global") {
+  if (props.environmentIndex === "Global") {
-        createEnvironment(`Global - ${this.$t("action.duplicate")}`)
+    createEnvironment(`Global - ${t("action.duplicate")}`)
-        setEnvironmentVariables(
+    setEnvironmentVariables(
-          environmentsStore.value.environments.length - 1,
+      environmentsStore.value.environments.length - 1,
-          getGlobalVariables().reduce((gVars, gVar) => {
+      cloneDeep(getGlobalVariables())
-            gVars.push({ key: gVar.key, value: gVar.value })
+    )
-            return gVars
+  } else duplicateEnvironment(props.environmentIndex)
-          }, [])
+}
-        )
-      } else duplicateEnvironment(this.environmentIndex)
-    },
-  },
-})
 </script>

packages/hoppscotch-app/components/environments/index.vue

@@ -5,7 +5,7 @@
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
-            :title="`${$t('environment.select')}`"
+            :title="`${t('environment.select')}`"
             class="flex-1 bg-transparent border-b border-dividerLight select-wrapper"
           >
             <ButtonSecondary
@@ -15,20 +15,20 @@
             />
             <ButtonSecondary
               v-else
-              :label="`${$t('environment.select')}`"
+              :label="`${t('environment.select')}`"
               class="flex-1 !justify-start pr-8 rounded-none"
             />
           </span>
         </template>
         <div class="flex flex-col" role="menu">
           <SmartItem
-            :label="`${$t('environment.no_environment')}`"
+            :label="`${t('environment.no_environment')}`"
             :info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
             :active-info-icon="selectedEnvironmentIndex === -1"
             @click.native="
               () => {
                 selectedEnvironmentIndex = -1
-                $refs.options.tippy().hide()
+                options.tippy().hide()
               }
             "
           />
@@ -42,7 +42,7 @@
             @click.native="
               () => {
                 selectedEnvironmentIndex = index
-                $refs.options.tippy().hide()
+                options.tippy().hide()
               }
             "
           />
@@ -51,7 +51,7 @@
       <div class="flex justify-between flex-1 border-b border-dividerLight">
         <ButtonSecondary
           svg="plus"
-          :label="`${$t('action.new')}`"
+          :label="`${t('action.new')}`"
           class="!rounded-none"
           @click.native="displayModalAdd(true)"
         />
@@ -60,13 +60,13 @@
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/features/environments"
             blank
-            :title="$t('app.wiki')"
+            :title="t('app.wiki')"
             svg="help-circle"
           />
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             svg="archive"
-            :title="$t('modal.import_export')"
+            :title="t('modal.import_export')"
             @click.native="displayModalImportExport(true)"
           />
         </div>
@@ -95,13 +95,13 @@
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
         class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-        :alt="`${$t('empty.environments')}`"
+        :alt="`${t('empty.environments')}`"
       />
       <span class="pb-4 text-center">
-        {{ $t("empty.environments") }}
+        {{ t("empty.environments") }}
       </span>
       <ButtonSecondary
-        :label="`${$t('add.new')}`"
+        :label="`${t('add.new')}`"
         filled
         class="mb-4"
         @click.native="displayModalAdd(true)"
@@ -120,9 +120,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api"
+import { computed, ref } from "@nuxtjs/composition-api"
-import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useStream,
+  useI18n,
+} from "~/helpers/utils/composables"
 import {
   environments$,
   setCurrentEnvironment,
@@ -130,55 +134,49 @@ import {
   globalEnv$,
 } from "~/newstore/environments"
 
-export default defineComponent({
+const t = useI18n()
-  setup() {
-    const globalEnv = useReadonlyStream(globalEnv$, [])
 
-    const globalEnvironment = computed(() => ({
+const options = ref<any | null>(null)
-      name: "Global",
-      variables: globalEnv.value,
-    }))
 
-    return {
+const globalEnv = useReadonlyStream(globalEnv$, [])
-      environments: useReadonlyStream(environments$, []),
-      globalEnvironment,
-      selectedEnvironmentIndex: useStream(
-        selectedEnvIndex$,
-        -1,
-        setCurrentEnvironment
-      ),
-    }
-  },
-  data() {
-    return {
-      showModalImportExport: false,
-      showModalDetails: false,
-      action: "edit" as "new" | "edit",
-      editingEnvironmentIndex: undefined as number | "Global" | undefined,
-    }
-  },
-  methods: {
-    displayModalAdd(shouldDisplay: boolean) {
-      this.action = "new"
-      this.showModalDetails = shouldDisplay
-    },
-    displayModalEdit(shouldDisplay: boolean) {
-      this.action = "edit"
-      this.showModalDetails = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+const globalEnvironment = computed(() => ({
-    },
+  name: "Global",
-    displayModalImportExport(shouldDisplay: boolean) {
+  variables: globalEnv.value,
-      this.showModalImportExport = shouldDisplay
+}))
-    },
+
-    editEnvironment(environmentIndex: number | "Global") {
+const environments = useReadonlyStream(environments$, [])
-      this.$data.editingEnvironmentIndex = environmentIndex
+
-      this.action = "edit"
+const selectedEnvironmentIndex = useStream(
-      this.displayModalEdit(true)
+  selectedEnvIndex$,
-    },
+  -1,
-    resetSelectedData() {
+  setCurrentEnvironment
-      this.$data.editingEnvironmentIndex = undefined
+)
-    },
+
-  },
+const showModalImportExport = ref(false)
-})
+const showModalDetails = ref(false)
+const action = ref<"new" | "edit">("edit")
+const editingEnvironmentIndex = ref<number | "Global" | null>(null)
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  action.value = "new"
+  showModalDetails.value = shouldDisplay
+}
+const displayModalEdit = (shouldDisplay: boolean) => {
+  action.value = "edit"
+  showModalDetails.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+const displayModalImportExport = (shouldDisplay: boolean) => {
+  showModalImportExport.value = shouldDisplay
+}
+const editEnvironment = (environmentIndex: number | "Global") => {
+  editingEnvironmentIndex.value = environmentIndex
+  action.value = "edit"
+  displayModalEdit(true)
+}
+const resetSelectedData = () => {
+  editingEnvironmentIndex.value = null
+}
 </script>