Skip to content
/ sinho Public

A lightweight signal-based library for building web components with a React-like API.

License

Notifications You must be signed in to change notification settings

yishn/sinho

Folders and files

NameName
Last commit message
Last commit date

Latest commit

May 18, 2024
80a65ba Β· May 18, 2024
May 3, 2024
Apr 5, 2024
May 3, 2024
May 18, 2024
May 10, 2024
Apr 12, 2024
Mar 27, 2024
Mar 25, 2024
May 3, 2024
May 3, 2024
May 18, 2024
May 18, 2024
Apr 26, 2024
May 18, 2024

Repository files navigation

πŸš₯ Sinho

A lightweight signal-based library for building web components with a React-like API.

  • 🌌 Web standards with custom HTML elements
  • βš›οΈ React-like API
  • βœ’οΈ Declarative templating with JSX (no additional parsing)
  • πŸš₯ Fine-grained reactivity with signals
  • πŸ›Ÿ Type-safe components with TypeScript
  • πŸͺΆ Lightweight (~4KB minified and compressed)
import { Component, useSignal, defineComponents } from "sinho";

class Counter extends Component("x-counter") {
  render() {
    const [value, setValue] = useSignal(0);

    return (
      <>
        <p>Counter: {value}</p>
        <p>
          <button onclick={() => setValue((n) => n + 1)}>Increment</button>{" "}
          <button onclick={() => setValue((n) => n - 1)}>Decrement</button>
        </p>
      </>
    );
  }
}

defineComponents(Counter);