@depack/render

v1.5.0

Published

3 years ago

Renders JSX To String.

Downloads

628

0High
0Medium
0Low

zvr

render depack preact html ssr string universal jsx

@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

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.

Fork Improvements

There are a number of new features that the fork has:

Render htmlFor into plain for attribute.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@depack/render

Table Of Contents

API

render( vnode: preact.VNode, config=: !RenderConfig, context=: *,): string

Pretty Render

Server-Side Rendering

Fork Improvements

Copyright

render( `vnode: preact.VNode,` `config=: !RenderConfig,` `context=: *,`): string