diff --git a/README.md b/README.md index 0047736..2262356 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Fine grained reactive UI Library. #### Features - **Small.** Fully featured at `~9kB` gzip. -- **Truly reactive and fine grained.** Unlike react and other VDOM libraries which use diffing to compute changes, it use fine grained updates to target only the DOM which needs to update. +- **Truly reactive and fine grained.** Unlike VDOM libraries which use diffing to compute changes, it uses fine grained updates to target only the DOM which needs to update. - **No Magic** Explicit subscriptions obviate the need of [`sample`](https://github.com/luwes/sinuous/blob/8d1aa0cdb8a25e6bfcdf34f022523564a9adb533/src/observable.js#L34-L49)/[`untrack`](https://github.com/vobyjs/voby#untrack) methods found in other fine grained reactive libraries like solid/sinuous. _Importantly, many feel that this also makes your code easy to reason about._ - **Signals and Stores.** Signals for primitives and Stores for deeply nested objects/arrays. - **First class HMR** Preserves Signals/Stores across HMR loads for a truly stable HMR experience. @@ -54,24 +54,26 @@ Fine grained reactive UI Library. import { component, h, render } from "rocky7"; -type Props = { name: string }; -const Page = component("HomePage", (props, { signal, wire }) => { - const $count = signal("count", 0); - const $doubleCount = wire(($) => $count($) * 2); // explicit subscription - return ( -
-

Hey, {props.name}

- -

Double count = {$doubleCount}

-
- ); -}); +const Page = component<{ name: string }>( + "HomePage", + (props, { signal, wire }) => { + const $count = signal("count", 0); + const $doubleCount = wire(($) => $count($) * 2); // explicit subscription + return ( +
+

Hey, {props.name}

+ +

Double count = {$doubleCount}

+
+ ); + } +); render(, document.body); ```