/babel-plugin-transform-hinted-jsx

A JSX transformer with extra hints around interpolations and outer templates.

Primary LanguageJavaScript

@ungap/babel-plugin-transform-hinted-jsx

This plugin is a follow up of this post and it can be used together with @babel/plugin-transform-react-jsx.

A huge thanks to Nicolò Ribaudo for helping out.

babel.config.json

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {"useSpread": true}],
    ["@ungap/babel-plugin-transform-hinted-jsx"]
  ]
}

npm install

npm i --save-dev @babel/cli
npm i --save-dev @babel/core
npm i --save-dev @babel/plugin-transform-react-jsx
npm i --save-dev @ungap/plugin-transform-hinted-jsx

What is it / How to use it

This produces a slightly different JSX transform.

const div = (
  <div>
    <p className="static" runtime={'prop'}/>
    {<p />}
  </div>
);

// becomes
const div = React.createElement``(
  'div',
  null,
  React.createElement(
    'p',
    {
      className: 'static',
      runtime: React.interpolation('prop')
    }
  ),
  React.interpolation(
    React.createElement``(
      'p',
      null
    )
  )
);

How to hint interpolations

/** @jsx your.createElement */
/** @jsxFrag your.Fragment */
/** @jsxInterpolation your.interpolation */