❤
npm
Sign UpSign In

@depack/render

1.5.0 • Public • Published

@depack/render

npm version Pipeline Badge

@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

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.

Copyright

Art Deco © Art Deco™ for Depack 2020

Readme

Keywords

Package Sidebar

Install

npm i @depack/render

Repository

gitlab.com/depack/render

Homepage

www.compiler.page/

Weekly Downloads

69

Version

1.5.0

License

MIT

Unpacked Size

71.6 kB

Total Files

20

Last publish

Collaborators

  • zvr
Try on RunKit
Report malware