JsonifyTSX (TSX Deserializer)

JsonifyTSX is a lightweight library that statically parses TSX syntax and transforms it into a normalized JSON representation. This enables advanced use cases such as native Linux UI rendering with React paradigms, component structure analysis, and dynamic generation of UI schemas.

Installation

Install JsonifyTSX via npm:

npm install @jsonifytsx-core

Usage

Import the tsxToJson function and supply your TSX source code as a string input for parsing and conversion to JSON.

import { tsxToJson } from "@jsonifytsx-core";

const tsxCode = `
  export default function App() {
    return <div className="my-class">Hello World</div>;
  }
`;

const result = await tsxToJson(tsxCode);
console.log(result);

Sample Output

{
  "body": [
    {
      "type": "div",
      "className": "my-class",
      "props": {
        "children": ["Hello World"]
      }
    }
  ],
  "imports": {}
}

Advanced Usage

Resolving Imported Components

You can provide an optional resolvePath parameter to enable static analysis and resolution of imported TSX components from the specified file system directory during deserialization.

const tsxCode = fs.readFileSync("tests/files/import-component.tsx", "utf-8");
const result = await tsxToJson(tsxCode, { resolvePath: "tests/files" });
console.log(result);

Sample Output with Imports

{
  "body": [
    {
      "type": "div",
      "className": "my-class",
      "props": {
        "children": [
          {
            "type": "Dummy",
            "props": { "children": [] }
          }
        ]
      }
    }
  ],
  "imports": {
    "Dummy": {
      "type": "div",
      "props": { "children": ["Dummy Component"] }
    }
  }
}

Testing

JsonifyTSX includes unit tests with vitest. Run them with:

npm test

Limitations

• Dynamic expressions beyond simple literals might not be fully supported.
• Imports must be accessible via the provided resolvePath.