Innet-jsx NPM | npm.io

innet-jsx

This utils help to convert jsx into js with innet rules.

Install

npm

npm i -g innet-jsx

You can use npx innet-jsx instead of innet-jsx without installation.

Usage

You can use Node.js exports or CLI for conversion of jsx into js.

CLI

Run innet-jsx with -v option to see innet-jsx version you have.

innet-jsx -v

Run innet-jsx with -h option to see help information.

innet-jsx -h

Arguments

Run the CLI with input file path you want to convert.

innet-jsx test.jsx

You will get js file with the same name, around it

If you want to set another output file path, add the path after the input one.

innet-jsx test.jsx custom.js

Options

Use -m option to add map file.

innet-jsx test.jsx -m

You will get test.js.map

Use -w option to watch the input file

innet-jsx test.jsx -w

Node.js

You can install it local to the project

npm i -D innet-jsx
# or
yarn add -D innet-jsx

Transform

Use transform to convert jsx string code to js.

import transform from 'innet-jsx'

console.log(transform('<></>'))

You will get an object with 2 fields: code (contains result of transformation) and map (contains map data)

You can pass to transform an object with the next fields: code, map (optional).

import transform from 'innet-jsx'

console.log(transform({
  code: '<></>',
  map: '...',
}))

If you want to get Abstract Syntax Tree (AST), use parse function.

import { parse } from 'innet-jsx'

console.log(parse('<></>'))

Rules

A fragment converts to an array

<></> // []
<>1</> // ['1']
<>{1}</> // [1]
<>{1}{2}</> // [1,2]
<>{1} {2}</> // [1,' ',2]
<> {1} {2} </> // [1,' ',2]
<>
  {1}
  {2}
</> // [1,' ',2]

An element converts to an object

<div /> // {type:'div'}
<div></div> // {type:'div'}

Children of an element contains in children field

<div>1</div> // {type:'div',children:['1']}
<div>{2}</div> // {type:'div',children:[2]}
<div><span /></div>
// {type:'div',children:[{type:'span'}]}

Props of an element contains in props field

<div id='test' /> // {type:'div',props:{id:'test'}}

<div id="test1" class={"test2"} />
// {type:'div',props:{id:"test1",class:"test2"}}

const test = 1;
<div children={<>test: {test}</>} />
// {type:'div',props:{children:['test: ',test]}}