refactor: preserve big ints and decimals on JSONLensRenderer (#2167)

* chore: add lossless-json and type as dep

* refactor: update JSON lens renderer to format using lossless-json

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -140,6 +140,9 @@
 </template>
 
 <script setup lang="ts">
+import * as LJSON from "lossless-json"
+import * as O from "fp-ts/Option"
+import { pipe } from "fp-ts/function"
 import { computed, ref, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
@@ -169,22 +172,22 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseBodyText
 )
 
-const jsonBodyText = computed(() => {
-  try {
-    return JSON.stringify(JSON.parse(responseBodyText.value), null, 2)
-  } catch (e) {
-    // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-    return responseBodyText.value
-  }
-})
+const jsonBodyText = computed(() =>
+  pipe(
+    responseBodyText.value,
+    O.tryCatchK(LJSON.parse),
+    O.map((val) => LJSON.stringify(val, undefined, 2)),
+    O.getOrElse(() => responseBodyText.value)
+  )
+)
 
-const ast = computed(() => {
-  try {
-    return jsonParse(jsonBodyText.value)
-  } catch (_: any) {
-    return null
-  }
-})
+const ast = computed(() =>
+  pipe(
+    jsonBodyText.value,
+    O.tryCatchK(jsonParse),
+    O.getOrElseW(() => null)
+  )
+)
 
 const outlineOptions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
@@ -211,14 +214,19 @@ const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
   cursor.value = pos
 }
 
-const outlinePath = computed(() => {
-  if (ast.value) {
-    return getJSONOutlineAtPos(
-      ast.value,
-      convertLineChToIndex(jsonBodyText.value, cursor.value)
-    )
-  } else return null
-})
+const outlinePath = computed(() =>
+  pipe(
+    ast.value,
+    O.fromNullable,
+    O.map((ast) =>
+      getJSONOutlineAtPos(
+        ast,
+        convertLineChToIndex(jsonBodyText.value, cursor.value)
+      )
+    ),
+    O.getOrElseW(() => null)
+  )
+)
 </script>
 
 <style lang="scss" scoped>

packages/hoppscotch-app/package.json

@@ -88,6 +88,7 @@
     "js-yaml": "^4.1.0",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",
+    "lossless-json": "^1.0.5",
     "mustache": "^4.2.0",
     "node-interval-tree": "^1.3.3",
     "nuxt": "^2.15.8",
@@ -144,6 +145,7 @@
     "@types/har-format": "^1.2.8",
     "@types/httpsnippet": "^1.23.1",
     "@types/lodash": "^4.14.179",
+    "@types/lossless-json": "^1.0.1",
     "@types/postman-collection": "^3.5.7",
     "@types/splitpanes": "^2.2.1",
     "@types/uuid": "^8.3.4",