https://github.com/dpck/render
Renders JSX To String.
https://github.com/dpck/render
preact ssr
Last synced: 3 months ago
JSON representation
Renders JSX To String.
- Host: GitHub
- URL: https://github.com/dpck/render
- Owner: dpck
- License: other
- Created: 2019-02-15T00:19:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-26T16:31:02.000Z (over 5 years ago)
- Last Synced: 2025-01-26T17:43:50.808Z (5 months ago)
- Topics: preact, ssr
- Language: JavaScript
- Homepage: https://artd.eco/depack
- Size: 168 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @depack/render
[](https://www.npmjs.com/package/@depack/render)
`@depack/render` is Renders JSX To String. This is a fork of [developit/preact-render-to-string](https://github.com/developit/preact-render-to-string/) with the new pretty algorithm that breaks up attributes by the line length rather than printing them on each line. It also removes dependency on the Facebook's package called "pretty-format" for JSX printing that cannot be in _Depack_ because of the whole idea of _Preact_ to be different from Facebook, so the `/jsx` is currently not implemented. The additional functionality of this package is also to correctly handle pretty printing for `textarea` and `pre` tags which are sensitive to the leading and forwarding whitespace.
```sh
yarn add @depack/render
npm i @depack/render
```
## Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
- [`render(vnode: preact.VNode, config=: !RenderConfig, context=: *): string`](#rendervnode-preactvnodeconfig-renderconfigcontext--string)
* [`RenderConfig`](#type-renderconfig)
- [**Pretty Render**](#pretty-render)
- [**Server-Side Rendering**](#server-side-rendering)
- [Fork Improvements](#fork-improvements)
- [Copyright](#copyright)
## API
The package is available by importing its default function:
```js
import render from '@depack/render'
```
## render(
`vnode: preact.VNode,`
`config=: !RenderConfig,`
`context=: *,`
): string
Renders the _VNode_ into the string.
- vnode* preact.VNode: The VNode to render. Can be written in JSX syntax in `.jsx` files.
- config !RenderConfig (optional): Additional optional config.
- context `*` (optional): The context for the node.
__`RenderConfig`__: Rendering options.
| Name | Type | Description | Default |
| ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- | ------- |
| addDoctype | boolean | Adds the `` at the beginning of the return string. | `false` |
| shallow | boolean | If `true`, renders nested Components as HTML elements (`<Foo a="b" />`). | `false` |
| xml | boolean | If `true`, uses self-closing tags for elements without children. | `false` |
| pretty | boolean | If `true`, adds ` ` whitespace for readability. Pass a string to indicate the indentation character, e.g., `\t`. | `false` |
| lineLength | number | The number of characters on one line above which the line should be split in the `pretty` mode. | `40` |
| initialPadding | number | The initial padding to apply to each line when pretty printing. | `0` |
| closeVoidTags | boolean | Whether the void tags will be auto-closed (for xhtml support). | `false` |
| renderRootComponent | boolean | When shallow rendering is on, will render root component. | `false` |
| shallowHighOrder | boolean | When shallow rendering is on, will render root component. | `false` |
| sortAttributes | boolean | Sort attributes' keys using the `.sort` method. | `false` |
| allAttributes | boolean | Render all attributes, including `key` and `ref`. | `false` |
```jsx
/* yarn example/ */
import render from '@depack/render'
const App = () => (
)
const s = render()
console.log(s)
```
```html
```
## **Pretty Render**
Unlike the original _Preact/render-to-string_, the new rendering algorithm does not break up attributes to have each its own line, so that it is easier to present on the documentation.
```jsx
import render from '@depack/render'
const App = () => (
Welcome to the website. Here you can find
information regarding different topics.
This is your name
Option One For You To Choose.
Another Option For The Choosing.
)
const s = render(, {
pretty: true,
lineLength: 40,
})
console.log(s)
```
```html
Welcome to the website. Here you can find
information regarding different topics.
This is your name
Option One For You To Choose.
Another Option For The Choosing.
```
## **Server-Side Rendering**
Using _Depack/Render_ for SSR is very easy with the [ÀLaMode](https://github.com/a-la/alamode) transpiler of the source code. It is installed as a require hook in the entry point of the app:
```js
require('alamode')()
require('./server')
```
_And the server is configured:_
```jsx
import idio from '@idio/idio'
import render from '@depack/render'
const Html = ({ name }) => (
Example Depack/Render
{`body {
background: lightblue;
}`}
Welcome to the Server-Side-Rendering
Hello, { name }
https://dpck.artd.eco
)
const Server = async (name) => {
const { app, url } = await idio()
app.use((ctx) => {
ctx.body = render(
(),
{ addDoctype: true,
pretty: true,
lineLength: 40 })
})
return { url, app }
}
```
```html
Example Depack/Render
body {
background: lightblue;
}
Welcome to the Server-Side-Rendering
Hello, Example
https://dpck.artd.eco
```
There are some limitation such as
* no `>` or `<` in expressions or comments, e.g., `for (let i=0; i<10; i++) { ... }` — the function needs to be taken out of JSX scope. This is due to how the parser finds closing `>` tags: the number of opening to closing `>` must be equal.
## Fork Improvements
There are a number of new features that the fork has:
* Render `htmlFor` into plain `for` attribute.
## Copyright
