https://github.com/yishn/sinho

A lightweight signal-based library for building web components with a React-like API.
https://github.com/yishn/sinho

dom fine-grained-reactivity frontend js react signal ts ui webcomponents

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yishn/sinho
• Owner: yishn
• License: mit
• Created: 2022-10-10T23:19:27.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-18T20:53:45.000Z (7 months ago)
• Last Synced: 2024-07-04T01:41:07.164Z (6 months ago)
• Topics: dom, fine-grained-reactivity, frontend, js, react, signal, ts, ui, webcomponents
• Language: TypeScript
• Homepage: https://yishn.github.io/sinho/
• Size: 624 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# 🚥 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)

```tsx

import { Component, useSignal, defineComponents } from "sinho";

class Counter extends Component("x-counter") {

  render() {

    const [value, setValue] = useSignal(0);

    return (

      <>

        
Counter: {value}

        


           setValue((n) => n + 1)}>Increment{" "}

           setValue((n) => n - 1)}>Decrement

        

      >

    );

  }

}


defineComponents(Counter);

```