@legendapp/state 2.2.0-next.8 → 2.2.0-next.80

package/src/persist-plugins/query.ts

@@ -0,0 +1,129 @@
+import { isFunction, observe } from '@legendapp/state';
+import { ObservablePersistRemoteFunctions, type ObservablePersistRemoteSetParams } from '@legendapp/state/sync';
+import {
+    InfiniteQueryObserver,
+    MutationObserver,
+    QueryClient,
+    QueryKey,
+    QueryObserver,
+    UseBaseQueryOptions,
+    UseMutationOptions,
+    notifyManager,
+    useQueryClient,
+} from '@tanstack/react-query';
+
+type ObservableQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey> = Omit<
+    UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    'queryKey'
+> & { queryKey?: TQueryKey | (() => TQueryKey) };
+
+type Params<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey> = {
+    query: ObservableQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>;
+    mutation?: UseMutationOptions<TData, TError, void>;
+    type?: 'Query' | 'Infinite';
+} & (
+    | {
+          queryClient: QueryClient;
+          useContext?: false | undefined | never;
+      }
+    | {
+          queryClient?: QueryClient;
+          useContext?: true;
+      }
+);
+
+export function persistPluginQuery<TObs, TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>({
+    query: options,
+    mutation: mutationOptions,
+    type = 'Query',
+    queryClient,
+    useContext,
+}: Params<TQueryFnData, TError, TData, TQueryData, TQueryKey>): ObservablePersistRemoteFunctions<TObs> {
+    if (useContext) {
+        queryClient = queryClient || useQueryClient();
+    }
+    // Set up the defaults like useBaseQuery does
+    const defaultedOptions = queryClient!.defaultQueryOptions(
+        options as UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    );
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+        defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+    }
+
+    if (defaultedOptions.onSuccess) {
+        defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+    }
+
+    if (defaultedOptions.onSettled) {
+        defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+    }
+
+    const Observer = type === 'Query' ? QueryObserver : (InfiniteQueryObserver as typeof QueryObserver);
+
+    const ret: ObservablePersistRemoteFunctions<unknown> = {
+        get({ onChange }) {
+            let observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey> | undefined = undefined;
+            let latestOptions = defaultedOptions;
+            let queryKeyFromFn: TQueryKey;
+
+            const origQueryKey = options.queryKey!;
+
+            // If the queryKey is a function, observe it and extract the raw value
+            const isKeyFunction = isFunction(origQueryKey);
+            if (isKeyFunction) {
+                observe(({ num }) => {
+                    queryKeyFromFn = origQueryKey();
+                    if (num > 0) {
+                        updateQueryOptions(latestOptions);
+                    }
+                });
+            }
+
+            const updateQueryOptions = (obj: any) => {
+                // Since legend-state mutates the query options, we need to clone it to make Query
+                // see it as changed
+                const options = Object.assign({}, obj);
+
+                // Use the latest value from the observed queryKey function
+                if (isKeyFunction) {
+                    options.queryKey = queryKeyFromFn;
+                }
+
+                latestOptions = options;
+
+                // Update the Query options
+                if (observer) {
+                    observer.setOptions(options, { listeners: false });
+                }
+            };
+            updateQueryOptions(defaultedOptions);
+
+            // Create the observer
+            observer = new Observer!<TQueryFnData, TError, TData, TQueryData, TQueryKey>(queryClient!, latestOptions);
+
+            // Get the initial optimistic results if it's already cached
+            const result = observer!.getOptimisticResult(latestOptions);
+            // Subscribe to Query's observer and update the observable
+            observer!.subscribe((result) => {
+                onChange({ value: result.data });
+            });
+
+            // Return the initial data
+            if (result) {
+                return result.data;
+            }
+        },
+    };
+
+    if (mutationOptions) {
+        const mutator = new MutationObserver(queryClient!, mutationOptions);
+        // When the observable changes call the mutator function
+        ret.set = async ({ value }: ObservablePersistRemoteSetParams<any>) => {
+            mutator.mutate(value);
+        };
+    }
+
+    return ret as any;
+}

package/src/proxy.ts

@@ -0,0 +1,28 @@
+import { linked } from './linked';
+import { observable } from './observable';
+import { Observable, ObservableParam } from './observableTypes';
+
+// Deprecated. Remove in v4
+
+export function proxy<T, T2 = T>(
+    get: (key: string) => T,
+    set: (key: string, value: T2) => void,
+): Observable<Record<string, T>>;
+export function proxy<T extends Record<string, any>>(
+    get: <K extends keyof T>(key: K) => ObservableParam<T[K]>,
+): Observable<T>;
+export function proxy<T>(get: (key: string) => ObservableParam<T>): Observable<Record<string, T>>;
+export function proxy<T>(get: (key: string) => T): Observable<Record<string, T>>;
+export function proxy<T extends Record<string, any>, T2 = T>(
+    get: (key: any) => ObservableParam<any>,
+    set?: (key: any, value: T2) => void,
+): any {
+    return observable((key: string) =>
+        set
+            ? linked({
+                  get: () => get(key),
+                  set: ({ value }) => set(key, value as any),
+              })
+            : get(key),
+    );
+}

package/src/react/Computed.tsx

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from 'react';
+import type { ObservableParam } from '../observableTypes';
+import { useSelector } from './useSelector';
+
+export function Computed({ children }: { children: ObservableParam | (() => ReactNode) }): ReactElement {
+    return useSelector(children, { skipCheck: true }) as ReactElement;
+}

package/src/react/For.tsx

@@ -0,0 +1,116 @@
+import type { Observable, ObservableObject, ObservableParam } from '@legendapp/state';
+import { internal, isArray, isFunction, isMap } from '@legendapp/state';
+import { FC, ReactElement, createElement, memo, useMemo, useRef } from 'react';
+import { observer } from './reactive-observer';
+import { useSelector } from './useSelector';
+const { findIDKey, getNode, optimized } = internal;
+
+const autoMemoCache = new Map<FC<any>, FC<any>>();
+
+type ForItemProps<T, TProps = {}> = {
+    item$: Observable<T>;
+    id?: string;
+} & TProps;
+
+export function For<T, TProps>({
+    each,
+    optimized: isOptimized,
+    item,
+    itemProps,
+    sortValues,
+    children,
+}: {
+    each?: ObservableParam<T[] | Record<any, T> | Map<any, T>>;
+    optimized?: boolean;
+    item?: FC<ForItemProps<T, TProps>>;
+    itemProps?: TProps;
+    sortValues?: (A: T, B: T, AKey: string, BKey: string) => number;
+    children?: (value: Observable<T>, id: string | undefined) => ReactElement;
+}): ReactElement | null {
+    if (!each) return null;
+
+    // Get the raw value with a shallow listener so this list only re-renders
+    // when the array length changes
+    const value = useSelector(() => each!.get(isOptimized ? optimized : true));
+
+    // The child function gets wrapped in a memoized observer component
+    if (!item && children) {
+        // Update the ref so the generated component uses the latest function
+        const refChildren = useRef<(value: Observable<T>, id: string | undefined) => ReactElement>();
+        refChildren.current = children;
+
+        item = useMemo(() => observer(({ item$, id }) => refChildren.current!(item$, id)), []);
+    } else {
+        // @ts-expect-error $$typeof is private
+        if (item.$$typeof !== Symbol.for('react.memo')) {
+            let memod = autoMemoCache.get(item!);
+            if (!memod) {
+                memod = memo(item!);
+                autoMemoCache.set(item!, memod);
+            }
+            item = memod;
+        }
+    }
+
+    // This early out needs to be after any hooks
+    if (!value) return null;
+
+    // Create the child elements
+    const out: ReactElement[] = [];
+
+    const isArr = isArray(value);
+
+    if (isArr) {
+        // Get the appropriate id field
+        const v0 = value[0] as any;
+        const node = getNode(each!);
+        const length = (value as any[]).length;
+
+        const idField =
+            length > 0
+                ? (node && findIDKey(v0, node)) ||
+                  (v0.id !== undefined ? 'id' : v0.key !== undefined ? 'key' : undefined)
+                : undefined;
+
+        const isIdFieldFunction = isFunction(idField);
+
+        for (let i = 0; i < length; i++) {
+            if (value[i]) {
+                const val = value[i];
+                const key = (isIdFieldFunction ? idField(val) : (val as Record<string, any>)[idField as string]) ?? i;
+                const item$ = (each as Observable<any[]>)[i];
+                // TODOV3 Remove item
+                const props: ForItemProps<any> & { key: string; item: Observable<any> } = {
+                    key,
+                    id: key,
+                    item$,
+                    item: item$,
+                };
+
+                out.push(createElement(item as FC, itemProps ? Object.assign(props, itemProps) : props));
+            }
+        }
+    } else {
+        // Render the values of the object / Map
+        const asMap = isMap(value);
+        const keys = asMap ? Array.from(value.keys()) : Object.keys(value);
+        if (sortValues) {
+            keys.sort((A, B) => sortValues(asMap ? value.get(A)! : value[A], asMap ? value.get(B)! : value[B], A, B));
+        }
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (asMap ? value.get(key) : value[key]) {
+                const item$ = asMap ? each!.get(key) : (each as ObservableObject<Record<string, any>>)[key];
+                const props: ForItemProps<any> & { key: string; item: Observable<any> } = {
+                    key,
+                    id: key,
+                    item$,
+                    item: item$,
+                };
+                out.push(createElement(item as FC, itemProps ? Object.assign(props, itemProps) : props));
+            }
+        }
+    }
+
+    return out as unknown as ReactElement;
+}

package/src/react/Memo.tsx

@@ -0,0 +1,4 @@
+import { memo } from 'react';
+import { Computed } from './Computed';
+
+export const Memo = memo(Computed, () => true);

package/src/react/Reactive.tsx

@@ -0,0 +1,53 @@
+import { isEmpty, isFunction } from '@legendapp/state';
+import { ComponentClass, FC, createElement, forwardRef } from 'react';
+import { BindKeys } from './reactInterfaces';
+import { reactive } from './reactive-observer';
+
+const ReactiveFns = new Map<string, FC | ComponentClass>();
+const ReactiveFnBinders = new Map<string, BindKeys>();
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IReactive {}
+
+export const Reactive: IReactive = new Proxy(
+    {},
+    {
+        get(target: Record<string, FC>, p: string) {
+            if (!target[p]) {
+                const Component = ReactiveFns.get(p) || p;
+
+                // Create a wrapper around createElement with the string so we can proxy it
+                // eslint-disable-next-line react/display-name
+                const render = forwardRef((props, ref) => {
+                    const propsOut = { ...props } as any;
+                    if (ref && (isFunction(ref) || !isEmpty(ref))) {
+                        propsOut.ref = ref;
+                    }
+                    return createElement(Component, propsOut);
+                });
+
+                target[p] = reactive(render, ReactiveFnBinders.get(p));
+            }
+            return target[p];
+        },
+    },
+) as unknown as IReactive;
+
+export function configureReactive({
+    components,
+    binders,
+}: {
+    components?: Record<string, FC | ComponentClass<any>>;
+    binders?: Record<string, BindKeys>;
+}) {
+    if (components) {
+        for (const key in components) {
+            ReactiveFns.set(key, components[key]);
+        }
+    }
+    if (binders) {
+        for (const key in binders) {
+            ReactiveFnBinders.set(key, binders[key]);
+        }
+    }
+}

package/src/react/Show.tsx

@@ -0,0 +1,33 @@
+import type { Selector } from '@legendapp/state';
+import { isFunction, isObservableValueReady } from '@legendapp/state';
+import { FC, ReactElement, ReactNode, createElement } from 'react';
+import { useSelector } from './useSelector';
+
+interface PropsIf<T> {
+    if: Selector<T>;
+    ifReady?: never;
+}
+interface PropsIfReady<T> {
+    if?: never;
+    ifReady: Selector<T>;
+}
+
+interface PropsBase<T> {
+    else?: ReactNode | (() => ReactNode);
+    wrap?: FC;
+    children: ReactNode | ((value?: T) => ReactNode);
+}
+
+type Props<T> = PropsBase<T> & (PropsIf<T> | PropsIfReady<T>);
+
+export function Show<T>(props: Props<T>): ReactElement;
+export function Show<T>({ if: if_, ifReady, else: else_, wrap, children }: Props<T>): ReactElement {
+    const value = useSelector(if_ ?? ifReady);
+    const show = ifReady !== undefined ? isObservableValueReady(value) : value;
+    const child = useSelector(
+        show ? (isFunction(children) ? () => children(value) : (children as any)) : else_ ?? null,
+        { skipCheck: true },
+    );
+
+    return wrap ? createElement(wrap, undefined, child) : child;
+}

package/src/react/Switch.tsx

@@ -0,0 +1,43 @@
+import type { Selector } from '@legendapp/state';
+import { ReactElement, ReactNode } from 'react';
+import { useSelector } from './useSelector';
+
+export function Switch<T extends object>({
+    value,
+    children,
+}: {
+    value?: Selector<T>;
+    children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
+}): ReactElement | null;
+export function Switch<T extends string | number | symbol>({
+    value,
+    children,
+}: {
+    value?: Selector<T>;
+    children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
+}): ReactElement | null;
+export function Switch<T extends boolean>({
+    value,
+    children,
+}: {
+    value?: Selector<T>;
+    children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
+}): ReactElement | null;
+export function Switch<T>({
+    value,
+    children,
+}: {
+    value?: Selector<T>;
+    children: Partial<Record<'undefined' | 'default', () => ReactNode>>;
+}): ReactElement | null;
+export function Switch<T>({
+    value,
+    children,
+}: {
+    value?: Selector<T>;
+    children: Partial<Record<any, () => ReactNode>>;
+}): ReactNode {
+    // Select from an object of cases
+    const child = children[useSelector(value)!];
+    return (child ? child() : children['default']?.()) ?? null;
+}

package/src/react/react-globals.ts

@@ -0,0 +1,3 @@
+export const reactGlobals = {
+    inObserver: false,
+};

package/src/react/{reactInterfaces.d.ts → reactInterfaces.ts}

@@ -1,23 +1,31 @@
 import type { FC, LegacyRef, ReactNode } from 'react';
-import type { Observable, Selector } from '../observableInterfaces';
+import type { Observable } from '../observableTypes';
+import type { Selector } from '../observableInterfaces';
+
 export type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
     [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & {
-    children?: Selector<ReactNode>;
-};
+} & { children?: Selector<ReactNode> };
+
 export interface BindKey<P> {
     handler?: keyof P;
     getValue?: (e: any) => any;
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
+
 export type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+
 export type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
-export type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
-    ref?: LegacyRef<P> | undefined;
-}>;
+
+export type FCReactive<P, P2> = P &
+    FC<
+        ShapeWithNew$<P2> & {
+            ref?: LegacyRef<P> | undefined;
+        }
+    >;
+
 export interface UseSelectorOptions {
     suspense?: boolean;
     skipCheck?: boolean;

package/src/react/reactive-observer.tsx

@@ -0,0 +1,210 @@
+import { isFunction, isObservable, Selector } from '@legendapp/state';
+import { ChangeEvent, FC, forwardRef, memo, useCallback } from 'react';
+import { reactGlobals } from './react-globals';
+import type { BindKeys } from './reactInterfaces';
+import { useSelector } from './useSelector';
+
+export type ShapeWithPick$<T, T2 extends keyof T = keyof T> = Partial<T> & {
+    [K in T2 as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+};
+export type ShapeWith$<T> = Partial<T> & {
+    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+};
+export type ObjectShapeWith$<T> = {
+    [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
+};
+export type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
+
+// Extracting the forwardRef inspired by https://github.com/mobxjs/mobx/blob/main/packages/mobx-react-lite/src/observer.ts
+export const hasSymbol = /* @__PURE__ */ typeof Symbol === 'function' && Symbol.for;
+
+let didWarnProps = false;
+
+// TODOV2: Change bindKeys to an options object, where one of the options is "convertChildren" so that behavior can be optional
+function createReactiveComponent<P = object>(
+    component: FC<P>,
+    observe: boolean,
+    reactive?: boolean,
+    bindKeys?: BindKeys<P>,
+) {
+    const ReactForwardRefSymbol = hasSymbol
+        ? Symbol.for('react.forward_ref')
+        : // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
+          typeof forwardRef === 'function' && forwardRef((props: any) => null)['$$typeof'];
+
+    const ReactMemoSymbol = hasSymbol
+        ? Symbol.for('react.memo')
+        : // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
+          typeof forwardRef === 'function' && memo((props) => null)['$$typeof'];
+
+    // If this component is already reactive bail out early
+    // This can happen with Fast Refresh.
+    if ((component as any)['__legend_proxied']) return component;
+
+    let useForwardRef = false;
+    let useMemo = false;
+    let render = component;
+
+    // Unwrap memo on the component
+    if (ReactMemoSymbol && (render as any)['$$typeof'] === ReactMemoSymbol && (render as any)['type']) {
+        useMemo = true;
+        render = (render as any)['type'];
+    }
+    // Unwrap forwardRef on the component
+    if (ReactForwardRefSymbol && (render as any)['$$typeof'] === ReactForwardRefSymbol) {
+        useForwardRef = true;
+        render = (render as any)['render'];
+        if (process.env.NODE_ENV === 'development' && typeof render !== 'function') {
+            throw new Error(`[legend-state] \`render\` property of ForwardRef was not a function`);
+        }
+    }
+
+    const proxyHandler: ProxyHandler<any> = {
+        apply(target, thisArg, argArray) {
+            // If this is a reactive component, convert all props ending in $
+            // to regular props and set up a useSelector listener
+            if (reactive) {
+                const props = argArray[0];
+                const propsOut = {} as Record<string, any>;
+                const keys = Object.keys(props);
+                for (let i = 0; i < keys.length; i++) {
+                    const key = keys[i];
+                    const p = props[key];
+
+                    // Convert children if it's a function
+                    if (key === 'children' && (isFunction(p) || isObservable(p))) {
+                        props[key] = useSelector(p, { skipCheck: true });
+                    }
+                    // Convert reactive props
+                    else if (key.startsWith('$') || key.endsWith('$')) {
+                        // TODOV3 Add this warning
+                        // TODOV4 Remove the deprecated endsWith option
+                        if (process.env.NODE_ENV === 'development' && !didWarnProps && key.endsWith('$')) {
+                            didWarnProps = true;
+                            console.warn(
+                                `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
+                                    '$',
+                                    '',
+                                )}. See https://legendapp.com/open-source/state/migrating for more details.`,
+                            );
+                        }
+                        const k = key.endsWith('$') ? key.slice(0, -1) : key.slice(1);
+                        // Return raw value and listen to the selector for changes
+
+                        const bind = bindKeys?.[k as keyof P];
+                        const shouldBind = bind && isObservable(p);
+
+                        propsOut[k] = shouldBind && bind?.selector ? bind.selector(propsOut, p) : useSelector(p);
+
+                        // If this key is one of the bind keys set up a two-way binding
+                        if (shouldBind) {
+                            // Use the bind's defaultValue if value is undefined
+                            if (bind.defaultValue !== undefined && propsOut[k] === undefined) {
+                                propsOut[k] = bind.defaultValue;
+                            }
+
+                            if (bind.handler && bind.getValue) {
+                                // Hook up the change lander
+                                const handlerFn = (e: ChangeEvent) => {
+                                    p.set(bind.getValue!(e));
+                                    props[bind.handler!]?.(e);
+                                };
+
+                                (propsOut[bind.handler as string] as any) =
+                                    // If in development mode, don't memoize the handler. fix fast refresh bug
+                                    process.env.NODE_ENV === 'development'
+                                        ? handlerFn
+                                        : useCallback(handlerFn, [props[bind.handler], bindKeys]);
+                            }
+                        }
+
+                        // Delete the reactive key
+                        delete propsOut[key];
+                    } else if (propsOut[key] === undefined) {
+                        propsOut[key] = p;
+                    }
+                }
+                argArray[0] = propsOut;
+            }
+
+            // If observing wrap the whole render in a useSelector to listen to it
+            if (observe) {
+                return useSelector(
+                    () => {
+                        reactGlobals.inObserver = true;
+                        try {
+                            return Reflect.apply(target, thisArg, argArray);
+                        } finally {
+                            reactGlobals.inObserver = false;
+                        }
+                    },
+                    { skipCheck: true },
+                );
+            } else {
+                return Reflect.apply(target, thisArg, argArray);
+            }
+        },
+    };
+
+    const proxy = new Proxy(render, proxyHandler);
+
+    let ret;
+
+    if (useForwardRef) {
+        ret = forwardRef(proxy);
+        (ret as any)['__legend_proxied'] = true;
+    } else {
+        ret = proxy;
+    }
+
+    return observe || useMemo ? memo(ret) : ret;
+}
+
+export function observer<P extends FC<any>>(component: P): P {
+    return createReactiveComponent(component, true);
+}
+
+export function reactive<T extends FC<any>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
+export function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+export function reactive<T extends FC<any>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWith$<ExtractFCPropsType<T>>> {
+    return createReactiveComponent(component, false, true, bindKeys);
+}
+
+export function reactiveObserver<T extends FC<any>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
+export function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+export function reactiveObserver<T extends FC<any>>(
+    component: T,
+    bindKeys?: BindKeys<ExtractFCPropsType<T>>,
+): T | FC<ShapeWith$<ExtractFCPropsType<T>>> {
+    return createReactiveComponent(component, true, true, bindKeys);
+}
+
+export function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P> {
+    return new Proxy(
+        {},
+        {
+            get(target: Record<string, any>, p: string) {
+                if (!target[p] && components[p]) {
+                    target[p] = createReactiveComponent(components[p], false, true) as FC<ShapeWith$<P>>;
+                }
+
+                return target[p];
+            },
+        },
+    ) as ObjectShapeWith$<P>;
+}