chore: lint

assets/css/fonts.css

@@ -6,6 +6,7 @@
   font-display: swap;
   src: url('~assets/fonts/Material_Icons-400-fallback1.woff2') format('woff2');
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -15,6 +16,7 @@
   src: url('~assets/fonts/Poppins-400-devanagari2.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -24,6 +26,7 @@
   src: url('~assets/fonts/Poppins-400-latin-ext3.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -33,6 +36,7 @@
   src: url('~assets/fonts/Poppins-400-latin4.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -42,6 +46,7 @@
   src: url('~assets/fonts/Poppins-500-devanagari5.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -51,6 +56,7 @@
   src: url('~assets/fonts/Poppins-500-latin-ext6.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -60,6 +66,7 @@
   src: url('~assets/fonts/Poppins-500-latin7.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -69,6 +76,7 @@
   src: url('~assets/fonts/Poppins-600-devanagari8.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -78,6 +86,7 @@
   src: url('~assets/fonts/Poppins-600-latin-ext9.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -87,6 +96,7 @@
   src: url('~assets/fonts/Poppins-600-latin10.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -96,6 +106,7 @@
   src: url('~assets/fonts/Poppins-700-devanagari11.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -105,6 +116,7 @@
   src: url('~assets/fonts/Poppins-700-latin-ext12.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -114,6 +126,7 @@
   src: url('~assets/fonts/Poppins-700-latin13.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* devanagari */
 @font-face {
   font-family: 'Poppins';
@@ -123,6 +136,7 @@
   src: url('~assets/fonts/Poppins-800-devanagari14.woff2') format('woff2');
   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Poppins';
@@ -132,6 +146,7 @@
   src: url('~assets/fonts/Poppins-800-latin-ext15.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Poppins';
@@ -141,6 +156,7 @@
   src: url('~assets/fonts/Poppins-800-latin16.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
 /* cyrillic-ext */
 @font-face {
   font-family: 'Roboto Mono';
@@ -150,6 +166,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-cyrillic-ext17.woff2') format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
+
 /* cyrillic */
 @font-face {
   font-family: 'Roboto Mono';
@@ -159,6 +176,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-cyrillic18.woff2') format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+
 /* greek */
 @font-face {
   font-family: 'Roboto Mono';
@@ -168,6 +186,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-greek19.woff2') format('woff2');
   unicode-range: U+0370-03FF;
 }
+
 /* vietnamese */
 @font-face {
   font-family: 'Roboto Mono';
@@ -177,6 +196,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-vietnamese20.woff2') format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
+
 /* latin-ext */
 @font-face {
   font-family: 'Roboto Mono';
@@ -186,6 +206,7 @@
   src: url('~assets/fonts/Roboto_Mono-400-latin-ext21.woff2') format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Roboto Mono';

components/app/Header.vue

@@ -22,7 +22,18 @@
           href="https://appwrite.io/?utm_source=hoppscotch&utm_medium=banner&utm_campaign=hello"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center px-4 py-2 mx-4 font-mono text-sm rounded-md bg-bgDarkColor hide-on-small-screen"
+          class="
+            inline-flex
+            items-center
+            px-4
+            py-2
+            mx-4
+            font-mono
+            text-sm
+            rounded-md
+            bg-bgDarkColor
+            hide-on-small-screen
+          "
         >
           Appwrite - Open-Source Backend as a Service
           <img class="w-8 ml-2" src="~assets/images/appwrite-icon.svg" alt="Appwrite" />
@@ -301,8 +312,7 @@ export default {
         navigator
           .share({
             title: "Hoppscotch",
-            text:
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-              "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
             url: "https://hoppscotch.io",
           })
           .then(() => {})

components/collections/graphql/index.vue

@@ -162,7 +162,13 @@ export default {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
+        this.showModalAdd =
+          this.showModalEdit =
+          this.showModalImportExport =
+          this.showModalAddFolder =
+          this.showModalEditFolder =
+          this.showModalEditRequest =
+            false
       }
     }
     document.addEventListener("keydown", this._keyListener.bind(this))

components/collections/index.vue

@@ -275,7 +275,13 @@ export default {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showModalAdd = this.showModalEdit = this.showModalImportExport = this.showModalAddFolder = this.showModalEditFolder = this.showModalEditRequest = false
+        this.showModalAdd =
+          this.showModalEdit =
+          this.showModalImportExport =
+          this.showModalAddFolder =
+          this.showModalEditFolder =
+          this.showModalEditRequest =
+            false
       }
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
@@ -579,7 +585,7 @@ export default {
             .mutate({
               // Query
               mutation: gql`
-                mutation($collectionID: String!) {
+                mutation ($collectionID: String!) {
                   deleteCollection(collectionID: $collectionID)
                 }
               `,

components/collections/my/Collection.vue

@@ -194,7 +194,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-collection",
-
             collectionIndex: this.collectionIndex,
           },
         })

components/collections/my/Folder.vue

@@ -176,7 +176,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-folder",
-
             collectionIndex: this.collectionIndex,
             folderName: this.folder.name,
             folderPath: this.folderPath,

components/collections/my/Request.vue

@@ -14,7 +14,7 @@
           @click="!doc ? selectRequest() : {}"
           v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
 
           <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
           <span>{{ request.name }}</span>
@@ -104,7 +104,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "my-request",
-
             collectionIndex: this.collectionIndex,
             folderPath: this.folderPath,
             folderName: this.folderName,

components/collections/teams/Collection.vue

@@ -183,7 +183,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-collection",
-
             collectionID: this.collection.id,
           },
         })
@@ -193,7 +192,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-collection",
-
             collectionID: this.collection.id,
           },
         })

components/collections/teams/Folder.vue

@@ -164,7 +164,6 @@ export default {
         this.$emit("select", {
           picked: {
             pickedType: "teams-folder",
-
             folderID: this.folder.id,
           },
         })

components/collections/teams/Request.vue

@@ -7,7 +7,7 @@
           @click="!doc ? selectRequest() : {}"
           v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
 
           <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
           <span>{{ request.name }}</span>
@@ -102,6 +102,7 @@ export default {
             requestID: this.requestIndex,
           },
         })
+      else this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
       this.$emit("remove-request", {

components/environments/Add.vue

@@ -51,7 +51,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   methods: {

components/environments/Edit.vue

@@ -30,7 +30,14 @@
       <ul
         v-for="(variable, index) in this.editingEnvCopy.variables"
         :key="index"
-        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+        class="
+          border-b border-dashed
+          divide-y
+          md:divide-x
+          border-brdColor
+          divide-dashed divide-brdColor
+          md:divide-y-0
+        "
         :class="{ 'border-t': index == 0 }"
       >
         <li>
@@ -118,7 +125,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   watch: {

components/environments/Environment.vue

@@ -52,7 +52,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   methods: {

components/environments/ImportExport.vue

@@ -124,7 +124,7 @@ export default {
   },
   subscriptions() {
     return {
-      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments")
+      SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
     }
   },
   props: {

components/graphql/Field.vue

@@ -17,7 +17,18 @@
       {{ gqlField.description }}
     </div>
     <div
-      class="inline-block px-4 py-2 my-2 text-sm font-bold text-black bg-yellow-200 rounded-lg field-deprecated"
+      class="
+        inline-block
+        px-4
+        py-2
+        my-2
+        text-sm
+        font-bold
+        text-black
+        bg-yellow-200
+        rounded-lg
+        field-deprecated
+      "
       v-if="gqlField.isDeprecated"
     >
       {{ $t("deprecated") }}

components/http/BodyParameters.vue

@@ -19,7 +19,14 @@
     <ul
       v-for="(param, index) in bodyParams"
       :key="index"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>
@@ -60,7 +67,7 @@
         <li>
           <button
             class="icon"
-            @click="toggleActive(index,param)"
+            @click="toggleActive(index, param)"
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -148,8 +155,10 @@ export default {
       this.$emit("set-route-query-state")
     },
     removeRequestBodyParam(index) {
-      const paramArr = this.$store.state.request.bodyParams
+      const paramArr = this.$store.state.request.bodyParams.filter(
-        .filter((item, itemIndex) => itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true))
+        (item, itemIndex) =>
+          itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true)
+      )
       this.setRawParams(paramArr)
       this.$emit("remove-request-body-param", index)
     },
@@ -174,20 +183,20 @@ export default {
         fileIndex,
       })
     },
-    updateBodyParams(event, index, type){
+    updateBodyParams(event, index, type) {
       this.$store.commit(type, {
         index,
         value: event.target.value,
       })
-      let paramArr = this.$store.state.request.bodyParams
+      let paramArr = this.$store.state.request.bodyParams.filter((item) =>
-        .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+        item.hasOwnProperty("active") ? item.active == true : true
+      )
 
       this.setRawParams(paramArr)
     },
-    toggleActive(index, param){
+    toggleActive(index, param) {
-      let paramArr = this.$store.state.request.bodyParams
+      let paramArr = this.$store.state.request.bodyParams.filter((item, itemIndex) => {
-      .filter((item, itemIndex) => {
+        if (index === itemIndex) {
-          if(index === itemIndex){
           return !param.active
         } else {
           return item.hasOwnProperty("active") ? item.active == true : true
@@ -196,22 +205,22 @@ export default {
 
       this.setRawParams(paramArr)
 
-      this.$store.commit('setActiveBodyParams', {
+      this.$store.commit("setActiveBodyParams", {
         index,
-        value: param.hasOwnProperty('active') ? !param.active : false,
+        value: param.hasOwnProperty("active") ? !param.active : false,
       })
     },
-    setRawParams(filteredParamArr){
+    setRawParams(filteredParamArr) {
       let rawParams = {}
-      filteredParamArr.forEach(_param=>{
+      filteredParamArr.forEach((_param) => {
-        rawParams={
+        rawParams = {
           ...rawParams,
-          [_param.key]:_param.value
+          [_param.key]: _param.value,
         }
       })
-      const rawParamsStr = JSON.stringify(rawParams,null,2)
+      const rawParamsStr = JSON.stringify(rawParams, null, 2)
       this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
-    }
+    },
   },
   computed: {
     contentType() {

components/http/Headers.vue

@@ -19,7 +19,14 @@
     <ul
       v-for="(header, index) in headers"
       :key="`${header.value}_${index}`"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>

components/http/Parameters.vue

@@ -19,7 +19,14 @@
     <ul
       v-for="(param, index) in params"
       :key="index"
-      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+      class="
+        border-b border-dashed
+        divide-y
+        md:divide-x
+        border-brdColor
+        divide-dashed divide-brdColor
+        md:divide-y-0
+      "
       :class="{ 'border-t': index == 0 }"
     >
       <li>

components/realtime/Socketio.vue

@@ -71,7 +71,14 @@
       <ul
         v-for="(input, index) of communication.inputs"
         :key="`input-${index}`"
-        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+        class="
+          border-b border-dashed
+          divide-y
+          md:divide-x
+          border-brdColor
+          divide-dashed divide-brdColor
+          md:divide-y-0
+        "
         :class="{ 'border-t': index == 0 }"
       >
         <li>

components/smart/AccentModePicker.vue

@@ -15,7 +15,20 @@
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer hover:shadow-none"
+        class="
+          inline-flex
+          items-center
+          justify-center
+          p-3
+          m-2
+          transition
+          duration-150
+          ease-in-out
+          bg-transparent
+          rounded-full
+          cursor-pointer
+          hover:shadow-none
+        "
         :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
         @click="setActiveColor(color)"
       >

components/smart/AutoComplete.vue

@@ -176,9 +176,8 @@ export default {
           break
 
         case "Tab":
-          let activeSuggestion = this.suggestions[
+          let activeSuggestion =
-            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+            this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
-          ]
 
           if (!activeSuggestion) {
             return

components/smart/ColorModePicker.vue

@@ -14,7 +14,23 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
+        class="
+          inline-flex
+          items-center
+          justify-center
+          p-3
+          m-2
+          transition
+          duration-150
+          ease-in-out
+          bg-transparent
+          rounded-full
+          cursor-pointer
+          border-collapseer-2
+          text-fgLightColor
+          hover:text-fgColor
+          hover:shadow-none
+        "
         :class="[
           { 'bg-actColor': color === $colorMode.preference },
           { 'text-acColor hover:text-acColor': color === $colorMode.value },

helpers/migrations.ts

@@ -6,12 +6,8 @@ import { settingsStore, applySetting } from "~/newstore/settings"
  */
 
 export function performMigrations(): void {
-
   // Migrate old default proxy URL to the new proxy URL (if not set / overridden)
-  if (
+  if (settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/") {
-    settingsStore.value.PROXY_URL === "https://hoppscotch.apollosoftware.xyz/"
-  ) {
     applySetting("PROXY_URL", "https://proxy.hoppscotch.io/")
   }
-
 }

helpers/syntax/gqlQueryLangMode.js

@@ -98,8 +98,9 @@ export function defineGQLLanguageMode(ace) {
     (aceRequire, exports) => {
       const oop = aceRequire("ace/lib/oop")
       const TextMode = aceRequire("ace/mode/text").Mode
-      const GQLQueryTextHighlightRules = aceRequire("ace/mode/gql-query-highlight")
+      const GQLQueryTextHighlightRules = aceRequire(
-        .GQLQueryTextHighlightRules
+        "ace/mode/gql-query-highlight"
+      ).GQLQueryTextHighlightRules
       const FoldMode = aceRequire("ace/mode/folding/cstyle").FoldMode
 
       const Mode = function () {

helpers/teams/TeamRequest.ts

@@ -2,8 +2,8 @@
  * Defines how a Teams request is represented in TeamCollectionAdapter
  */
 export interface TeamRequest {
-  id: string;
+  id: string
-  collectionID: string;
+  collectionID: string
-  title: string;
+  title: string
-  request: any;
+  request: any
 }

newstore/DispatchingStore.ts

@@ -3,18 +3,20 @@ import { map } from "rxjs/operators"
 import assign from "lodash/assign"
 import clone from "lodash/clone"
 
-
+type Dispatch<
-type Dispatch<StoreType, DispatchersType extends Dispatchers<StoreType>, K extends keyof DispatchersType> = {
+  StoreType,
-  dispatcher: K & string,
+  DispatchersType extends Dispatchers<StoreType>,
+  K extends keyof DispatchersType
+> = {
+  dispatcher: K & string
   payload: any
 }
 
 export type Dispatchers<StoreType> = {
-  [ key: string ]: (currentVal: StoreType, payload: any) => Partial<StoreType> 
+  [key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
 }
 
 export default class DispatchingStore<StoreType, DispatchersType extends Dispatchers<StoreType>> {
-
   #state$: BehaviorSubject<StoreType>
   #dispatchers: Dispatchers<StoreType>
   #dispatches$: Subject<Dispatch<StoreType, DispatchersType, keyof DispatchersType>> = new Subject()
@@ -24,11 +26,8 @@ export default class DispatchingStore<StoreType, DispatchersType extends Dispatc
     this.#dispatchers = dispatchers
 
     this.#dispatches$
-      .pipe(
+      .pipe(map(({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)))
-        map(
+      .subscribe((val) => {
-          ({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)
-        )
-      ).subscribe(val => {
         const data = clone(this.value)
         assign(data, val)
 

newstore/__tests__/DispatchingStore.spec.js

@@ -3,7 +3,6 @@ import isEqual from "lodash/isEqual"
 import DispatchingStore from "~/newstore/DispatchingStore"
 
 describe("DispatchingStore", () => {
-
   test("'subject$' property properly returns an BehaviorSubject", () => {
     const store = new DispatchingStore({}, {})
 
@@ -28,22 +27,25 @@ describe("DispatchingStore", () => {
     expect(() => {
       store.dispatch({
         dispatcher: "non-existent",
-        payload: {}
+        payload: {},
       })
     }).toThrow()
   })
 
   test("valid dispatcher calls run without throwing", () => {
-    const store = new DispatchingStore({}, {
+    const store = new DispatchingStore(
+      {},
+      {
         testDispatcher(_currentValue, _payload) {
           // Nothing here
+        },
       }
-    })
+    )
 
     expect(() => {
       store.dispatch({
         dispatcher: "testDispatcher",
-        payload: {}
+        payload: {},
       })
     }).not.toThrow()
   })
@@ -52,14 +54,17 @@ describe("DispatchingStore", () => {
     const dispatchFn = jest.fn().mockReturnValue({})
     const dontCallDispatchFn = jest.fn().mockReturnValue({})
 
-    const store = new DispatchingStore({}, {
+    const store = new DispatchingStore(
+      {},
+      {
         testDispatcher: dispatchFn,
-      dontCallDispatcher: dontCallDispatchFn
+        dontCallDispatcher: dontCallDispatchFn,
-    })
+      }
+    )
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}
+      payload: {},
     })
 
     expect(dispatchFn).toHaveBeenCalledTimes(1)
@@ -73,12 +78,12 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: testPayload
+      payload: testPayload,
     })
 
     expect(testDispatchFn).toHaveBeenCalledWith(testInitValue, testPayload)
@@ -91,12 +96,12 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}         // Payload doesn't matter because the function is mocked
+      payload: {}, // Payload doesn't matter because the function is mocked
     })
 
     expect(store.value).toEqual(testDispatchReturnVal)
@@ -109,47 +114,47 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn
+      testDispatcher: testDispatchFn,
     })
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {}
+      payload: {},
     })
 
     expect(store.value).toEqual({
       name: "bob",
-      age: 25
+      age: 25,
     })
   })
 
-  test("emits the current store value to the new subscribers", done => {
+  test("emits the current store value to the new subscribers", (done) => {
     const testInitValue = { name: "bob" }
 
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.subject$.subscribe(value => {
+    store.subject$.subscribe((value) => {
       if (value === testInitValue) {
         done()
       }
     })
   })
 
-  test("emits the dispatched store value to the subscribers", done => {
+  test("emits the dispatched store value to the subscribers", (done) => {
     const testInitValue = { name: "bob" }
     const testDispatchReturnVal = { age: 25 }
 
     const testDispatchFn = jest.fn().mockReturnValue(testDispatchReturnVal)
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.subject$.subscribe(value => {
+    store.subject$.subscribe((value) => {
       if (isEqual(value, { name: "bob", age: 25 })) {
         done()
       }
@@ -157,7 +162,7 @@ describe("DispatchingStore", () => {
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {} 
+      payload: {},
     })
   })
 
@@ -168,10 +173,10 @@ describe("DispatchingStore", () => {
     const testDispatchFn = jest.fn().mockReturnValue({})
 
     const store = new DispatchingStore(testInitValue, {
-      testDispatcher: testDispatchFn 
+      testDispatcher: testDispatchFn,
     })
 
-    store.dispatches$.subscribe(value => {
+    store.dispatches$.subscribe((value) => {
       if (isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })) {
         done()
       }
@@ -179,7 +184,7 @@ describe("DispatchingStore", () => {
 
     store.dispatch({
       dispatcher: "testDispatcher",
-      payload: {} 
+      payload: {},
     })
   })
 })

newstore/localpersistence.ts

@@ -25,9 +25,7 @@ function setupSettingsPersistence() {
     bulkApplySettings(settingsData)
   }
 
-
+  settingsStore.subject$.subscribe((settings) => {
-  settingsStore.subject$
-    .subscribe(settings => {
     window.localStorage.setItem("settings", JSON.stringify(settings))
   })
 }

newstore/settings.ts

@@ -5,7 +5,6 @@ import type { Dispatchers } from "./DispatchingStore"
 import { Observable } from "rxjs"
 import type { KeysMatching } from "~/types/ts-utils"
 
-
 export const defaultSettings = {
   syncCollections: true,
   syncHistory: true,
@@ -21,8 +20,8 @@ export const defaultSettings = {
     auth: true,
     httpUser: true,
     httpPassword: true,
-    bearerToken: true
+    bearerToken: true,
-  }
+  },
 }
 
 export type SettingsType = typeof defaultSettings
@@ -44,7 +43,10 @@ const dispatchers: Dispatchers<SettingsType> = {
 
     return result
   },
-  applySetting<K extends keyof SettingsType>(_currentState: SettingsType, { settingKey, value }: { settingKey: K, value: SettingsType[K] }) {
+  applySetting<K extends keyof SettingsType>(
+    _currentState: SettingsType,
+    { settingKey, value }: { settingKey: K; value: SettingsType[K] }
+  ) {
     if (!validKeys.includes(settingKey)) {
       console.log(`Ignoring non-existent setting key '${settingKey}' assignment`)
       return {}
@@ -54,20 +56,21 @@ const dispatchers: Dispatchers<SettingsType> = {
     result[settingKey] = value
 
     return result
-  }
+  },
 }
 
-
 export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
 
-export function getSettingSubject<K extends keyof SettingsType>(settingKey: K): Observable<SettingsType[K]> {
+export function getSettingSubject<K extends keyof SettingsType>(
+  settingKey: K
+): Observable<SettingsType[K]> {
   return settingsStore.subject$.pipe(pluck(settingKey), distinctUntilChanged())
 }
 
 export function bulkApplySettings(settingsObj: Partial<SettingsType>) {
   settingsStore.dispatch({
     dispatcher: "bulkApplySettings",
-    payload: settingsObj
+    payload: settingsObj,
   })
 }
 
@@ -75,8 +78,8 @@ export function toggleSetting(settingKey: KeysMatching<SettingsType, boolean>) {
   settingsStore.dispatch({
     dispatcher: "toggleSetting",
     payload: {
-      settingKey
+      settingKey,
-    }
+    },
   })
 }
 
@@ -85,7 +88,7 @@ export function applySetting<K extends keyof SettingsType>(settingKey: K, value:
     dispatcher: "applySetting",
     payload: {
       settingKey,
-      value
+      value,
-    }
+    },
   })
 }

pages/graphql.vue

@@ -55,7 +55,14 @@
             <ul
               v-for="(header, index) in headers"
               :key="`${header.value}_${index}`"
-              class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
+              class="
+                border-b border-dashed
+                divide-y
+                md:divide-x
+                border-brdColor
+                divide-dashed divide-brdColor
+                md:divide-y-0
+              "
               :class="{ 'border-t': index == 0 }"
             >
               <li>

pages/index.vue

@@ -1992,7 +1992,12 @@ export default {
       }
       if (e.key === "Escape") {
         e.preventDefault()
-        this.showCurlImportModal = this.showTokenListModal = this.showTokenRequestList = this.showSaveRequestModal = this.showCodegenModal = false
+        this.showCurlImportModal =
+          this.showTokenListModal =
+          this.showTokenRequestList =
+          this.showSaveRequestModal =
+          this.showCodegenModal =
+            false
       }
       if ((e.key === "g" || e.key === "G") && e.altKey) {
         this.method = "GET"

plugins/vue-apollo.ts

@@ -1,12 +1,12 @@
 import Vue from "vue"
 import VueApollo from "vue-apollo"
-import { apolloClient } from "~/helpers/apollo";
+import { apolloClient } from "~/helpers/apollo"
 
 const vueApolloProvider = new VueApollo({
-  defaultClient: apolloClient as any
+  defaultClient: apolloClient as any,
-});
+})
 
-Vue.use(VueApollo);
+Vue.use(VueApollo)
 
 export default (ctx: any) => {
   const { app } = ctx

store/mutations.js

@@ -107,7 +107,7 @@ export default {
     request.bodyParams[index].value = value
   },
 
-  setBodyParams({request},{params}){
+  setBodyParams({ request }, { params }) {
     request.bodyParams = params
   },
 

tailwind.config.js

@@ -4,6 +4,7 @@
  ** Docs: https://tailwindcss.com/docs/configuration
  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
  */
+
 import colors from "tailwindcss/colors"
 
 export default {

types/pw-ext-hook.d.ts

@@ -15,7 +15,7 @@ interface PWExtensionResponse {
 }
 
 interface PWExtensionHook {
-  getVersion: () => { major: number, minor: number }
+  getVersion: () => { major: number; minor: number }
   sendRequest: (req: PWExtensionRequestInfo) => Promise<PWExtensionResponse>
   cancelRunningRequest: () => void
 }

types/ts-utils.d.ts

@@ -1 +1 @@
-export type KeysMatching<T, V> = {[K in keyof T]-?: T[K] extends V ? K : never}[keyof T];
+export type KeysMatching<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T]

vue-shim.d.ts

@@ -1,4 +1,4 @@
 declare module "*.vue" {
-  import Vue from 'vue'
+  import Vue from "vue"
   export default Vue
 }