als-render-jsx

als-render-jsx Documentation

als-render-jsx is a JavaScript library that transforms JSX-like code into plain JavaScript. It is designed to mimic JSX syntax while enabling runtime evaluation and rendering in both Node.js and browser environments.

Limitations and Flexibility

• By default, als-render-jsx is intended to work with the als-component library, seamlessly integrating JSX-like components into projects.
• The library is highly customizable. You can override its two core static functions:
  • RenderJsx.componentFn — to define how components are rendered.
  • RenderJsx.buildAction — to define how event handlers are processed.
• With these overrides, the library can become universal and adaptable to various use cases.

Installation and Import

Install the library using npm:

npm i als-render-jsx

Importing

In a Node.js environment, import the library as follows:

const RenderJsx = require('als-render-jsx');

In the browser, include the library using a script tag:

Development Version

<script src="/node_modules/als-render-jsx/render-jsx.js"></script>

Minified Production Version

<script src="/node_modules/als-render-jsx/render-jsx.min.js"></script>

Basic Usage

Use the RenderJsx.render method to transform JSX-like code into plain JavaScript.

Example

Input

const component = /*js*/`function Some() {
   const inner = 'Hello world!';
   return (<div>{inner}</div>);
}`;
const result = RenderJsx.render(component);
console.log(result);

Output

function Some() {
   const inner = 'Hello world!';
   return `<div>${inner}</div>`;
}

Nested JSX Example

Input

const component = /*js*/`function Parent() {
   return (<div><Child>some inner</Child></div>);
}`;
const result = RenderJsx.render(component);
console.log(result);

Output

function Parent() {
   return `<div>${(new Child({}, \`some inner\`)).call()}</div>`;
}

Customizing componentFn and buildAction

als-render-jsx allows you to redefine two core functions to suit your needs.

RenderJsx.componentFn(isAwait, tagName, props, inner)

This function defines how components are rendered. By default, it returns an initialization of another component.

Default Behavior

RenderJsx.componentFn = function (isAwait, tagName, props, inner) {
   return `${isAwait}(new ${tagName}(${props}, \`${inner}\`)).call()`;
};

Async Prop

• If a component includes the async={true} prop in the JSX, the isAwait parameter becomes true.

Example Override

You can customize the function to return a string representation for debugging:

RenderJsx.componentFn = function (isAwait, tagName, props, inner) {
   return `Debug: { isAwait: ${isAwait}, tagName: ${tagName}, props: ${props}, inner: ${inner} }`;
};

RenderJsx.buildAction([name, value])

This function processes event handlers and assigns listeners after the HTML is rendered.

Default Behavior

RenderJsx.buildAction = function ([name, value]) {
   const event = name.split('on')[1].toLowerCase();
   value = `$${this.action('${event}', ${value})}`;
   return [event, value];
};

Example Override

Customize it to log all event assignments:

RenderJsx.buildAction = function ([name, value]) {
   console.log(`Assigning event: ${name} with handler: ${value}`);
   return [name, value];
};

Advanced Examples

Multiple Components

Input

const components = /*js*/`function Parent() {
   return (<div><Child prop="value">Hello</Child></div>);
}`;
const result = RenderJsx.render(components);
console.log(result);

Output

function Parent() {
   return `<div>${(new Child({prop: "value"}, \`Hello\`)).call()}</div>`;
}

Custom componentFn and buildAction

Custom Function Definitions

RenderJsx.componentFn = function (isAwait, tagName, props, inner) {
   return `CustomComponent(${tagName}, ${props}, ${inner})`;
};

RenderJsx.buildAction = function ([name, value]) {
   return [`custom-${name}`, `handle(${value})`];
};

Input

const components = /*js*/`function App() {
   return (<div onClick={handleClick}>Click Me</div>);
}`;
const result = RenderJsx.render(components);
console.log(result);

Output

function App() {
   return `<div custom-onClick="handle(handleClick)">Click Me</div>`;
}

This demonstrates how you can fully control the behavior of the library to match your specific requirements.