@blac/react 0.0.3 → 0.0.13-0

package/dist/blac-react.d.ts

@@ -1,7 +1,10 @@
-import { Blac, BlocBase, ValueType, BlocClass } from 'blac';
+import { Blac, BlocBase, BlocClass, ValueType } from 'blac';
 import React, { FC, ReactNode } from 'react';
 
-declare const BlacContext: React.Context<Blac<any, any> | null>;
+declare const BlacApp: FC<{
+    children: ReactNode;
+    blac: Blac<any, any>;
+}>;
 
 /**
  * Keep track of the hierarchy of Blac BlocProvider components, so that
@@ -13,30 +16,74 @@ interface ProviderItem {
     parent?: string;
     bloc: BlocBase<any>;
 }
+interface ProviderOptions<B> {
+    bloc: BlocClass<B> | (() => B);
+    debug?: boolean;
+}
+declare class BlacReact {
+    blac: Blac<any, any>;
+    blacContext: React.Context<Blac<any, any>>;
+    localContextProvider: React.Context<BlocBase<any> | null>;
+    static pluginKey: string;
+    constructor(blac: Blac<any, any>, blacContext: React.Context<Blac<any, any>>);
+    static safeGetInstance(): BlacReact | undefined;
+    static getInstance(throwError?: boolean): BlacReact;
+    setup(): void;
+    /**
+     * React hook to get the bloc instance from the nearest BlocProvider
+     */
+    useLocalBlocContext(): BlocBase<any> | null;
+    private _contextLocalProviderKey;
+    get LocalProvider(): React.Provider<string>;
+    /**
+     * React hook to get the id from the nearest BlocProvider
+     */
+    useLocalProviderKey(): string;
+    addLocalBloc: (item: ProviderItem) => void;
+    removeLocalBloc: (id: string) => void;
+    createProviderId: () => string;
+    providerList: ProviderItem[];
+    getLocalBlocForProvider<B>(id: string, blocClass: BlocClass<B>): BlocBase<B> | undefined;
+    providerMounted(options: {
+        providerId: string;
+        localProviderKey?: string;
+    } & Parameters<BlacReact['useLocalProvider']>[0]): {
+        instance: BlocBase<any> | undefined;
+        destroyOnUnmount: boolean;
+    };
+    providerUnmounted(providerId: string | undefined): void;
+    readonly useLocalProvider: (options: ProviderOptions<any>) => string | undefined;
+}
 
-declare const BlocProvider: FC<{
+interface BlocProviderProps<B> {
     children?: ReactNode;
-    bloc: (() => BlocBase<any>) | BlocBase<any>;
+    bloc: BlocClass<B> | (() => B) | B;
     debug?: boolean;
-}>;
+}
+declare const BlocProvider: FC<BlocProviderProps<any>>;
 
 interface ExternalStore<B extends BlocBase<any>> {
     subscribe: (onStoreChange: () => void) => () => void;
     getSnapshot: () => ValueType<B>;
     getServerSnapshot?: () => ValueType<B>;
 }
+declare const externalBlocStore: <B extends BlocBase<any>>(bloc: B) => ExternalStore<B>;
 
-type BlocHookData<B extends BlocBase<S>, S> = [
-    value: ValueType<B>,
-    instance: B
-];
-interface BlocHookOptions {
+interface BlocResolveOptions {
     /**
      * Set to true if you want blac to automatically create a new instance of the bloc,
      * for this to work, pass the unconstructed class to the hook. The constructor should not expect any arguments.
      */
     create?: boolean;
 }
-declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocHookOptions) => BlocHookData<B, S>;
 
-export { BlacContext, BlocHookData, BlocHookOptions, BlocProvider, ExternalStore, ProviderItem, useBloc };
+type BlocHookData<B extends BlocBase<S>, S> = [
+    value: ValueType<B>,
+    instance: B,
+    Provider: FC<{
+        children: ReactNode;
+    }>
+];
+declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocResolveOptions) => BlocHookData<B, S>;
+
+export { BlacApp, BlacReact, BlocProvider, ExternalStore, externalBlocStore, useBloc };

package/dist/blac-react.esm.js

@@ -11,6 +11,7 @@ class BlacReact {
     static pluginKey = 'blacReact';
     constructor(blac, blacContext) {
         // treat this as singleton
+        console.log('create', blac);
         const blacReact = blac.getPluginKey(BlacReact.pluginKey);
         // new setup
         this.blac = blac;
@@ -20,7 +21,12 @@ class BlacReact {
             return blacReact;
         }
     }
-    static getInstance() {
+    static safeGetInstance() {
+        const blac = globalThis.blac;
+        const blacReact = blac?.getPluginKey(BlacReact.pluginKey);
+        return blacReact;
+    }
+    static getInstance(throwError = true) {
         const blac = globalThis.blac;
         if (!blac) {
             throw new Error('BlacReact: blac instance not found');
@@ -112,7 +118,7 @@ class BlacReact {
         return { instance, destroyOnUnmount };
     }
     providerUnmounted(providerId) {
-        this.removeLocalBloc;
+        this.removeLocalBloc(providerId);
     }
     useLocalProvider = (options) => {
         const [blocInstance, setBlocInstance] = React.useState(undefined);
@@ -133,7 +139,15 @@ class BlacReact {
     };
 }
 
-const BlacContext = createContext(null);
+const BlacContext = createContext(null);
+const BlacApp = (props) => {
+    const { children, blac } = props;
+    const blacApp = useMemo(() => new BlacReact(blac, BlacContext), [blac]);
+    if (!blacApp) {
+        throw new Error('BlacReact failed to initialize');
+    }
+    return React.createElement(BlacContext.Provider, { value: blac }, children);
+};
 
 const BlocProvider = ({ children, bloc, debug }) => {
     const blacReact = BlacReact.getInstance();
@@ -156,50 +170,86 @@ const externalBlocStore = (bloc) => {
     };
 };
 
-const useBloc = (bloc, options = {}) => {
+const resolveBloc = ({ bloc, blacInstance, localProviderKey, blacReact, create }) => {
+    // check if its a create function or a class
+    const isFunction = bloc instanceof Function;
+    const isBloc = isFunction && bloc?.isBlacClass;
+    const isLiveBloc = !isFunction &&
+        typeof bloc === 'object' &&
+        bloc?.isBlacLive;
+    // if its a create function, call it
+    if (!isBloc && isFunction) {
+        return bloc();
+    }
+    // if its a class
+    if (isFunction && isBloc) {
+        const blocClass = bloc;
+        // check if the bloc is registered in the blac instance
+        if (blacInstance) {
+            const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
+            if (e) {
+                return e;
+            }
+        }
+        // search in global blocs
+        const globalBloc = blacReact.blac.getBloc(blocClass);
+        if (globalBloc) {
+            return globalBloc;
+        }
+        if (isLiveBloc) {
+            return bloc;
+        }
+        console.log(typeof bloc, {
+            isFunction,
+            isBloc,
+            isLiveBloc,
+            bloc,
+            create,
+        });
+        // if it is not, check if we can create a new instance
+        if (!create) {
+            // creating it automatically should be opt-in
+            throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
+        }
+        // create a new instance -- this can cause issues if the constructor expects arguments
+        const constructed = new blocClass();
+        return constructed;
+    }
+};
+const useResolvedBloc = (bloc, options = {}) => {
     const blacReact = BlacReact.getInstance();
     const localProviderKey = blacReact.useLocalProviderKey();
     const blacInstance = useContext(BlacContext);
     const resolvedBloc = useMemo(() => {
-        // check if its a create function or a class
-        const isFunction = bloc instanceof Function;
-        const isBloc = isFunction && bloc?.isBlacClass;
-        // if its a create function, call it
-        if (!isBloc && isFunction) {
-            return bloc();
+        if (!blacReact || !localProviderKey) {
+            return undefined;
         }
-        // if its a class
-        if (isFunction && isBloc) {
-            const blocClass = bloc;
-            // check if the bloc is registered in the blac instance
-            if (blacInstance) {
-                const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
-                if (e) {
-                    return e;
-                }
-            }
-            // search in global blocs
-            const globalBloc = blacReact.blac.getBloc(blocClass);
-            if (globalBloc) {
-                return globalBloc;
-            }
-            // if it is not, check if we can create a new instance
-            if (!options.create) {
-                // creating it automatically should be opt-in
-                throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
-            }
-            // create a new instance -- this can cause issues if the constructor expects arguments
-            const constructed = new blocClass();
-            return constructed;
-        }
-    }, []);
+        return resolveBloc({
+            bloc,
+            blacInstance,
+            blacReact,
+            localProviderKey,
+            create: options.create ?? false
+        });
+    }, [localProviderKey]);
+    console.trace(resolvedBloc, options);
+    return resolvedBloc;
+};
+
+const useBloc = (bloc, options = {}) => {
+    const resolvedBloc = useResolvedBloc(bloc, options);
     if (!resolvedBloc) {
         throw new Error('useBloc: bloc is undefined');
     }
     const { subscribe, getSnapshot } = useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
     const state = useSyncExternalStore(subscribe, getSnapshot);
-    return [state, resolvedBloc];
+    const Provider = useMemo(() => {
+        return ({ children }) => {
+            return React.createElement(BlocProvider, { bloc: resolvedBloc }, children);
+        };
+    }, [resolvedBloc,]);
+    return [state, resolvedBloc, Provider];
 };
 
-export { BlacContext, BlocProvider, useBloc };
+export { BlacApp, BlacReact, BlocProvider, externalBlocStore, useBloc };
 //# sourceMappingURL=blac-react.esm.js.map

package/dist/blac-react.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"blac-react.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"blac-react.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/blac-react.js

@@ -13,6 +13,7 @@ class BlacReact {
     static pluginKey = 'blacReact';
     constructor(blac, blacContext) {
         // treat this as singleton
+        console.log('create', blac);
         const blacReact = blac.getPluginKey(BlacReact.pluginKey);
         // new setup
         this.blac = blac;
@@ -22,7 +23,12 @@ class BlacReact {
             return blacReact;
         }
     }
-    static getInstance() {
+    static safeGetInstance() {
+        const blac = globalThis.blac;
+        const blacReact = blac?.getPluginKey(BlacReact.pluginKey);
+        return blacReact;
+    }
+    static getInstance(throwError = true) {
         const blac = globalThis.blac;
         if (!blac) {
             throw new Error('BlacReact: blac instance not found');
@@ -114,7 +120,7 @@ class BlacReact {
         return { instance, destroyOnUnmount };
     }
     providerUnmounted(providerId) {
-        this.removeLocalBloc;
+        this.removeLocalBloc(providerId);
     }
     useLocalProvider = (options) => {
         const [blocInstance, setBlocInstance] = React.useState(undefined);
@@ -135,7 +141,15 @@ class BlacReact {
     };
 }
 
-const BlacContext = React.createContext(null);
+const BlacContext = React.createContext(null);
+const BlacApp = (props) => {
+    const { children, blac } = props;
+    const blacApp = React.useMemo(() => new BlacReact(blac, BlacContext), [blac]);
+    if (!blacApp) {
+        throw new Error('BlacReact failed to initialize');
+    }
+    return React.createElement(BlacContext.Provider, { value: blac }, children);
+};
 
 const BlocProvider = ({ children, bloc, debug }) => {
     const blacReact = BlacReact.getInstance();
@@ -158,52 +172,90 @@ const externalBlocStore = (bloc) => {
     };
 };
 
-const useBloc = (bloc, options = {}) => {
+const resolveBloc = ({ bloc, blacInstance, localProviderKey, blacReact, create }) => {
+    // check if its a create function or a class
+    const isFunction = bloc instanceof Function;
+    const isBloc = isFunction && bloc?.isBlacClass;
+    const isLiveBloc = !isFunction &&
+        typeof bloc === 'object' &&
+        bloc?.isBlacLive;
+    // if its a create function, call it
+    if (!isBloc && isFunction) {
+        return bloc();
+    }
+    // if its a class
+    if (isFunction && isBloc) {
+        const blocClass = bloc;
+        // check if the bloc is registered in the blac instance
+        if (blacInstance) {
+            const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
+            if (e) {
+                return e;
+            }
+        }
+        // search in global blocs
+        const globalBloc = blacReact.blac.getBloc(blocClass);
+        if (globalBloc) {
+            return globalBloc;
+        }
+        if (isLiveBloc) {
+            return bloc;
+        }
+        console.log(typeof bloc, {
+            isFunction,
+            isBloc,
+            isLiveBloc,
+            bloc,
+            create,
+        });
+        // if it is not, check if we can create a new instance
+        if (!create) {
+            // creating it automatically should be opt-in
+            throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
+        }
+        // create a new instance -- this can cause issues if the constructor expects arguments
+        const constructed = new blocClass();
+        return constructed;
+    }
+};
+const useResolvedBloc = (bloc, options = {}) => {
     const blacReact = BlacReact.getInstance();
     const localProviderKey = blacReact.useLocalProviderKey();
     const blacInstance = React.useContext(BlacContext);
     const resolvedBloc = React.useMemo(() => {
-        // check if its a create function or a class
-        const isFunction = bloc instanceof Function;
-        const isBloc = isFunction && bloc?.isBlacClass;
-        // if its a create function, call it
-        if (!isBloc && isFunction) {
-            return bloc();
+        if (!blacReact || !localProviderKey) {
+            return undefined;
         }
-        // if its a class
-        if (isFunction && isBloc) {
-            const blocClass = bloc;
-            // check if the bloc is registered in the blac instance
-            if (blacInstance) {
-                const e = blacReact.getLocalBlocForProvider(localProviderKey, blocClass);
-                if (e) {
-                    return e;
-                }
-            }
-            // search in global blocs
-            const globalBloc = blacReact.blac.getBloc(blocClass);
-            if (globalBloc) {
-                return globalBloc;
-            }
-            // if it is not, check if we can create a new instance
-            if (!options.create) {
-                // creating it automatically should be opt-in
-                throw new Error('useBloc: set create to true to create a new bloc when a class constructor is passed');
-            }
-            // create a new instance -- this can cause issues if the constructor expects arguments
-            const constructed = new blocClass();
-            return constructed;
-        }
-    }, []);
+        return resolveBloc({
+            bloc,
+            blacInstance,
+            blacReact,
+            localProviderKey,
+            create: options.create ?? false
+        });
+    }, [localProviderKey]);
+    console.trace(resolvedBloc, options);
+    return resolvedBloc;
+};
+
+const useBloc = (bloc, options = {}) => {
+    const resolvedBloc = useResolvedBloc(bloc, options);
     if (!resolvedBloc) {
         throw new Error('useBloc: bloc is undefined');
     }
     const { subscribe, getSnapshot } = React.useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
     const state = React.useSyncExternalStore(subscribe, getSnapshot);
-    return [state, resolvedBloc];
+    const Provider = React.useMemo(() => {
+        return ({ children }) => {
+            return React.createElement(BlocProvider, { bloc: resolvedBloc }, children);
+        };
+    }, [resolvedBloc,]);
+    return [state, resolvedBloc, Provider];
 };
 
-exports.BlacContext = BlacContext;
+exports.BlacApp = BlacApp;
+exports.BlacReact = BlacReact;
 exports.BlocProvider = BlocProvider;
+exports.externalBlocStore = externalBlocStore;
 exports.useBloc = useBloc;
 //# sourceMappingURL=blac-react.js.map

package/dist/blac-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"blac-react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"blac-react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blac/react",
-  "version": "0.0.3",
+  "version": "0.0.13-0",
   "license": "MIT",
   "main": "dist/blac-react.js",
   "module": "dist/blac-react.esm.js",