eslint-plugin-jsonc
eslint-plugin-jsonc copied to clipboard
Published
20 hours ago •
ota-meshi
ota-meshi
`jsox` support
https://github.com/d3x0r/jsox
This maybe cover #4 at the same time.
Thank you for posting issue.
But I still don't understand. It looks like JavaScript syntax. Do we need to process JSON to check jsonx? Haven't I reached that document yet?
import { * as jsonx } from 'jsonx';
const example_JXM_JSON = {
component:'p',
props:{ style:{ color:'blue' } },
children:'hello world'
};
//Rendering React Components
jsonx.getReactElement(example_JXM_JSON); // => JSX Equivalent: <p style={{color:'blue'}}>hello world</p>
//Generating HTML strings
jsonx.outputHTML({ jsonx: example_JXM_JSON, }); // => '<p style="color:blue;">hello world</p>'
//Generating JSX strings
jsonx.outputJSX({ jsonx: example_JXM_JSON, }); // => '<p style={{color:blue,}}>hello world</p>'
//Rendering HTML Dom with React
jsonx.jsonxRender({ jsonx: example_JXM_JSON, querySelector:'#myApp', });
// <!DOCTYPE html>
// <body>
// <div id="myApp">
// <p style="color:blue;">hello world</p>
// </div>
// </body>
//you can also use the simplified syntax
const simpleJXM_JSON = {
p:{
props:{ style:{ color:'blue' } },
children:'hello world'
}
}
//or if you have an element with no props, simply use {type:children}
const superSimpleJXM = {
ul:[
{li:'first!'},
{li:'second!'},
]
}
