jsxdirect

0.0.12 verified Fri May 01 auth: no javascript maintenance

jsxdirect v0.0.12 is a browser-based JSX transpiler that converts JSX strings into virtual DOM render functions at runtime. It supports entire script blocks, inline JSX expressions using `jsx()` or `jsx.compile()`, and template literal delimiters (`${}`) in addition to standard `{}`. Key differentiators include no build step, lightweight runtime (no Babel needed), and compatibility with React, Preact, and Hyperapp. However, it does not support case-sensitive tags (all tags are lowercased), limiting use with React components. Last updated in 2019, it is in maintenance-only status.

Common errors

error Unexpected token '<' ↓

cause JSX is not transpiled before browser execution; jsxdirect script must be loaded and compile called.

fix

Ensure jsxdirect.js is loaded before any script with type='text/jsx' and call jsx.compile() after those scripts.

error Uncaught ReferenceError: jsx is not defined ↓

cause jsxdirect library is not included in the page.

fix

Add <script src='https://unpkg.com/jsxdirect@0.0.12/index.js'></script> to the HTML.

error React is not defined ↓

cause React library not loaded before using jsxdirect.

fix

Include React and ReactDOM scripts (or Preact/Hyperapp) before jsxdirect.

Warnings

gotcha Case-sensitive tags are not supported; React components must be all-uppercase. ↓

fix Write component names in ALL CAPS, e.g., 'MYBUTTON' instead of 'MyButton'.

gotcha JSX expressions inside attribute values must use template literal syntax `${}` if the attribute value is a string, otherwise standard `{}` works for expressions. ↓

fix Use e.g., <input value={`hello ${name}`}> or <input value={name}>.

deprecated The package has not been updated since 2019; consider using modern alternatives like Babel standalone or esbuild-wasm. ↓

fix Migrate to a maintained JSX transformer; for React, use @babel/standalone.

Install

npm install jsxdirect

yarn add jsxdirect

pnpm add jsxdirect

Imports

jsx
wrong
```
const jsx = require('jsxdirect');
```
correct
```
import { jsx } from 'jsxdirect';
```
jsxdirect is designed for the browser and does not export a CommonJS module. Use a bundler or include the script globally.
compile
wrong
```
const compile = require('jsxdirect').compile;
```
correct
```
import { compile } from 'jsxdirect';
```
The `compile` function is exported as a named export from the browser bundle. In Node.js, it's not available as a pre-packaged module.
default import
wrong
```
const jsxdirect = require('jsxdirect');
```
correct
```
import jsxdirect from 'jsxdirect';
```
The package has a default export that is the same as the named `jsx` export. Use named imports to avoid confusion.

Quickstart

Shows a complete HTML page that uses jsxdirect to compile a JSX function and render it with React at runtime.

<html>
<head>
<script src="https://unpkg.com/jsxdirect@0.0.12/index.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
function App() {
  const name = 'World';
  return <div>Hello ${name}</div>;
}
</script>
<script>
jsx.compile();
const root = document.getElementById('root');
ReactDOM.render(React.createElement(App), root);
</script>
</body>
</html>