Web Server Components (WSC)

SSR + Hydration minimal framework for Web Components using Declarative Shadow DOM.

Install

npm install web-server-components

Example

import { WSC, withWSC } from "web-server-components";

class XHello extends WSC {
  static tagName = "x-hello";
  static template(props: { name?: string }) {
    return `<p>Hello, ${props.name ?? "World"}!</p>`;
  }
  connectedCallback() {
    this.hydrate();
  }
}

withWSC(XHello);

// Server-side:
console.log(XHello.render({ name: "Alex" }));

// Client-side:
document.body.appendChild(XHello.render({ name: "Alex" }) as HTMLElement);