@blac/react 0.0.4-0 → 0.0.14

package/dist/blac-react.d.ts

@@ -2,7 +2,7 @@ import { Blac, BlocBase, BlocClass, ValueType } from 'blac';
 import React, { FC, ReactNode } from 'react';
 
 declare const BlacApp: FC<{
-    children: JSX.Element;
+    children: ReactNode;
     blac: Blac<any, any>;
 }>;
 
@@ -16,13 +16,18 @@ 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 getInstance(): BlacReact;
+    static safeGetInstance(): BlacReact | undefined;
+    static getInstance(throwError?: boolean): BlacReact;
     setup(): void;
     /**
      * React hook to get the bloc instance from the nearest BlocProvider
@@ -47,17 +52,15 @@ declare class BlacReact {
         destroyOnUnmount: boolean;
     };
     providerUnmounted(providerId: string | undefined): void;
-    readonly useLocalProvider: (options: {
-        bloc: BlocBase<any> | (() => BlocBase<any>);
-        debug?: boolean;
-    }) => string | undefined;
+    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;
@@ -66,17 +69,21 @@ interface ExternalStore<B extends BlocBase<any>> {
 }
 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>;
+
+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);
@@ -164,49 +170,85 @@ 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 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;
+        if (!blacReact || !localProviderKey) {
+            return undefined;
         }
-    }, []);
+        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 { BlacApp, BlacReact, BlocProvider, externalBlocStore, useBloc };

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);
@@ -166,49 +172,85 @@ 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 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;
+        if (!blacReact || !localProviderKey) {
+            return undefined;
         }
-    }, []);
+        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.BlacApp = BlacApp;

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.4-0",
+  "version": "0.0.14",
   "license": "MIT",
   "main": "dist/blac-react.js",
   "module": "dist/blac-react.esm.js",