[PR #5458] feat: add reusable JavaScript functions library for pre-request scripts [Hacktoberfest] #5224

New issue

Open

opened 2026-03-17 02:41:29 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:41:29 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5458
Author: @abhishekmaniy
Created: 10/7/2025
Status: 🔄 Open

Base: main ← Head: feat/reusable-functions-library

📝 Commits (1)

09adadf feat: add reusable JavaScript functions library for pre-request scripts

📊 Changes

13 files changed (+484 additions, -7 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+15 -0)
📝 packages/hoppscotch-common/src/components/http/RequestOptions.vue (+8 -0)
➕ packages/hoppscotch-common/src/components/http/ReusableFunctions.vue (+223 -0)
📝 packages/hoppscotch-common/src/helpers/RequestRunner.ts (+5 -0)
📝 packages/hoppscotch-common/src/helpers/workers/sandbox.worker.ts (+7 -1)
➕ packages/hoppscotch-common/src/newstore/reusableFunctions.ts (+141 -0)
📝 packages/hoppscotch-data/src/index.ts (+1 -0)
➕ packages/hoppscotch-data/src/reusable-functions/index.ts (+39 -0)
📝 packages/hoppscotch-js-sandbox/src/bootstrap-code/pre-request.js (+11 -0)
📝 packages/hoppscotch-js-sandbox/src/cage-modules/scripting-modules.ts (+9 -1)
➕ packages/hoppscotch-js-sandbox/src/cage-modules/utils/reusable-functions.ts (+15 -0)
📝 packages/hoppscotch-js-sandbox/src/types/index.ts (+3 -1)
📝 packages/hoppscotch-js-sandbox/src/web/pre-request/index.ts (+7 -4)

📄 Description

Summary

Implements a reusable JavaScript functions library that allows users to define and store common functions for use across multiple
pre-request scripts. This addresses the need for better script reusability, reduces code duplication, and enhances developer productivity
by providing a centralized function management system.

Key Features

Centralized Function Library: Create, edit, and manage reusable JavaScript functions in one place
Rich Code Editor: Monaco editor with JavaScript syntax highlighting and error detection
Seamless Integration: Functions automatically available in all pre-request scripts
CRUD Operations: Full create, read, update, delete functionality with duplication support
Metadata Support: Functions include names, descriptions, and timestamps
Backward Compatible: Existing pre-request scripts continue to work unchanged

Changes Made

Add HoppReusableFunction data types and validation schemas
Create Vue component for function management UI with split-pane layout
Implement store for state management with reactive updates
Integrate function injection into pre-request script sandbox
Add localization strings for new UI elements
Update request options to include new "Reusable Functions" tab

Usage Example

Create a reusable function:

function generateTimestamp() {
  return new Date().toISOString();
}

Use it in any pre-request script:
const timestamp = generateTimestamp();
pw.env.set('currentTimestamp', timestamp);

Technical Implementation

Data Layer: Zod schemas for type validation and data integrity
State Management: Reactive store with dispatchers for all CRUD operations
UI Components: Clean Vue 3 composition API with TypeScript
Script Execution: Integration with existing Faraday Cage sandbox
Type Safety: Full TypeScript support throughout the implementation

Test Plan

Function creation, editing, and deletion works correctly
Functions execute properly in pre-request scripts
Backward compatibility maintained with existing scripts
UI is responsive and accessible
All localization strings display correctly
Type safety verified across all components

_{🔄 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/5458 **Author:** [@abhishekmaniy](https://github.com/abhishekmaniy) **Created:** 10/7/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feat/reusable-functions-library` --- ### 📝 Commits (1) - [`09adadf`](https://github.com/hoppscotch/hoppscotch/commit/09adadf29a172e52af00596de16aa4826bd20a09) feat: add reusable JavaScript functions library for pre-request scripts ### 📊 Changes **13 files changed** (+484 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+15 -0) 📝 `packages/hoppscotch-common/src/components/http/RequestOptions.vue` (+8 -0) ➕ `packages/hoppscotch-common/src/components/http/ReusableFunctions.vue` (+223 -0) 📝 `packages/hoppscotch-common/src/helpers/RequestRunner.ts` (+5 -0) 📝 `packages/hoppscotch-common/src/helpers/workers/sandbox.worker.ts` (+7 -1) ➕ `packages/hoppscotch-common/src/newstore/reusableFunctions.ts` (+141 -0) 📝 `packages/hoppscotch-data/src/index.ts` (+1 -0) ➕ `packages/hoppscotch-data/src/reusable-functions/index.ts` (+39 -0) 📝 `packages/hoppscotch-js-sandbox/src/bootstrap-code/pre-request.js` (+11 -0) 📝 `packages/hoppscotch-js-sandbox/src/cage-modules/scripting-modules.ts` (+9 -1) ➕ `packages/hoppscotch-js-sandbox/src/cage-modules/utils/reusable-functions.ts` (+15 -0) 📝 `packages/hoppscotch-js-sandbox/src/types/index.ts` (+3 -1) 📝 `packages/hoppscotch-js-sandbox/src/web/pre-request/index.ts` (+7 -4) </details> ### 📄 Description ## Summary Implements a reusable JavaScript functions library that allows users to define and store common functions for use across multiple pre-request scripts. This addresses the need for better script reusability, reduces code duplication, and enhances developer productivity by providing a centralized function management system. ## Key Features - **Centralized Function Library**: Create, edit, and manage reusable JavaScript functions in one place - **Rich Code Editor**: Monaco editor with JavaScript syntax highlighting and error detection - **Seamless Integration**: Functions automatically available in all pre-request scripts - **CRUD Operations**: Full create, read, update, delete functionality with duplication support - **Metadata Support**: Functions include names, descriptions, and timestamps - **Backward Compatible**: Existing pre-request scripts continue to work unchanged ## Changes Made - Add `HoppReusableFunction` data types and validation schemas - Create Vue component for function management UI with split-pane layout - Implement store for state management with reactive updates - Integrate function injection into pre-request script sandbox - Add localization strings for new UI elements - Update request options to include new "Reusable Functions" tab ## Usage Example 1. Create a reusable function: ```javascript function generateTimestamp() { return new Date().toISOString(); } 2. Use it in any pre-request script: const timestamp = generateTimestamp(); pw.env.set('currentTimestamp', timestamp); Technical Implementation - Data Layer: Zod schemas for type validation and data integrity - State Management: Reactive store with dispatchers for all CRUD operations - UI Components: Clean Vue 3 composition API with TypeScript - Script Execution: Integration with existing Faraday Cage sandbox - Type Safety: Full TypeScript support throughout the implementation Test Plan - Function creation, editing, and deletion works correctly - Functions execute properly in pre-request scripts - Backward compatibility maintained with existing scripts - UI is responsive and accessible - All localization strings display correctly - Type safety verified across all components --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>