feat: introduce vueuse composition utilities

README.md

@@ -48,28 +48,6 @@
 
 [![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=telegram)](https://hoppscotch.io/telegram) [![Discuss on GitHub](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/hoppscotch/hoppscotch/discussions)
 
-<details open>
-  <summary><b>Table of contents</b></summary>
-
----
-
-- [Features](#features)
-- [Demo](#demo)
-- [Usage](#usage)
-- [Built with](#built-with)
-- [Developing](#developing)
-- [Docker](#docker)
-- [Releasing](#releasing)
-- [Contributing](#contributing)
-- [Continuous Integration](#continuous-integration)
-- [Changelog](#changelog)
-- [Authors](#authors)
-- [License](#license)
-
----
-
-</details>
-
 ### **Features**
 
 ❤️ **Lightweight:** Crafted with minimalistic UI design.

packages/hoppscotch-app/components/app/Header.vue

@@ -75,7 +75,9 @@
                   :alt="currentUser.displayName"
                   :title="currentUser.displayName"
                   indicator
-                  :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
                 />
                 <ButtonSecondary
                   v-else
@@ -130,7 +132,7 @@
         </div>
       </div>
     </header>
-    <AppAnnouncement v-if="!isOnLine" />
+    <AppAnnouncement v-if="!network.isOnline" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
@@ -138,7 +140,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "@nuxtjs/composition-api"
+import { onMounted, reactive, ref } from "@nuxtjs/composition-api"
+import { useNetwork } from "@vueuse/core"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
@@ -164,7 +167,7 @@ const showSupport = ref(false)
 const showLogin = ref(false)
 const showTeamsModal = ref(false)
 
-const isOnLine = ref(navigator.onLine)
+const network = reactive(useNetwork())
 
 const currentUser = useReadonlyStream(probableUser$, null)
 
@@ -173,13 +176,6 @@ defineActionHandler("modals.support.toggle", () => {
 })
 
 onMounted(() => {
-  window.addEventListener("online", () => {
-    isOnLine.value = true
-  })
-  window.addEventListener("offline", () => {
-    isOnLine.value = false
-  })
-
   // Initializes the PWA code - checks if the app is installed,
   // etc.
   showInstallPrompt.value = intializePwa()

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -55,7 +55,6 @@ defineProps<{
     @apply bg-transparent;
     @apply z-2;
     @apply w-0.5;
-    @apply transition;
 
     content: "";
   }

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

@@ -102,7 +102,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "@nuxtjs/composition-api"
-import * as timeago from "timeago.js"
+import { useTimeAgo } from "@vueuse/core"
 import { safelyExtractRESTRequest } from "@hoppscotch/data"
 import {
   useI18n,
@@ -135,7 +135,7 @@ const t = useI18n()
 
 const groupByDate = (array: any[], key: string) => {
   return array.reduce((rv: any, x: any) => {
-    ;(rv[timeago.format(x[key])] = rv[timeago.format(x[key])] || []).push(x)
+    ;(rv[useTimeAgo(x[key]).value] = rv[useTimeAgo(x[key]).value] || []).push(x)
     return rv
   }, {})
 }

packages/hoppscotch-app/package.json

@@ -103,7 +103,6 @@
     "splitpanes": "^2.3.8",
     "subscriptions-transport-ws": "^0.11.0",
     "tern": "^0.24.3",
-    "timeago.js": "^4.0.2",
     "uuid": "8.3.2",
     "vue-apollo": "^3.1.0",
     "vue-functional-data-merge": "^3.1.0",
@@ -152,6 +151,7 @@
     "@vue/composition-api": "^1.4.5",
     "@vue/runtime-dom": "^3.2.29",
     "@vue/test-utils": "^1.3.0",
+    "@vueuse/core": "^7.5.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",

pnpm-lock.yaml

@@ -116,6 +116,7 @@ importers:
       '@vue/composition-api': ^1.4.5
       '@vue/runtime-dom': ^3.2.29
       '@vue/test-utils': ^1.3.0
+      '@vueuse/core': ^7.5.5
       acorn: ^8.7.0
       acorn-walk: ^8.2.0
       axios: ^0.25.0
@@ -169,7 +170,6 @@ importers:
       stylelint-config-standard-scss: ^3.0.0
       subscriptions-transport-ws: ^0.11.0
       tern: ^0.24.3
-      timeago.js: ^4.0.2
       ts-jest: ^27.1.3
       typescript: ^4.5.5
       uuid: 8.3.2
@@ -255,7 +255,6 @@ importers:
       splitpanes: 2.3.8
       subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       tern: 0.24.3
-      timeago.js: 4.0.2
       uuid: 8.3.2
       vue-apollo: 3.1.0_graphql-tag@2.12.6
       vue-functional-data-merge: 3.1.0
@@ -303,6 +302,7 @@ importers:
       '@vue/composition-api': 1.4.5
       '@vue/runtime-dom': 3.2.29
       '@vue/test-utils': 1.3.0
+      '@vueuse/core': 7.5.5_@vue+composition-api@1.4.5
       babel-core: 7.0.0-bridge.0_@babel+core@7.16.12
       babel-jest: 27.4.6_@babel+core@7.16.12
       babel-loader: 8.2.3_@babel+core@7.16.12
@@ -3581,7 +3581,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       callsites: 3.1.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       source-map: 0.6.1
     dev: true
 
@@ -3600,7 +3600,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/test-result': 27.4.6
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       jest-haste-map: 27.4.6
       jest-runtime: 27.4.6
     transitivePeerDependencies:
@@ -5677,6 +5677,37 @@ packages:
       pretty: 2.0.0
     dev: true
 
+  /@vueuse/core/7.5.5_@vue+composition-api@1.4.5:
+    resolution: {integrity: sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vue/composition-api': 1.4.5
+      '@vueuse/shared': 7.5.5_@vue+composition-api@1.4.5
+      vue-demi: 0.12.1_@vue+composition-api@1.4.5
+    dev: true
+
+  /@vueuse/shared/7.5.5_@vue+composition-api@1.4.5:
+    resolution: {integrity: sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vue/composition-api': 1.4.5
+      vue-demi: 0.12.1_@vue+composition-api@1.4.5
+    dev: true
+
   /@webassemblyjs/ast/1.9.0:
     resolution: {integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==}
     dependencies:
@@ -6961,7 +6992,7 @@ packages:
       chownr: 1.1.4
       figgy-pudding: 3.5.2
       glob: 7.2.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       infer-owner: 1.0.4
       lru-cache: 5.1.1
       mississippi: 3.0.0
@@ -10086,7 +10117,7 @@ packages:
   /fs-write-stream-atomic/1.0.10:
     resolution: {integrity: sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       iferr: 0.1.5
       imurmurhash: 0.1.4
       readable-stream: 2.3.7
@@ -10589,7 +10620,7 @@ packages:
     dependencies:
       chalk: 2.4.2
       find-cache-dir: 2.1.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       lodash: 4.17.21
       mkdirp: 0.5.5
       node-object-hash: 1.4.2
@@ -12142,7 +12173,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@types/node': 17.0.13
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
     dev: true
 
   /jest-snapshot/27.4.6:
@@ -12444,7 +12475,7 @@ packages:
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
     optionalDependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
     dev: false
 
   /jsonfile/6.1.0:
@@ -15348,7 +15379,7 @@ packages:
   /proper-lockfile/4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       retry: 0.12.0
       signal-exit: 3.0.5
     dev: false
@@ -15608,7 +15639,7 @@ packages:
     resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==}
     engines: {node: '>=0.10'}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       micromatch: 3.1.10
       readable-stream: 2.3.7
     dev: false
@@ -17452,10 +17483,6 @@ packages:
       webpack: 4.46.0
     dev: false
 
-  /timeago.js/4.0.2:
-    resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
-    dev: false
-
   /timers-browserify/2.0.12:
     resolution: {integrity: sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==}
     engines: {node: '>=0.6.0'}
@@ -18274,6 +18301,21 @@ packages:
     resolution: {integrity: sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==}
     dev: false
 
+  /vue-demi/0.12.1_@vue+composition-api@1.4.5:
+    resolution: {integrity: sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      '@vue/composition-api': 1.4.5
+    dev: true
+
   /vue-eslint-parser/8.0.1_eslint@8.8.0:
     resolution: {integrity: sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -18515,7 +18557,7 @@ packages:
   /watchpack/1.7.5:
     resolution: {integrity: sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       neo-async: 2.6.2
     optionalDependencies:
       chokidar: 3.5.3
@@ -18843,7 +18885,7 @@ packages:
   /write-file-atomic/2.4.3:
     resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       imurmurhash: 0.1.4
       signal-exit: 3.0.6
     dev: false
@@ -18872,7 +18914,7 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       detect-indent: 5.0.0
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.9
       make-dir: 1.3.0
       pify: 3.0.0
       sort-keys: 2.0.0