Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various docs edits #72

Merged
merged 3 commits into from
Jan 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/Iterate/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useAsyncIter, type IterationResult } from '../useAsyncIter/index.js';
export { Iterate, type IterateProps };

/**
* The `<Iterate>` helper component (also exported as `<It>`) is used to format and render an async
* The `<Iterate>` component (also exported as `<It>`) is used to format and render an async
* iterable (or a plain non-iterable value) directly onto a piece of UI.
*
* Essentially, can be seen as a {@link useAsyncIter `useAsyncIter`} hook in a component form,
Expand Down Expand Up @@ -46,15 +46,15 @@ export { Iterate, type IterateProps };
* {@link useAsyncIter `useAsyncIter`} being a hook it has to re-render an entire
* component's output for every new value.
*
* Given an async iterable as the `value` prop, this component will iterate it and render each new
* Given an async iterable as the `value` prop, this component will iterate it and render every new
* value that becomes available together with any possible completion or error it may run into.
* If `value` is a plain (non async iterable) value, it will simply be rendered over as-is.
* If `value` is a plain (non async iterable) value, it will simply be rendered as-is.
*
* Whenever given `value` is changed from the previous one seen, `<Iterate>` will close the previous
* if it was async iterable before proceeding to iterate the new `value`. Care should be taken to
* avoid passing a constantly recreated iterable object across re-renders, e.g; by declaring it outside the component body or control __when__ it
* should be recreated with React's [`useMemo`](https://react.dev/reference/react/useMemo).
* `<Iterate>` will automatically close its iterated iterable as soon as it gets unmounted.
* avoid passing a constantly recreated iterable object across re-renders, e.g; by declaring it outside
* the component body or by controlling __when__ it should be recreated with React's
* [`useMemo`](https://react.dev/reference/react/useMemo). `<Iterate>` will automatically close its iterated iterable as soon as it gets unmounted.
*
* ---
*
Expand Down Expand Up @@ -141,7 +141,7 @@ type IterateProps<TVal, TInitialVal = undefined> =

type IteratePropsWithRenderFunction<TVal, TInitialVal = undefined> = {
/**
* The source value to iterate over, an async iterable or a plain (non async iterable) value.
* The source value to iterate over - an async iterable or a plain (non async iterable) value.
*/
value: TVal;
/**
Expand Down
2 changes: 1 addition & 1 deletion src/IterateMulti/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export { IterateMulti, type IterateMultiProps };
// TODO: The initial values should be able to be given in function/s form, with consideration for iterable sources that could be added in dynamically.

/**
* The `<IterateMulti>` helper component (also exported as `<ItMulti>`) is used to combine and render
* The `<IterateMulti>` component (also exported as `<ItMulti>`) is used to combine and render
* any number of async iterables (or plain non-iterable values) directly onto a piece of UI.
*
* It's similar to `<Iterate>`, only it works with any changeable number of async iterables or plain values
Expand Down
22 changes: 12 additions & 10 deletions src/iterateFormatted/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,11 @@ import { type Iterate } from '../Iterate/index.js'; // eslint-disable-line @type
export { iterateFormatted };

/**
* An optional utility to format an async iterable's values inline where its passed into
* an other consuming component.
* A utility to inline-format an async iterable's values before passed into an other
* consuming component.
*
* Can be thought of as mapping an async iterable before being rendered/passed over in the same way
* you would commonly `.map(...)` an array before rendering/passing it over.
*
* @example
* ```tsx
Expand Down Expand Up @@ -55,27 +58,26 @@ export { iterateFormatted };
* This utility should come handy in places when you need a formatted (or _"mapped"_) version of
* some existing async iterable before passing it as prop into an other component which consumes it
* and you rather have the formatting logic right at the place in code of passing the prop instead
* of far from it, having to perform the transformation using some `useMemo` call at the top of the
* component.
* of having to perform the transformation using some `useMemo` call at the top of the component.
*
* The utility's method of operation is to be given a `source` and return from it a new transformed
* async iterable object, attaching it with some special metadata that tells library tools like
* {@link Iterate `<Iterate>`} and {@link useAsyncIter `useAsyncIter`} to bind the iteration process
* to the same original base object. This way, the outer "formatted" iterable may be recreated repeatedly
* without concerns of restarting the iteration process (as long as the `source` arg is consistently
* passed the same base object).
* {@link Iterate `<Iterate>`} and {@link useAsyncIter `useAsyncIter`} that the original base object
* is what the iteration process should be bound to instead of the given object. This way, the
* resulting formatted iterable may be recreated repeatedly without concerns of restarting the
* iteration process (as long as `source` is passed the same base iterable consistently).
*
* `source` may have a current value property (at `.value.current` - per the `AsyncIterableSubject`
* interface), in which case it will be formatted via `formatFn` in the same way like yielded values.
*
* If `source` is a plain value and not an async iterable, it will be passed to the given `formatFn`
* If `source` is a plain value and not an async iterable, it will be passed into the given `formatFn`
* and returned on the spot.
*
* @template TIn The full type of the source input.
* @template TRes The type of values resulting after formatting.
*
* @param source Any async iterable or plain value.
* @param formatFn Function that performs formatting/mapping logic for each value of `source`
* @param formatFn Function that performs formatting/mapping logic for each value of `source`.
*
* @returns a transformed async iterable emitting every value of `source` after formatting.
*/
Expand Down
20 changes: 10 additions & 10 deletions src/useAsyncIterState/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,13 @@ export { useAsyncIterState, type AsyncIterStateResult, type AsyncIterableChannel

/**
* Basically like {@link https://react.dev/reference/react/useState `React.useState`}, only that the value
* is provided back __wrapped as an async iterable__.
* is provided back __wrapped in an async iterable__.
*
* This hook allows a component to declare and manage a piece of state while easily letting you control
* what specifically area(s) within the UI should be bound to it (should re-render in reaction to changes
* in it) - for example, if combined with one or more {@link Iterate `<Iterate>`}s.
* This hook allows a component to declare and manage a piece of state as an async iterable thus
* letting you easily control what specific places in the app UI tree should be bound to it,
* re-rendering in reaction to its changes (if used in conjunction with {@link Iterate `<Iterate>`}
* for example).

*
* @example
* ```tsx
Expand Down Expand Up @@ -44,9 +46,9 @@ export { useAsyncIterState, type AsyncIterStateResult, type AsyncIterableChannel
*
* The returned async iterable can be passed over to any level down the component tree and rendered
* using `<Iterate>`, `useAsyncIter`, and others. It also contains a `.value.current` property which shows
* the current up to date state value at all times. Use this any time you need to read the immediate
* the current up to date state value at any time. Use this any time you need to read the immediate
* current state (for example as part of side effect logic) rather than directly rendering it, since
* for rendering you may simply iterate values as part of an `<Iterate>`.
* for rendering you may simply iterate the values as part of an `<Iterate>`.
*
* Returned also alongside the async iterable is a function for updating the state. Calling it with a new
* value will cause the paired iterable to yield the updated state value as well as immediately set the
Expand Down Expand Up @@ -84,9 +86,7 @@ export { useAsyncIterState, type AsyncIterStateResult, type AsyncIterableChannel
* }
* ```
*
* The returned async iterable is a shared iterable - can be iterated by multiple consumers simultaneously
* (e.g multiple {@link Iterate `<Iterate>`}s) and each would pick up the same yielded values and at the
* same time.
* The returned async iterable is a shared iterable so that if iterated by multiple consumers simultaneously (e.g multiple {@link Iterate `<Iterate>`}s) then all would pick up the same yields at the same time.
*
* The returned async iterable is automatically closed on host component unmount.
*
Expand All @@ -97,7 +97,7 @@ export { useAsyncIterState, type AsyncIterStateResult, type AsyncIterableChannel
*
* @param initialValue Any optional starting value for the state iterable's `.value.current` property, defaults to `undefined`. You can pass an actual value, or a function that returns a value (which the hook will call once during mounting).
*
* @returns a stateful async iterable and a function with which to yield an update, both maintain stable references across re-renders.
* @returns a stateful async iterable and a function for yielding an update. Both maintain stable references across re-renders.
*
* @see {@link Iterate `<Iterate>`}
*/
Expand Down
Loading