Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rubylouvre/jsx-parser
a lightweight jsx parser
https://github.com/rubylouvre/jsx-parser
Last synced: 1 day ago
JSON representation
a lightweight jsx parser
- Host: GitHub
- URL: https://github.com/rubylouvre/jsx-parser
- Owner: RubyLouvre
- License: bsd-3-clause
- Created: 2017-02-28T02:43:05.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-10T07:45:06.000Z (over 1 year ago)
- Last Synced: 2024-12-26T15:11:38.221Z (8 days ago)
- Language: JavaScript
- Size: 273 KB
- Stars: 98
- Watchers: 8
- Forks: 11
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsx-parser
## a lightweight jsx parser
npm
```
npm install jsx-parser
```
how to require
```
import JSXParser form 'index'
```
or
```html
```
how to use
```javascript
var str = '
]} />'
console.log(JSON.stringify(JSXParser(str), null, " "))
```
output
```json
{
"type": "div",
"props": {
"spreadAttribute": {
"type": "#jsx",
"nodeValue": [
{
"type": "#jsx",
"nodeValue": "["
},
{
"type": "div",
"props": {},
"children": [],
"isVoidTag": true
},
{
"type": "#jsx",
"nodeValue": "]"
}
]
}
},
"children": [],
"isVoidTag": true
}
```
```javascript
var str = `
} className="{111}" >xxx{[1,2,3].map(el=> {el})}yyy
{xxx}--{yyy}
`
console.log(JSON.stringify(JSXParser(str), null, " "))
```
```json
{
"type": "div",
"props": {
"id": {
"type": "#jsx",
"nodeValue": " 2222 "
},
"kkk": {
"type": "#jsx",
"nodeValue": [
{
"type": "div",
"props": {
"class": {
"type": "#jsx",
"nodeValue": "aaa"
}
},
"children": [],
"isVoidTag": true
}
]
},
"className": "{111}"
},
"children": [
{
"type": "#text",
"nodeValue": "xxx"
},
{
"type": "#jsx",
"nodeValue": [
{
"type": "#jsx",
"nodeValue": "[1,2,3].map(el=> "
},
{
"type": "div",
"props": {},
"children": [
{
"type": "#jsx",
"nodeValue": "el"
}
]
},
{
"type": "#jsx",
"nodeValue": ")"
}
]
},
{
"type": "#text",
"nodeValue": "yyy\n"
},
{
"type": "span",
"props": {},
"children": [
{
"type": "#jsx",
"nodeValue": "xxx"
},
{
"type": "#text",
"nodeValue": "--"
},
{
"type": "#jsx",
"nodeValue": "yyy"
}
]
}
]
}
```
generative rule：
1. tagName --> type
2. attributes --> props
3. voidTag that like `
` `
` or closing tag that like `` has **isVoidTag = true** property
4. `{...obj}` will add **spreadAttribute** property to props object
5. text node type is "#text"
6. `{}` will generate **#jsx** node , that has object nodeValue or array nodeValue
You also can be used directly **evalJSX**, that already contains jsx-parser
```javascript
evalJSX.globalNs = 'React' // or `anu` https://github.com/RubyLouvre/anu or `preact`
var Parent = React.createClass({
getChildContext: function() {
return {
papa: 'papa'
};
},
render: function() {
return evalJSX(`
{this.props.children}`, {
this: this
});
}
});
```
example
```html
JSX Parser
jsx - parser
evalJSX.globalNs = 'React'
class A extends React.Component {
constructor(props) {
super(props)
this.state = {
aaa: 111
}
}
render() {
return evalJSX(`<div className={"hello"}>{this.state.aaa}</div>`, {
this: this
})
}
}
window.onload = function() {
ReactDOM.render(React.createElement(A), document.getElementById('example'))
}
```
