atoms-element

A simple web component library for defining your custom elements. It works on both client and server. It supports hooks and follows the same principles of react. Data props are attributes on the custom element by default so its easier to debug and functions/handlers are attached to the element.

I initially started researching if it was possible to server render web components but found out not one framework supported it. I liked using haunted as it was react-like with hooks but was lost on how to implement server rendering. Libraries like JSDOM couldn't be of use since it didn't support web components and I didn't want to use puppeteer for something like this.

After a year of thinking about it and researching it I found out this awesome framework Tonic. That was the turning point I figured out how they implemented it using a simple html parser.

After going through all these libraries,

1. lit-html
2. lit-html-server
3. haunted
4. Tonic
5. Atomico
6. fuco

And figuring out how each one implemented their on custom elements I came up with atoms-element. It now does proper rehydration: the server renders with @lit-labs/ssr, which emits hydration marker comments into the light DOM, and the client attaches to that same DOM via @lit-labs/ssr-client's hydrate() instead of tearing it down and re-rendering from scratch — so things like focus survive the first client render.

State lives directly in attributes rather than a separate reducer/store: Fn.attrs = { count: Number } declares a set of typed, required attributes up front (using the constructor itself as the type, the way Vue's props do), and createElement hands each one to the render function as a live { value } getter/setter, validated against the declared type — mistyped or missing values throw immediately instead of failing silently.

Example

import { classMap, createElement, css, html, renderHtml } from 'atoms-element/index.js';

const Counter = ({ name, count }) => {
  const increment = () => { count.value += 1; };
  const decrement = () => { count.value -= 1; };

  return html`
    <p>Counter: ${name}</p>
    <div class="controls">
      <button type="button" aria-label="Decrement" @click=${decrement}>-</button>
      <output class=${classMap({ warning: count.value > 10 })}>${count.value}</output>
      <button type="button" aria-label="Increment" @click=${increment}>+</button>
    </div>
  `;
};
Counter.attrs = { count: Number };

Counter.styles = css`
  :scope {
    display: block;
    margin-top: 2.5rem;
    color: rgb(55 65 81);
    --color-danger: rgb(239 68 68);
    --color-button-bg: rgb(209 213 219);
    --color-button-bg-hover: rgb(229 231 235);
  }
  p {
    margin: 0 0 0.5rem;
  }
  .controls {
    display: flex;
    align-items: center;
  }
  output {
    margin: 0 5rem;
    font-size: 1.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  output.warning {
    color: var(--color-danger);
  }
  button {
    background-color: var(--color-button-bg);
    color: inherit;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 1.875rem;
  }
  button:hover {
    background-color: var(--color-button-bg-hover);
  }
  button:focus {
    outline: none;
  }
`;

createElement({ url: 'app-counter.js' }, Counter);

console.log(renderHtml(html`<app-counter name="1" count="0"></app-counter>`));