babel-plugin-transform-functional-jsx

Turn JSX into pure function calls

Usage no npm install needed!

<script type="module">
  import babelPluginTransformFunctionalJsx from 'https://cdn.skypack.dev/babel-plugin-transform-functional-jsx';
</script>

README

babel-plugin-transform-functional-jsx

Pure functional & spread children support

Example

In

<div>
  <a href="other.html">Link</a>
  <ul>
    {...[<li>Item A</li>, <li>Item B</li>]}
    <li>Item Last</li>
  </ul>
</div>

Out

div(
  null,
  a({ href: "other.html" }, "Link"),
  ul(
    null,
    ...[li(null, "Item A"), li(null, "Item B")],
    li(null, "Item Last")
  )
);