sjsx

A super simple implementation of the JSX specification.

Usage no npm install needed!

<script type="module">
  import sjsx from 'https://cdn.skypack.dev/sjsx';
</script>

README

sjsx

A super simple implementation of the JSX specification.

Really, another one?

Yes, because:

  • No current implementation of JSX contained the features I wanted, with all the ones it doesn't need.
  • Tooling

Features

  • Standard DOM attributes
    • Use class and onclick! Or className and onClick, if you're into that.
  • Render DOM references alongside JSX
    • I hate using ref and lifecycle callbacks. This removes them for my life forever, hallelujah!
  • No class components
    • Completely pointless. Hyperapp gets it. Even React is moving away from them with Hooks.
  • No automatic re-rendering of components
    • By giving up this so-called "convenience," we gain more control to fine-tune exactly when and where our app needs to be updated. There are render and patch functions available. This also gives us the additional benefit of:
  • No virtual DOM state stored in memory
    • Again, not necessary. Hyper fast diffs and patching can be accomplished via the DOM, especially if we're not re-rendering everything when any piece of our state or data changes.
  • Fragments
    • Because wrapper hell is real.
  • children as a separate argument
    • Makes your app easier to read and understand.
  • Stupid simple tooling (COMING SOON)
    • Because wtf eject? Really? Have a complete solution with production and development environments, up and running in less than a minute.
  • Small, under 3KB gzipped
    • And I haven't even tried to optimize this yet, which will only make this even smaller in the near future.