Skip to content

jsheaven/render

Repository files navigation

@jsheaven/render

Nano library to render JSX isomorphic

User Stories

  1. As a developer, I want to render JSX/TSX on client and server likewise

  2. As a developer, I want support for functional components and web components likewise

  3. 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 render Functional components like <Foo />
  • ✅ Supports every JSX feature you know, including Fragments <></>, Refs ref={} and onMount={fn}
  • ✅ Allows to render a whole HTML document server-side, starting with <html>
  • ✅ Available as a simple API
  • ✅ Just 1113 byte nano sized (ESM, gizpped) on client
  • ✅ Just 1254 byte nano 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