@depack/render NPM

@depack/render

@depack/render Renders JSX To Strings. This is a fork of 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.

yarn add @depack/render
npm i @depack/render

Table Of Contents
API
render(vnode: preact.VNode, config=: !RenderConfig, context=: *): string
- RenderConfig
Pretty Render
Server-Side Rendering
Fork Improvements
Copyright

API

The package is available by importing its default function:

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 `<!doctype html>` 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`

/* yarn example/ */
import render from '@depack/render'

const App = () => (
  <div className="hello">
    <span id="name"></span>
  </div>
)
const s = render(<App />)
console.log(s)

<div class="hello"><span id="name"></span></div>

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.

import render from '@depack/render'

const App = () => (
  <div className="hello" data-example data-example-2="on9384636" id="Main-true-than-ever">
    Welcome to the website. Here you can find
information regarding different topics.
    <span id="name">This is your name</span>
    <select>
      <option value="pretty">Option One For You To Choose.</option>
      <option value="string">
        Another Option For The Choosing.
      </option>
    </select>
  </div>
)
const s = render(<App />, {
  pretty: true,
  lineLength: 40,
})
console.log(s)

<div class="hello" data-example
  data-example-2="on9384636" id="Main-true-than-ever">
  Welcome to the website. Here you can find
  information regarding different topics.
  <span id="name">This is your name</span>
  <select>
    <option value="pretty">
      Option One For You To Choose.
    </option>
    <option value="string">
      Another Option For The Choosing.
    </option>
  </select>
</div>

Server-Side Rendering

Using Depack/Render for SSR is very easy with the ÀLaMode transpiler of the source code. It is installed as a require hook in the entry point of the app:

require('alamode')()
require('./server')

And the server is configured:

import idio from '@idio/idio'
import render from '@depack/render'

const Html = ({ name }) => (<html>
  <head>
    <title>Example Depack/Render</title>
    <style>
      {`body {
        background: lightblue;
      }`}
    </style>
  </head>
  <body>
    <h1>Welcome to the Server-Side-Rendering</h1>
    Hello, { name }
    <a href="https://dpck.artd.eco">https://dpck.artd.eco</a>
  </body>
</html>)

const Server = async (name) => {
  const { app, url } = await idio()
  app.use((ctx) => {
    ctx.body = render(
      (<Html name={name}/>),
      { addDoctype: true,
        pretty: true,
        lineLength: 40 })
  })
  return { url, app }
}

<!doctype html>
<html>
  <head>
    <title>Example Depack/Render</title>
    <style>
      body {
              background: lightblue;
            }
    </style>
  </head>
  <body>
    <h1>Welcome to the Server-Side-Rendering</h1>
    Hello, Example
    <a href="https://dpck.artd.eco">
      https://dpck.artd.eco</a>
  </body>
</html>

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.