Modern JavaScript Transpiler

Build a simple JavaScript transpilation tool that transforms modern JavaScript features into browser-compatible code.

Objective

Create a utility that takes modern JavaScript/JSX code as input and outputs transpiled code compatible with older browsers. Your tool should leverage a Babel preset to handle the transformation.

Requirements

Core Functionality

Your tool must implement a transpile function that:

1. Accepts a JavaScript/JSX code string as input
2. Transpiles the code to ES5-compatible JavaScript
3. Returns the transpiled code as a string
4. Handles syntax errors gracefully by throwing informative errors

Supported Features

Your transpiler must handle:

• JSX syntax - Transform JSX elements to standard JavaScript
• Modern JavaScript - Arrow functions, template literals, and other ES6+ features
• Async/await - Async function transformation
• React-specific features - Class properties and other React patterns

Error Handling

• Throw descriptive errors when invalid JavaScript syntax is provided
• Provide error messages that help identify the issue

Implementation

@generates

API

/**
 * Transpiles modern JavaScript/JSX code to ES5-compatible code
 * @param {string} code - The modern JavaScript/JSX code to transpile
 * @param {Object} options - Optional configuration
 * @param {boolean} options.jsx - Whether to transform JSX (default: true)
 * @returns {string} The transpiled JavaScript code
 * @throws {Error} If the code contains syntax errors
 */
function transpile(code, options = {}) {
  // Implementation
}

module.exports = { transpile };

Test Cases

Basic JSX Transformation

• Transforms a simple JSX element into function calls @test

const input = '<div>Hello World</div>';
const output = transpile(input);
// Output should not contain JSX syntax
// Output should be valid JavaScript

Arrow Function Transformation

• Converts arrow functions to regular function expressions @test

const input = 'const add = (a, b) => a + b;';
const output = transpile(input);
// Output should not use arrow function syntax

Async/Await Support

• Transforms async/await to generator-based code or promises @test

const input = 'async function fetchData() { await fetch("/api"); }';
const output = transpile(input);
// Output should be compatible with older browsers

Syntax Error Handling

• Throws an error when given invalid JavaScript syntax @test

const invalidCode = 'const x = ;';
// Should throw an error with a descriptive message

Dependencies { .dependencies }

babel-preset-react-app { .dependency }

Provides JavaScript and JSX transformation capabilities with preset configurations for modern JavaScript features, React JSX, and TypeScript support.