refactor: move rawKeyValue and templating to hopp/data + rewrite rawKeyValue parsing

packages/hoppscotch-app/components/environments/Edit.vue

@@ -118,15 +118,14 @@
 import clone from "lodash/clone"
 import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
+import { Environment, parseTemplateStringE } from "@hoppscotch/data"
 import {
-  Environment,
   getEnviroment,
   getGlobalVariables,
   globalEnv$,
   setGlobalEnvVariables,
   updateEnvironment,
 } from "~/newstore/environments"
-import { parseTemplateStringE } from "~/helpers/templating"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 
 export default defineComponent({

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -85,6 +85,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "@nuxtjs/composition-api"
+import { Environment } from "@hoppscotch/data"
 import { currentUser$ } from "~/helpers/fb/auth"
 import {
   useAxios,
@@ -96,7 +97,6 @@ import {
   environments$,
   replaceEnvironments,
   appendEnvironments,
-  Environment,
 } from "~/newstore/environments"
 
 defineProps<{

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -85,14 +85,14 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import * as O from "fp-ts/Option"
-import { makeRESTRequest } from "@hoppscotch/data"
+import { Environment, makeRESTRequest } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   getEffectiveRESTRequest,
   resolvesEnvsInBody,
 } from "~/helpers/utils/EffectiveURL"
-import { Environment, getAggregateEnvs } from "~/newstore/environments"
+import { getAggregateEnvs } from "~/newstore/environments"
 import { getRESTRequest } from "~/newstore/RESTSession"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 import {

packages/hoppscotch-app/components/http/URLEncodedParams.vue

@@ -131,15 +131,15 @@
 import { computed, Ref, ref, watch } from "@nuxtjs/composition-api"
 import isEqual from "lodash/isEqual"
 import clone from "lodash/clone"
-import { HoppRESTReqBody } from "@hoppscotch/data"
-import { useCodemirror } from "~/helpers/editor/codemirror"
-import { useRESTRequestBody } from "~/newstore/RESTSession"
-import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 import {
+  HoppRESTReqBody,
   parseRawKeyValueEntries,
   rawKeyValueEntriesToString,
   RawKeyValueEntry,
-} from "~/helpers/rawKeyValue"
+} from "@hoppscotch/data"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
+import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 
 const t = useI18n()
 const toast = useToast()

packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts

@@ -8,13 +8,13 @@ import {
   ViewPlugin,
 } from "@codemirror/view"
 import * as E from "fp-ts/Either"
+import { parseTemplateStringE } from "@hoppscotch/data"
 import { StreamSubscriberFunc } from "~/helpers/utils/composables"
 import {
   AggregateEnvironment,
   aggregateEnvs$,
   getAggregateEnvs,
 } from "~/newstore/environments"
-import { parseTemplateStringE } from "~/helpers/templating"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<\w+>>)/g
 

packages/hoppscotch-app/helpers/fb/environments.ts

@@ -1,3 +1,4 @@
+import { Environment } from "@hoppscotch/data"
 import {
   collection,
   doc,
@@ -7,7 +8,6 @@ import {
 } from "firebase/firestore"
 import { currentUser$ } from "./auth"
 import {
-  Environment,
   environments$,
   globalEnv$,
   replaceEnvironments,

packages/hoppscotch-app/helpers/rawKeyValue.ts

@@ -1,40 +0,0 @@
-import * as A from "fp-ts/Array"
-import * as RA from "fp-ts/ReadonlyArray"
-import * as S from "fp-ts/string"
-import { pipe, flow } from "fp-ts/function"
-import { stringArrayJoin } from "./functional/array"
-
-export type RawKeyValueEntry = {
-  key: string
-  value: string
-  active: boolean
-}
-
-const parseRawKeyValueEntry = (str: string): RawKeyValueEntry => {
-  const trimmed = str.trim()
-  const inactive = trimmed.startsWith("#")
-
-  const [key, value] = trimmed.split(":").map(S.trim)
-
-  return {
-    key: inactive ? key.replaceAll(/^#+\s*/g, "") : key, // Remove comment hash and early space
-    value,
-    active: !inactive,
-  }
-}
-
-export const parseRawKeyValueEntries = flow(
-  S.split("\n"),
-  RA.filter((x) => x.trim().length > 0), // Remove lines which are empty
-  RA.map(parseRawKeyValueEntry),
-  RA.toArray
-)
-
-export const rawKeyValueEntriesToString = (entries: RawKeyValueEntry[]) =>
-  pipe(
-    entries,
-    A.map(({ key, value, active }) =>
-      active ? `${key}: ${value}` : `# ${key}: ${value}`
-    ),
-    stringArrayJoin("\n")
-  )

packages/hoppscotch-app/helpers/rules/BodyTransition.ts

@@ -9,12 +9,10 @@ import {
   FormDataKeyValue,
   HoppRESTReqBody,
   ValidContentTypes,
-} from "@hoppscotch/data"
-import {
   parseRawKeyValueEntries,
   rawKeyValueEntriesToString,
   RawKeyValueEntry,
-} from "../rawKeyValue"
+} from "@hoppscotch/data"
 
 const ANY_TYPE = Symbol("TRANSITION_RULESET_IGNORE_TYPE")
 // eslint-disable-next-line no-redeclare

packages/hoppscotch-app/helpers/templating.ts

@@ -1,87 +0,0 @@
-import * as E from "fp-ts/Either"
-import { pipe } from "fp-ts/function"
-import { Environment } from "~/newstore/environments"
-
-const REGEX_ENV_VAR = /<<([^>]*)>>/g // "<<myVariable>>"
-
-/**
- * How much times can we expand environment variables
- */
-const ENV_MAX_EXPAND_LIMIT = 10
-
-/**
- * Error state when there is a suspected loop while
- * recursively expanding variables
- */
-const ENV_EXPAND_LOOP = "ENV_EXPAND_LOOP" as const
-
-export function parseBodyEnvVariablesE(
-  body: string,
-  env: Environment["variables"]
-) {
-  let result = body
-  let depth = 0
-
-  while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
-    result = result.replace(/<<\w+>>/g, (key) => {
-      const found = env.find(
-        (envVar) => envVar.key === key.replace(/[<>]/g, "")
-      )
-      return found ? found.value : key
-    })
-
-    depth++
-  }
-
-  return depth > ENV_MAX_EXPAND_LIMIT
-    ? E.left(ENV_EXPAND_LOOP)
-    : E.right(result)
-}
-
-/**
- * @deprecated Use `parseBodyEnvVariablesE` instead.
- */
-export const parseBodyEnvVariables = (
-  body: string,
-  env: Environment["variables"]
-) =>
-  pipe(
-    parseBodyEnvVariablesE(body, env),
-    E.getOrElse(() => body)
-  )
-
-export function parseTemplateStringE(
-  str: string,
-  variables: Environment["variables"]
-) {
-  if (!variables || !str) {
-    return E.right(str)
-  }
-
-  let result = str
-  let depth = 0
-
-  while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
-    result = decodeURI(encodeURI(result)).replace(
-      REGEX_ENV_VAR,
-      (_, p1) => variables.find((x) => x.key === p1)?.value || ""
-    )
-    depth++
-  }
-
-  return depth > ENV_MAX_EXPAND_LIMIT
-    ? E.left(ENV_EXPAND_LOOP)
-    : E.right(result)
-}
-
-/**
- * @deprecated Use `parseTemplateStringE` instead
- */
-export const parseTemplateString = (
-  str: string,
-  variables: Environment["variables"]
-) =>
-  pipe(
-    parseTemplateStringE(str, variables),
-    E.getOrElse(() => str)
-  )

packages/hoppscotch-app/helpers/utils/EffectiveURL.ts

@@ -7,13 +7,15 @@ import {
   FormDataKeyValue,
   HoppRESTReqBody,
   HoppRESTRequest,
+  parseTemplateString,
+  parseBodyEnvVariables,
+  parseRawKeyValueEntries,
+  Environment,
 } from "@hoppscotch/data"
-import { parseTemplateString, parseBodyEnvVariables } from "../templating"
 import { arrayFlatMap, arraySort } from "../functional/array"
 import { toFormData } from "../functional/formData"
 import { tupleToRecord } from "../functional/record"
-import { parseRawKeyValueEntries } from "../rawKeyValue"
-import { Environment, getGlobalVariables } from "~/newstore/environments"
+import { getGlobalVariables } from "~/newstore/environments"
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   /**

packages/hoppscotch-app/newstore/environments.ts

@@ -1,3 +1,4 @@
+import { Environment } from "@hoppscotch/data"
 import { cloneDeep } from "lodash"
 import isEqual from "lodash/isEqual"
 import { combineLatest, Observable } from "rxjs"
@@ -6,14 +7,6 @@ import DispatchingStore, {
   defineDispatchers,
 } from "~/newstore/DispatchingStore"
 
-export type Environment = {
-  name: string
-  variables: {
-    key: string
-    value: string
-  }[]
-}
-
 const defaultEnvironmentsState = {
   environments: [
     {

packages/hoppscotch-app/newstore/localpersistence.ts

@@ -10,6 +10,7 @@ import {
   translateToNewRequest,
   translateToNewRESTCollection,
   translateToNewGQLCollection,
+  Environment,
 } from "@hoppscotch/data"
 import { cloneDeep } from "lodash"
 import {
@@ -37,7 +38,6 @@ import {
 import {
   replaceEnvironments,
   environments$,
-  Environment,
   addGlobalEnvVariable,
   setGlobalEnvVariables,
   globalEnv$,

packages/hoppscotch-app/package.json

@@ -56,7 +56,7 @@
     "@codemirror/tooltip": "^0.19.0",
     "@codemirror/view": "^0.19.42",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
-    "@hoppscotch/data": "workspace:^0.3.0",
+    "@hoppscotch/data": "workspace:^0.4.0",
     "@hoppscotch/js-sandbox": "workspace:^1.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.31.0",