chore: split app to commons and web (squash commit)

packages/hoppscotch-common/src/helpers/lenses/__tests__/lenses.sample

@@ -0,0 +1,84 @@
+import { lenses, getSuitableLenses, getLensRenderers } from "../lenses"
+import rawLens from "../rawLens"
+
+describe("getSuitableLenses", () => {
+  test("returns raw lens if no content type reported (null/undefined)", () => {
+    const nullResult = getSuitableLenses({
+      headers: {
+        "content-type": null,
+      },
+    })
+
+    const undefinedResult = getSuitableLenses({
+      headers: {},
+    })
+
+    expect(nullResult).toHaveLength(1)
+    expect(nullResult).toContainEqual(rawLens)
+
+    expect(undefinedResult).toHaveLength(1)
+    expect(undefinedResult).toContainEqual(rawLens)
+  })
+
+  const contentTypes = {
+    JSON: [
+      "application/json",
+      "application/ld+json",
+      "application/hal+json; charset=utf8",
+    ],
+    Image: [
+      "image/gif",
+      "image/jpeg; foo=bar",
+      "image/png",
+      "image/bmp",
+      "image/svg+xml",
+      "image/x-icon",
+      "image/vnd.microsoft.icon",
+    ],
+    HTML: ["text/html", "application/xhtml+xml", "text/html; charset=utf-8"],
+    XML: [
+      "text/xml",
+      "application/xml",
+      "application/xhtml+xml; charset=utf-8",
+    ],
+  }
+
+  lenses
+    .filter(({ lensName }) => lensName !== rawLens.lensName)
+    .forEach((el) => {
+      test(`returns ${el.lensName} lens for its content-types`, () => {
+        contentTypes[el.lensName].forEach((contentType) => {
+          expect(
+            getSuitableLenses({
+              headers: {
+                "content-type": contentType,
+              },
+            })
+          ).toContainEqual(el)
+        })
+      })
+
+      test(`returns Raw Lens along with ${el.lensName} for the content types`, () => {
+        contentTypes[el.lensName].forEach((contentType) => {
+          expect(
+            getSuitableLenses({
+              headers: {
+                "content-type": contentType,
+              },
+            })
+          ).toContainEqual(rawLens)
+        })
+      })
+    })
+})
+
+describe("getLensRenderers", () => {
+  test("returns all the lens renderers", () => {
+    const res = getLensRenderers()
+
+    lenses.forEach(({ renderer, rendererImport }) => {
+      expect(res).toHaveProperty(renderer)
+      expect(res[renderer]).toBe(rendererImport)
+    })
+  })
+})

packages/hoppscotch-common/src/helpers/lenses/htmlLens.ts

@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from "vue"
+import { Lens } from "./lenses"
+
+const htmlLens: Lens = {
+  lensName: "response.html",
+  isSupportedContentType: (contentType) =>
+    /\btext\/html|application\/xhtml\+xml\b/i.test(contentType),
+  renderer: "htmlres",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/HTMLLensRenderer.vue")
+  ),
+}
+
+export default htmlLens

packages/hoppscotch-common/src/helpers/lenses/imageLens.ts

@@ -0,0 +1,16 @@
+import { defineAsyncComponent } from "vue"
+import { Lens } from "./lenses"
+
+const imageLens: Lens = {
+  lensName: "response.image",
+  isSupportedContentType: (contentType) =>
+    /\bimage\/(?:gif|jpeg|png|webp|bmp|svg\+xml|x-icon|vnd\.microsoft\.icon)\b/i.test(
+      contentType
+    ),
+  renderer: "imageres",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/ImageLensRenderer.vue")
+  ),
+}
+
+export default imageLens

packages/hoppscotch-common/src/helpers/lenses/jsonLens.ts

@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from "vue"
+import { isJSONContentType } from "../utils/contenttypes"
+import { Lens } from "./lenses"
+
+const jsonLens: Lens = {
+  lensName: "response.json",
+  isSupportedContentType: isJSONContentType,
+  renderer: "json",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/JSONLensRenderer.vue")
+  ),
+}
+
+export default jsonLens

packages/hoppscotch-common/src/helpers/lenses/lenses.ts

@@ -0,0 +1,57 @@
+import { HoppRESTResponse } from "../types/HoppRESTResponse"
+import jsonLens from "./jsonLens"
+import rawLens from "./rawLens"
+import imageLens from "./imageLens"
+import htmlLens from "./htmlLens"
+import xmlLens from "./xmlLens"
+import pdfLens from "./pdfLens"
+import { defineAsyncComponent } from "vue"
+
+export type Lens = {
+  lensName: string
+  isSupportedContentType: (contentType: string) => boolean
+  renderer: string
+  rendererImport: ReturnType<typeof defineAsyncComponent>
+}
+
+export const lenses: Lens[] = [
+  jsonLens,
+  imageLens,
+  htmlLens,
+  xmlLens,
+  pdfLens,
+  rawLens,
+]
+
+export function getSuitableLenses(response: HoppRESTResponse): Lens[] {
+  // return empty array if response is loading or error
+  if (
+    response.type === "loading" ||
+    response.type === "network_fail" ||
+    response.type === "script_fail" ||
+    response.type === "fail"
+  )
+    return []
+
+  const contentType = response.headers.find((h) => h.key === "content-type")
+
+  if (!contentType) return [rawLens]
+
+  const result = []
+  for (const lens of lenses) {
+    if (lens.isSupportedContentType(contentType.value)) result.push(lens)
+  }
+  return result
+}
+
+type LensRenderers = {
+  [key: string]: Lens["rendererImport"]
+}
+
+export function getLensRenderers(): LensRenderers {
+  const response: LensRenderers = {}
+  for (const lens of lenses) {
+    response[lens.renderer] = lens.rendererImport
+  }
+  return response
+}

packages/hoppscotch-common/src/helpers/lenses/pdfLens.ts

@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from "vue"
+import { Lens } from "./lenses"
+
+const pdfLens: Lens = {
+  lensName: "response.pdf",
+  isSupportedContentType: (contentType) =>
+    /\bapplication\/pdf\b/i.test(contentType),
+  renderer: "pdfres",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/PDFLensRenderer.vue")
+  ),
+}
+
+export default pdfLens

packages/hoppscotch-common/src/helpers/lenses/rawLens.ts

@@ -0,0 +1,13 @@
+import { defineAsyncComponent } from "vue"
+import { Lens } from "./lenses"
+
+const rawLens: Lens = {
+  lensName: "response.raw",
+  isSupportedContentType: () => true,
+  renderer: "raw",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/RawLensRenderer.vue")
+  ),
+}
+
+export default rawLens

packages/hoppscotch-common/src/helpers/lenses/xmlLens.ts

@@ -0,0 +1,13 @@
+import { defineAsyncComponent } from "vue"
+import { Lens } from "./lenses"
+
+const xmlLens: Lens = {
+  lensName: "response.xml",
+  isSupportedContentType: (contentType) => /\bxml\b/i.test(contentType),
+  renderer: "xmlres",
+  rendererImport: defineAsyncComponent(
+    () => import("~/components/lenses/renderers/XMLLensRenderer.vue")
+  ),
+}
+
+export default xmlLens