@servicetitan/react-ioc 23.2.2 → 23.3.0

package/dist/provide.d.ts

@@ -4,12 +4,14 @@ export interface WrappedComponent<P> {
     wrappedComponent: ComponentType<P>;
     wrappedInstance: ReactInstance | undefined;
 }
+interface FallbackOptions {
+    loadingFallback?: JSX.Element;
+    errorFallback?: JSX.Element;
+}
 export declare type ProvideDecorator = (stores: {
     singletons?: ProviderConfigEntrySingletons<any>[];
     instances?: ProviderConfigEntryInstances<any>[];
-}, options?: {
-    loadingFallback?: JSX.Element;
-    errorFallback?: JSX.Element;
-}) => <T extends ComponentType>(target: T) => T & WrappedComponent<T>;
+}, options?: JSX.Element | FallbackOptions) => <T extends ComponentType<any>>(target: T) => T & WrappedComponent<T>;
 export declare const provide: ProvideDecorator;
+export {};
 //# sourceMappingURL=provide.d.ts.map

package/dist/provide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provide.d.ts","sourceRoot":"","sources":["../src/provide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAY,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAEnG,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAC/B,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACnC,eAAe,EAAE,aAAa,GAAG,SAAS,CAAC;CAC9C;AAED,oBAAY,gBAAgB,GAAG,CAC3B,MAAM,EAAE;IACJ,UAAU,CAAC,EAAE,6BAA6B,CAAC,GAAG,CAAC,EAAE,CAAC;IAClD,SAAS,CAAC,EAAE,4BAA4B,CAAC,GAAG,CAAC,EAAE,CAAC;CACnD,EACD,OAAO,CAAC,EAAE;IACN,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC/B,KACA,CAAC,CAAC,SAAS,aAAa,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAErE,eAAO,MAAM,OAAO,kBASM,CAAC"}
+{"version":3,"file":"provide.d.ts","sourceRoot":"","sources":["../src/provide.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAY,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAEnG,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAC/B,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACnC,eAAe,EAAE,aAAa,GAAG,SAAS,CAAC;CAC9C;AAED,UAAU,eAAe;IACrB,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC/B;AAED,oBAAY,gBAAgB,GAAG,CAC3B,MAAM,EAAE;IACJ,UAAU,CAAC,EAAE,6BAA6B,CAAC,GAAG,CAAC,EAAE,CAAC;IAClD,SAAS,CAAC,EAAE,4BAA4B,CAAC,GAAG,CAAC,EAAE,CAAC;CACnD,EACD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,eAAe,KACtC,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAE1E,eAAO,MAAM,OAAO,kBAKM,CAAC"}

package/dist/provide.js

@@ -1,4 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from './provider';
-export const provide = ((stores, options) => (Component) => props => (_jsx(Provider, Object.assign({}, stores, { loadingFallback: options === null || options === void 0 ? void 0 : options.loadingFallback, errorFallback: options === null || options === void 0 ? void 0 : options.errorFallback }, { children: _jsx(Component, Object.assign({}, props)) }))));
+export const provide = ((stores, elementOrOptions) => (Component) => props => (_jsx(Provider, Object.assign({}, stores, getOptions(elementOrOptions), { children: _jsx(Component, Object.assign({}, props)) }))));
+function getOptions(arg) {
+    return arg && isOptionsObject(arg) ? arg : { loadingFallback: arg };
+}
+function isOptionsObject(arg) {
+    return (Object.hasOwn(arg, 'loadingFallback') ||
+        Object.hasOwn(arg, 'errorFallback') ||
+        isEmptyObject(arg));
+}
+function isEmptyObject(arg) {
+    return typeof arg === 'object' && Object.keys(arg).length === 0;
+}
 //# sourceMappingURL=provide.js.map

package/dist/provide.js.map

@@ -1 +1 @@
-{"version":3,"file":"provide.js","sourceRoot":"","sources":["../src/provide.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAA+D,MAAM,YAAY,CAAC;AAkBnG,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,SAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAC/E,CACI,KAAC,QAAQ,oBACD,MAAM,IACV,eAAe,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACzC,aAAa,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,gBAErC,KAAC,SAAS,oBAAK,KAAK,EAAI,IACjB,CACd,CAAqB,CAAC"}
+{"version":3,"file":"provide.js","sourceRoot":"","sources":["../src/provide.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAA+D,MAAM,YAAY,CAAC;AAoBnG,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAC,SAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CACxF,CACI,KAAC,QAAQ,oBAAK,MAAM,EAAM,UAAU,CAAC,gBAAgB,CAAC,cAClD,KAAC,SAAS,oBAAK,KAAK,EAAI,IACjB,CACd,CAAqB,CAAC;AAE3B,SAAS,UAAU,CAAC,GAAmC;IACnD,OAAO,GAAG,IAAI,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC;AACxE,CAAC;AAED,SAAS,eAAe,CAAC,GAAkC;IACvD,OAAO,CACH,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,iBAAiB,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,eAAe,CAAC;QACnC,aAAa,CAAC,GAAG,CAAC,CACrB,CAAC;AACN,CAAC;AAED,SAAS,aAAa,CAAC,GAAkC;IACrD,OAAO,OAAO,GAAG,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;AACpE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/react-ioc",
-    "version": "23.2.2",
+    "version": "23.3.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/react-ioc",
     "repository": {
@@ -20,6 +20,7 @@
     },
     "devDependencies": {
         "@servicetitan/startup-jest": "^1.1.0",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@types/react": "~18.2.55",
         "@types/react-test-renderer": "~18.0.7",
@@ -35,5 +36,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "f63b207ce977be71bdd36cd8571a0d5eb82a2348"
+    "gitHead": "4a3420cf55cf34ff10b5ba6164d940b39f0925e6"
 }

package/src/__tests__/provide.test.tsx

@@ -1,343 +1,97 @@
-import { PropsWithChildren, ReactElement, ReactNode, useEffect } from 'react';
-import { provide, inject, injectable, useDependencies, Store, symbolToken, Provider } from '..';
-import TestRenderer from 'react-test-renderer';
-import { waitFor } from '@testing-library/react';
-
-@injectable()
-class StatStore {
-    readonly id = 'stat';
-    counters: Record<string, number> = {};
-    queueCreate: string[] = [];
-    queueRender: string[] = [];
-
-    testInitialize: (id: string) => void = jest.fn();
-    testRender = (id: string) => {
-        this.queueRender.push(id);
+import '@testing-library/jest-dom';
+import { FC, Fragment, PropsWithChildren } from 'react';
+
+import { provide } from '../provide';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('../provider', () => ({
+    Provider: ({ children, ...props }: PropsWithChildren<any>) => {
+        return (
+            <Fragment>
+                {`<Provider ${JSON.stringify(props)} />`}
+                {children}
+            </Fragment>
+        );
+    },
+}));
+
+describe('[react-ioc] provide', () => {
+    let stores: Parameters<typeof provide>[0];
+    let options: Parameters<typeof provide>[1];
+    let props: Record<string, any> | undefined;
+
+    const subject = () => {
+        const Component = provide(
+            stores,
+            options
+        )(renderProps => <div>{`<Component ${JSON.stringify(renderProps)} />`}</div>);
+
+        return render(<Component {...props} />);
     };
 
-    register(name: string) {
-        if (!this.counters[name]) {
-            this.counters[name] = 0;
-        }
-
-        this.counters[name]++;
-
-        const id = `${name}-${this.counters[name]}`;
-        this.queueCreate.push(id);
-
-        return id;
-    }
-}
-
-@injectable()
-class StoreSimple {
-    readonly id;
-
-    constructor(@inject(StatStore) stat: StatStore) {
-        this.id = stat.register('StoreSimple');
-    }
-}
-
-@injectable()
-class StoreWithInitialize extends Store {
-    readonly id;
-
-    constructor(@inject(StatStore) private stat: StatStore) {
-        super();
-        this.id = stat.register('StoreWithInitialize');
-    }
-
-    initialize() {
-        this.stat.testInitialize(this.id);
-    }
-}
-
-type TestStore = typeof StoreSimple | typeof StoreWithInitialize | ReturnType<typeof symbolToken>;
-
-const getTestComponent = (inst: TestStore) => {
-    return ({ children }: PropsWithChildren<{}>) => {
-        const [{ id }, { testRender }] = useDependencies<[any, StatStore]>(inst, StatStore);
-        useEffect(() => {
-            testRender(id);
-        }, [testRender, id]);
-        return <div>{children}</div>;
-    };
-};
+    beforeEach(() => {
+        stores = { singletons: [], instances: [] };
+        options = undefined;
+        props = { foo: 'bar' };
+    });
 
-type ProviderStoreProps = Parameters<typeof provide>[0];
+    test('renders component with props', () => {
+        subject();
 
-function TestProvider(props: PropsWithChildren<ProviderStoreProps & { store: TestStore }>) {
-    const { singletons, instances, children, store = StoreSimple } = props;
-    const Component = provide({ singletons, instances })(getTestComponent(store));
-    return <Component>{children}</Component>;
-}
+        expect(screen.getByText(`<Component ${JSON.stringify(props)} />`)).toBeInTheDocument();
+    });
 
-describe(`[react-ioc] ${provide.name}`, () => {
-    let stat!: StatStore;
+    test('wraps component within <Provider>', () => {
+        subject();
 
-    const Stat = provide({ singletons: [StatStore] })(({ children }: PropsWithChildren<{}>) => {
-        const [statStore] = useDependencies(StatStore);
-        stat = statStore;
-        return <div>{children}</div>;
+        expect(screen.getByText(`<Provider ${JSON.stringify(stores)} />`)).toBeInTheDocument();
     });
 
-    const subject = (children: ReactNode) => TestRenderer.create(<Stat>{children}</Stat>);
+    describe('with fallback options', () => {
+        const LoadingFallback: FC = () => null;
+        const ErrorFallback: FC = () => null;
 
-    const expectQueueRenderToBe = (queueRender: string[]) =>
-        TestRenderer.act(async () => {
-            await waitFor(() => {
-                expect(stat.queueRender).toEqual(queueRender);
-            });
+        beforeEach(() => {
+            options = { loadingFallback: <LoadingFallback />, errorFallback: <ErrorFallback /> };
         });
 
-    describe('check nested stores', () => {
-        describe('singletons', () => {
-            test('should reuse singletons for each container.get', async () => {
-                subject(
-                    <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
-                        <TestProvider store={StoreSimple} />
-                    </TestProvider>
-                );
-
-                expect(stat.queueCreate).toEqual(['StoreSimple-1']);
+        test('passes fallback options to <Provider>', () => {
+            subject();
 
-                await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-1']);
-            });
-
-            test('should create separate singletons for nested tokens', async () => {
-                subject(
-                    <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
-                        <TestProvider store={StoreSimple} singletons={[StoreSimple]} />
-                    </TestProvider>
-                );
-
-                expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
-
-                await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
-            });
-
-            test('should reuse singleton when using provide inheritance and instance exists', async () => {
-                subject(
-                    <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
-                        <TestProvider
-                            store={StoreSimple}
-                            singletons={[{ provide: StoreSimple, inherit: true }]}
-                        />
-                    </TestProvider>
-                );
-
-                expect(stat.queueCreate).toEqual(['StoreSimple-1']);
-
-                await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-1']);
-            });
-
-            test('should create singletons when using provide inheritance and instance not exists', () => {
-                subject(
-                    <TestProvider
-                        store={StoreSimple}
-                        singletons={[{ provide: StoreSimple, inherit: true }]}
-                    >
-                        <TestProvider store={StoreSimple} singletons={[StoreSimple]} />
-                    </TestProvider>
-                );
-
-                expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
-            });
+            expect(
+                screen.getByText(`<Provider ${JSON.stringify({ ...stores, ...options })} />`)
+            ).toBeInTheDocument();
         });
 
-        describe('instances', () => {
-            test('should create separate instances for each container.get', async () => {
-                subject(
-                    <TestProvider store={StoreSimple} instances={[StoreSimple]}>
-                        <TestProvider store={StoreSimple} />
-                    </TestProvider>
-                );
-
-                expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
+        describe('with empty fallback options', () => {
+            beforeEach(() => (options = {}));
 
-                await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
-            });
-
-            test('should create separate instances for nested tokens', async () => {
-                subject(
-                    <TestProvider store={StoreSimple} instances={[StoreSimple]}>
-                        <TestProvider store={StoreSimple} instances={[StoreSimple]} />
-                    </TestProvider>
-                );
+            test('does not pass options to <Provider>', () => {
+                subject();
 
-                expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
-
-                await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
-            });
-        });
-
-        describe('useValue', () => {
-            const valueToken = symbolToken('valueToken');
-
-            test('create new values', async () => {
-                subject(
-                    <TestProvider
-                        store={valueToken}
-                        singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
-                    >
-                        <TestProvider
-                            store={valueToken}
-                            singletons={[{ provide: valueToken, useValue: { id: 'value2' } }]}
-                        />
-                    </TestProvider>
-                );
-
-                await expectQueueRenderToBe(['value1', 'value2']);
-            });
-
-            test('reuse nested values', async () => {
-                subject(
-                    <TestProvider
-                        store={valueToken}
-                        singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
-                    >
-                        <TestProvider
-                            store={valueToken}
-                            singletons={[
-                                { provide: valueToken, useValue: { id: 'value2' }, inherit: true },
-                            ]}
-                        />
-                    </TestProvider>
-                );
-
-                await expectQueueRenderToBe(['value1', 'value1']);
-            });
-
-            test('no reuse nested values for instances', async () => {
-                subject(
-                    <TestProvider
-                        store={valueToken}
-                        singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
-                    >
-                        <TestProvider
-                            store={valueToken}
-                            instances={[
-                                {
-                                    provide: valueToken,
-                                    useValue: { id: 'value2' },
-                                    inherit: true,
-                                } as any,
-                            ]}
-                        />
-                    </TestProvider>
-                );
-
-                await expectQueueRenderToBe(['value1', 'value2']);
+                expect(
+                    screen.getByText(`<Provider ${JSON.stringify({ ...stores })} />`)
+                ).toBeInTheDocument();
             });
         });
     });
 
-    describe('check store initialization', () => {
-        test('should wait for store initialization', async () => {
-            subject(
-                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]} />
-            );
-
-            expect(stat.queueRender).toEqual([]);
-
-            await TestRenderer.act(async () => {
-                await waitFor(() => {
-                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
-                });
-            });
-
-            await expectQueueRenderToBe(['StoreWithInitialize-1']);
-        });
-        test('should wait for for nested initialization', async () => {
-            subject(
-                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]}>
-                    <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]} />
-                </TestProvider>
-            );
-
-            await TestRenderer.act(async () => {
-                await waitFor(() => {
-                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
-                });
+    describe('with legacy fallback element', () => {
+        const LoadingFallback: FC = () => null;
 
-                await waitFor(() => {
-                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-2');
-                });
-            });
+        beforeEach(() => (options = <LoadingFallback />));
 
-            expect(stat.queueCreate).toEqual(['StoreWithInitialize-1', 'StoreWithInitialize-2']);
+        test('passes {loadingFallback} option', () => {
+            subject();
 
-            await expectQueueRenderToBe(['StoreWithInitialize-1', 'StoreWithInitialize-2']);
-        });
-        test('should initialize only once when store is reused', async () => {
-            subject(
-                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]}>
-                    <TestProvider
-                        store={StoreWithInitialize}
-                        singletons={[{ provide: StoreWithInitialize, inherit: true }]}
-                    />
-                </TestProvider>
-            );
-
-            await TestRenderer.act(async () => {
-                await waitFor(() => {
-                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
-                });
-            });
-
-            expect(stat.queueCreate).toEqual(['StoreWithInitialize-1']);
-            await expectQueueRenderToBe(['StoreWithInitialize-1', 'StoreWithInitialize-1']);
-            expect(stat.testInitialize).toHaveBeenCalledTimes(1);
-        });
-
-        describe('error initialization', () => {
-            @injectable()
-            class StoreWithErrorInitialize extends Store {
-                initialize() {
-                    throw new Error('error');
-                }
-            }
-            @injectable()
-            class StoreWithAsyncErrorInitialize extends Store {
-                async initialize() {
-                    await new Promise<void>(resolve => resolve());
-                    throw new Error('error');
-                }
-            }
-
-            const subject = async (
-                children: ReactElement
-            ): Promise<ReturnType<typeof TestRenderer.create>> => {
-                let result: ReturnType<typeof TestRenderer.create> | undefined = undefined;
-
-                await TestRenderer.act(async () => {
-                    // we need this function to be async because of TestRenderer warnings
-                    await new Promise<void>(resolve => resolve());
-                    result = TestRenderer.create(children);
-                });
-
-                if (!result) {
-                    throw new Error();
-                }
-
-                return result;
-            };
-
-            test('async error initialization should show error', async () => {
-                const { root } = await subject(
-                    <Provider singletons={[StoreWithAsyncErrorInitialize]}>hello</Provider>
-                );
-
-                expect(root.findByType('h2')).toBeTruthy();
-            });
-
-            test('sync error initialization should show error', async () => {
-                const { root } = await subject(
-                    <Provider singletons={[StoreWithErrorInitialize]}>hello</Provider>
-                );
-
-                expect(root.findByType('h2')).toBeTruthy();
-            });
+            expect(
+                screen.getByText(
+                    `<Provider ${JSON.stringify({
+                        ...stores,
+                        loadingFallback: <LoadingFallback />,
+                    })} />`
+                )
+            ).toBeInTheDocument();
         });
     });
 });

package/src/__tests__/provider.test.tsx

@@ -0,0 +1,352 @@
+import { PropsWithChildren, ReactElement, ReactNode, useEffect } from 'react';
+import {
+    inject,
+    injectable,
+    useDependencies,
+    Store,
+    symbolToken,
+    Provider,
+    ProviderProps,
+} from '..';
+import TestRenderer from 'react-test-renderer';
+import { waitFor } from '@testing-library/react';
+
+@injectable()
+class StatStore {
+    readonly id = 'stat';
+    counters: Record<string, number> = {};
+    queueCreate: string[] = [];
+    queueRender: string[] = [];
+
+    testInitialize: (id: string) => void = jest.fn();
+    testRender = (id: string) => {
+        this.queueRender.push(id);
+    };
+
+    register(name: string) {
+        if (!this.counters[name]) {
+            this.counters[name] = 0;
+        }
+
+        this.counters[name]++;
+
+        const id = `${name}-${this.counters[name]}`;
+        this.queueCreate.push(id);
+
+        return id;
+    }
+}
+
+@injectable()
+class StoreSimple {
+    readonly id;
+
+    constructor(@inject(StatStore) stat: StatStore) {
+        this.id = stat.register('StoreSimple');
+    }
+}
+
+@injectable()
+class StoreWithInitialize extends Store {
+    readonly id;
+
+    constructor(@inject(StatStore) private stat: StatStore) {
+        super();
+        this.id = stat.register('StoreWithInitialize');
+    }
+
+    initialize() {
+        this.stat.testInitialize(this.id);
+    }
+}
+
+type TestStore = typeof StoreSimple | typeof StoreWithInitialize | ReturnType<typeof symbolToken>;
+
+const getTestComponent = (inst: TestStore) => {
+    return ({ children }: PropsWithChildren<{}>) => {
+        const [{ id }, { testRender }] = useDependencies<[any, StatStore]>(inst, StatStore);
+        useEffect(() => {
+            testRender(id);
+        }, [testRender, id]);
+        return <div>{children}</div>;
+    };
+};
+
+function TestProvider(props: PropsWithChildren<ProviderProps & { store: TestStore }>) {
+    const { singletons, instances, children, store = StoreSimple } = props;
+    const Component = getTestComponent(store);
+    return (
+        <Provider singletons={singletons} instances={instances}>
+            <Component>{children}</Component>
+        </Provider>
+    );
+}
+
+describe('[react-ioc] Provider', () => {
+    let stat: StatStore;
+
+    beforeEach(() => (stat = new StatStore()));
+
+    const subject = (children: ReactNode) =>
+        TestRenderer.create(
+            <Provider singletons={[{ provide: StatStore, useValue: stat }]}>{children}</Provider>
+        );
+
+    const expectQueueRenderToBe = (queueRender: string[]) =>
+        TestRenderer.act(async () => {
+            await waitFor(() => {
+                expect(stat.queueRender).toEqual(queueRender);
+            });
+        });
+
+    describe('with singletons', () => {
+        test('reuses singletons for each container.get', async () => {
+            subject(
+                <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
+                    <TestProvider store={StoreSimple} />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1']);
+
+            await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-1']);
+        });
+
+        test('creates separate singletons for nested tokens', async () => {
+            subject(
+                <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
+                    <TestProvider store={StoreSimple} singletons={[StoreSimple]} />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
+
+            await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
+        });
+
+        test('reuses inheritable singleton', async () => {
+            subject(
+                <TestProvider store={StoreSimple} singletons={[StoreSimple]}>
+                    <TestProvider
+                        store={StoreSimple}
+                        singletons={[{ provide: StoreSimple, inherit: true }]}
+                    />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1']);
+
+            await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-1']);
+        });
+
+        test('creates singletons when inheritable singleton does not exist', () => {
+            subject(
+                <TestProvider
+                    store={StoreSimple}
+                    singletons={[{ provide: StoreSimple, inherit: true }]}
+                >
+                    <TestProvider store={StoreSimple} singletons={[StoreSimple]} />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
+        });
+    });
+
+    describe('with instances', () => {
+        test('creates separate instances for each container.get', async () => {
+            subject(
+                <TestProvider store={StoreSimple} instances={[StoreSimple]}>
+                    <TestProvider store={StoreSimple} />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
+
+            await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
+        });
+
+        test('creates separate instances for nested tokens', async () => {
+            subject(
+                <TestProvider store={StoreSimple} instances={[StoreSimple]}>
+                    <TestProvider store={StoreSimple} instances={[StoreSimple]} />
+                </TestProvider>
+            );
+
+            expect(stat.queueCreate).toEqual(['StoreSimple-1', 'StoreSimple-2']);
+
+            await expectQueueRenderToBe(['StoreSimple-1', 'StoreSimple-2']);
+        });
+    });
+
+    describe('useValue', () => {
+        const valueToken = symbolToken('valueToken');
+
+        test('creates new values', async () => {
+            subject(
+                <TestProvider
+                    store={valueToken}
+                    singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
+                >
+                    <TestProvider
+                        store={valueToken}
+                        singletons={[{ provide: valueToken, useValue: { id: 'value2' } }]}
+                    />
+                </TestProvider>
+            );
+
+            await expectQueueRenderToBe(['value1', 'value2']);
+        });
+
+        test('reuses nested values', async () => {
+            subject(
+                <TestProvider
+                    store={valueToken}
+                    singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
+                >
+                    <TestProvider
+                        store={valueToken}
+                        singletons={[
+                            { provide: valueToken, useValue: { id: 'value2' }, inherit: true },
+                        ]}
+                    />
+                </TestProvider>
+            );
+
+            await expectQueueRenderToBe(['value1', 'value1']);
+        });
+
+        test('does not reuse nested values for instances', async () => {
+            subject(
+                <TestProvider
+                    store={valueToken}
+                    singletons={[{ provide: valueToken, useValue: { id: 'value1' } }]}
+                >
+                    <TestProvider
+                        store={valueToken}
+                        instances={[
+                            {
+                                provide: valueToken,
+                                useValue: { id: 'value2' },
+                                inherit: true,
+                            } as any,
+                        ]}
+                    />
+                </TestProvider>
+            );
+
+            await expectQueueRenderToBe(['value1', 'value2']);
+        });
+    });
+
+    describe('check store initialization', () => {
+        test('waits for store initialization', async () => {
+            subject(
+                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]} />
+            );
+
+            expect(stat.queueRender).toEqual([]);
+
+            await TestRenderer.act(async () => {
+                await waitFor(() => {
+                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
+                });
+            });
+
+            await expectQueueRenderToBe(['StoreWithInitialize-1']);
+        });
+
+        test('waits for nested initialization', async () => {
+            subject(
+                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]}>
+                    <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]} />
+                </TestProvider>
+            );
+
+            await TestRenderer.act(async () => {
+                await waitFor(() => {
+                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
+                });
+
+                await waitFor(() => {
+                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-2');
+                });
+            });
+
+            expect(stat.queueCreate).toEqual(['StoreWithInitialize-1', 'StoreWithInitialize-2']);
+
+            await expectQueueRenderToBe(['StoreWithInitialize-1', 'StoreWithInitialize-2']);
+        });
+
+        test('initializes only once when store is reused', async () => {
+            subject(
+                <TestProvider store={StoreWithInitialize} singletons={[StoreWithInitialize]}>
+                    <TestProvider
+                        store={StoreWithInitialize}
+                        singletons={[{ provide: StoreWithInitialize, inherit: true }]}
+                    />
+                </TestProvider>
+            );
+
+            await TestRenderer.act(async () => {
+                await waitFor(() => {
+                    expect(stat.testInitialize).toHaveBeenCalledWith('StoreWithInitialize-1');
+                });
+            });
+
+            expect(stat.queueCreate).toEqual(['StoreWithInitialize-1']);
+            await expectQueueRenderToBe(['StoreWithInitialize-1', 'StoreWithInitialize-1']);
+            expect(stat.testInitialize).toHaveBeenCalledTimes(1);
+        });
+
+        describe('error initialization', () => {
+            @injectable()
+            class StoreWithErrorInitialize extends Store {
+                initialize() {
+                    throw new Error('error');
+                }
+            }
+            @injectable()
+            class StoreWithAsyncErrorInitialize extends Store {
+                async initialize() {
+                    await new Promise<void>(resolve => resolve());
+                    throw new Error('error');
+                }
+            }
+
+            const subject = async (
+                children: ReactElement
+            ): Promise<ReturnType<typeof TestRenderer.create>> => {
+                let result: ReturnType<typeof TestRenderer.create> | undefined = undefined;
+
+                await TestRenderer.act(async () => {
+                    // we need this function to be async because of TestRenderer warnings
+                    await new Promise<void>(resolve => resolve());
+                    result = TestRenderer.create(children);
+                });
+
+                if (!result) {
+                    throw new Error();
+                }
+
+                return result;
+            };
+
+            test('async error initialization shows error', async () => {
+                const { root } = await subject(
+                    <Provider singletons={[StoreWithAsyncErrorInitialize]}>hello</Provider>
+                );
+
+                expect(root.findByType('h2')).toBeTruthy();
+            });
+
+            test('sync error initialization shows error', async () => {
+                const { root } = await subject(
+                    <Provider singletons={[StoreWithErrorInitialize]}>hello</Provider>
+                );
+
+                expect(root.findByType('h2')).toBeTruthy();
+            });
+        });
+    });
+});

package/src/provide.tsx

@@ -7,24 +7,38 @@ export interface WrappedComponent<P> {
     wrappedInstance: ReactInstance | undefined;
 }
 
+interface FallbackOptions {
+    loadingFallback?: JSX.Element;
+    errorFallback?: JSX.Element;
+}
+
 export type ProvideDecorator = (
     stores: {
         singletons?: ProviderConfigEntrySingletons<any>[];
         instances?: ProviderConfigEntryInstances<any>[];
     },
-    options?: {
-        loadingFallback?: JSX.Element;
-        errorFallback?: JSX.Element;
-    }
-) => <T extends ComponentType>(target: T) => T & WrappedComponent<T>;
+    options?: JSX.Element | FallbackOptions
+) => <T extends ComponentType<any>>(target: T) => T & WrappedComponent<T>;
 
-export const provide = ((stores, options) => (Component: ComponentType) => props =>
+export const provide = ((stores, elementOrOptions) => (Component: ComponentType) => props =>
     (
-        <Provider
-            {...stores}
-            loadingFallback={options?.loadingFallback}
-            errorFallback={options?.errorFallback}
-        >
+        <Provider {...stores} {...getOptions(elementOrOptions)}>
             <Component {...props} />
         </Provider>
     )) as ProvideDecorator;
+
+function getOptions(arg?: FallbackOptions | JSX.Element): FallbackOptions | undefined {
+    return arg && isOptionsObject(arg) ? arg : { loadingFallback: arg };
+}
+
+function isOptionsObject(arg: FallbackOptions | JSX.Element): arg is FallbackOptions {
+    return (
+        Object.hasOwn(arg, 'loadingFallback') ||
+        Object.hasOwn(arg, 'errorFallback') ||
+        isEmptyObject(arg)
+    );
+}
+
+function isEmptyObject(arg: FallbackOptions | JSX.Element) {
+    return typeof arg === 'object' && Object.keys(arg).length === 0;
+}