Papa Parse library in Hoppscotch codebase.

#papaparse #hoppscotch #opensource #csv

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

What is Hoppscotch?
What is Papaparse?
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

DEV Community