Hexadecimal to Decimal Literal Transformer

Problem Statement

Create a Babel plugin that transforms hexadecimal numeric literals in JavaScript code to their decimal equivalents during the code generation phase. The plugin should leverage Babel's code generator behavior to produce the output, rather than directly manipulating the AST nodes.

Your plugin should handle hexadecimal literals (e.g., 0xFF, 0x1A2B) and ensure they are output as decimal numbers in the generated code.

Requirements

1. Plugin Structure: Create a proper Babel plugin that exports a plugin function using the standard Babel plugin API.

2. Generator Integration: Use an indirect transformation approach by manipulating AST node metadata properties rather than directly rewriting the nodes. Let Babel's code generator handle the actual output formatting.

3. Hexadecimal Detection: Identify hexadecimal numeric literals in the source code (prefixes 0x or 0X).

4. Transformation: Ensure that when the code is generated, hexadecimal literals are output as their decimal equivalents (e.g., 0xFF becomes 255).

5. Member Expression Support: The plugin must correctly handle hexadecimal literals used in member expressions (e.g., 0xFF.toString()).

Implementation Details

• The main transformation should occur by manipulating node properties, not by creating new nodes
• Allow Babel's generator to handle the actual numeric output format
• The plugin should be stateless and work with the visitor pattern

Test Cases { .test-cases }

Test Case 1: Basic Hexadecimal Transformation { .test-case }

Input:

const value = 0xFF;
const another = 0x1A;

Expected Output:

const value = 255;
const another = 26;

@test

Test Case 2: Case Insensitive Prefix { .test-case }

Input:

const upper = 0XAB;
const lower = 0xcd;

Expected Output:

const upper = 171;
const lower = 205;

@test

Test Case 3: Member Expression { .test-case }

Input:

const str = 0xFF.toString();

Expected Output:

const str = 255.toString();

@test

File Structure

src/
  index.js          # Main plugin implementation
src/
  index.test.js     # Test file with the above test cases
package.json        # Package configuration

Dependencies { .dependencies }

@babel/core { .dependency }

Provides the Babel transformation system and APIs for creating plugins.

@babel/helper-plugin-utils { .dependency }

Provides utilities for declaring and managing Babel plugins across versions.