Reactem
A template engine to generate html on server which you can write in JSX and use React.useContext API
This framework is inspired by vhtml and React. I want to use JSX to render HTML on the server side, but I don't want to use React. It is static HTML, VDOM is not necessary.
Then I found vhtml, a light framework that Render JSX/Hyperscript to HTML strings, without VDOM.
But I needed some asynchronous operations and Context, so I developed this Reactem (React + Template).
In some less rigorous test situations, it is 3 times faster than React
Reactem is currently just a toy. It is not perfect and there may be bugs. Feedback and issues are welcome.
Installation
yarn add @gsail/reactem
OR
npm install --save @gsail/reactem
Usage
// import the library:
import Reactem, { renderToString } from '@gsail/reactem'
// you might need @babel/plugin-transform-react-jsx
// tell babel to transpile JSX to h() calls:
/** @jsx Reactem.h */
/** @jsxFrag Reactem.Fragment */
// OR /** @jsx Reactem.createElement */
// Write some simple functional components, just like in React
const Item = ({ item, index, children }) => (
<li id={index}>
<h4>{item}</h4>
{children}
</li>
);
const App = ()=>{
let items = ['book', 'card', 'notebook'];
return (
<div class="foo">
<h1>Hello World!</h1>
<p>Here is a list of {items.length} items:</p>
<ul>
{ items.map( (item, index) =>
<Item {...{ item, index }}>
This is : {item}!
</Item> )}
</ul>
</div>
)
}
// Then render it to get the html string
console.log(renderToString(<App>));The HTML you get:
<div class="foo">
<h1>Hello World!</h1>
<p>Here is a list of 3 items:</p>
<ul>
<li id="0">
<h4>book</h4>This is : book!
</li>
<li id="1">
<h4>card</h4>This is : card!
</li>
<li id="2">
<h4>notebook</h4>This is : notebook!
</li>
</ul>
</div>Usage of async/await & Context API
import Reactem, { createContext, useContext, renderToStringAsync } from '@gsail/reactem'
/** @jsx Reactem.h */
/** @jsxFrag Reactem.Fragment */
const CTX = createContext({v: 0})
let sleep = (time) => new Promise(reslove => {
setTimeout(() => reslove(time), time * 1000)
})
let B = () => {
let ctx = useContext(CTX)
return (<div>
B.ctx.v:{ctx.v}
</div>)
};
let C = async () => {
let time = await sleep(1)
let ctx = useContext(CTX)
return (<div className='con'>
Time:{time} C.ctx.v:{ctx.v}
<CTX.Provider value={{v:2}}>
<B/>
</CTX.Provider>
<B/>
</div>)
};
let App = ()=>{
return <>
<style dangerouslySetInnerHTML={{__html:'.con{color:red}'}}/>
<CTX.Provider value={{v:9}}>
<C/>
</CTX.Provider>
<B/>
</>
};
(async ()=>{
console.log(await renderToStringAsync(<App>));
}())The HTML you get:
<style>.con{color:red}</style>
<div class="con">
Time:1 C.ctx.v:9
<div>B.ctx.v:2</div>
<div>B.ctx.v:9</div>
<div>B.ctx.v:0</div>
</div>