@ispb/react-lazy 0.0.4 → 0.0.6

package/dist/state.d.ts

@@ -0,0 +1,39 @@
+import { LazyEvent } from "./types.js";
+export type LazyState<D> = {
+    readonly isLoading: true;
+    readonly isReloading: false;
+    readonly isSettled: false;
+    readonly isFulfilled: false;
+    readonly isRejected: false;
+} | {
+    readonly isLoading: true;
+    readonly isReloading: true;
+    readonly isSettled: true;
+    readonly isFulfilled: true;
+    readonly isRejected: false;
+    readonly value: D;
+} | {
+    readonly isLoading: true;
+    readonly isReloading: true;
+    readonly isSettled: true;
+    readonly isFulfilled: false;
+    readonly isRejected: true;
+    readonly reason: unknown;
+    readonly retry?: (() => void) | undefined;
+} | {
+    readonly isLoading: false;
+    readonly isReloading: false;
+    readonly isSettled: true;
+    readonly isFulfilled: true;
+    readonly isRejected: false;
+    readonly value: D;
+} | {
+    readonly isLoading: false;
+    readonly isReloading: false;
+    readonly isSettled: true;
+    readonly isFulfilled: false;
+    readonly isRejected: true;
+    readonly reason: unknown;
+    readonly retry?: (() => void) | undefined;
+};
+export declare function useLazyState<D>(current: LazyEvent<D>): LazyState<D>;

package/{src/state.ts → dist/state.js}

@@ -1,46 +1,6 @@
-import { usePrevious } from "./internal.js"
-import { LazyEvent, LazySettled } from "./types.js"
-
-export type LazyState<D> = {
-    readonly isLoading: true
-    readonly isReloading: false
-    readonly isSettled: false
-    readonly isFulfilled: false
-    readonly isRejected: false
-} | {
-    readonly isLoading: true
-    readonly isReloading: true
-    readonly isSettled: true
-    readonly isFulfilled: true
-    readonly isRejected: false
-    readonly value: D
-} | {
-    readonly isLoading: true
-    readonly isReloading: true
-    readonly isSettled: true
-    readonly isFulfilled: false
-    readonly isRejected: true
-    readonly reason: unknown
-    readonly retry?: (() => void) | undefined
-} | {
-    readonly isLoading: false
-    readonly isReloading: false
-    readonly isSettled: true
-    readonly isFulfilled: true
-    readonly isRejected: false
-    readonly value: D
-} | {
-    readonly isLoading: false
-    readonly isReloading: false
-    readonly isSettled: true
-    readonly isFulfilled: false
-    readonly isRejected: true
-    readonly reason: unknown
-    readonly retry?: (() => void) | undefined
-}
-
-export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
-    const settled = usePrevious<LazySettled<D>>(current.status === "fulfilled" || current.status === "rejected" ? { current } : undefined)
+import { usePrevious } from "./internal.js";
+export function useLazyState(current) {
+    const settled = usePrevious(current.status === "fulfilled" || current.status === "rejected" ? { current } : undefined);
     if (current.status === "loading") {
         if (settled === undefined) {
             return {
@@ -49,7 +9,7 @@ export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
                 isSettled: false,
                 isFulfilled: false,
                 isRejected: false,
-            }
+            };
         }
         else {
             if (settled.status === "fulfilled") {
@@ -60,7 +20,7 @@ export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
                     isFulfilled: true,
                     isRejected: false,
                     value: settled.value,
-                }
+                };
             }
             else {
                 return {
@@ -71,7 +31,7 @@ export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
                     isRejected: true,
                     reason: settled.reason,
                     retry: settled.retry,
-                }
+                };
             }
         }
     }
@@ -83,7 +43,7 @@ export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
             isFulfilled: true,
             isRejected: false,
             value: current.value,
-        }
+        };
     }
     else {
         return {
@@ -94,6 +54,7 @@ export function useLazyState<D>(current: LazyEvent<D>): LazyState<D> {
             isRejected: true,
             reason: current.reason,
             retry: current.retry,
-        }
+        };
     }
 }
+//# sourceMappingURL=state.js.map

package/dist/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../src/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAyC3C,MAAM,UAAU,YAAY,CAAI,OAAqB;IACjD,MAAM,OAAO,GAAG,WAAW,CAAiB,OAAO,CAAC,MAAM,KAAK,WAAW,IAAI,OAAO,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACtI,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC/B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO;gBACH,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,KAAK;gBAClB,SAAS,EAAE,KAAK;gBAChB,WAAW,EAAE,KAAK;gBAClB,UAAU,EAAE,KAAK;aACpB,CAAA;QACL,CAAC;aACI,CAAC;YACF,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;gBACjC,OAAO;oBACH,SAAS,EAAE,IAAI;oBACf,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,IAAI;oBACf,WAAW,EAAE,IAAI;oBACjB,UAAU,EAAE,KAAK;oBACjB,KAAK,EAAE,OAAO,CAAC,KAAK;iBACvB,CAAA;YACL,CAAC;iBACI,CAAC;gBACF,OAAO;oBACH,SAAS,EAAE,IAAI;oBACf,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,IAAI;oBACf,WAAW,EAAE,KAAK;oBAClB,UAAU,EAAE,IAAI;oBAChB,MAAM,EAAE,OAAO,CAAC,MAAM;oBACtB,KAAK,EAAE,OAAO,CAAC,KAAK;iBACvB,CAAA;YACL,CAAC;QACL,CAAC;IACL,CAAC;IACD,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;QACjC,OAAO;YACH,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,IAAI;YACjB,UAAU,EAAE,KAAK;YACjB,KAAK,EAAE,OAAO,CAAC,KAAK;SACvB,CAAA;IACL,CAAC;SACI,CAAC;QACF,OAAO;YACH,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,KAAK,EAAE,OAAO,CAAC,KAAK;SACvB,CAAA;IACL,CAAC;AACL,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+export type LazyLoading = {
+    readonly status: "loading";
+};
+export type LazyFulfilled<D> = {
+    readonly status: "fulfilled";
+    readonly value: D;
+};
+export type LazyRejected = {
+    readonly status: "rejected";
+    readonly reason: unknown;
+    readonly retry?: (() => () => void) | undefined;
+};
+export type LazySettled<D> = LazyFulfilled<D> | LazyRejected;
+export type LazyEvent<D> = LazySettled<D> | LazyLoading;
+export type OnLoading = (props: LoadingProps) => ReactNode;
+export type OnReloading = (props: ReloadingProps) => ReactNode;
+export type OnError = (props: ErrorProps) => ReactNode;
+type LazyMeta = string;
+export interface LoadingProps {
+    /**
+     * The message to display.
+     */
+    readonly message?: LazyMeta | undefined;
+}
+export interface ReloadingProps {
+    /**
+     * Whether or not the data is currently reloading.
+     */
+    readonly reloading: boolean;
+    /**
+     * The message to display.
+     */
+    readonly message?: LazyMeta | undefined;
+    /**
+     * The children.
+     */
+    readonly children: ReactNode;
+}
+export interface ErrorProps {
+    /**
+     * The error.
+     */
+    readonly reason: unknown;
+    /**
+     * The message to display.
+     */
+    readonly message?: LazyMeta | undefined;
+}
+export interface LazyOptions {
+    readonly onLoading?: OnLoading | undefined;
+    readonly onReloading?: OnReloading | undefined;
+    readonly onError?: OnError | undefined;
+    readonly defaultMessage?: LazyMeta | undefined;
+    readonly loadingMessage?: LazyMeta | undefined;
+    readonly reloadingMessage?: LazyMeta | undefined;
+    readonly errorMessage?: LazyMeta | undefined;
+}
+/**
+ * Overrides for lazy options.
+ */
+export type LazyOverrides = Partial<LazyOptions>;
+export type ExtractLazy<T> = T extends LazyFulfilled<infer D> ? D : never;
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ispb/react-lazy",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "license": "MIT",
     "type": "module",
     "sideEffects": false,
@@ -8,6 +8,9 @@
         "build": "tsc",
         "watch": "tsc --watch"
     },
+    "files": [
+        "dist"
+    ],
     "exports": {
         "default": "./dist/index.js",
         "types": "./dist/index.d.ts"
@@ -24,6 +27,5 @@
         "@types/react": "^19.2.18",
         "react": "^19.2.8",
         "typescript": "^7.0.2"
-    },
-    "packageManager": "yarn@4.18.0"
+    }
 }

package/.yarnrc.yml

@@ -1,8 +0,0 @@
-approvedGitRepositories:
-  - "**"
-
-enableScripts: true
-
-nodeLinker: node-modules
-
-npmMinimalAgeGate: 0

package/src/async.tsx

@@ -1,124 +0,0 @@
-
-import { ReactNode, useCallback, useEffect, useState } from "react"
-import { ValueOrFactory, callOrGet } from "value-or-factory"
-import { Lazy } from "./components.js"
-import { LazyHOCOptions, lazified } from "./hoc.js"
-import { useIsFirstMount } from "./internal.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>>
-
-    /**
-     * 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 function useAsyncLazy<D>(input: AsyncLazyOptions<D> | (() => PromiseLike<D>)): AsyncLazyEvent<D> {
-    const options = typeof input === "function" ? { promise: input } : input
-    const [event, setEvent] = useState<LazyEvent<D>>(options.defer === undefined ? { status: "loading" } : { status: "fulfilled", value: options.defer.initial })
-    const run = useCallback(() => {
-        callOrGet(options.promise).then(value => {
-            setEvent({
-                status: "fulfilled",
-                value,
-            })
-        }, reason => {
-            setEvent({
-                status: "rejected",
-                reason,
-            })
-        })
-    }, [
-        options.promise
-    ])
-    const retry = useCallback((suppressReload = false) => {
-        if (!suppressReload) {
-            setEvent({
-                status: "loading"
-            })
-        }
-        run()
-    }, [
-        run
-    ])
-    const isFirstMount = useIsFirstMount()
-    useEffect(() => {
-        if (isFirstMount) {
-            if (options.defer !== undefined) {
-                return
-            }
-        }
-        else {
-            setEvent({
-                status: "loading"
-            })
-        }
-        run()
-    }, [
-        run,
-    ])
-    return {
-        ...event,
-        retry
-    }
-}
-
-export type AsyncLazyState<D> = LazyState<D> & { readonly retry: Retry }
-
-export interface AsyncifiedOptions<D, P> extends AsyncLazyOptions<D>, LazyHOCOptions<AsyncLazyState<D>, P> {
-}
-
-export function asyncified<I extends {}, D extends {}, P extends {}>(factory: (props: I) => AsyncifiedOptions<D, P>) {
-    return lazified((props: I) => {
-        const options = factory(props)
-        const event = useAsyncLazy(options)
-        return {
-            event,
-            passthrough: state => callOrGet(options.passthrough, { ...state, retry: event.retry }),
-            overrides: options.overrides,
-        }
-    })
-}
-
-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 const Asyncified = <D,>(props: AsyncifiedProps<D>) => {
-    const event = useAsyncLazy(props)
-    return <Lazy event={event}
-        overrides={props.overrides}
-        children={(value, state) => callOrGet(props.children, value, { ...state, retry: event.retry })} />
-}

package/src/components.tsx

@@ -1,46 +0,0 @@
-
-import { PropsWithChildren, ReactNode, useContext } from "react"
-import { LazyContext } from "./hooks.js"
-import { LazyState, useLazyState } 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 function Lazy<D>(props: LazyProps<D>): ReactNode {
-    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: PropsWithChildren) => 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
-            }
-        })()
-    })
-}

package/src/hoc.tsx

@@ -1,37 +0,0 @@
-
-import { ComponentType, createElement } from "react"
-import { callOrGet, ValueOrFactory } from "value-or-factory"
-import { Lazy } from "./components.js"
-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 function lazified<I extends {}, D extends {}, P extends {}>(build: (props: I) => LazyBuilder<D, P>) {
-    return (component: ComponentType<D & P>) => {
-        return (props: I) => {
-            const built = build(props)
-            return <Lazy event={built.event}
-                overrides={built.overrides}
-                children={(value, state) => createElement(component, { ...callOrGet(built.passthrough, state), ...value })} />
-        }
-    }
-}
-
-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/src/hooks.ts

@@ -1,155 +0,0 @@
-import pDefer from "p-defer"
-import { createContext, useEffect, useMemo, useState } from "react"
-import { Observable, Subject } from "rxjs"
-import { useIsFirstMount } from "./internal.js"
-import { ExtractLazy, LazyEvent, LazyFulfilled, LazyLoading, LazyOverrides, LazyRejected } from "./types.js"
-
-export const LazyContext = createContext<LazyOverrides>({})
-
-export function isLoading<T>(event: LazyEvent<T>): event is LazyLoading {
-    if (event.status === "loading") {
-        return true
-    }
-    else {
-        return false
-    }
-}
-export function isFulfilled<T>(event: LazyEvent<T>): event is LazyFulfilled<T> {
-    if (event.status === "fulfilled") {
-        return true
-    }
-    else {
-        return false
-    }
-}
-export function isRejected<T>(event: LazyEvent<T>): event is LazyRejected {
-    if (event.status === "rejected") {
-        return true
-    }
-    else {
-        return false
-    }
-}
-
-export function useLazyFlatten<O>(event: LazyEvent<LazyEvent<O>>,) {
-    return useLazyChain(event, event => event)
-}
-export function useLazyChain<I, O>(event: LazyEvent<I>, map: (value: I) => LazyEvent<O>) {
-    return useMemo(() => {
-        if (event.status === "fulfilled") {
-            return map(event.value)
-        }
-        else {
-            return event
-        }
-    }, [
-        event
-    ])
-}
-export function useLazyMap<I, O>(event: LazyEvent<I>, map: (value: I) => O) {
-    return useMemo(() => {
-        if (event.status === "fulfilled") {
-            return {
-                status: "fulfilled" as const,
-                value: map(event.value)
-            }
-        }
-        else {
-            return event
-        }
-    }, [
-        event
-    ])
-}
-
-export function useObservableAsPromise<T>(observable: Observable<T>) {
-    const [promise, setPromise] = useState(() => pDefer<T>())
-    const isFirstMount = useIsFirstMount()
-    useEffect(() => {
-        if (!isFirstMount) {
-            setPromise(pDefer<T>())
-        }
-    }, [
-        observable
-    ])
-    useEffect(() => {
-        const sub = observable.subscribe({
-            next: value => {
-                promise.resolve(value)
-            },
-            error: reason => {
-                promise.reject(reason)
-            }
-        })
-        return () => {
-            sub.unsubscribe()
-        }
-    }, [
-        promise
-    ])
-    return promise.promise
-}
-
-export function useLazyAsPromise<T>(event: LazyEvent<T>) {
-    const [promise, setPromise] = useState(() => pDefer<T>())
-    useEffect(() => {
-        if (event.status === "fulfilled") {
-            promise.resolve(event.value)
-        }
-        else if (event.status === "rejected") {
-            promise.reject(event.reason)
-        }
-        else {
-            setPromise(pDefer<T>())
-        }
-    }, [
-        event
-    ])
-    return promise.promise
-}
-
-export function useLazyAsObservable<T>(event: LazyEvent<T>) {
-    const subject = useMemo(() => new Subject<T>(), [])
-    useEffect(() => {
-        if (event.status === "fulfilled") {
-            subject.next(event.value)
-        }
-        else if (event.status === "rejected") {
-            subject.error(event.reason)
-        }
-    }, [
-        event
-    ])
-    return subject
-}
-
-export function useLazyCombine<T extends Record<string, LazyEvent<unknown>>>(lazies: T): LazyEvent<{ [K in keyof T]: ExtractLazy<T[K]> }> {
-    const entries = Object.entries(lazies)
-    if (entries.map(entry => entry[1]).some(isLoading)) {
-        return {
-            status: "loading" as const,
-        }
-    }
-    else {
-        const failed = entries.map(entry => entry[1]).filter(isRejected).at(0)
-        if (failed !== undefined) {
-            return {
-                status: "rejected" as const,
-                reason: failed
-            }
-        }
-        else {
-            return {
-                status: "fulfilled",
-                value: Object.fromEntries(
-                    entries.map(([key, value]) => {
-                        return [
-                            key,
-                            value.status === "fulfilled" ? value.value : undefined,
-                        ] as const
-                    })
-                ) as { [K in keyof T]: ExtractLazy<T[K]> }
-            }
-        }
-    }
-}

package/src/index.tsx

@@ -1,9 +0,0 @@
-
-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/src/internal.ts

@@ -1,21 +0,0 @@
-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<T>(value: { readonly current: T } | undefined) {
-    const previous = useRef(value?.current)
-    const first = useIsFirstMount()
-    if (!first) {
-        if (value !== undefined) {
-            previous.current = value.current
-        }
-    }
-    return previous.current
-}