diff --git a/README.md b/README.md index 3bcf81d..1d5059c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # alfama -Fine grained reactive UI Library. +⚡ Fine grained reactive UI Library. [![Version](https://img.shields.io/npm/v/alfama.svg?color=success&style=flat-square)](https://www.npmjs.com/package/alfama) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) @@ -15,13 +15,13 @@ Fine grained reactive UI Library. #### Features -- **Small.** Fully featured at `~9kB` gzip. -- **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. -- **DevEx.** no compile step needed if you want: choose your view syntax: `h` for plain javascript or `` for babel/typescript. -- **Rich and Complete.** From support for `SVG` to popular patterns like `dangerouslySetInnerHTML`, `ref` to `` and `` alfama has you covered. +- **Small:** Fully featured at `~9kB` gzip. +- **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. +- **DevEx:** no compile step needed if you want: choose your view syntax: `h` for plain javascript or `` for babel/typescript. +- **Rich and Complete:** From support for `SVG` to popular patterns like `dangerouslySetInnerHTML`, `ref` to `` and `` alfama has you covered. #### Ecosystem @@ -42,29 +42,29 @@ Fine grained reactive UI Library. ```tsx /** @jsx h **/ - import { component, h, render } from "alfama"; -const Page = component<{ name: string }>( - "HomePage", - (props, { signal, wire }) => { - const $count = signal("count", 0); - const $doubleCount = wire(($) => $count($) * 2); // explicit subscription - return ( +// 1) The signal/wire/store functions are passed as a param to +// component definition +const Page = component("HomePage", (props, { signal, wire, store }) => { + + // 2) Name signals for rock solid HMR + const $count = signal("count", 0); + + // 3) Most importantly: wire reactivity to signals + // with explicit subscription using the $ token param + // NB: also makes code easy to reason about and prevents those pesky untrack/sample related errors + const $doubleCount = wire(($) => $count($) * 2); + return (

Hey, {props.name}

-

Double count = {$doubleCount}

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