aroma-jsx-engine/README.md

A lightweight and flexible JSX/TSX engine for rendering React components in Node.js applications. Designed to work seamlessly with the [`aroma.js`](https://www.npmjs.com/package/aroma.js) framework, this package allows you to compile and render JSX/TSX co

# aroma-jsx-engine

A lightweight and flexible JSX/TSX engine for rendering React components in Node.js applications. Designed to work seamlessly with the [`aroma.js`](https://www.npmjs.com/package/aroma.js) framework, this package allows you to compile and render JSX/TSX components dynamically, making it perfect for server-side rendering (SSR).

---

## Features

- **Dynamic JSX/TSX Compilation**: Automatically detects and compiles both JavaScript (`.jsx`) and TypeScript (`.tsx`) files.
- **Lightweight**: Minimal dependencies, designed to keep your project lightweight.
- **Easy Integration**: Works seamlessly with `aroma.js` and other Node.js frameworks.
- **TypeScript Support**: Built-in support for TypeScript components.
- **Server-Side Rendering (SSR)**: Render React components to HTML strings for SSR.

---

## Installation

You can install `aroma-jsx-engine` via npm:

```bash
npm install aroma-jsx-engine
```

Or via yarn:

```bash
yarn add aroma-jsx-engine
```

## Usage

1. Compile and Render JSX/TSX
   You can compile and render JSX/TSX components dynamically in your Node.js application.

Example

```javascript
const { compile, render } = require("aroma-jsx-engine");

// Define a JSX component as a string
const jsxCode = `
    const MyComponent = ({ name, React }) => (
        <div>
            <h1>Hello, {name}!</h1>
            <p>This is a JSX component.</p>
        </div>
    );
    module.exports = MyComponent;
`;

// Compile the JSX code
const MyComponent = compile(jsxCode);

// Render the component to an HTML string
const htmlString = render(MyComponent, { name: "World" });
console.log(htmlString);
```

Output

```html
<div>
  <h1>Hello, World!</h1>
  <p>This is a JSX component.</p>
</div>
```

2. Load and Render JSX/TSX from Files
   You can also load and render JSX/TSX components from external files.

Example

```javascript
const { loadFromFile, render } = require("aroma-jsx-engine");

// Load a JSX/TSX component from a file
const MyComponent = loadFromFile("./components/MyComponent.tsx");

// Render the component to an HTML string
const htmlString = render(MyComponent, { name: "World" });
console.log(htmlString);
```

Example JSX/TSX File (MyComponent.tsx)

```tsx
interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => (
  <div>
    <h1>Hello, {name}!</h1>
    <p>This is a TSX component loaded from an external file.</p>
  </div>
);

module.exports = MyComponent;
```

3. Use with aroma.js

aroma-jsx-engine integrates seamlessly with the aroma.js framework for server-side rendering.

Example

```javascript
const Aroma = require("aroma.js");
const { loadFromFile, render } = require("aroma-jsx-engine");
const app = new Aroma();

// Load a JSX/TSX component from a file
const MyComponent = loadFromFile("./components/MyComponent.tsx");

// Define a route that renders the component
app.get("/", (req, res) => {
  const htmlString = render(MyComponent, { name: "World" });
  res.send(htmlString);
});

// Start the server
app.listen(3000, () => console.log("Server running on port 3000"));
```

## Author

Aavesh Jilani