jsxdirect

library0.0.12jsnpmunverified

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.

web-framework serialization

npm install jsxdirect

github ↗package ↗

INSTALL

IMPORT

SIG · JSXDIRECT

jsxdirect

web-frameworkjavascriptv0.0.12

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsx

✓ import { jsx } from 'jsxdirect';

✗ const jsx = require('jsxdirect');

jsxdirect is designed for the browser and does not export a CommonJS module. Use a bundler or include the script globally.

compile

✓ import { compile } from 'jsxdirect';

✗ const compile = require('jsxdirect').compile;

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

✓ import jsxdirect from 'jsxdirect';

✗ const jsxdirect = require('jsxdirect');

The package has a default export that is the same as the named `jsx` export. Use named imports to avoid confusion.

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>

Debug

Known issues

gotchaCase-sensitive tags are not supported; React components must be all-uppercase.

fix

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

affects: >=0.0.1

gotchaJSX 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}>.

affects: >=0.0.1

deprecatedThe 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.

affects: >=0.0.0

Errors

Common errors & fixes

Unexpected token '<'

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.

Uncaught ReferenceError: jsx is not defined

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.

React is not defined

React library not loaded before using jsxdirect.

fix

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

Upgrade

Version history

0.0.12latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/anywhichway/jsxdirect ↗

packagehttps://www.npmjs.com/package/jsxdirect ↗