Custom JSX pragma

What is JSX

 

JSX is an XML-like syntax extension to JavaScript.

 

It's a syntax sugar usually used for React's createElement function.

// example JSX
<div>
  <Button onClick={handleClick}>Hello</Button>
</div>
React.createElement(
  'div',
  null,
  React.createElement(
    Button,
    {
      onClick: handleClick,
    },
    'Hello'
  )
)
  • Most apps use Babel to compile JSX syntax for use with React or other similar libraries.
  • By default the Babel plugin will convert JSX into React.createElement.
  • Libraries like Preact, MDX, Emotion, and Vuejs use custom create elements functions with JSX.

How to change the underlying create element function?

  • add an option to the Babel plugin — will transform all JSX in an application
  • set a pragma comment at the beginning of a module — limits the change to only the modules that it's added to
/** @jsx jsx */

import { jsx } from 'my-custom-jsx'

Demo 🚀

What's the stack?

/** convert a style object to a CSS class name */
const className = style({color: 'red'});

CSS-in-Js

Motivation

<span attrs={{ class: style({ color: "blue" }) }} />


// or 


<span className={{ "class-1": true, "class-2": true }} />
<p
  css={{
    margin: 0,
    fontSize: 12,
    color: 'black'
  }}
/>

Emotion,

styled-components,

etc