Blog
Papa Parse library in Hoppscotch codebase.

Papa Parse library in Hoppscotch codebase.

In this article, we reviw Papaparse library in Hoppscotch codebase. We will look at:

  1. What is Hoppscotch?

  2. What is Papaparse?

  3. Papaparse usage in Hoppscotch codebase.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Hoppscotch codebase and wrote this article.

What is Hoppscotch?

Hoppscotch is an open source API development ecosystem — https://hoppscotch.io. It is an alternative to Postman, Insomnia.

Check out the Hoppscotch documentation to learn more.

What is Papaparse?

Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript. It is reliable and correct according to RFC 4180, and it comes with these features:

  • Easy to use

  • Parse CSV files directly (local or over the network)

  • Fast mode

  • Stream large files (even via HTTP)

  • Reverse parsing (converts JSON to CSV)

  • Auto-detect delimiter

  • Worker threads to keep your web page reactive

  • Header row support

  • Pause, resume, abort

  • Can convert numbers and booleans to their types

  • Optional jQuery integration to get files from <input type="file"> elements

  • One of the only parsers that correctly handles line-breaks and quotations

Papa Parse has no dependencies — not even jQuery.

Usage

import Papa from 'papaparse';

Papa.parse(file, config);
    
const csv = Papa.unparse(data[, config]);

Learn more about Papa Parse.

Papa Parse usage in Hoppscotch codebase.

In test.ts, you will find the below import:

import Papa from "papaparse";
...
  const csvData = fs.readFileSync(iterationData, "utf8");
  parsedIterationData = Papa.parse(csvData, { header: true }).data;
...

I would also check what sort of config Papa Parse supports. It was not obvious to find out supported config. So I dug through the Papa Parse source code and found this below code snippet:

function JsonToCsv(_input, _config)
 {
  // Default configuration

  /** whether to surround every datum with quotes */
  var _quotes = false;

  /** whether to write headers */
  var _writeHeader = true;

  /** delimiting character(s) */
  var _delimiter = ',';

  /** newline character(s) */
  var _newline = '\r\n';

  /** quote character */
  var _quoteChar = '"';

  /** escaped quote character, either "" or <config.escapeChar>" */
  var _escapedQuote = _quoteChar + _quoteChar;

  /** whether to skip empty lines */
  var _skipEmptyLines = false;

  /** the columns (keys) we expect when we unparse objects */
  var _columns = null;

  /** whether to prevent outputting cells that can be parsed as formulae by spreadsheet software (Excel and LibreOffice) */
  var _escapeFormulae = false;

I am not entirely sure how you would pass these in the config. Weird…

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

  1. https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-cli/src/commands/test.ts#L3

  2. https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-cli/src/commands/test.ts#L68

  3. https://www.npmjs.com/package/papaparse

  4. https://github.com/mholt/PapaParse/blob/master/papaparse.js#L264C2-L293C31