Skip to content

Commit

Permalink
Merge branch 'master' of github.com:abhishiv/alfama
Browse files Browse the repository at this point in the history
  • Loading branch information
abhishiv committed Jul 12, 2024
2 parents e9f6f28 + e8baee4 commit 35c41f2
Showing 1 changed file with 4 additions and 3 deletions.
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@

#### Features

- **Rich and Complete:** From support for `SVG` to popular patterns like `dangerouslySetInnerHTML`, `ref` to `<Fragment>` and `<Portal />` 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 `<JSX/>` for babel/typescript.
- **Rich and Complete:** From support for `SVG` to popular patterns like `dangerouslySetInnerHTML`, `ref` to `<Fragment>` and `<Portal />` alfama has you covered.

#### Ecosystem

Expand All @@ -46,15 +46,16 @@ import { component, h, render } from "alfama";

// 1) The signal/wire/store functions are passed as a param to
// component definition
const Page = component("HomePage", (props, { signal, wire, store }) => {
const Page = component("HomePage", (props, { signal, wire }) => {

// 2) Name signals for rock solid HMR
// 2) Named signals for stable 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 (
<div id="home">
<p>Hey, {props.name}</p>
Expand Down

0 comments on commit 35c41f2

Please sign in to comment.