No Partying Mariachis

    @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

    Install

    npm i @depack/render

    DownloadsWeekly Downloads

    5

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    71.6 kB

    Total Files

    20

    Last publish

    Collaborators

    • zvr