babel-plugin-jsx-to-object

Transform JSX into opinionated JSON Objects.

All React conventions of JSX are support, this includes:

• Booleans
• Spreads
• Identifiers
• Functions
• Fat Arrow Functions
• Strings
• Deeply nested children
• JSXElements as references to building other JSX Elements

Install

npm install --save-dev babel-plugin-jsx-to-object

Add to your.babelrc config

{
  "plugins": [ "babel-plugin-jsx-to-object" ]
}

Usage

The following JSX:

(<h1 class="title">Hello World</h1>);

Returns:

({
    extends: null,
    type: 'h1',
    attributes: { class: 'title' },
    children: [ 'hello world' ]
});

The following JSX (with Declared Nodes):

const UL = <ul />;
const LI = <li />;

(<UL>
    <LI>Learn JSX</LI>
    <LI>Write effiecient UI Libraries</LI>
    <LI>Profit</LI>
</UL>);

Returns:

const UL = {
    extends: null,
    type: 'ul',
    attributes: null,
    children: null
};
const LI = {
    extends: null,
    type: 'li',
    attributes: null,
    children: null
};

({
    extends: UL,
    type: null,
    attributes: null,
    children: [
        {
            extends: LI,
            type: null,
            attributes: null,
            children: [ 'Learn JSX' ]
        },
        {
            extends: LI,
            type: null,
            attributes: null,
            children: [ 'Write efficient UI Libraries' ]
        },
        {
            extends: LI,
            type: null,
            attributes: null,
            children: [ 'Profit' ]
        }
    ]
})

Options

All the objects keys can be overidden

The following JSX:

import jsxTransform from 'babel-plugin-jsx-to-object';

const OPTIONS = {
    extends: 'elementExtension',
    type: 'elementName',
    attributes: 'args',
    children: 'kids'
};

transform('(<h1 class="title">Hello World</h1>);', { plugins: [ [jsxTransform, OPTIONS] ] })

Becomes:

({
    elementExtension: null,
    elementName: 'h1',
    args: { class: 'title' },
    kids: [ 'hello world' ]
});