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

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

const TodoItem = (html, { item }, { name }) => html`
  <li>
    ${item}_${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>
  `;

  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 html = createHtml({
      createRef: createRef.bind({}), // initialize createRef
      name: "root",
    });

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

SSR example

import http from "http";
import { render, createHtml } from "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>
      `;
    },
    (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

What is srender?

Is srender popular?

Is srender well maintained?

Package last updated on 05 Apr 2020

Did you know?

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

srender

srender

Features

Todo example

SSR example

IDE plugins

License

Related posts

Software Engineering Daily Podcast: Feross on AI, Open Source, and Supply Chain Risk

npm Revokes Classic Tokens, as OpenJS Warns Maintainers About OIDC Gaps