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

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com> Co-authored-by: liyasthomas <liyascthomas@gmail.com>
2022-09-29 10:55:21 +05:30
parent 77a561b581
commit 8b300fab5d
685 changed files with 17102 additions and 25942 deletions
--- a/packages/hoppscotch-app/src/pages/realtime/sse.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/sse.vue
@@ -0,0 +1,198 @@
+<template>
+  <AppPaneLayout layout-id="sse">
+    <template #primary>
+      <div
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+      >
+        <div class="inline-flex flex-1 space-x-2">
+          <div class="flex flex-1">
+            <input
+              id="server"
+              v-model="server"
+              type="url"
+              autocomplete="off"
+              :class="{ error: !isUrlValid }"
+              class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
+              :placeholder="t('sse.url')"
+              :disabled="
+                connectionState === 'STARTED' || connectionState === 'STARTING'
+              "
+              @keyup.enter="isUrlValid ? toggleSSEConnection() : null"
+            />
+            <label
+              for="event-type"
+              class="px-4 py-2 font-semibold truncate border-t border-b bg-primaryLight border-divider text-secondaryLight"
+            >
+              {{ t("sse.event_type") }}
+            </label>
+            <input
+              id="event-type"
+              v-model="eventType"
+              class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
+              spellcheck="false"
+              :disabled="
+                connectionState === 'STARTED' || connectionState === 'STARTING'
+              "
+              @keyup.enter="isUrlValid ? toggleSSEConnection() : null"
+            />
+          </div>
+          <ButtonPrimary
+            id="start"
+            :disabled="!isUrlValid"
+            name="start"
+            class="w-32"
+            :label="
+              connectionState === 'STOPPED'
+                ? t('action.start')
+                : t('action.stop')
+            "
+            :loading="connectionState === 'STARTING'"
+            @click="toggleSSEConnection"
+          />
+        </div>
+      </div>
+    </template>
+    <template #secondary>
+      <RealtimeLog
+        :title="t('sse.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
+    </template>
+  </AppPaneLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onUnmounted, onMounted } from "vue"
+import "splitpanes/dist/splitpanes.css"
+import { debounce } from "lodash-es"
+import {
+  SSEEndpoint$,
+  setSSEEndpoint,
+  SSEEventType$,
+  setSSEEventType,
+  SSESocket$,
+  setSSESocket,
+  SSELog$,
+  setSSELog,
+  addSSELogLine,
+} from "~/newstore/SSESession"
+import { useToast } from "@composables/toast"
+import { useI18n } from "@composables/i18n"
+import {
+  useStream,
+  useStreamSubscriber,
+  useReadonlyStream,
+} from "@composables/stream"
+import { SSEConnection } from "@helpers/realtime/SSEConnection"
+import RegexWorker from "@workers/regex?worker"
+
+const t = useI18n()
+const toast = useToast()
+const { subscribeToStream } = useStreamSubscriber()
+
+const sse = useStream(SSESocket$, new SSEConnection(), setSSESocket)
+const connectionState = useReadonlyStream(sse.value.connectionState$, "STOPPED")
+const server = useStream(SSEEndpoint$, "", setSSEEndpoint)
+const eventType = useStream(SSEEventType$, "", setSSEEventType)
+const log = useStream(SSELog$, [], setSSELog)
+
+const isUrlValid = ref(true)
+
+let worker: Worker
+
+const debouncer = debounce(function () {
+  worker.postMessage({ type: "sse", url: server.value })
+}, 1000)
+
+watch(server, (url) => {
+  if (url) debouncer()
+})
+
+const workerResponseHandler = ({
+  data,
+}: {
+  data: { url: string; result: boolean }
+}) => {
+  if (data.url === server.value) isUrlValid.value = data.result
+}
+
+onMounted(() => {
+  worker = new RegexWorker()
+  worker.addEventListener("message", workerResponseHandler)
+
+  subscribeToStream(sse.value.event$, (event) => {
+    switch (event?.type) {
+      case "STARTING":
+        log.value = [
+          {
+            payload: `${t("state.connecting_to", { name: server.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: undefined,
+          },
+        ]
+        break
+
+      case "STARTED":
+        log.value = [
+          {
+            payload: `${t("state.connected_to", { name: server.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: Date.now(),
+          },
+        ]
+        toast.success(`${t("state.connected")}`)
+        break
+
+      case "MESSAGE_RECEIVED":
+        addSSELogLine({
+          payload: event.message,
+          source: "server",
+          ts: event.time,
+        })
+        break
+
+      case "ERROR":
+        addSSELogLine({
+          payload: t("error.browser_support_sse").toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        break
+
+      case "STOPPED":
+        addSSELogLine({
+          payload: t("state.disconnected_from", {
+            name: server.value,
+          }).toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        toast.error(`${t("state.disconnected")}`)
+        break
+    }
+  })
+})
+
+// METHODS
+
+const toggleSSEConnection = () => {
+  // If it is connecting:
+  if (connectionState.value === "STOPPED") {
+    return sse.value.start(server.value, eventType.value)
+  }
+  // Otherwise, it's disconnecting.
+  sse.value.stop()
+}
+
+onUnmounted(() => {
+  worker.terminate()
+})
+const clearLogEntries = () => {
+  log.value = []
+}
+</script>