Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

jsx-async-runtime

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as html template engine.

0.6.1
latest
Source
npm

Version published: 2 days ago

Maintainers: 0

Created: 12 months ago

Source

jsx-async-runtime

An asynchronous JSX runtime without dependencies to be used as html template engine.

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

Getting started

Installation

npm i jsx-async-runtime

Building

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 for transpiling, simply set these options in the tsconfig file:

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

Using

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.

Please note: jsx-async-runtime doesn't escape html entities per default, so rendering user input makes your application vulnerable to cross site scripting. jsx-async-runtime exports a utility function called escapeEntities which can be used to render input from uncontrolled sources.

You can study the example project to learn about existing features.

import { escapeEntities, jsxToString } from "jsx-async-runtime";

export default function App() {
  return (
    <>
      {`<!DOCTYPE html>`}
      <html>
        <head>
          <meta charset="utf-8" />
          <title>Todos</title>
        </head>
        <body>
          <Header label="<Todos>" />
          <TodoList quantity={3} />
        </body>
      </html>
    </>
  );
}

function Header({ label }) {
  return (
    <section
      style={{
        "background-color": "red",
        "padding-bottom": "1rem",
      }}
    >
      <h1 style="color: white; text-align: center">{escapeEntities(label)}</h1>
    </section>
  );
}

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

  return (
    <table class="table">
      <thead class={{ thead: true, striped: false, sticky: true }}>
        <tr>
          <th>Label</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody class="tbody striped">
        {todos.slice(0, quantity).map(({ todo, completed }) => (
          <tr>
            <td>
              <label for="todo">{escapeEntities(todo)}</label>
            </td>
            <td>
              <label for="status">{completed ? "yes" : "no"}</label>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

console.log(await jsxToString(<App />));

Keywords

FAQs

What is jsx-async-runtime?

Is jsx-async-runtime well maintained?

Package last updated on 01 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

jsx-async-runtime

jsx-async-runtime

Getting started

Installation

Building

Using

Keywords

Related posts

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft

Weekly Downloads Now Available in npm Package Search Results