[PR #3886] [MERGED] feat: support for predefined variables #4569

New issue

Closed

opened 2026-03-17 02:05:34 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:05:34 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3886
Author: @kishannareshpal
Created: 3/10/2024
Status: ✅ Merged
Merged: 9/30/2024
Merged by: @jamesgeorge007

Base: next ← Head: feat/predefined-variable

📝 Commits (10+)

2da7128 feat: support for predefined variables (WIP)
fca9787 fix: working prototype
15943d6 chore: predefined varilable color
e284c76 feat: added more predefined variables
d85011f fix: ensure pre-defined variables resolve correctly during request execution
170b00e feat: account for pre-defined variables in the autocomplete list
8aa9cc5 feat: highlight pre-defined variables under request variables in bulk mode
e72aec1 chore: refrain from highlighting pre-defined variables in the realtime page
1749935 chore: cleanup
a59306a chore: clean up

📊 Changes

14 files changed (+608 additions, -17 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/styles.scss (+14 -0)
📝 packages/hoppscotch-common/src/components/environments/my/Details.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/http/Headers.vue (+1 -0)
📝 packages/hoppscotch-common/src/components/http/Parameters.vue (+1 -0)
📝 packages/hoppscotch-common/src/components/http/RawBody.vue (+1 -0)
📝 packages/hoppscotch-common/src/components/http/RequestVariables.vue (+1 -0)
📝 packages/hoppscotch-common/src/components/http/URLEncodedParams.vue (+1 -0)
📝 packages/hoppscotch-common/src/components/smart/EnvInput.vue (+9 -3)
📝 packages/hoppscotch-common/src/composables/codemirror.ts (+12 -0)
➕ packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts (+142 -0)
📝 packages/hoppscotch-common/src/newstore/environments.ts (+30 -8)
📝 packages/hoppscotch-data/src/environment/index.ts (+23 -4)
📝 packages/hoppscotch-data/src/index.ts (+1 -0)
➕ packages/hoppscotch-data/src/predefinedVariables.ts (+370 -0)

📄 Description

References

Closes HFE-549 #3317

Description

The idea is to introduce a feature similar to:

https://learning.postman.com/docs/writing-scripts/script-references/variables-list/

This feature is being built based on the work done for https://docs.hoppscotch.io/documentation/getting-started/rest/environment-variables.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

Remarks

Predefined variables takes precedence over manually defined environment / secret variables. E.g. If you define an environment / secret variable called $guid while $guid is a predefined variable that computes to a random GUID, the request parser will use the predefined variable over your manually defined variable.

Demonstration

This video demonstrates the use of a Predefined variable in Hoppscotch. At the first instance you will see a usage of a normal environment variable myvar, and after that the video shows the use of a predefined variable called $nowIso which computes to the current time at the time of request. After that, the video also shows the usage of another predefined variable called $guid that computes to a random GUID value (noting that for demonstrations purposed the GUID value is just a simple string random string).

The video also shows a green border with green background on hover highlighting a valid predefined variable, while a red border with a red hover background is shown highlighting an invalid predefined variable. Hovering over a predefined variable name, a brief description is shown.

https://github.com/hoppscotch/hoppscotch/assets/25407841/df1b8f22-60aa-44dd-8b34-4480c0068abb

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3886 **Author:** [@kishannareshpal](https://github.com/kishannareshpal) **Created:** 3/10/2024 **Status:** ✅ Merged **Merged:** 9/30/2024 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat/predefined-variable` --- ### 📝 Commits (10+) - [`2da7128`](https://github.com/hoppscotch/hoppscotch/commit/2da71287d6d272c828cc23629c5c9698b640a26f) feat: support for predefined variables (WIP) - [`fca9787`](https://github.com/hoppscotch/hoppscotch/commit/fca9787f5d4e68e69d265fccdcd17cc426939ea6) fix: working prototype - [`15943d6`](https://github.com/hoppscotch/hoppscotch/commit/15943d6319ae144a1cf4ec3269327a49da3e10df) chore: predefined varilable color - [`e284c76`](https://github.com/hoppscotch/hoppscotch/commit/e284c7689bdf90870be8d38c40cabe29a9a69841) feat: added more predefined variables - [`d85011f`](https://github.com/hoppscotch/hoppscotch/commit/d85011f1bb295d12ad66e7b02b9d06d24056dab3) fix: ensure pre-defined variables resolve correctly during request execution - [`170b00e`](https://github.com/hoppscotch/hoppscotch/commit/170b00eb37b7fd740a323f33262b0b9a80c7ee43) feat: account for pre-defined variables in the autocomplete list - [`8aa9cc5`](https://github.com/hoppscotch/hoppscotch/commit/8aa9cc5e9bc1c640fff7e27a8c5c02accebd7963) feat: highlight pre-defined variables under request variables in bulk mode - [`e72aec1`](https://github.com/hoppscotch/hoppscotch/commit/e72aec1363c9ac49d1326bf037111876b7248049) chore: refrain from highlighting pre-defined variables in the realtime page - [`1749935`](https://github.com/hoppscotch/hoppscotch/commit/1749935ef1e741475e4638aaf8367c1e8d344506) chore: cleanup - [`a59306a`](https://github.com/hoppscotch/hoppscotch/commit/a59306a2875afb7613ffdf36520b793d065d20ac) chore: clean up ### 📊 Changes **14 files changed** (+608 additions, -17 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/styles.scss` (+14 -0) 📝 `packages/hoppscotch-common/src/components/environments/my/Details.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/http/Headers.vue` (+1 -0) 📝 `packages/hoppscotch-common/src/components/http/Parameters.vue` (+1 -0) 📝 `packages/hoppscotch-common/src/components/http/RawBody.vue` (+1 -0) 📝 `packages/hoppscotch-common/src/components/http/RequestVariables.vue` (+1 -0) 📝 `packages/hoppscotch-common/src/components/http/URLEncodedParams.vue` (+1 -0) 📝 `packages/hoppscotch-common/src/components/smart/EnvInput.vue` (+9 -3) 📝 `packages/hoppscotch-common/src/composables/codemirror.ts` (+12 -0) ➕ `packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts` (+142 -0) 📝 `packages/hoppscotch-common/src/newstore/environments.ts` (+30 -8) 📝 `packages/hoppscotch-data/src/environment/index.ts` (+23 -4) 📝 `packages/hoppscotch-data/src/index.ts` (+1 -0) ➕ `packages/hoppscotch-data/src/predefinedVariables.ts` (+370 -0) </details> ### 📄 Description  ### References  Closes HFE-549 #3317 ### Description  The idea is to introduce a feature similar to: - https://learning.postman.com/docs/writing-scripts/script-references/variables-list/ This feature is being built based on the work done for https://docs.hoppscotch.io/documentation/getting-started/rest/environment-variables.  ### Checks  - [ ] My pull request adheres to the code style of this project - [x] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information  #### Remarks - Predefined variables takes precedence over manually defined environment / secret variables. E.g. If you define an environment / secret variable called `$guid` while `$guid` is a predefined variable that computes to a random GUID, the request parser will use the predefined variable over your manually defined variable. #### Demonstration This video demonstrates the use of a Predefined variable in Hoppscotch. At the first instance you will see a usage of a normal environment variable `myvar`, and after that the video shows the use of a predefined variable called `$nowIso` which computes to the current time at the time of request. After that, the video also shows the usage of another predefined variable called `$guid` that computes to a random GUID value (noting that for demonstrations purposed the GUID value is just a simple string random string). The video also shows a green border with green background on hover highlighting a valid predefined variable, while a red border with a red hover background is shown highlighting an invalid predefined variable. Hovering over a predefined variable name, a brief description is shown. https://github.com/hoppscotch/hoppscotch/assets/25407841/df1b8f22-60aa-44dd-8b34-4480c0068abb --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>