refactor: typescript support

helpers/lenses/htmlLens.ts

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

helpers/lenses/imageLens.ts

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

helpers/lenses/jsonLens.ts

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

helpers/lenses/lenses.js

@@ -1,28 +0,0 @@
-import jsonLens from "./jsonLens"
-import rawLens from "./rawLens"
-import imageLens from "./imageLens"
-import htmlLens from "./htmlLens"
-import xmlLens from "./xmlLens"
-
-export const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
-
-export function getSuitableLenses(response) {
-  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
-}
-
-export function getLensRenderers() {
-  const response = {}
-  for (const lens of lenses) {
-    response[lens.renderer] = lens.rendererImport
-  }
-  return response
-}

helpers/lenses/lenses.ts

@@ -0,0 +1,42 @@
+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"
+
+export type Lens = {
+  lensName: string
+  isSupportedContentType: (contentType: string) => boolean
+  renderer: string
+  rendererImport: () => Promise<typeof import("*.vue")>
+}
+
+export const lenses: Lens[] = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
+
+export function getSuitableLenses(response: HoppRESTResponse): Lens[] {
+  // return empty array if response is loading or error
+  if (response.type === "loading" || response.type === "network_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
+}

helpers/lenses/rawLens.js

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

helpers/lenses/rawLens.ts

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

helpers/lenses/xmlLens.ts

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