@servicetitan/react-ioc 38.0.0 → 38.2.0

package/src/container-config.ts

@@ -0,0 +1,125 @@
+import { Container } from 'inversify';
+import { Token } from './common';
+import {
+    formatToken,
+    getProvideTokenWithClass,
+    isClassProviderConfigEntryToken,
+    isClassProviderConfigEntryUseClass,
+    isProviderConfigEntryInheritable,
+    isValueProviderConfigEntry,
+    ProviderConfigEntries,
+    ProviderConfigEntry,
+} from './entry-helpers';
+import { isStore, Store } from './store';
+
+export function getStoreInstances(
+    container: Container,
+    { singletons = [], instances = [] }: ProviderConfigEntries
+): Store[] {
+    return [...singletons, ...instances].reduce((out, entry) => {
+        const [provide, useClass] = getProvideTokenWithClass(entry);
+
+        if (provide && useClass && container.isCurrentBound(provide) && isStore(useClass)) {
+            out.push(container.get(provide));
+        }
+
+        return out;
+    }, [] as Store[]);
+}
+
+const bindEntry =
+    (container: Container, checkInherit: boolean) => (entry: ProviderConfigEntry<any>) => {
+        if (
+            checkInherit &&
+            isProviderConfigEntryInheritable(entry) &&
+            entry.inherit &&
+            container.isBound(entry.provide)
+        ) {
+            return undefined;
+        }
+
+        if (isClassProviderConfigEntryUseClass(entry)) {
+            return container.bind(entry.provide).to(entry.useClass);
+        }
+
+        if (isClassProviderConfigEntryToken(entry)) {
+            return container.bind(entry.provide).to(entry.provide);
+        }
+
+        if (isValueProviderConfigEntry(entry)) {
+            // using toDynamicValue to return BindingInSyntax
+            return container.bind(entry.provide).toDynamicValue(() => entry.useValue);
+        }
+
+        return container.bind(entry).to(entry);
+    };
+
+const unbindEntry = (container: Container) => (entry: ProviderConfigEntry<any>) => {
+    if (isProviderConfigEntryInheritable(entry) && !container.isCurrentBound(entry.provide)) {
+        return;
+    }
+    if (
+        isClassProviderConfigEntryUseClass(entry) ||
+        isValueProviderConfigEntry(entry) ||
+        isClassProviderConfigEntryToken(entry)
+    ) {
+        return container.unbind(entry.provide);
+    }
+
+    return container.unbind(entry);
+};
+
+export function bindEntries(
+    container: Container,
+    { singletons = [], instances = [] }: ProviderConfigEntries
+) {
+    singletons.map(bindEntry(container, true)).forEach(binding => {
+        binding?.inSingletonScope();
+    });
+    instances.forEach(bindEntry(container, false));
+}
+
+export function unbindEntries(
+    container: Container,
+    { singletons = [], instances = [] }: ProviderConfigEntries
+) {
+    [...singletons, ...instances].forEach(unbindEntry(container));
+}
+
+export function initializeStores(stores: Store[], onError: (error: any) => void) {
+    const promises: Promise<void>[] = [];
+
+    for (const instance of stores) {
+        let promise;
+
+        try {
+            promise = instance.initialize?.();
+        } catch (e: any) {
+            onError(e);
+        }
+
+        if (promise && typeof promise.catch === 'function') {
+            promises.push(promise.catch(onError));
+        }
+    }
+
+    return promises;
+}
+
+export function disposeStores(stores: Store[]) {
+    for (const instance of stores) {
+        instance.dispose?.();
+    }
+}
+
+export function formatDuplicatesMessage(source: string, duplicates: Token<any>[]): string {
+    const names = duplicates.map(formatToken).join(', ');
+    return `${source}: token listed more than once: ${names}. Remove the duplicate entries.`;
+}
+
+// Rethrow asynchronously so the error reaches the global error handler
+export function rethrowAsync(e: any) {
+    setTimeout(() => {
+        throw e;
+    });
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { Provider } from './provider';
 export type { ProviderProps } from './provider';
 export { Store } from './store';
 export { useDependencies, useOptionalDependencies } from './use-dependencies';
+export { useLocalStores } from './use-local-stores';
 
 export { Container, inject, injectable, optional, unmanaged } from 'inversify';
 export type { interfaces } from 'inversify';

package/src/provider.tsx

@@ -1,125 +1,19 @@
 import { Container } from 'inversify';
 import { FC, PropsWithChildren, ReactNode, useContext, useEffect, useState } from 'react';
 import { Await } from './await';
-import { ContainerContext, Token } from './common';
-import { dedupeEntries } from './dedupe-entries';
+import { ContainerContext } from './common';
 import {
-    formatToken,
-    getProvideTokenWithClass,
-    isClassProviderConfigEntryToken,
-    isClassProviderConfigEntryUseClass,
-    isProviderConfigEntryInheritable,
-    isValueProviderConfigEntry,
-    ProviderConfigEntries,
-    ProviderConfigEntry,
-} from './entry-helpers';
+    bindEntries,
+    disposeStores,
+    formatDuplicatesMessage,
+    getStoreInstances,
+    initializeStores,
+    rethrowAsync,
+    unbindEntries,
+} from './container-config';
+import { dedupeEntries } from './dedupe-entries';
+import { ProviderConfigEntries } from './entry-helpers';
 import { defaultErrorFallback, defaultLoadingFallback } from './fallbacks';
-import { isStore, Store } from './store';
-
-function getStoreInstances(
-    container: Container,
-    { singletons = [], instances = [] }: ProviderConfigEntries
-): Store[] {
-    return [...singletons, ...instances].reduce((out, entry) => {
-        const [provide, useClass] = getProvideTokenWithClass(entry);
-
-        if (provide && useClass && container.isCurrentBound(provide) && isStore(useClass)) {
-            out.push(container.get(provide));
-        }
-
-        return out;
-    }, [] as Store[]);
-}
-
-const bindEntry =
-    (container: Container, checkInherit: boolean) => (entry: ProviderConfigEntry<any>) => {
-        if (
-            checkInherit &&
-            isProviderConfigEntryInheritable(entry) &&
-            entry.inherit &&
-            container.isBound(entry.provide)
-        ) {
-            return undefined;
-        }
-
-        if (isClassProviderConfigEntryUseClass(entry)) {
-            return container.bind(entry.provide).to(entry.useClass);
-        }
-
-        if (isClassProviderConfigEntryToken(entry)) {
-            return container.bind(entry.provide).to(entry.provide);
-        }
-
-        if (isValueProviderConfigEntry(entry)) {
-            // using toDynamicValue to return BindingInSyntax
-            return container.bind(entry.provide).toDynamicValue(() => entry.useValue);
-        }
-
-        return container.bind(entry).to(entry);
-    };
-
-const unbindEntry = (container: Container) => (entry: ProviderConfigEntry<any>) => {
-    if (isProviderConfigEntryInheritable(entry) && !container.isCurrentBound(entry.provide)) {
-        return;
-    }
-    if (
-        isClassProviderConfigEntryUseClass(entry) ||
-        isValueProviderConfigEntry(entry) ||
-        isClassProviderConfigEntryToken(entry)
-    ) {
-        return container.unbind(entry.provide);
-    }
-
-    return container.unbind(entry);
-};
-
-function bindEntries(
-    container: Container,
-    { singletons = [], instances = [] }: ProviderConfigEntries
-) {
-    singletons.map(bindEntry(container, true)).forEach(binding => {
-        binding?.inSingletonScope();
-    });
-    instances.forEach(bindEntry(container, false));
-}
-
-function unbindEntries(
-    container: Container,
-    { singletons = [], instances = [] }: ProviderConfigEntries
-) {
-    [...singletons, ...instances].forEach(unbindEntry(container));
-}
-
-function initializeStores(stores: Store[], onError: (error: any) => void) {
-    const promises: Promise<void>[] = [];
-
-    for (const instance of stores) {
-        let promise;
-
-        try {
-            promise = instance.initialize?.();
-        } catch (e: any) {
-            onError(e);
-        }
-
-        if (promise && typeof promise.catch === 'function') {
-            promises.push(promise.catch(onError));
-        }
-    }
-
-    return promises;
-}
-
-function disposeStores(stores: Store[]) {
-    for (const instance of stores) {
-        instance.dispose?.();
-    }
-}
-
-function formatDuplicatesMessage(duplicates: Token<any>[]): string {
-    const names = duplicates.map(formatToken).join(', ');
-    return `Provider: token listed more than once: ${names}. Remove the duplicate entries.`;
-}
 
 export type ProviderProps = PropsWithChildren<
     ProviderConfigEntries & {
@@ -147,16 +41,13 @@ export const Provider: FC<ProviderProps> = ({
 
         const handleError = (e: any) => {
             setError(true);
-            // Rethrow asynchronously for global error handler
-            setTimeout(() => {
-                throw e;
-            });
+            rethrowAsync(e);
         };
 
         const config = dedupeEntries({ singletons, instances });
 
         if (config.duplicates.length > 0) {
-            const message = formatDuplicatesMessage(config.duplicates);
+            const message = formatDuplicatesMessage('Provider', config.duplicates);
             if (process.env.NODE_ENV !== 'production') {
                 handleError(new Error(message));
                 return () => {

package/src/use-local-stores.ts

@@ -0,0 +1,86 @@
+import { Container, interfaces } from 'inversify';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { ContainerContext } from './common';
+import {
+    bindEntries,
+    disposeStores,
+    formatDuplicatesMessage,
+    getStoreInstances,
+    initializeStores,
+    rethrowAsync,
+} from './container-config';
+import { dedupeEntries } from './dedupe-entries';
+import { Store } from './store';
+
+type Newables<T extends any[]> = {
+    [P in keyof T]: interfaces.Newable<T[P]>;
+};
+
+interface LocalStores<T extends any[]> {
+    instances: T;
+    storeInstances: Store[];
+}
+
+export function useLocalStores<T extends any[]>(...stores: Newables<T>): [T, boolean] {
+    const parentContainer = useContext(ContainerContext);
+    const ref = useRef<LocalStores<T> | null>(null);
+
+    /*
+     * Build the private container once, eagerly, so the instances are available
+     * synchronously on the first render. That is the reason this hook exists.
+     */
+    if (ref.current === null) {
+        const container = new Container();
+        container.parent = parentContainer;
+
+        const config = dedupeEntries({ singletons: stores });
+
+        if (config.duplicates.length > 0) {
+            const message = formatDuplicatesMessage('useLocalStores', config.duplicates);
+            if (process.env.NODE_ENV !== 'production') {
+                throw new Error(message);
+            }
+            // eslint-disable-next-line no-console
+            console.warn(message);
+        }
+
+        bindEntries(container, config);
+
+        const storeInstances = getStoreInstances(container, config);
+
+        ref.current = {
+            instances: stores.map(store => container.get(store)) as T,
+            storeInstances,
+        };
+    }
+
+    const { instances, storeInstances } = ref.current;
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const promises = initializeStores(storeInstances, e => {
+            rethrowAsync(e);
+        });
+
+        if (promises.length === 0) {
+            setIsInitialized(true);
+        } else {
+            Promise.all(promises).then(() => {
+                if (!cancelled) {
+                    setIsInitialized(true);
+                }
+            });
+        }
+
+        return () => {
+            cancelled = true;
+            disposeStores(storeInstances);
+            setIsInitialized(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return [instances, isInitialized];
+}