Refactoring Lenses Using Vue Composables (#1995)

packages/hoppscotch-app/helpers/lenses/composables/usePreview.ts

@@ -0,0 +1,39 @@
+import { ref, Ref } from "@nuxtjs/composition-api"
+
+export default function usePreview(
+  previewEnabledDefault: boolean,
+  responseBodyText: Ref<string>
+): {
+  previewFrame: any
+  previewEnabled: Ref<boolean>
+  togglePreview: () => void
+} {
+  const previewFrame = ref<any | null>(null)
+  const previewEnabled = ref(previewEnabledDefault)
+  const url = ref("")
+
+  const togglePreview = () => {
+    previewEnabled.value = !previewEnabled.value
+    if (previewEnabled.value) {
+      if (previewFrame.value.getAttribute("data-previewing-url") === url.value)
+        return
+      // Use DOMParser to parse document HTML.
+      const previewDocument = new DOMParser().parseFromString(
+        responseBodyText.value,
+        "text/html"
+      )
+      // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+      previewDocument.head.innerHTML =
+        `<base href="${url.value}">` + previewDocument.head.innerHTML
+      // Finally, set the iframe source to the resulting HTML.
+      previewFrame.value.srcdoc = previewDocument.documentElement.outerHTML
+      previewFrame.value.setAttribute("data-previewing-url", url.value)
+    }
+  }
+
+  return {
+    previewFrame,
+    previewEnabled,
+    togglePreview,
+  }
+}