https://github.com/d8corp/innet-jsx
JSX parser for innet
https://github.com/d8corp/innet-jsx
Last synced: 4 months ago
JSON representation
JSX parser for innet
- Host: GitHub
- URL: https://github.com/d8corp/innet-jsx
- Owner: d8corp
- License: mit
- Created: 2021-06-24T08:30:44.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-02-21T18:39:27.000Z (4 months ago)
- Last Synced: 2026-02-22T00:23:03.811Z (4 months ago)
- Language: JavaScript
- Size: 1.08 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# innet-jsx
[](https://www.npmjs.com/package/innet-jsx)
[](https://www.npmtrends.com/innet-jsx)
[](https://github.com/d8corp/innet-jsx/blob/main/LICENSE)
[](https://changelogs.xyz/innet-jsx)
This utils help to convert `jsx` into `js` with [innet](https://www.npmjs.com/package/innet) rules.
[](https://github.com/d8corp/innet-jsx/stargazers)
[](https://github.com/d8corp/innet-jsx/watchers)
## Install
npm
```bash
npm i -g innet-jsx
```
You can use `npx 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.
```shell
innet-jsx -v
```
Run `innet-jsx` with `-h` option to see help information.
```shell
innet-jsx -h
```
#### Arguments
Run the CLI with input file path you want to convert.
```shell
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.
```shell
innet-jsx test.jsx custom.js
```
#### Options
Use `-m` option to add map file.
```shell
innet-jsx test.jsx -m
```
*You will get test.js.map*
Use `-w` option to watch the input file
```shell
innet-jsx test.jsx -w
```
### Node.js
You can use it in a Node.js project
```shell
npm i -D innet-jsx
# or
yarn add -D innet-jsx
```
#### Transform
Use `transform` to convert `jsx` string code to `js`.
```typescript jsx
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).
```typescript jsx
import transform from 'innet-jsx'
console.log(transform({
code: '<>>',
map: '...',
}))
```
If you want to get **Abstract Syntax Tree (AST)**, use `parse` function.
```typescript jsx
import { parse } from 'innet-jsx'
console.log(parse('<>>'))
```
## Rules
A fragment converts to an array
```typescript jsx
<>> // []
<>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 with `type` field, that equals a component or a string.
```typescript jsx
// {type:'div'}
// {type:'div'}
```
The `props` field of a JSX element contains attributes of the element.
```typescript jsx
// {type:'div',props:{id:'test'}}
// {type:'div',props:{id:"test1",class:"test2"}}
const test = 1;
test: {test}>} />
// {type:'div',props:{children:['test: ',test]}}
```
The `children` prop contains body of the element
```typescript jsx
1 // {type:'div',props:{children:'1'}}
{2} // {type:'div',props:{children:2}}
1{2} // {type:'div',props:{children:['1',2]}}
// {type:'div',props:{children:{type:'span'}}}
```
## Issues
If you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/innet-jsx/issues).
[](https://github.com/d8corp/innet-jsx/issues)