@ispb/react-lazy 0.0.4 → 0.0.6

package/README.md

@@ -0,0 +1,131 @@
+# React Lazy
+
+`@ispb/react-lazy` provides React hooks and components for rendering values that arrive asynchronously. It supports promises, RxJS observables, and a shared loading/fulfilled/rejected event model.
+
+## Installation
+
+```sh
+npm install @ispb/react-lazy
+```
+
+React 19 is a peer dependency. The observable helpers also use RxJS.
+
+## Promises
+
+Use `Asyncified` to load a value and render it when available. The promise factory receives an `AbortController`; pass its signal to work that supports cancellation.
+
+```tsx
+import { useCallback } from "react"
+import { Asyncified } from "@ispb/react-lazy"
+
+type User = { name: string }
+
+export function UserView() {
+    const loadUser = useCallback((controller: AbortController) => fetch("/api/user", { signal: controller.signal }).then(response => {
+        if (!response.ok) {
+            throw new Error("Could not load user")
+        }
+        return response.json() as Promise<User>
+    }), [])
+
+    return <Asyncified<User>
+        promise={loadUser}
+        children={(user, { retry, isReloading }) => <>
+            <p>{user.name}{isReloading ? " (refreshing...)" : ""}</p>
+            <button onClick={() => retry()}>Reload</button>
+        </>}
+        overrides={{
+            onLoading: () => <p>Loading user...</p>,
+            onError: ({ reason }) => <p role="alert">{String(reason)}</p>,
+        }}
+    />
+}
+```
+
+The promise factory can also be supplied as `() => PromiseLike<T>` if it does not need cancellation. It should be stable between renders (for example, memoize it with `useCallback`); changing the factory starts a new request. An optional `defer: { initial }` renders an initial value immediately and starts loading after mount.
+
+For more control, `useAsyncLazy` returns the event plus a `retry()` function:
+
+```tsx
+import { useCallback } from "react"
+import { Lazy, useAsyncLazy } from "@ispb/react-lazy"
+
+function UserPanel() {
+    const loadUser = useCallback(() => fetch("/api/user").then(response => response.json() as Promise<User>), [])
+    const event = useAsyncLazy(loadUser)
+
+    return <Lazy event={event} overrides={{
+        onLoading: () => <p>Loading...</p>,
+        onError: ({ reason }) => <p role="alert">{String(reason)}</p>,
+    }}>
+        {(user, state) => <>
+            <p>{user.name}</p>
+            <button disabled={state.isLoading} onClick={() => event.retry()}>Retry</button>
+        </>}
+    </Lazy>
+}
+```
+
+## RxJS Observables
+
+`Observing` subscribes when mounted, renders each emitted value, routes errors through the lazy error handling, and unsubscribes when the observable changes or the component unmounts.
+
+```tsx
+import { Observing } from "@ispb/react-lazy"
+import { interval, map } from "rxjs"
+
+const values = interval(1000).pipe(map(count => `Value ${count}`))
+
+export function ValueView() {
+    return <Observing of={values}
+        overrides={{ onLoading: () => <p>Waiting for first value...</p> }}>
+        {value => <p>{value}</p>}
+    </Observing>
+}
+```
+
+Use `useObservableLazy({ of })` when you need the resulting `LazyEvent<T>` in your own component, or `observing(factory)` to wrap an existing component.
+
+## Lazy Events and Rendering
+
+A `LazyEvent<T>` is one of:
+
+```ts
+{ status: "loading" }
+{ status: "fulfilled", value: T }
+{ status: "rejected", reason: unknown }
+```
+
+Pass an event to `<Lazy>`. Its children can be a node or a render function receiving the value and a `LazyState<T>`. On an initial load, `Lazy` renders `null` unless `onLoading` is provided. If a previously settled event starts loading again, the previous content remains visible and is passed to `onReloading` with `reloading: true`. Rejected events are thrown unless `onError` is provided.
+
+Lazy options can be set on an individual component using `overrides`, or for a subtree using `LazyContext.Provider`:
+
+```tsx
+import { LazyContext } from "@ispb/react-lazy"
+
+<LazyContext.Provider value={{
+    onLoading: () => <p>Loading...</p>,
+    onError: ({ message }) => <p role="alert">{message ?? "Request failed"}</p>,
+    defaultMessage: "Please wait",
+}}>
+    {children}
+</LazyContext.Provider>
+```
+
+Available options are `onLoading`, `onReloading`, `onError`, `defaultMessage`, `loadingMessage`, `reloadingMessage`, and `errorMessage`. Per-component overrides take precedence over context options.
+
+## Hooks
+
+- `useAsyncLazy` adapts a promise to a lazy event and exposes `retry`.
+- `useObservableLazy` adapts an RxJS observable to a lazy event; `useObservableLazyWrapped` handles an observable that emits lazy events.
+- `useLazyState` derives loading, reloading, fulfilled, and rejected flags from an event.
+- `useLazyMap` maps a fulfilled value; `useLazyChain` maps it to another lazy event; `useLazyFlatten` flattens nested lazy events.
+- `useLazyCombine` combines a record of lazy events into one event.
+- `useLazyAsPromise` and `useLazyAsObservable` adapt a lazy event to a promise or RxJS subject.
+- `isLoading`, `isFulfilled`, and `isRejected` are type guards for lazy events.
+
+The package also exports `Asyncified`, `asyncified`, `Observing`, `observing`, `Lazy`, and `lazified` for component-based and higher-order-component integrations.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/dist/async.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { ValueOrFactory } from "value-or-factory";
+import { LazyHOCOptions } from "./hoc.js";
+import { LazyState } from "./state.js";
+import { LazyEvent, LazyOverrides } from "./types.js";
+/**
+ * Options for the async hook.
+ * @typeParam D The data type.
+ */
+export interface AsyncLazyOptions<D> {
+    /**
+     * A promise or a function that returns a promise. This MUST be memoized - the function will re-run every time a new value is received.
+     */
+    readonly promise: ValueOrFactory<PromiseLike<D>, [AbortController]>;
+    /**
+     * Don't execute immediately.
+     */
+    readonly defer?: AsyncLazyDefer<D> | undefined;
+}
+export interface AsyncLazyDefer<D> {
+    /**
+     * The initial value to provide.
+     */
+    readonly initial: D;
+}
+export type AsyncLazyEvent<D> = LazyEvent<D> & {
+    readonly retry: Retry;
+};
+export declare function useAsyncLazy<D>(input: AsyncLazyOptions<D> | (() => PromiseLike<D>)): AsyncLazyEvent<D>;
+export type AsyncLazyState<D> = LazyState<D> & {
+    readonly retry: Retry;
+};
+export interface AsyncifiedOptions<D, P> extends AsyncLazyOptions<D>, LazyHOCOptions<AsyncLazyState<D>, P> {
+}
+export declare function asyncified<I extends {}, D extends {}, P extends {}>(factory: (props: I) => AsyncifiedOptions<D, P>): (component: import("react").ComponentType<D & P>) => (props: I) => import("react").JSX.Element;
+export type Retry = (suppressReload?: boolean | undefined) => void;
+export interface AsyncifiedProps<D> extends AsyncLazyOptions<D> {
+    readonly children: ValueOrFactory<ReactNode, [D, AsyncLazyState<D>]>;
+    /**
+     * The lazy overrides.
+     */
+    readonly overrides?: LazyOverrides | undefined;
+}
+export declare const Asyncified: <D>(props: AsyncifiedProps<D>) => import("react").JSX.Element;

package/dist/async.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { callOrGet } from "value-or-factory";
+import { Lazy } from "./components.js";
+import { lazified } from "./hoc.js";
+import { useIsFirstMount } from "./internal.js";
+export function useAsyncLazy(input) {
+    const options = typeof input === "function" ? { promise: input } : input;
+    const [event, setEvent] = useState(options.defer === undefined ? { status: "loading" } : { status: "fulfilled", value: options.defer.initial });
+    const run = useCallback((controller) => {
+        callOrGet(options.promise, controller).then(value => {
+            setEvent({
+                status: "fulfilled",
+                value,
+            });
+        }, reason => {
+            setEvent({
+                status: "rejected",
+                reason,
+            });
+        });
+    }, [
+        options.promise
+    ]);
+    const retry = useCallback((suppressReload = false) => {
+        if (!suppressReload) {
+            setEvent({
+                status: "loading"
+            });
+        }
+        const controller = new AbortController();
+        run(controller);
+        return () => {
+            controller.abort();
+        };
+    }, [
+        run
+    ]);
+    const isFirstMount = useIsFirstMount();
+    useEffect(() => {
+        if (isFirstMount) {
+            if (options.defer !== undefined) {
+                return;
+            }
+        }
+        else {
+            setEvent({
+                status: "loading"
+            });
+        }
+        const controller = new AbortController();
+        run(controller);
+        return () => {
+            controller.abort();
+        };
+    }, [
+        run,
+    ]);
+    return {
+        ...event,
+        retry
+    };
+}
+export function asyncified(factory) {
+    return lazified((props) => {
+        const options = factory(props);
+        const event = useAsyncLazy(options);
+        return {
+            event,
+            passthrough: state => callOrGet(options.passthrough, { ...state, retry: event.retry }),
+            overrides: options.overrides,
+        };
+    });
+}
+export const Asyncified = (props) => {
+    const event = useAsyncLazy(props);
+    return _jsx(Lazy, { event: event, overrides: props.overrides, children: (value, state) => callOrGet(props.children, value, { ...state, retry: event.retry }) });
+};
+//# sourceMappingURL=async.js.map

package/dist/async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.js","sourceRoot":"","sources":["../src/async.tsx"],"names":[],"mappings":"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"}

package/dist/components.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { LazyState } from "./state.js";
+import { LazyEvent, LazyOverrides } from "./types.js";
+export interface LazyProps<D> {
+    readonly event: LazyEvent<D>;
+    readonly overrides?: LazyOverrides | undefined;
+    readonly children: ReactNode | ((value: D, state: LazyState<D>) => ReactNode);
+}
+export declare function Lazy<D>(props: LazyProps<D>): ReactNode;

package/dist/components.js

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { LazyContext } from "./hooks.js";
+import { useLazyState } from "./state.js";
+export function Lazy(props) {
+    const context = useContext(LazyContext);
+    const options = { ...context, ...props.overrides };
+    const state = useLazyState(props.event);
+    if (state.isLoading && !state.isSettled) {
+        if (options.onLoading === undefined) {
+            return null;
+        }
+        return options.onLoading({
+            message: options.loadingMessage ?? options.defaultMessage
+        });
+    }
+    const onReloading = options.onReloading ?? ((props) => props.children);
+    return onReloading({
+        reloading: state.isLoading,
+        message: options.reloadingMessage ?? options.defaultMessage,
+        children: (() => {
+            if (state.isRejected) {
+                if (options.onError === undefined) {
+                    throw state.reason;
+                }
+                return options.onError({
+                    reason: state.reason,
+                    message: options.errorMessage ?? options.defaultMessage,
+                });
+            }
+            else {
+                return typeof props.children === "function" ? props.children(state.value, state) : props.children;
+            }
+        })()
+    });
+}
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,UAAU,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAa,YAAY,EAAE,MAAM,YAAY,CAAA;AAWpD,MAAM,UAAU,IAAI,CAAI,KAAmB;IACvC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACvC,MAAM,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAClD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACvC,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtC,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,IAAI,CAAA;QACf,CAAC;QACD,OAAO,OAAO,CAAC,SAAS,CAAC;YACrB,OAAO,EAAE,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,cAAc;SAC5D,CAAC,CAAA;IACN,CAAC;IACD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IACzF,OAAO,WAAW,CAAC;QACf,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,OAAO,EAAE,OAAO,CAAC,gBAAgB,IAAI,OAAO,CAAC,cAAc;QAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE;YACZ,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;gBACnB,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBAChC,MAAM,KAAK,CAAC,MAAM,CAAA;gBACtB,CAAC;gBACD,OAAO,OAAO,CAAC,OAAO,CAAC;oBACnB,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,OAAO,EAAE,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,cAAc;iBAC1D,CAAC,CAAA;YACN,CAAC;iBACI,CAAC;gBACF,OAAO,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;YACrG,CAAC;QACL,CAAC,CAAC,EAAE;KACP,CAAC,CAAA;AACN,CAAC"}

package/dist/hoc.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType } from "react";
+import { ValueOrFactory } from "value-or-factory";
+import { LazyState } from "./state.js";
+import { LazyEvent, LazyOverrides } from "./types.js";
+export interface LazyBuilder<D, P> extends LazyHOCOptions<LazyState<D>, P> {
+    readonly event: LazyEvent<D>;
+}
+export declare function lazified<I extends {}, D extends {}, P extends {}>(build: (props: I) => LazyBuilder<D, P>): (component: ComponentType<D & P>) => (props: I) => import("react").JSX.Element;
+export interface LazyHOCOptions<S, P> {
+    /**
+     * Properties to pass through to the component.
+     */
+    readonly passthrough: ValueOrFactory<P, [S]>;
+    /**
+     * Overrides for lazy settings.
+     */
+    readonly overrides?: LazyOverrides | undefined;
+}

package/dist/hoc.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { callOrGet } from "value-or-factory";
+import { Lazy } from "./components.js";
+export function lazified(build) {
+    return (component) => {
+        return (props) => {
+            const built = build(props);
+            return _jsx(Lazy, { event: built.event, overrides: built.overrides, children: (value, state) => createElement(component, { ...callOrGet(built.passthrough, state), ...value }) });
+        };
+    };
+}
+//# sourceMappingURL=hoc.js.map

package/dist/hoc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hoc.js","sourceRoot":"","sources":["../src/hoc.tsx"],"names":[],"mappings":";AACA,OAAO,EAAiB,aAAa,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,SAAS,EAAkB,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAUtC,MAAM,UAAU,QAAQ,CAA2C,KAAsC;IACrG,OAAO,CAAC,SAA+B,EAAE,EAAE;QACvC,OAAO,CAAC,KAAQ,EAAE,EAAE;YAChB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAA;YAC1B,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,GAAI,CAAA;QACtH,CAAC,CAAA;IACL,CAAC,CAAA;AACL,CAAC"}

package/dist/hooks.d.ts

@@ -0,0 +1,18 @@
+import { Observable, Subject } from "rxjs";
+import { ExtractLazy, LazyEvent, LazyFulfilled, LazyLoading, LazyRejected } from "./types.js";
+export declare const LazyContext: import("react").Context<Partial<import("./types.js").LazyOptions>>;
+export declare function isLoading<T>(event: LazyEvent<T>): event is LazyLoading;
+export declare function isFulfilled<T>(event: LazyEvent<T>): event is LazyFulfilled<T>;
+export declare function isRejected<T>(event: LazyEvent<T>): event is LazyRejected;
+export declare function useLazyFlatten<O>(event: LazyEvent<LazyEvent<O>>): LazyEvent<O>;
+export declare function useLazyChain<I, O>(event: LazyEvent<I>, map: (value: I) => LazyEvent<O>): LazyEvent<O>;
+export declare function useLazyMap<I, O>(event: LazyEvent<I>, map: (value: I) => O): LazyLoading | LazyRejected | {
+    status: "fulfilled";
+    value: O;
+};
+export declare function useObservableAsPromise<T>(observable: Observable<T>): Promise<T>;
+export declare function useLazyAsPromise<T>(event: LazyEvent<T>): Promise<T>;
+export declare function useLazyAsObservable<T>(event: LazyEvent<T>): Subject<T>;
+export declare function useLazyCombine<T extends Record<string, LazyEvent<unknown>>>(lazies: T): LazyEvent<{
+    [K in keyof T]: ExtractLazy<T[K]>;
+}>;

package/dist/hooks.js

@@ -0,0 +1,137 @@
+import pDefer from "p-defer";
+import { createContext, useEffect, useMemo, useState } from "react";
+import { Subject } from "rxjs";
+export const LazyContext = createContext({});
+export function isLoading(event) {
+    if (event.status === "loading") {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+export function isFulfilled(event) {
+    if (event.status === "fulfilled") {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+export function isRejected(event) {
+    if (event.status === "rejected") {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+export function useLazyFlatten(event) {
+    return useLazyChain(event, event => event);
+}
+export function useLazyChain(event, map) {
+    return useMemo(() => {
+        if (event.status === "fulfilled") {
+            return map(event.value);
+        }
+        else {
+            return event;
+        }
+    }, [
+        event
+    ]);
+}
+export function useLazyMap(event, map) {
+    return useMemo(() => {
+        if (event.status === "fulfilled") {
+            return {
+                status: "fulfilled",
+                value: map(event.value)
+            };
+        }
+        else {
+            return event;
+        }
+    }, [
+        event
+    ]);
+}
+export function useObservableAsPromise(observable) {
+    const [promise, setPromise] = useState(new Promise(() => void 0));
+    useEffect(() => {
+        const sub = observable.subscribe({
+            next: value => {
+                setPromise(Promise.resolve(value));
+            },
+            error: reason => {
+                setPromise(Promise.reject(reason));
+            }
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [
+        promise
+    ]);
+    return promise;
+}
+export function useLazyAsPromise(event) {
+    const [promise, setPromise] = useState(() => pDefer());
+    useEffect(() => {
+        if (event.status === "fulfilled") {
+            promise.resolve(event.value);
+        }
+        else if (event.status === "rejected") {
+            promise.reject(event.reason);
+        }
+        else {
+            setPromise(pDefer());
+        }
+    }, [
+        event
+    ]);
+    return promise.promise;
+}
+export function useLazyAsObservable(event) {
+    const subject = useMemo(() => new Subject(), []);
+    useEffect(() => {
+        if (event.status === "fulfilled") {
+            subject.next(event.value);
+        }
+        else if (event.status === "rejected") {
+            subject.error(event.reason);
+        }
+    }, [
+        event
+    ]);
+    return subject;
+}
+export function useLazyCombine(lazies) {
+    const entries = Object.entries(lazies);
+    if (entries.map(entry => entry[1]).some(isLoading)) {
+        return {
+            status: "loading",
+        };
+    }
+    else {
+        const failed = entries.map(entry => entry[1]).filter(isRejected).at(0);
+        if (failed !== undefined) {
+            return {
+                status: "rejected",
+                reason: failed
+            };
+        }
+        else {
+            return {
+                status: "fulfilled",
+                value: Object.fromEntries(entries.map(([key, value]) => {
+                    return [
+                        key,
+                        value.status === "fulfilled" ? value.value : undefined,
+                    ];
+                }))
+            };
+        }
+    }
+}
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./async.js";
+export * from "./components.js";
+export * from "./hoc.js";
+export * from "./hooks.js";
+export * from "./observable.js";
+export * from "./state.js";
+export * from "./types.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from "./async.js";
+export * from "./components.js";
+export * from "./hoc.js";
+export * from "./hooks.js";
+export * from "./observable.js";
+export * from "./state.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA"}

package/dist/internal.d.ts

@@ -0,0 +1,4 @@
+export declare function useIsFirstMount(): boolean;
+export declare function usePrevious<T>(value: {
+    readonly current: T;
+} | undefined): T | undefined;

package/dist/internal.js

@@ -0,0 +1,20 @@
+import { useRef } from "react";
+export function useIsFirstMount() {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}
+export function usePrevious(value) {
+    const previous = useRef(value?.current);
+    const first = useIsFirstMount();
+    if (!first) {
+        if (value !== undefined) {
+            previous.current = value.current;
+        }
+    }
+    return previous.current;
+}
+//# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,MAAM,UAAU,eAAe;IAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,CAAC,OAAO,GAAG,KAAK,CAAA;QACvB,OAAO,IAAI,CAAA;IACf,CAAC;IACD,OAAO,OAAO,CAAC,OAAO,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,WAAW,CAAI,KAA0C;IACrE,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACvC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAA;IAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACtB,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;QACpC,CAAC;IACL,CAAC;IACD,OAAO,QAAQ,CAAC,OAAO,CAAA;AAC3B,CAAC"}

package/dist/observable.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { Observable, ObservedValueOf } from "rxjs";
+import { LazyHOCOptions } from "./hoc.js";
+import { LazyState } from "./state.js";
+import { LazyEvent, LazyOverrides } from "./types.js";
+export type ObservableLazyInput = Observable<any>;
+export type ObservableLazyOutput<X extends ObservableLazyInput> = X extends Observable<any> ? ObservedValueOf<X> : {
+    [K in keyof X]: ObservedValueOf<X[K]>;
+};
+export interface ObservableLazyOptions<D> {
+    readonly of: Observable<D>;
+}
+export declare function useObservableLazyWrapped<D>(options: ObservableLazyOptions<LazyEvent<D>>): LazyEvent<D>;
+export declare function useObservableLazy<D>(options: ObservableLazyOptions<D>): LazyEvent<D>;
+export interface ObservingOptions<D, P> extends ObservableLazyOptions<D>, LazyHOCOptions<LazyState<D>, P> {
+}
+export declare function observing<I extends {}, D extends {}, P extends {}>(factory: (props: I) => ObservingOptions<D, P>): (component: import("react").ComponentType<D & P>) => (props: I) => import("react").JSX.Element;
+export interface ObservingProps<D> extends ObservableLazyOptions<D> {
+    readonly children: (value: D, state: LazyState<D>) => ReactNode;
+    readonly overrides?: LazyOverrides | undefined;
+}
+export declare const Observing: <D>(props: ObservingProps<D>) => import("react").JSX.Element;

package/dist/observable.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Lazy } from "./components.js";
+import { lazified } from "./hoc.js";
+import { useLazyFlatten } from "./hooks.js";
+import { useIsFirstMount } from "./internal.js";
+export function useObservableLazyWrapped(options) {
+    return useLazyFlatten(useObservableLazy(options));
+}
+export function useObservableLazy(options) {
+    const [event, setEvent] = useState({ status: "loading" });
+    const isFirstMount = useIsFirstMount();
+    useEffect(() => {
+        if (!isFirstMount) {
+            setEvent({
+                status: "loading"
+            });
+        }
+        const sub = options.of.subscribe({
+            next: value => {
+                setEvent({
+                    status: "fulfilled",
+                    value
+                });
+            },
+            error: reason => {
+                setEvent({
+                    status: "rejected",
+                    reason
+                });
+            }
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [
+        options.of
+    ]);
+    return event;
+}
+export function observing(factory) {
+    return lazified((props) => {
+        const options = factory(props);
+        const event = useObservableLazy(options);
+        return {
+            event,
+            passthrough: options.passthrough,
+            overrides: options.overrides,
+        };
+    });
+}
+export const Observing = (props) => {
+    const event = useObservableLazy(props);
+    return _jsx(Lazy, { event: event, overrides: props.overrides, children: props.children });
+};
+//# sourceMappingURL=observable.js.map

package/dist/observable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observable.js","sourceRoot":"","sources":["../src/observable.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,OAAO,EAAkB,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAa/C,MAAM,UAAU,wBAAwB,CAAI,OAA4C;IACpF,OAAO,cAAc,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAA;AACrD,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAI,OAAiC;IAClE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,EAAE,MAAM,EAAE,SAAkB,EAAE,CAAC,CAAA;IAChF,MAAM,YAAY,GAAG,eAAe,EAAE,CAAA;IACtC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;YAChB,QAAQ,CAAC;gBACL,MAAM,EAAE,SAAS;aACpB,CAAC,CAAA;QACN,CAAC;QACD,MAAM,GAAG,GAAG,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC;YAC7B,IAAI,EAAE,KAAK,CAAC,EAAE;gBACV,QAAQ,CAAC;oBACL,MAAM,EAAE,WAAW;oBACnB,KAAK;iBACR,CAAC,CAAA;YACN,CAAC;YACD,KAAK,EAAE,MAAM,CAAC,EAAE;gBACZ,QAAQ,CAAC;oBACL,MAAM,EAAE,UAAU;oBAClB,MAAM;iBACT,CAAC,CAAA;YACN,CAAC;SACJ,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACR,GAAG,CAAC,WAAW,EAAE,CAAA;QACrB,CAAC,CAAA;IACL,CAAC,EAAE;QACC,OAAO,CAAC,EAAE;KACb,CAAC,CAAA;IACF,OAAO,KAAK,CAAA;AAChB,CAAC;AAKD,MAAM,UAAU,SAAS,CAA2C,OAA6C;IAC7G,OAAO,QAAQ,CAAC,CAAC,KAAQ,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;QAC9B,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAA;QACxC,OAAO;YACH,KAAK;YACL,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,SAAS,EAAE,OAAO,CAAC,SAAS;SAC/B,CAAA;IACL,CAAC,CAAC,CAAA;AACN,CAAC;AASD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAK,KAAwB,EAAE,EAAE;IACtD,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;IACtC,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EACrB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAA;AACpC,CAAC,CAAA"}