Data Converter Utilities
Relevant source files
The following files were used as context for generating this wiki page:
Data Converter Utilities is a core feature within the DevUtils suite designed to facilitate seamless conversion between various structured data formats. It serves as a "swivel knife" for developers who need to transform data structures between formats like JSON, CSV, TSV, XML, and YAML during development and debugging workflows.
Sources: README.md, messages/en.json:115-127
Architecture and Integration
The utility is implemented as a React client component called DataConverter. It is integrated into the main application via the ToolContent component, which maps the internal tool ID json-csv to the DataConverter implementation.
Sources: components/tools/data-converter.tsx:28, components/tool-content.tsx:34
Data Flow Overview
The system follows a reactive data flow where input text is parsed into an intermediate JavaScript unknown type (representing the data structure) before being stringified into the requested target format.
The conversion process is automatically triggered via a useEffect hook whenever the inputText, sourceFormat, or targetFormat changes.
Sources: components/tools/data-converter.tsx:431-443
Supported Formats and Transformations
The utility supports a fixed set of data formats defined by the DataFormat type.
| Format | Parsing Strategy | Conversion Strategy |
|---|---|---|
| JSON | Native JSON.parse with optional Regex auto-fix | Native JSON.stringify with 2-space indentation |
| CSV | Custom delimiter-aware line parser | Object flattening with header discovery |
| TSV | CSV parser using \t as delimiter | Object flattening using \t as delimiter |
| XML | Browser DOMParser | Recursive node builder with attribute support (@ prefix) |
| YAML | Line-by-line regex-based parser | Recursive indent-based stringifier |
Sources: components/tools/data-converter.tsx:23, components/tools/data-converter.tsx:82-364
JSON Auto-Fix Logic
A specialized autoFixJson function attempts to repair common malformed JSON patterns before parsing fails. This feature can be toggled by the user via the UI.
The auto-fix logic specifically targets:
- Unquoted keys:
{[a-zA-Z_]...:}→{"key":} - Single-quoted strings
- Trailing commas:
[1, 2, ]→[1, 2] - Missing closing delimiters by counting open vs. closed braces
{}and brackets[].
Sources: components/tools/data-converter.tsx:44-79
Core Implementation Details
Parser Functions
The utility defines specific parsers for non-native formats:
- parseCSVLine: Handles quoted fields, escaped double quotes, and delimiter detection.
- parseXml: Uses
DOMParserand recursively traverses the document to create a JSON-compatible object. - parseYaml: Iterates through lines to handle basic key-value pairs and array notations (
-).
Sources: components/tools/data-converter.tsx:103-210
Converter Functions
Transformation logic is encapsulated in dedicated "to" functions:
- toCsv: Implements a flattening algorithm for nested objects, using a dot-notation (e.g.,
user.name) to represent depth in a 2D grid. - toXml: Builds a string representation using a
rootName(defaulting to "root") and escapes special characters like&,<, and>. - toYaml: Handles recursive indentation and conditional quoting for special characters such as
#,[,],{,}, and:.
Sources: components/tools/data-converter.tsx:220-364
User Interface Components
The interface is built using a set of UI primitives (likely from a local UI library as indicated by the @/components/ui imports).
| Component | Functionality |
|---|---|
| Format Selectors | Allows choosing sourceFormat and targetFormat. |
| Auto-Fix Switch | Toggles the autoFixEnabled state. |
| Input Panel | A Textarea for pasting raw data, labeled with the current source format. |
| Output Panel | A read-only Textarea displaying the result with a "Copy" button. |
| Status Bar | Displays error messages or a success badge if an auto-fix was applied. |
Sources: components/tools/data-converter.tsx:445-565, package.json:44-60
Dependencies
The module relies on several external and internal packages for its functionality:
- react-i18next: For internationalization of labels and placeholders.
- lucide-react: For iconography (e.g.,
Wand2,ArrowRight,Trash2). - clsx / tailwind-merge: For dynamic styling of the UI components.
- Custom Hooks: Uses
useCopyAnimationfor providing visual feedback when the output is copied.
Sources: components/tools/data-converter.tsx:4-21, package.json:61-83
Conclusion
Data Converter Utilities provides a robust, client-side solution for data transformation within DevUtils. By combining native browser capabilities (like DOMParser and JSON.parse) with custom recursive logic for YAML and CSV, it ensures that developers can quickly pivot between different data representations while offering high-level features like JSON auto-repair.
Sources: components/tools/data-converter.tsx