Dynamically import lens renderers

components/lenses/ResponseBodyRenderer.vue

@@ -22,19 +22,14 @@
 </template>
 
 <script>
-import getSuitableLenses from "~/helpers/lenses/lenses"
+import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
 
 export default {
   components: {
     tabs: () => import("../ui/tabs"),
     tab: () => import("../ui/tab"),
     // Lens Renderers
-    raw: () => import("./renderers/RawLensRenderer"),
+    ...getLensRenderers(),
-    json: () => import("./renderers/JSONLensRenderer"),
-    imageres: () => import("./renderers/ImageLensRenderer"),
-    htmlres: () => import("./renderers/HTMLLensRenderer"),
-    xmlres: () => import("./renderers/XMLLensRenderer"),
-    headers: () => import("./headers"),
   },
   props: {
     response: {},

helpers/lenses/htmlLens.js

@@ -2,6 +2,7 @@ const htmlLens = {
   lensName: "HTML",
   supportedContentTypes: ["text/html"],
   renderer: "htmlres",
+  rendererImport: () => import("~/components/lenses/renderers/HTMLLensRenderer"),
 }
 
 export default htmlLens

helpers/lenses/imageLens.js

@@ -10,6 +10,7 @@ const imageLens = {
     "image/vnd.microsoft.icon",
   ],
   renderer: "imageres",
+  rendererImport: () => import("~/components/lenses/renderers/ImageLensRenderer"),
 }
 
 export default imageLens

helpers/lenses/jsonLens.js

@@ -2,6 +2,7 @@ const jsonLens = {
   lensName: "JSON",
   supportedContentTypes: ["application/json", "application/hal+json", "application/vnd.api+json"],
   renderer: "json",
+  rendererImport: () => import("~/components/lenses/renderers/JSONLensRenderer"),
 }
 
 export default jsonLens

helpers/lenses/lenses.js

@@ -6,7 +6,7 @@ import xmlLens from "./xmlLens"
 
 const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
-function getSuitableLenses(response) {
+export function getSuitableLenses(response) {
   const result = []
 
   if (response && response.headers && response.headers["content-type"]) {
@@ -28,4 +28,10 @@ function getSuitableLenses(response) {
   return result
 }
 
-export default getSuitableLenses
+export function getLensRenderers() {
+  const response = {}
+  for (const lens of lenses) {
+    response[lens.renderer] = lens.rendererImport
+  }
+  return response
+}

helpers/lenses/rawLens.js

@@ -2,6 +2,7 @@ const rawLens = {
   lensName: "Raw",
   supportedContentTypes: null,
   renderer: "raw",
+  rendererImport: () => import("~/components/lenses/renderers/RawLensRenderer"),
 }
 
 export default rawLens

helpers/lenses/xmlLens.js

@@ -1,7 +1,8 @@
-const htmlLens = {
+const xmlLens = {
   lensName: "XML",
   supportedContentTypes: ["application/xml", "image/svg+xml", "text/xml", "application/rss+xml"],
   renderer: "xmlres",
+  rendererImport: () => import("~/components/lenses/renderers/XMLLensRenderer"),
 }
 
-export default htmlLens
+export default xmlLens