https://github.com/jsheaven/render

Nano library to render JSX isomorphic
https://github.com/jsheaven/render

isomorphic javascript jsx rendering tsx typescript

Last synced: about 1 month ago
JSON representation

Nano library to render JSX isomorphic

• Host: GitHub
• URL: https://github.com/jsheaven/render
• Owner: jsheaven
• License: mit
• Created: 2023-02-12T03:35:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-16T18:45:13.000Z (about 1 month ago)
• Last Synced: 2024-11-16T18:47:46.582Z (about 1 month ago)
• Topics: isomorphic, javascript, jsx, rendering, tsx, typescript
• Language: TypeScript
• Homepage:
• Size: 192 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
@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 `Function`al components like ``

- ✅ Supports every JSX feature you know, including Fragments `<>>`, Refs `ref={}` and `onMount={fn}`

- ✅ Allows to render a whole HTML document server-side, starting with ``

- ✅ Available as a simple API

- ✅ Supports `dangerouslySetInnerHTML={{ __html: '<... />' }`

- ✅ 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:

```json

{

  ...

  "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:


```tsx

import { render, renderToString, tsx, Fragment } from '@jsheaven/render/dist/server.esm.js'

// HTMLElement

const dom: Node = render(

  

    

    

  ,

)

// 

const html: string = renderToString(dom)

```

Client-side/in-browser usage:


```tsx

import { render, renderToString, tsx, Fragment } from '@jsheaven/render/dist/client.esm.js'

// HTMLParagraphElement

const dom: Node = render(
Some paragraph
)


// 
Some paragraph

const html: string = renderToString(dom)

```


CommonJS


```ts

const { render, renderToString, tsx } = require('@jsheaven/render/client.cjs.js')

// same API like ESM variant

```