Simple JSX - Create DOM Elements from JSX

A really simple library for JSX/TSX that generates HTMLElements instead of React stuff. I do not claim this to be a 1:1 replacement for React, nor that it supports all of the features of React, in fact, there are some quirks with this module as shown below. But if it doesn't support something you need, and it's easy to add, feel free to suggest it.

Use:

npm install --save-dev @haukex/simple-jsx-dom

In tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "jsxFragment"
  }
}

In a .tsx file:

import { jsx } from '@haukex/simple-jsx-dom'
window.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(<div>Hello, World!</div>)
})

All elements are initially HTMLElements. If you need to cast to a subclass, you can do that with the safeCast helper function that includes a type check:

import { jsx, safeCast } from '@haukex/simple-jsx-dom'
window.addEventListener('DOMContentLoaded', () => {
  const inp = safeCast(HTMLInputElement, <input type="text"/>)
  inp.value = 'Hello, World!'
  document.body.appendChild(inp)
})

Due to a quirk with how this works with TypeScript, TS thinks that DocumentFragments created with <></> are also HTMLElements. Use safeCast if you need TypeScript to know its real type.

import { jsx, jsxFragment } from '@haukex/simple-jsx-dom'
window.addEventListener('DOMContentLoaded', () => {
  const x :HTMLElement = <><div>Foo</div>Bar<div>Quz</div></>
  console.debug(x)  // shows it's actually a DocumentFragment
  document.body.appendChild(x)  // works anyway
})

Credits

This project was inspired by:

• https://medium.com/front-end-weekly/vanilla-jsx-28ff15e82de8
• https://lwebapp.com/en/post/custom-jsx

Legal

by Hauke Dämpfling ([email protected])

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.