This project frees you from any JSX transformer in order to enjoy JSX expressions!
It currently supports only the tree-like structure of JSX, but not any of the more complex JavaScript expressions.
Do not even attempt to use this anywhere.
This package is published to npm and unpkg, but because it doesn't use any module formats (yet), currently the only way to use it is through unpkg, as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/@joshcena/[email protected]/jsx.js"></script>
<script>
with (universalNS) {
const element = jsx
[div, className="form"]
[label, htmlFor="age"]`Age: `[$label]
[input, id="age", type="range", max=10, value=4, $]
[$div];
const root = document.getElementById("root");
element.toDOM().forEach((elem) => root.appendChild(elem));
}
</script>
</body>
</html>You can view the demo at https://jc-verse.github.io/vanilla-jsx.
I have written some introduction here: https://zhuanlan.zhihu.com/p/498356150
This project has benefitted largely from a Discord discussion. The idea was initially brought up by someone else, but I eventually completed the DOM manipulation part and did significant refactors to the initial PoC code.