jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as html template engine for server or browser.

Breaking change

With jsx-async-runtime >= v2.x.x HTML entities are escaped per default. Read more...

Introduction

This runtime was initially developed for Jeasx, but has a value of its own. Its main focus is to keep things simple, reliable, secure and fast.

You can find more information about using this runtime as template engine in the Jeasx documentation.

Installation

``bash
npm i jsx-async-runtime
`

To make use of the jsx-async-runtime, you need to configure your transpiler to utilize this package for transforming the JSX syntax. If you are using TypeScript or esbuild for transpiling your code base, simply add the following options in your tsconfig.json:

`json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "jsx-async-runtime"
}
}
`

The example project provides a complete tsconfig.json with all required options for a proper project setup.

Now you can create a simple test file (e.g. src/HelloWorld.jsx) and execute it via npx tsx src/HelloWorld.jsx:

`jsx
import { jsxToString } from "jsx-async-runtime";

export default function HelloWorld({ greeting }) {
return (
<>
{{ html: }}








{greeting}

);
}

// Use jsxToString#call with {} to create a 'this' context
console.log(await jsxToString.call({}, ));
`

Usage

If you're using jsx-async-runtime as template engine, you might want to include data from an asynchronous operation in the resulting markup. To simplify this process, you can make your components asynchronous and send async requests from within them.

`jsx
export default async function Todos() {
const { todos } = await (await fetch("https://dummyjson.com/todos")).json();

return (


{todos.map(({ todo, completed }) => (

• 
  {todo} ({completed ? "yes" : "no"})
  

))}


);
}
`

jsx-async-runtime >= v2.x.x escapes all HTML entities for texts per default to prevent cross site scripting. If you want or need to opt out this security feature to include literal HTML snippets in your template (e.g. WYSIWYG content from a CMS), you can provide an object with a single key called html containing the code snippet as a string in your JSX template:

`jsx



`

If you want to disable the automatic escaping of HTML completely to restore the behaviour of jsx-async-runtime < v2.x.x, you can turn off text escaping with a compatibilty switch via the this context:

`jsx
export default function () {
this.jsxEscapeHTML = false;
return


}
`

If you opt out of automatic escaping, you can use a built-in utility function to escape markup from untrusted external sources:

`jsx
import { escapeEntities } from "jsx-async-runtime";

export default function () {
this.jsxEscapeHTML = false;
return


}
`

Example project

You can study the example project to learn more about all existing features. Here is a shortened version to give you the idea:

`jsx
import { jsxToString } from "jsx-async-runtime";

export default function App() {
return (
<>
{{ html: }}








);
}

function Header({ label }) {
return (
style={{
"background-color": "red",
"padding-bottom": "1rem",
}}
>

{label}

);
}

async function TodoList({ quantity }) {
const { todos } = await (await fetch("https://dummyjson.com/todos")).json();

return (

{todos.slice(0, quantity).map(({ todo, completed }) => (




))}

Label	Status
{todo}	{completed ? "yes" : "no"}

);
}

// Use jsxToString#call with {} to create a 'this' context
console.log(await jsxToString.call({}, ));
``