fix: working prototype

packages/hoppscotch-common/assets/scss/styles.scss

@@ -601,16 +601,17 @@ details[open] summary .indicator {
 }
 
 .predefined-variable-highlight {
- @apply text-accentContrast;
+ color: inherit;
  @apply border-2;
 
- &.predefined-variable-found {
- @apply hover:bg-green-400;
- @apply border-green-400;
+ &.predefined-variable-valid {
+ @apply hover:text-accentContrast #{!important};
+ @apply hover:bg-accentDark;
+ @apply border-accent;
  }
 
- &.predefined-variable-not-found {
- @apply hover:bg-red-400;
- @apply border-red-400;
+ &.predefined-variable-invalid {
+ @apply hover:bg-red-300;
+ @apply border-red-300;
  }
 }

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -380,6 +380,7 @@ useCodemirror(
  linter,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -237,6 +237,7 @@ useCodemirror(
  linter,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/http/RawBody.vue

@@ -159,6 +159,7 @@ useCodemirror(
  linter: langLinter,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -240,6 +240,7 @@ useCodemirror(
  linter,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue

@@ -109,6 +109,7 @@ useCodemirror(
  linter: null,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -389,6 +389,7 @@ const { cursor } = useCodemirror(
  linter: null,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue

@@ -115,6 +115,7 @@ useCodemirror(
  linter: null,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue

@@ -109,6 +109,7 @@ useCodemirror(
  linter: null,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/realtime/Communication.vue

@@ -228,6 +228,7 @@ useCodemirror(
  linter: langLinter,
  completer: null,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  })
 )
 

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -78,6 +78,7 @@ import { clone } from "lodash-es"
 import { history, historyKeymap } from "@codemirror/commands"
 import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
+import { HoppPredefinedVariablesPlugin } from "~/helpers/editor/extensions/HoppPredefinedVariables"
 import { useReadonlyStream } from "@composables/stream"
 import {
  AggregateEnvironment,
@@ -105,6 +106,7 @@ const props = withDefaults(
  focus?: boolean
  selectTextOnMount?: boolean
  environmentHighlights?: boolean
+ predefinedVariablesHighlights?: boolean
  readonly?: boolean
  autoCompleteSource?: string[]
  inspectionResults?: InspectorResult[] | undefined
@@ -119,6 +121,7 @@ const props = withDefaults(
  focus: false,
  readonly: false,
  environmentHighlights: true,
+ predefinedVariablesHighlights: true,
  autoCompleteSource: undefined,
  inspectionResult: undefined,
  inspectionResults: undefined,
@@ -377,6 +380,7 @@ const envVars = computed(() => {
 })
 
 const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
+const predefinedVariablePlugin = new HoppPredefinedVariablesPlugin()
 
 function handleTextSelection() {
  const selection = view.value?.state.selection.main
@@ -454,6 +458,7 @@ const getExtensions = (readonly: boolean): Extension => {
  position: "absolute",
  }),
  props.environmentHighlights ? envTooltipPlugin : [],
+ props.predefinedVariablesHighlights ? predefinedVariablePlugin : [],
  placeholderExt(props.placeholder),
  EditorView.domEventHandlers({
  paste(ev) {

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -63,6 +63,12 @@ type CodeMirrorOptions = {
  // NOTE: This property is not reactive
  environmentHighlights: boolean
 
+ /**
+ * Whether or not to highlight predefined variables, such as: `<<$guid>>`.
+ * - These are special variables that starts with a dolar sign.
+ */
+ predefinedVariablesHighlights?: boolean
+
  additionalExts?: Extension[]
 
  contextMenuEnabled?: boolean
@@ -237,7 +243,10 @@ export function useCodemirror(
  ? new HoppEnvironmentPlugin(subscribeToStream, view)
  : null
 
- const predefinedVariable = new HoppPredefinedVariablesPlugin()
+ const predefinedVariable: HoppPredefinedVariablesPlugin | null =
+ options.predefinedVariablesHighlights
+ ? new HoppPredefinedVariablesPlugin()
+ : null
 
  function handleTextSelection() {
  const selection = view.value?.state.selection.main

packages/hoppscotch-common/src/helpers/RequestRunner.ts

@@ -143,6 +143,8 @@ export function runRESTRequest$(
  tab.value.document.request.preRequestScript,
  getCombinedEnvVariables()
  ).then((envs) => {
+ console.log("ENVS??", envs)
+
  if (cancelCalled) return E.left("cancellation" as const)
 
  if (E.isLeft(envs)) {

packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts

@@ -5,16 +5,15 @@ import {
  ViewPlugin,
  hoverTooltip,
 } from "@codemirror/view"
-import IconVariable from "~icons/lucide/variable?raw"
-import { HOPP_PREDEFINED_VARIABLES } from "@hoppscotch/data"
+import IconSquareAsterisk from "~icons/lucide/square-asterisk?raw"
+import { HOPP_SUPPORTED_PREDEFINED_VARIABLES } from "@hoppscotch/data"
 
 const HOPP_PREDEFINED_VARIABLES_REGEX = /(<<\$[a-zA-Z0-9-_]+>>)/g
 
 const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT =
  "cursor-help transition rounded px-1 focus:outline-none mx-0.5 predefined-variable-highlight"
-const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_FOUND = "predefined-variable-found"
-const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_NOT_FOUND =
- "predefined-variable-not-found"
+const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_VALID = "predefined-variable-valid"
+const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_INVALID = "predefined-variable-invalid"
 
 const getMatchDecorator = () => {
  return new MatchDecorator({
@@ -58,34 +57,38 @@ const cursorTooltipField = () =>
 
  const variableName = text.slice(start - from - 1, end - from)
 
- const variable = HOPP_PREDEFINED_VARIABLES.find(
- (VARIABLE) => VARIABLE.name === variableName
+ const variable = HOPP_SUPPORTED_PREDEFINED_VARIABLES.find(
+ (VARIABLE) => VARIABLE.key === variableName
  )
- const variableValue = variable?.value() ?? "Empty"
 
- const variableIcon = `<span class="inline-flex items-center justify-center my-1">${IconVariable}</span>`
+ const variableIcon = `<span class="inline-flex items-center justify-center my-1">${IconSquareAsterisk}</span>`
+ const variableDescription =
+ variable !== undefined
+ ? `${variableName} - ${variable.description}`
+ : `${variableName} is not a valid predefined variable.`
 
  return {
  pos: start,
  end: to,
  above: true,
  arrow: true,
  create() {
- const dom = document.createElement("span")
- const tooltipContainer = document.createElement("span")
- const kbd = document.createElement("kbd")
+ const dom = document.createElement("div")
+ dom.className = "tippy-box"
+ dom.dataset.theme = "tooltip"
+
  const icon = document.createElement("span")
  icon.innerHTML = variableIcon
  icon.className = "mr-2"
- kbd.textContent = variableValue
+
+ const tooltipContainer = document.createElement("span")
+ tooltipContainer.className = "tippy-content"
+
  tooltipContainer.appendChild(icon)
  tooltipContainer.appendChild(
- document.createTextNode(`${variableName} `)
+ document.createTextNode(variableDescription)
  )
- tooltipContainer.appendChild(kbd)
- tooltipContainer.className = "tippy-content"
- dom.className = "tippy-box"
- dom.dataset.theme = "tooltip"
+
  dom.appendChild(tooltipContainer)
  return { dom }
  },
@@ -98,12 +101,13 @@ const cursorTooltipField = () =>
  )
 
 const checkPredefinedVariable = (variable: string) => {
- const className = HOPP_PREDEFINED_VARIABLES.find((VARIABLE) => {
- const userInputVariableName = variable.slice(2, -2)
- return VARIABLE.name === userInputVariableName
+ const inputVariableKey = variable.slice(2, -2)
+
+ const className = HOPP_SUPPORTED_PREDEFINED_VARIABLES.find((v) => {
+ return v.key === inputVariableKey
  })
- ? HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_FOUND
- : HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_NOT_FOUND
+ ? HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_VALID
+ : HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_INVALID
 
  return Decoration.mark({
  class: `${HOPP_PREDEFINED_VARIABLE_HIGHLIGHT} ${className}`,
@@ -136,3 +140,14 @@ export class HoppPredefinedVariablesPlugin {
  ])
  }
 }
+
+export class HoppReactivePredefinedVariablesPlugin {
+ private compartment = new Compartment()
+
+ get extension() {
+ return this.compartment.of([
+ cursorTooltipField(),
+ predefinedVariableHighlightStyle(),
+ ])
+ }
+}

packages/hoppscotch-common/src/helpers/preRequest.ts

@@ -17,6 +17,8 @@ const unsecretEnvironments = (
  global: Environment["variables"],
  selected: Environment
 ) => {
+ console.log("UNSECRET ENVS:", { global, selected })
+
  const resolvedGlobalWithSecrets = global.map((globalVar, index) => {
  const secretVar = secretEnvironmentService.getSecretEnvironmentVariable(
  "Global",

packages/hoppscotch-data/src/environment/index.ts

@@ -6,6 +6,7 @@ import { z } from "zod"
 
 import V0_VERSION from "./v/0"
 import V1_VERSION from "./v/1"
+import { HOPP_SUPPORTED_PREDEFINED_VARIABLES } from "../predefinedVariables"
 
 const versionedObject = z.object({
  v: z.number(),
@@ -58,12 +59,23 @@ export function parseBodyEnvVariablesE(
 
  while (result.match(REGEX_ENV_VAR) != null && depth <= ENV_MAX_EXPAND_LIMIT) {
  result = result.replace(REGEX_ENV_VAR, (key) => {
- const found = env.find(
- (envVar) => envVar.key === key.replace(/[<>]/g, "")
+ const variableName = key.replace(/[<>]/g, "");
+
+ // Prioritise predefined variable values over normal environment variables processing.
+ const foundPredefinedVar = HOPP_SUPPORTED_PREDEFINED_VARIABLES.find(
+ (preVar) => preVar.key === variableName
+ )
+
+ if (foundPredefinedVar) {
+ return foundPredefinedVar.value();
+ }
+
+ const foundEnv = env.find(
+ (envVar) => envVar.key === variableName
  )
 
- if (found && "value" in found) {
- return found.value
+ if (foundEnv && "value" in foundEnv) {
+ return foundEnv.value
  }
  return key
  })

packages/hoppscotch-data/src/predefinedVariables.ts

@@ -1,10 +1,20 @@
 export type PredefinedVariable = {
  key: `$${string}`
+ description: string
  value: () => string
 }
 
-export const HOPP_PREDEFINED_VARIABLES: PredefinedVariable[] = [
+export const HOPP_SUPPORTED_PREDEFINED_VARIABLES: PredefinedVariable[] = [
  {
- key: "$guid", value: () => "THIS_IS_THE_GUID_VALUE"
+ key: "$guid",
+ description: 'A v4 style GUID.',
+ value: () => "FAKE_GUID_VALUE_EXAMPLE"
  },
+ {
+ key: "$nowISO",
+ description: "Current date and time in ISO-8601 format.",
+ value: () => new Date().toISOString()
+ },
+
+ // TODO: Support various other predefined variables
 ]