@jsheaven/render
Nano library to render JSX isomorphic
User Stories
-
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
Features
✅ Does render JSX/TSX on client and server - DOM (render) and HTML (renderToString)✅ Allows to renderFunctional 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✅ Just1113 bytenano sized (ESM, gizpped) on client✅ Just1254 bytenano sized (ESM, gizpped) on server✅ Tree-shakable and side-effect free✅ First class TypeScript support✅ 100% Unit Test coverage
Example usage
Setup
- yarn:
yarn add @jsheaven/render - npm:
npm install @jsheaven/render
ESM
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).
Server-side usage:
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)Client-side/in-browser usage:
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)CommonJS
const { render, renderToString, tsx } = require('@jsheaven/render/client.cjs.js')
// same API like ESM variant