🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

srender

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

srender

Stream based renderer

latest
Source
npmnpm
Version
0.0.2
Version published
Weekly downloads
5
Maintainers
1
Weekly downloads
 
Created
Source

npm version minzipped size

srender

Stream based renderer

Features

  • Tiny (only ~80 sloc)
  • Component
  • Context
  • SSR

Todo example

import { createHtml, createRef, renderToNode, rawHtml } from "srender";

const root = document.getElementById("root");

const TodoItem = (html, props, context) => html`
  <li>
    ${props.item}_${context.name}
    <button type="button" name="deleteButton">X</button>
  </li>
`;

function TodoMVC(html, { items = [] }, context) {
  const { createRef } = context;
  const formRef = createRef();
  const inputRef = createRef();
  const listRef = createRef();

  html`
    <h1>Todo MVC</h1>
    ${rawHtml("<h2>srender example</h2>")}
    <form id="${formRef}">
      <input id="${inputRef}" />
      <button>Add</button>
    </form>
    <ul id="${listRef}">
      ${() => {
        const html = createHtml({
          ...context,
          name: "second",
        });
        html(TodoItem, { item: "test" });
      }}
      ${() => items.map(item => html(TodoItem, { item }))}
    </ul>
  `;

  // component did mount
  return () => {
    const $form = formRef.get();
    const $input = inputRef.get();
    const $list = listRef.get();

    $form.onsubmit = e => {
      e.preventDefault();
      renderToNode(
        () => {
          const html = createHtml({
            ...context,
            name: "third",
          });
          html(TodoItem, { item: $input.value });
        },
        node => $list.appendChild(node),
      );
      $form.reset();
    };

    $list.onclick = ({ target }) => {
      if (target.name === "deleteButton") {
        target.closest("li").remove();
      }
    };

    requestAnimationFrame(() => $input.focus());
  };
}

renderToNode(
  () => {
    const context = {
      createRef: createRef.bind({}), // initialize createRef
      name: "root",
    };

    const html = createHtml(context);

    html(TodoMVC, { items: ["foo", "bar"] });
  },
  node => root.appendChild(node)
);

SSR example

const http = require("http");
const { render, createHtml } = require("srender");
const hostname = "127.0.0.1";
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/html; charset=utf-8");

  render(
    () => {
      const html = createHtml();
      html`
        <!DOCTYPE html>
        <html>
          <head>
            <title>srender demo</title>
          </head>
          <body>
            Hello!
          </body>
        </html>
      `;
    },
    {
      onData: (data) => res.write(data),
    }
  );

  res.end();
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

IDE plugins

Install lit-html IDE plugins to have syntax highlight.

License

MIT

FAQs

Package last updated on 07 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025