@jsheaven/render
v1.1.1
Published
Nano library for isomorphic rendering of JSX into a DOM tree and serialized HTML.
Downloads
41
Readme
Nano library to render JSX isomorphic
As a developer, I want to render JSX/TSX on client and server likewise
As a developer, I want support for functional components and web components likewise
As a developer, I don't want to use a framework for that
- ✅ Does render JSX/TSX on client and server - DOM (
render) and HTML (renderToString) - ✅ Allows to render
Functional components like<Foo /> - ✅ Supports every JSX feature you know, including Fragments
<></>, Refsref={}andonMount={fn} - ✅ Allows to render a whole HTML document server-side, starting with
<html> - ✅ Available as a simple API
- ✅ Supports
dangerouslySetInnerHTML={{ __html: '<... />' } - ✅ Just
1113 bytenano sized (ESM, gizpped) on client - ✅ Just
1254 bytenano sized (ESM, gizpped) on server - ✅ Tree-shakable and side-effect free
- ✅ First class TypeScript support
- ✅ 100% Unit Test coverage
- yarn:
yarn add @jsheaven/render - npm:
npm install @jsheaven/render
Configure the following values in your tsconfig.json or likewise,
in the configuration options of your favourite bundler:
{
...
"jsx": "react",
"jsxFactory": "tsx",
"jsxFragmentFactory": "Fragment",
...
}This will make sure that the JSX syntax is correctly transformed into a JavaScript object tree (AOT, at compile time) that can be rendered by this library at runtime (SSG, SSR or even, if desired, in-browser).
import { render, renderToString, tsx, Fragment } from '@jsheaven/render/dist/server.esm.js'
// HTMLElement
const dom: Node = render(
<html>
<head></head>
<body></body>
</html>,
)
// <html><head></head><body></body></html>
const html: string = renderToString(dom)import { render, renderToString, tsx, Fragment } from '@jsheaven/render/dist/client.esm.js'
// HTMLParagraphElement
const dom: Node = render(<p>Some paragraph</p>)
// <p>Some paragraph</p>
const html: string = renderToString(dom)const { render, renderToString, tsx } = require('@jsheaven/render/client.cjs.js')
// same API like ESM variant