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 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:

npm install aroma-jsx-engine

Or via yarn:

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

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

<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

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)

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

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