jsxn
(work in progress)
jsx notation for json trees
npm install @threepointone/jsxn --save
jsxn is a natural fit for describing hierarchical "trees" of nodes made of type
/props
/children
, such as -
- rich, structured text
- page layouts
- configs
<carousel delay=300 animation='appear'>
<banner src='photo1.jpg' title='slide 1'>
some inner text
</banner>
<banner src='photo2.jpg' title='slide 2' active/>
...
</carousel>
// corresponds to -
{
type: 'carousel',
props: {
delay: 300,
animation: 'appear'
},
children: [
{
type: 'banner',
props: {
src: 'photo1.jpg'
title: 'slide 1'
},
children: [
'some inner text',
]
},
{
type: 'banner',
props: {
src: 'photo2.jpg'
title: 'slide 2',
active: true
}
},
// ...
]
}
api
import { parse } from '@threepointone/jsxn'
let src = `<test prop=123 o={x: 'abc'}/>`
console.log(parse(src))
/* ... becomes */
{
type: 'test',
props: {
prop: 123,
o: {
x: 'abc'
}
}
}
todo
- basic parsing - done!
- match jsx whitespace spec
- singlequotes/backticks
- quoteless json keys
- good errors