@react-converter/core

The core conversion engine for react-converter. This library provides the logic for parsing JSX, transforming ASTs, and generating framework-free vanilla JavaScript components.

Features

• JSX Parsing: Uses Babel to parse JSX and TypeScript.
• AST Transformations: Converts React-style JSX into DOM-manipulation logic.
• TailwindCSS Integration: Automatically extracts Tailwind classes and builds a minimal CSS bundle.
• Web Component Support: Can wrap components into native Web Components with Shadow DOM.
• Hooks Runtime: Provides a lightweight runtime for useState, useEffect, and useRef.

Installation

npm install @react-converter/core

API Usage

convert(code, options)

The main function to transform React code into vanilla JS.

import { convert } from '@react-converter/core';

const code = `
  function Greeting({ name }) {
    return <h1 className="text-blue-500">Hello {name}</h1>;
  }
`;

const result = await convert(code, {
  fileName: 'Greeting.jsx',
  tailwindConfig: './tailwind.config.js',
  webComponent: true,
  webComponentTag: 'my-greeting'
});

console.log(result.code);
// Output: Vanilla JS code implementing the component

Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | fileName | string | 'component.jsx' | Used for identifying the component and naming. | | tailwindConfig | string | null | Path to your tailwind.config.js file. | | webComponent | boolean | false | Whether to emit a Web Component. | | webComponentTag | string | null | Custom tag name for the Web Component. | | usePlaceholders | boolean | false | Use $prefix for props as placeholders. |

Advanced Exports

The core also exports individual modules for more granular control:

• parseFile(code): Parses code into a Babel AST.
• transform(ast, options): Transforms the AST into an intermediate representation.
• generateCode(components, fileName, options): Generates final JS code.
• buildTailwindCSS({ configPath, content }): Compiles Tailwind CSS.
• findTailwindConfig(inputDir): Helper to locate tailwind.config.js.

Architecture

The core is divided into several modules:

1. Parser: Babel-based parser for modern JS/TS/JSX.
2. Transformer: Traverses the AST to extract component logic and prepare it for generation.
3. Generator: Takes the transformed data and produces the final string output.
4. Tailwind: Handles class extraction and CSS compilation using PostCSS.
5. Runtime: Minimalistic JS snippets for DOM manipulation and hooks support, which are embedded into the output.

License

Proprietary. See main repository for details.