sinwan 0.1.0 → 1.0.0

package/README.md

@@ -1,67 +1,94 @@
-# Sinwan — Reactive UI Library
+# Sinwan
 
-A modern reactive UI library with SSR, hydration, and fine-grained reactivity.
+A small reactive UI library for JSX, fine-grained reactivity, SSR, and hydration.
 
-## Features
+Sinwan gives you signals, component lifecycle hooks, a direct DOM renderer, and a React-shaped JSX runtime without a virtual DOM.
+
+## Install
+
+```sh
+npm install sinwan
+```
+
+```sh
+bun add sinwan
+```
 
-- **Reactivity** — `signal()`, `computed()`, `effect()`, `batch()` with fine-grained tracking
-- **JSX** — Custom JSX runtime producing `SinwanElement` trees
-- **Components** — `createComponent()` with lifecycle hooks (`onMounted`, `onUnmounted`, `onUpdated`, `onError`)
-- **Renderer** — Client-side DOM renderer with reactive text, attributes, and event binding
-- **Provide/Inject** — Dependency injection across component trees
-- **SSR** — `renderToString()`, `streamPage()` for server-side rendering
-- **Hydration** — `hydrate()` to attach reactivity to server-rendered HTML without DOM recreation
+## JSX Setup
+
+Use the automatic JSX runtime:
+
+```jsonc
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "sinwan"
+  }
+}
+```
 
 ## Quick Start
 
 ```tsx
-import { signal, createComponent, mount, onMounted } from "Sinwan";
+import { createComponent, mount, signal } from "sinwan";
 
-const Counter = createComponent<{ initial?: number }>(({ initial = 0 }) => {
-  const count = signal(initial);
-
-  onMounted(() => console.log("Counter mounted!"));
+const Counter = createComponent(() => {
+  const count = signal(0);
 
   return (
-    <div>
-      <span>{count}</span>
-      <button onClick={() => count.value++}>+</button>
-    </div>
+    <button onClick={() => (count.value += 1)}>
+      Count: {count}
+    </button>
   );
 });
 
 mount(Counter, document.getElementById("app")!);
 ```
 
-## SSR + Hydration
+## Features
+
+- Fine-grained reactivity: `signal`, `computed`, `effect`, `batch`, `nextTick`
+- JSX runtime: `sinwan/jsx-runtime` and `sinwan/jsx-dev-runtime`
+- Components: `createComponent`, 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
 
 ```tsx
 // Server
-import { renderToHydratableString } from "Sinwan/server";
-const html = await renderToHydratableString(Counter, { initial: 5 });
+import { renderToHydratableString } from "sinwan/server";
 
-// Client
-import { hydrate } from "Sinwan";
-hydrate(Counter, document.getElementById("app")!, { initial: 5 });
+const html = await renderToHydratableString(App, { initial: 5 });
 ```
 
-## Project Structure
+```tsx
+// Client
+import { hydrate } from "sinwan";
 
+hydrate(App, document.getElementById("app")!, { initial: 5 });
 ```
-src/
-├── types.ts              # Core types (SinwanNode, SinwanElement, etc.)
-├── escaper.ts            # HTML escaping
-├── jsx/                  # JSX runtime
-├── reactivity/           # signal, computed, effect, batch, scheduler
-├── component/            # createComponent, lifecycle, provide/inject
-├── renderer/             # Client DOM renderer (mount, render-element, etc.)
-├── hydration/            # Client hydration (hydrate, markers, walk)
-├── server/               # SSR (renderToString, stream, hydration-markers)
-└── index.ts              # Main barrel export
-```
 
-## Tests
+## Documentation
+
+- [Documentation v1](./docs/v1/README.md)
+- [API reference](./docs/v1/15-api-reference.md)
+- [Changelog](./docs/v1/CHANGELOG.md)
+- [Troubleshooting](./docs/v1/17-troubleshooting.md)
 
-```bash
+## Development
+
+```sh
 bun test
+bun run typecheck
+bun run build
 ```
+
+## Author
+
+Mohammed Ben Cheikh
+
+## License
+
+MIT - see [LICENSE](./LICENSE).