A 10kb(minified) only JSX compiler running in browser
Write React without tool chains!
var res = litJSX.jsx(React, {Tag: Tag})`
<Tag ...${{test:"included"}} v${"a"}l=t${"es"}t val1=t${"es"}t1 v${"a"}l2=test2/>
`
ReactDOM.render(
res,
document.getElementById('root')
);
/**
* @param {React} React
* @param {Object<string, Componenet>} componenets the templete will try to create element as string directly if it is not registerd here
* @returns {function} The templete literal function
*/
var jsx = litJSX.jsx(React, {Component1, Component1, ...other});
/**
* @param {string[]} templete
* @param {...any} argumenets
* @returns {Element} react element
*/
jsx;
// it will return the element if there is only one root element
jsx`
<div></div>
`
// it will return a React.Fragment if there are more than one root element.
jsx`
<div></div>
<div></div>
`
// it unesacpe only these entities in tag body and attribute value
jsx`
<div value="&<>"' ">
&<>"'
</div>
`
// you got &<>"'\u00A0 in both property and body
jsx`
<div/>
`
jsx`
<div>content</div>
`
jsx`
There is only text
`
fragment (although there is no reason to use it. It is automatically wrapped if there is more than one element at root)
jsx`
<>
There is only text
</>
`
jsx`
<div attribute=x/>
<div attribute='x'/>
<div attribute="x"/>
`
jsx`
<div>
The data here can also be
${"text"}
or
${jsx`another element`}
or
${[jsx`array of elements`]}
just like original jsx
</div>
`
jsx`
<div ${"key"}="value"/>
`
jsx`
<div key=${12}/>
`
jsx`
<div key=${"val"}ue/>
`
var ObjectToSpread = {key: "value"};
jsx`
<div ...${ObjectToSpread}/>
`