From fe1353b5c7e259d2169b96f3547d1c6d6c21fb4d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 30 Jun 2020 16:11:21 -0400
Subject: [PATCH] Dynamically import lens renderers

---
 components/lenses/ResponseBodyRenderer.vue |  9 ++-------
 helpers/lenses/htmlLens.js                 |  1 +
 helpers/lenses/imageLens.js                |  1 +
 helpers/lenses/jsonLens.js                 |  1 +
 helpers/lenses/lenses.js                   | 10 ++++++++--
 helpers/lenses/rawLens.js                  |  1 +
 helpers/lenses/xmlLens.js                  |  5 +++--
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 176fcfb07..4c085737b 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/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"),
-    json: () => import("./renderers/JSONLensRenderer"),
-    imageres: () => import("./renderers/ImageLensRenderer"),
-    htmlres: () => import("./renderers/HTMLLensRenderer"),
-    xmlres: () => import("./renderers/XMLLensRenderer"),
-    headers: () => import("./headers"),
+    ...getLensRenderers(),
   },
   props: {
     response: {},
diff --git a/helpers/lenses/htmlLens.js b/helpers/lenses/htmlLens.js
index 369efb614..5a8e3244d 100644
--- a/helpers/lenses/htmlLens.js
+++ b/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
diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
index 3bcb05823..1153822a4 100644
--- a/helpers/lenses/imageLens.js
+++ b/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
diff --git a/helpers/lenses/jsonLens.js b/helpers/lenses/jsonLens.js
index 9ecb154fa..5c337c1aa 100644
--- a/helpers/lenses/jsonLens.js
+++ b/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
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index f33855eef..6423bcf10 100644
--- a/helpers/lenses/lenses.js
+++ b/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
+}
diff --git a/helpers/lenses/rawLens.js b/helpers/lenses/rawLens.js
index 8ccb35ba3..2bb9635d4 100644
--- a/helpers/lenses/rawLens.js
+++ b/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
diff --git a/helpers/lenses/xmlLens.js b/helpers/lenses/xmlLens.js
index 4c4152193..eb0b5a60b 100644
--- a/helpers/lenses/xmlLens.js
+++ b/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