@ungap/plugin-transform-hinted-jsx

0.0.0 • Public • Published

@ungap/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"],
    ["module:@ungap/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 */

Readme

Keywords

Package Sidebar

Install

npm i @ungap/plugin-transform-hinted-jsx

Weekly Downloads

8

Version

0.0.0

License

ISC

Unpacked Size

14.4 kB

Total Files

6

Last publish

Collaborators

  • webreflection