TSXD (TSX Deserializer)

TSXD is a lightweight library that converts TSX code into a structured JSON format. This can be useful for various applications, such as building native Linux UIs with React, parsing components for static analysis, or generating UI definitions dynamically.

🚀 Features

• Convert TSX to JSON effortlessly.
• Resolve and include imported components.
• Handle nested elements, attributes, and dynamic expressions.

🛠️ Installation

Install TSXD via npm:

npm install @tsxd/core

📖 Usage

Import tsxToJson and pass your TSX code as a string:

import { tsxToJson } from "@tsxd/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 pass an optional resolvePath to parse and include imported components from the file system:

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

TSXD 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.

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📜 License

MIT License

Happy parsing! 🛠️⚡