Skip to content

Commit 27a8d41

Browse files
authored
docs(readme): various edits (#90)
1 parent 368cfb4 commit 27a8d41

File tree

1 file changed

+15
-7
lines changed

1 file changed

+15
-7
lines changed

README.md

+15-7
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,15 @@
1313

1414
</p>
1515

16-
A React.js library that makes it __easy and satisfying__ to integrate and render JS async iterators across and throughout your app's components. Expanding from that, it allows you to describe and propagate various aspects and states of your app in actual async iterator form, letting it tap into the full benefits and flexibility in this JS construct.
16+
A React.js library that makes it __easy and satisfying__ to integrate and render JS async iterators across and throughout your app's components. Expanding from that, it enables you to describe and propagate states and various aspects of your app in actual async iterator form, tapping into the full benefits and flexibility of this JS construct.
1717

18+
The goal behind this library is to promote a mental model where fundamentally every piece of data in a JavaScript program can be expressed in either a plain and static form, or in a ___dynamic, self-evolving form - an async iterable___. By simply wrapping a value in an async iterator or iterable, it becomes a self-updating entity while remaining first-class data. From this, it follows naturally that every interface should and could accommodate either kind of inputs, seamlessly adapting to changes over time as intuitively expected.
1819

20+
To facilitate this, `react-async-iterators` offers a set of tools specifically tailored for the frontend and React which and embraces composability with the upcoming standardization of [Async Iterator Helpers proposal](https://github.com/tc39/proposal-async-iterator-helpers) as well as projects such as [iter-tools](https://github.com/iter-tools/iter-tools), [IxJS](https://github.com/ReactiveX/IxJS) and more.
1921

20-
### Illustration:
22+
23+
24+
### Illustration
2125

2226
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-async-iterators-example-3?file=src%2FApp.tsx)
2327

@@ -27,7 +31,7 @@ import { It } from 'react-async-iterators';
2731
const randoms = {
2832
async *[Symbol.asyncIterator]() {
2933
while (true) {
30-
await new Promise((r) => setTimeout(r, 500));
34+
await new Promise(r => setTimeout(r, 500));
3135
const x = Math.random();
3236
yield Math.round(x * 10);
3337
}
@@ -58,11 +62,15 @@ const randoms = {
5862
// etc.
5963
```
6064

61-
Below is another interactive demo showing how to consume the `EventSource` web API (A.K.A [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
6265

63-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-async-iterators-example-5?file=src%2FApp.tsx)
6466

67+
### More examples
68+
69+
- Interactive demo showing how to consume the `EventSource` web API ([Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
70+
<br/><br/>[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-async-iterators-example-5?file=src%2FApp.tsx)
6571

72+
- Interactive demo showing how to consume a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
73+
<br/><br/>[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-async-iterators-example-6?file=src%2FApp.tsx)
6674

6775
<!--
6876
```tsx
@@ -173,7 +181,7 @@ Slightly obvious to say, the React ecosystem is featuring many methods and tools
173181

174182
- When apps involve any _asynchronously-generated series_ of data, such as data updated via recurring timers, WebSocket messages, GraphQL subscriptions, Geolocation watching and more...
175183

176-
- When rendering a complex form or dynamic widget with large nested component tree for which UI updates might impact UI performance.
184+
- When rendering a complex form or dynamic widget with large nested component tree for which updates might impact UI performance.
177185

178186

179187

@@ -223,7 +231,7 @@ import { It, type IterationResult } from 'react-async-iterators';
223231

224232
Async iterables can be hooked into your components and consumed using [`<It>`](#it) and [`<ItMulti>`](#itmulti), or their hook counterparts [`useAsyncIter`](#useasynciter) and [`useAsyncIterMulti`](#useasyncitermulti) respectively.
225233

226-
The iteration values and states are expressed via a consistent structure (see exaustive list in [this breakdown](#iteration-state-object-detailed-breakdown)).<br/>
234+
The iteration values and states are expressed via a consistent structure (see exaustive list in [this breakdown](#iteration-state-properties-breakdown)).<br/>
227235
They may be accessed as follows:
228236

229237
```tsx

0 commit comments

Comments
 (0)