@jsheaven/render NPM

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 <></>, 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

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

jsx render

linkedom

@everything-registry/sub-chunk-498

1 year ago

1 year ago

1 year ago

1 year ago