Newsworthy Presidential Mistakes

    babel-plugin-h-children-fix

    1.1.0 • Public • Published

    babel-plugin-h-children-fix

    Allows use of standard babel JSX tools with virtual-dom/h

    I wanted to use virtual-dom's "hyperscript" but write it using regular JSX syntax.

    Standard Babel plugins as of 6.0+ have great tools for JSX, including the ability to specify a "pragma" to use instead of React.createElement (which is the default). You simply npm install babel-plugin-transform-react-jsx and specify the pragma. Docs for that are here.

    I assumed I could just specify h as a pragma and be done.

    Only issue is React.createElement expects child elements as addtional arguments: React.createElement('div', null, childOne, childTwo) while h expects h('div', null, [childOne, childTwo]) (note the last argument is an array of children.

    This is a babel plugin to be ran after the "official" one that simply replaces any instance of a "callExpression" that has a name of h and has three or more arguments, with a version that gathers the children as an array passed as the third argument.

    Note that this is not exensively tested and it's a naive and simple replacement. Any h() call with more than 3 arguments is affected whether it's actually virtual dom's h or not.

    That's it!

    just kidding! One, tiny little thing...

    It's kind of odd to have to import h from 'virtual-dom/h' at the top of a file containing JSX, especially if you then never actually use it within your file. So, as of version 1.1.0+ this plugin will also automatically insert that import statement for you if the file contains JSX and doesn't have h defined at the module level.

    example

    npm install both of them:

    npm install babel-plugin-transform-react-jsx babel-plugin-h-children-fix
    

    Now if your .babelrc file looks like this:

    {
      "presets": ["es2015"],
      "plugins": [
        ["transform-react-jsx", {"pragma": "h"}],
        "h-children-fix"
      ]
    }

    The babel-plugin-transform-react-jsx firt turns this:

    export default () => (
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    )

    into something roughly like this:

    export default () => (
        h('ul', null, h('li', null, 'one'), h('li', null, 'two'))
    )

    and this plugin subsequently turns the above, into:

    export default () => (
        h('ul', null, [
            h('li', null, 'one'),
            h('li', null, 'two')
        ])
    )

    install

    npm install babel-plugin-h-children-fix
    

    credits

    If you like this follow @HenrikJoreteg on twitter.

    changelog

    • 1.1.0 auto import h if not defined, added basic test, now uses standard style and enforcement thereof.
    • 1.0.1 doc update
    • 1.0.0 initial release

    license

    MIT

    Install

    npm i babel-plugin-h-children-fix

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar