Sinwan gives you signals, component lifecycle hooks, a direct DOM renderer, and a React-shaped JSX runtime without a virtual DOM.

Install

npm install sinwan

bun add sinwan

JSX Setup

Use the automatic JSX runtime:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "sinwan",
  },
}

Quick Start

import { cc, mount } from "sinwan/component";
import { signal } from "sinwan/reactivity";
import { mount } from "sinwan/renderer";

const Counter = cc(() => {
  const count = signal(0);

  return <button onClick={() => (count.value += 1)}>Count: {count}</button>;
});

mount(Counter, document.getElementById("app")!);

Features

• Fine-grained reactivity: signal, computed, effect, batch, nextTick, untrack, on, observable
• JSX runtime: sinwan/jsx-runtime and sinwan/jsx-dev-runtime
• Components: cc, lifecycle hooks, provide/inject, <Show>, <For> ...
• DOM renderer: reactive text, attributes, events, refs, namespaces, and cleanup
• Server rendering: renderToString, streamPage, hydratable strings and streams
• Hydration: reuse server-rendered DOM with hydrate

SSR and Hydration

// Server
import { renderToHydratableString } from "sinwan/react-server";

const html = await renderToHydratableString(App, { initial: 5 });

// Client
import { hydrate } from "sinwan/hydration";

hydrate(App, document.getElementById("app")!, { initial: 5 });

Documentation

• Documentation v1
• API reference
• Changelog
• Troubleshooting

Development

bun test
bun run typecheck
bun run build

Author

Mohammed Ben Cheikh

License

MIT - see LICENSE.