innet-jsx
v1.3.3
Published
JSX parser for innet
Downloads
11
Maintainers
Readme
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]}}
Issues
If you find a bug or have a suggestion, please file an issue on GitHub.