API Reference

This document provides technical details about the YAML to JSON Converter tool's functionality and implementation.

Tool Architecture

Frontend Implementation

Technology Stack

Framework: Vue.js 3 with Composition API
Build Tool: Nuxt.js 4
Styling: TailwindCSS v4
YAML Processing: js-yaml library
State Management: Pinia store

Core Components

Main Component: `yaml-to-json.vue`

<template>
  <ToolLayout id="yaml-to-json">
    <!-- Tool interface -->
  </ToolLayout>
</template>

<script setup lang="ts">
import * as yaml from 'js-yaml';
// Component logic
</script>

State Management: `tools.ts`

interface ToolsState {
  yamlToJson: {
    history: Array<{
      id: string;
      input: string;
      output: string;
      inputLength: number;
      outputLength: number;
      inputPreview: string;
      timestamp: number;
    }>;
  };
}

Conversion Process

YAML Parsing

Library Used

js-yaml: Version 4.1.0
TypeScript Support: @types/js-yaml 4.0.9

Parsing Configuration

const yamlDoc = yaml.load(yamlInput.value, {
  // Default options
  strict: false,
  schema: yaml.DEFAULT_SCHEMA,
});

Error Handling

try {
  const yamlDoc = yaml.load(yamlInput.value);
  jsonOutput.value = JSON.stringify(yamlDoc, null, 2);
} catch (error: any) {
  hasError.value = true;
  errorMessage.value = error.message;
}

JSON Generation

Formatting Options

// Pretty print (default)
JSON.stringify(yamlDoc, null, 2);

// Minified
JSON.stringify(yamlDoc);

Output Validation

JSON.parse(): Validates generated JSON
Error Recovery: Handles malformed JSON gracefully
Type Preservation: Maintains data types from YAML

Data Flow

Input Processing

User Input: YAML content entered in textarea
Real-time Validation: Continuous syntax checking
Error Detection: Immediate error highlighting
Conversion Trigger: Automatic conversion on valid input

Output Generation

YAML Parsing: Parse YAML using js-yaml
JSON Conversion: Convert to JSON using JSON.stringify
Formatting: Apply formatting options
Display: Show result in output textarea

History Management

Conversion Tracking: Record successful conversions
Metadata Storage: Store input/output lengths and previews
Local Persistence: Save to browser local storage
Retrieval: Allow restoration of previous conversions

Browser APIs Used

Clipboard API

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
  } catch (error) {
    console.error('复制失败:', error);
  }
};

File Download API

const downloadJson = () => {
  const blob = new Blob([jsonOutput.value], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'output.json';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

Local Storage API

// Pinia persistence configuration
persist: [
  {
    storage: piniaPluginPersistedstate.localStorage(),
  },
];

Supported YAML Features

Data Types

Strings: Quoted and unquoted strings
Numbers: Integers, floats, scientific notation
Booleans: true/false, yes/no, on/off
Null Values: null, ~, empty
Dates: ISO 8601 format

Structures

Mappings: Key-value pairs
Sequences: Arrays/lists
Nested Structures: Complex hierarchies
Inline Syntax: Compact representations

Advanced Features

Anchors & Aliases: Reference and reuse
Multi-line Strings: Literal and folded
Comments: YAML comments (limited JSON support)
Tags: Custom type tags

Error Handling

YAML Parsing Errors

interface YAMLError {
  name: string;
  message: string;
  mark?: {
    line: number;
    column: number;
    position: number;
  };
}

Common Error Types

Syntax Errors: Malformed YAML syntax
Indentation Errors: Inconsistent indentation
Type Errors: Invalid data types
Structure Errors: Malformed structures

Error Display

Visual Indicators: Red borders, error badges
Error Messages: Detailed error descriptions
Error Recovery: Graceful error handling

Performance Considerations

Memory Management

Efficient Parsing: Optimized YAML parsing
Garbage Collection: Proper cleanup of temporary data
Size Limits: Browser memory limitations

Processing Speed

Real-time Conversion: Immediate processing
Large Documents: Efficient handling of large files
Error Recovery: Fast error detection and reporting

Browser Compatibility

Supported Browsers

Chrome: Version 90+
Firefox: Version 88+
Safari: Version 14+
Edge: Version 90+

Required Features

ES6 Support: Modern JavaScript features
Clipboard API: For copy functionality
Blob API: For file downloads
Local Storage: For history persistence

Security Implementation

Client-Side Security

No Server Communication: All processing local
No Data Transmission: No external data sharing
Sandboxed Execution: Browser security sandbox

Data Protection

Local Processing Only: No external data exposure
No Logging: No server-side logging
User Control: Full user control over data

Configuration Options

YAML Parsing Options

const yamlOptions = {
  strict: false, // Allow non-standard YAML
  schema: yaml.DEFAULT_SCHEMA, // Use default schema
  prettyErrors: true, // Pretty error messages
  onWarning: (warning) => {
    // Handle warnings
    console.warn(warning);
  },
};

JSON Output Options

const jsonOptions = {
  space: 2, // Indentation spaces
  replacer: null, // No value transformation
  replacer: (key, value) => {
    // Custom value transformation
    return value;
  },
};