Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
abhishiv committed Jun 24, 2024
1 parent 07ee3fa commit 798c586
Showing 1 changed file with 21 additions and 19 deletions.
40 changes: 21 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -54,24 +54,26 @@ Fine grained reactive UI Library.

import { component, h, render } from "rocky7";

type Props = { name: string };
const Page = component<Props>("HomePage", (props, { signal, wire }) => {
const $count = signal("count", 0);
const $doubleCount = wire(($) => $count($) * 2); // explicit subscription
return (
<div id="home">
<p>Hey, {props.name}</p>
<button
onClick={() => {
$count($count() + 1);
}}
>
Increment to {wire($count)}
</button>
<p>Double count = {$doubleCount}</p>
</div>
);
});
const Page = component<{ name: string }>(
"HomePage",
(props, { signal, wire }) => {
const $count = signal("count", 0);
const $doubleCount = wire(($) => $count($) * 2); // explicit subscription
return (
<div id="home">
<p>Hey, {props.name}</p>
<button
onClick={() => {
$count($count() + 1);
}}
>
Increment to {wire($count)}
</button>
<p>Double count = {$doubleCount}</p>
</div>
);
}
);

render(<Page name="John Doe" />, document.body);
```
Expand Down

0 comments on commit 798c586

Please sign in to comment.