a-jsx-runtime

A JSX runtime which allows using JSX templates to render HTML without the need for any frameworks such as react, preact etc. an allows optimized updates / re-renders by using a Virtual DOM implementation.

Difference to react's JSX flavor

* class attribute instead of className
* _ref attribute instead of ref
* _key attribute instead of key
* on-event attribute (e.g. on-click) instead of onEvent
* Suspense: see Suspense section

Example

``TSX

import { render, createRef, rawHtml, Slot, Suspense } from "a-jsx-runtime";

const existingHTMLElement = document.querySelector("#greetings");

const pendingRequest = fetchJSON("/api.json");

const inputRef = createRef();

function Card({ bg, children }) {
const style = {
"background-color": bg,
border: "1px solid gray"
};

return (


// invoke the render call again e.g. when some data has been changed
render(...);
`

For another example see example.tsx.

Install

`sh
npm install a-jsx-runtime @babel/plugin-transform-react-jsx
`

Tooling setup

$3

* add jsx parser to babel config. e.g

`javascript
// webpack.config.js
module.exports = {
...
module: {
rules: [
...
{
test: /\.tsx$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
...
],
plugins: [
...
[
"@babel/plugin-transform-react-jsx",
{
"runtime": "automatic", // add the import etc automatically.
"importSource": "a-jsx-runtime", // use jsx functions from the npm module
}
],
]
}
},
],
},
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', 'jsx', '.json']
},
...
};
`

* add "jsx": "preserve", to tsconfig.json.

$3

* use vite react plugin

`js
// vite.config.js

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => ({
plugins: [
react(),
],
// only needed when there is no tsconfig. otherwise the jsxImportSource will automatically be picked up
esbuild: {
jsxImportSource: "a-jsx-runtime",
},
}));
`

* tsconfig

`js
// tsconfig.json

{
"compilerOptions": {
// ...
"moduleResolution": "node16", // is currently needed for typescript to use package exports
"jsx": "preserve",
"jsxImportSource": "a-jsx-runtime",
},
}

Special props

$3

When (re-)rendering a list with changing length or order, you can add a _key attribute with the unique identifier to each item, to make sure same rendered DOM Elements are re-used. This helps to maintain external changes (e.g. focus, user input, css animations ...)

example:

`jsx
<>
{arr
.filter(someDynamicFilter)
.sort(sortFunction)
.map(item => (


{item.name}

))
}

`

$3

After the markup first time is rendered, the reference to the rendered html element will be passed to the _ref attribute.

example:

`tsx
import { createRef } from "./jsx-runtime";

function Comp() {
const ref = createRef();

return (
<>
{/ use with createRef /}

ref.current.focus() } />

{/ use as callback/}
initDatePickerPlugin(el)} />

);
}
`

$3

Name of Function Components Slot element which will be replaced by the items having the prop. (see Slot section)

$3

Class name of the html element. Which can be a string or an array for convince.

e.g.

`jsx


`jsx
const style = {
outline: "1px solid gray",
"padding-top": "10px",
background: isActive && "red", // falsy values won't be rendered
}