@blac/react 0.0.14 → 0.0.16

package/dist/blac-react.d.ts

@@ -1,67 +1,20 @@
-import { Blac, BlocBase, BlocClass, ValueType } from 'blac';
+import { Blac, BlocBase, ValueType, BlocConstructor } from 'blac';
 import React, { FC, ReactNode } from 'react';
 
 declare const BlacApp: FC<{
     children: ReactNode;
-    blac: Blac<any, any>;
+    blac?: Blac<any>;
 }>;
 
-/**
- * Keep track of the hierarchy of Blac BlocProvider components, so that
- * useBloc can find the correct bloc instance.
- */
-
-interface ProviderItem {
-    id: string;
-    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;
+    blac: Blac<any>;
+    blacContext: React.Context<Blac<any>>;
+    constructor(blac: Blac<any>, blacContext: React.Context<Blac<any>>);
     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;
 }
 
-interface BlocProviderProps<B> {
-    children?: ReactNode;
-    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>;
@@ -69,21 +22,10 @@ interface ExternalStore<B extends BlocBase<any>> {
 }
 declare const externalBlocStore: <B extends BlocBase<any>>(bloc: B) => ExternalStore<B>;
 
-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;
-}
-
 type BlocHookData<B extends BlocBase<S>, S> = [
     value: ValueType<B>,
-    instance: B,
-    Provider: FC<{
-        children: ReactNode;
-    }>
+    instance: B
 ];
-declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocResolveOptions) => BlocHookData<B, S>;
+declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocConstructor<B>) => BlocHookData<B, S>;
 
-export { BlacApp, BlacReact, BlocProvider, ExternalStore, externalBlocStore, useBloc };
+export { BlacApp, BlacReact, ExternalStore, externalBlocStore, useBloc };

package/dist/blac-react.esm.js

@@ -1,255 +1,112 @@
-import React, { useContext, useMemo, useEffect, createContext, useSyncExternalStore } from 'react';
+import { Blac } from 'blac';
+import React, { createContext, useMemo, useContext, useSyncExternalStore } from 'react';
 
-/**
- * Keep track of the hierarchy of Blac BlocProvider components, so that
- * useBloc can find the correct bloc instance.
- */
-class BlacReact {
-    blac;
-    blacContext;
-    localContextProvider = React.createContext(null);
-    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;
-        this.blacContext = blacContext;
-        this.setup();
-        if (blacReact) {
-            return blacReact;
-        }
-    }
-    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');
-        }
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        if (!blacReact) {
-            throw new Error('BlacReact: blacReact instance not found');
-        }
-        return blacReact;
-    }
-    setup() {
-        // register blac instance on global object
-        globalThis.blac = this.blac;
-        // add the BlacReact instance to blac
-        this.blac.addPluginKey(BlacReact.pluginKey, this);
-    }
-    /**
-     * React hook to get the bloc instance from the nearest BlocProvider
-     */
-    useLocalBlocContext() {
-        return useContext(this.localContextProvider);
-    }
-    _contextLocalProviderKey = React.createContext('none');
-    get LocalProvider() {
-        return this._contextLocalProviderKey.Provider;
-    }
-    /**
-     * React hook to get the id from the nearest BlocProvider
-     */
-    useLocalProviderKey() {
-        return useContext(this._contextLocalProviderKey);
-    }
-    addLocalBloc = (item) => {
-        this.providerList.push(item);
-    };
-    removeLocalBloc = (id) => {
-        const index = this.providerList.findIndex((i) => i.id === id);
-        if (!index)
-            return;
-        const item = this.providerList[index];
-        item.bloc.dispose();
-        if (index !== -1) {
-            this.providerList.splice(index, 1);
-        }
-    };
-    createProviderId = () => {
-        return Math.random().toString(36).split('.')[1];
-    };
-    providerList = new Array();
-    getLocalBlocForProvider(id, blocClass) {
-        for (const providerItem of this.providerList) {
-            if (providerItem.id === id) {
-                if (providerItem.bloc instanceof blocClass) {
-                    return providerItem.bloc;
-                }
-                let parent = providerItem.parent;
-                while (parent) {
-                    const parentItem = this.providerList.find((i) => i.id === parent);
-                    if (parentItem?.bloc instanceof blocClass) {
-                        return parentItem.bloc;
-                    }
-                    parent = parentItem?.parent;
-                }
-            }
-        }
-        return undefined;
-    }
-    providerMounted(options) {
-        const { bloc, providerId, localProviderKey } = options;
-        let instance = undefined;
-        let destroyOnUnmount = true;
-        const isFunction = bloc instanceof Function;
-        const isLiveBloc = !isFunction &&
-            typeof bloc === 'object' &&
-            bloc?.isBlacLive;
-        if (isFunction) {
-            instance = bloc();
-        }
-        if (isLiveBloc) {
-            instance = bloc;
-        }
-        if (instance) {
-            this.addLocalBloc({
-                bloc: instance,
-                id: providerId,
-                parent: localProviderKey,
-            });
-        }
-        return { instance, destroyOnUnmount };
-    }
-    providerUnmounted(providerId) {
-        this.removeLocalBloc(providerId);
-    }
-    useLocalProvider = (options) => {
-        const [blocInstance, setBlocInstance] = React.useState(undefined);
-        const localProviderKey = this.useLocalProviderKey();
-        const providerId = useMemo(() => this.createProviderId(), []);
-        useEffect(() => {
-            const { instance, destroyOnUnmount } = this.providerMounted({
-                ...options,
-                localProviderKey,
-                providerId,
-            });
-            setBlocInstance(instance);
-            if (destroyOnUnmount)
-                return this.providerUnmounted(providerId);
-        }, []);
-        if (blocInstance)
-            return providerId;
-    };
+class BlacReact {
+    static pluginKey = "blacReact";
+    blac;
+    blacContext;
+    constructor(blac, blacContext) {
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        // new setup
+        this.blac = blac;
+        this.blacContext = blacContext;
+        this.setup();
+        if (blacReact) {
+            return blacReact;
+        }
+    }
+    static getInstance(throwError = true) {
+        // const blac = (globalThis as any).blac;
+        const blac = BlacContext._currentValue;
+        if (!blac) {
+            throw new Error("BlacReact: blac instance not found, the <BlacApp> provider component might be missing");
+        }
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        if (!blacReact) {
+            throw new Error("BlacReact: blacReact instance not found");
+        }
+        return blacReact;
+    }
+    setup() {
+        // (globalThis as any).blac = this.blac;
+        this.blac.addPluginKey(BlacReact.pluginKey, this);
+    }
 }
 
-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 BlacContext = createContext(null);
+const BlacApp = (props) => {
+    const { children, blac } = props;
+    const blacInstance = useMemo(() => blac ?? new Blac(), [blac]);
+    const blacApp = useMemo(() => new BlacReact(blacInstance, BlacContext), [blacInstance]);
+    if (!blacApp) {
+        throw new Error("BlacReact failed to initialize");
+    }
+    return React.createElement(BlacContext.Provider, { value: blacInstance }, children);
 };
 
-const BlocProvider = ({ children, bloc, debug }) => {
-    const blacReact = BlacReact.getInstance();
-    const providerId = blacReact.useLocalProvider({ bloc, debug });
-    if (!providerId) {
-        return null;
-    }
-    return (React.createElement(blacReact.LocalProvider, { value: providerId }, children));
+const externalBlocStore = (bloc) => {
+    return {
+        subscribe: (listener) => {
+            const unSub = bloc.onStateChange(listener);
+            return () => {
+                unSub();
+            };
+        },
+        getSnapshot: () => bloc.state
+    };
 };
 
-const externalBlocStore = (bloc) => {
-    return {
-        subscribe: (listener) => {
-            const unSub = bloc.onStateChange(listener);
-            return () => {
-                unSub();
-            };
-        },
-        getSnapshot: () => bloc.state,
-    };
+const resolveBloc = ({ bloc, blacInstance, 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 it is a create function, call it
+    if (!isBloc && isFunction) {
+        return bloc();
+    }
+    if (bloc?.isBlacLive) {
+        return bloc;
+    }
+    // if it is a class
+    const blocClass = bloc;
+    if (isLiveBloc) {
+        return bloc;
+    }
+    const registered = blacReact.blac.getBloc(blocClass);
+    if (registered) {
+        return registered;
+    }
 };
-
-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(() => {
-        if (!blacReact || !localProviderKey) {
-            return undefined;
-        }
-        return resolveBloc({
-            bloc,
-            blacInstance,
-            blacReact,
-            localProviderKey,
-            create: options.create ?? false
-        });
-    }, [localProviderKey]);
-    console.trace(resolvedBloc, options);
-    return resolvedBloc;
+const useResolvedBloc = (bloc) => {
+    const blacReact = BlacReact.getInstance();
+    const blacInstance = useContext(BlacContext);
+    const resolvedBloc = useMemo(() => {
+        if (!blacReact) {
+            return undefined;
+        }
+        return resolveBloc({
+            bloc,
+            blacInstance,
+            blacReact
+        });
+    }, []);
+    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);
-    const Provider = useMemo(() => {
-        return ({ children }) => {
-            return React.createElement(BlocProvider, { bloc: resolvedBloc }, children);
-        };
-    }, [resolvedBloc,]);
-    return [state, resolvedBloc, Provider];
+const useBloc = (bloc) => {
+    const resolvedBloc = useResolvedBloc(bloc);
+    if (!resolvedBloc) {
+        throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);
+    }
+    const { subscribe, getSnapshot } = useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
+    const state = useSyncExternalStore(subscribe, getSnapshot);
+    return [state, resolvedBloc];
 };
 
-export { BlacApp, BlacReact, BlocProvider, externalBlocStore, useBloc };
+export { BlacApp, BlacReact, 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

@@ -1,261 +1,117 @@
 'use strict';
 
+var blac = require('blac');
 var React = require('react');
 
-/**
- * Keep track of the hierarchy of Blac BlocProvider components, so that
- * useBloc can find the correct bloc instance.
- */
-class BlacReact {
-    blac;
-    blacContext;
-    localContextProvider = React.createContext(null);
-    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;
-        this.blacContext = blacContext;
-        this.setup();
-        if (blacReact) {
-            return blacReact;
-        }
-    }
-    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');
-        }
-        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
-        if (!blacReact) {
-            throw new Error('BlacReact: blacReact instance not found');
-        }
-        return blacReact;
-    }
-    setup() {
-        // register blac instance on global object
-        globalThis.blac = this.blac;
-        // add the BlacReact instance to blac
-        this.blac.addPluginKey(BlacReact.pluginKey, this);
-    }
-    /**
-     * React hook to get the bloc instance from the nearest BlocProvider
-     */
-    useLocalBlocContext() {
-        return React.useContext(this.localContextProvider);
-    }
-    _contextLocalProviderKey = React.createContext('none');
-    get LocalProvider() {
-        return this._contextLocalProviderKey.Provider;
-    }
-    /**
-     * React hook to get the id from the nearest BlocProvider
-     */
-    useLocalProviderKey() {
-        return React.useContext(this._contextLocalProviderKey);
-    }
-    addLocalBloc = (item) => {
-        this.providerList.push(item);
-    };
-    removeLocalBloc = (id) => {
-        const index = this.providerList.findIndex((i) => i.id === id);
-        if (!index)
-            return;
-        const item = this.providerList[index];
-        item.bloc.dispose();
-        if (index !== -1) {
-            this.providerList.splice(index, 1);
-        }
-    };
-    createProviderId = () => {
-        return Math.random().toString(36).split('.')[1];
-    };
-    providerList = new Array();
-    getLocalBlocForProvider(id, blocClass) {
-        for (const providerItem of this.providerList) {
-            if (providerItem.id === id) {
-                if (providerItem.bloc instanceof blocClass) {
-                    return providerItem.bloc;
-                }
-                let parent = providerItem.parent;
-                while (parent) {
-                    const parentItem = this.providerList.find((i) => i.id === parent);
-                    if (parentItem?.bloc instanceof blocClass) {
-                        return parentItem.bloc;
-                    }
-                    parent = parentItem?.parent;
-                }
-            }
-        }
-        return undefined;
-    }
-    providerMounted(options) {
-        const { bloc, providerId, localProviderKey } = options;
-        let instance = undefined;
-        let destroyOnUnmount = true;
-        const isFunction = bloc instanceof Function;
-        const isLiveBloc = !isFunction &&
-            typeof bloc === 'object' &&
-            bloc?.isBlacLive;
-        if (isFunction) {
-            instance = bloc();
-        }
-        if (isLiveBloc) {
-            instance = bloc;
-        }
-        if (instance) {
-            this.addLocalBloc({
-                bloc: instance,
-                id: providerId,
-                parent: localProviderKey,
-            });
-        }
-        return { instance, destroyOnUnmount };
-    }
-    providerUnmounted(providerId) {
-        this.removeLocalBloc(providerId);
-    }
-    useLocalProvider = (options) => {
-        const [blocInstance, setBlocInstance] = React.useState(undefined);
-        const localProviderKey = this.useLocalProviderKey();
-        const providerId = React.useMemo(() => this.createProviderId(), []);
-        React.useEffect(() => {
-            const { instance, destroyOnUnmount } = this.providerMounted({
-                ...options,
-                localProviderKey,
-                providerId,
-            });
-            setBlocInstance(instance);
-            if (destroyOnUnmount)
-                return this.providerUnmounted(providerId);
-        }, []);
-        if (blocInstance)
-            return providerId;
-    };
+class BlacReact {
+    static pluginKey = "blacReact";
+    blac;
+    blacContext;
+    constructor(blac, blacContext) {
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        // new setup
+        this.blac = blac;
+        this.blacContext = blacContext;
+        this.setup();
+        if (blacReact) {
+            return blacReact;
+        }
+    }
+    static getInstance(throwError = true) {
+        // const blac = (globalThis as any).blac;
+        const blac = BlacContext._currentValue;
+        if (!blac) {
+            throw new Error("BlacReact: blac instance not found, the <BlacApp> provider component might be missing");
+        }
+        const blacReact = blac.getPluginKey(BlacReact.pluginKey);
+        if (!blacReact) {
+            throw new Error("BlacReact: blacReact instance not found");
+        }
+        return blacReact;
+    }
+    setup() {
+        // (globalThis as any).blac = this.blac;
+        this.blac.addPluginKey(BlacReact.pluginKey, this);
+    }
 }
 
-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 BlacContext = React.createContext(null);
+const BlacApp = (props) => {
+    const { children, blac: blac$1 } = props;
+    const blacInstance = React.useMemo(() => blac$1 ?? new blac.Blac(), [blac$1]);
+    const blacApp = React.useMemo(() => new BlacReact(blacInstance, BlacContext), [blacInstance]);
+    if (!blacApp) {
+        throw new Error("BlacReact failed to initialize");
+    }
+    return React.createElement(BlacContext.Provider, { value: blacInstance }, children);
 };
 
-const BlocProvider = ({ children, bloc, debug }) => {
-    const blacReact = BlacReact.getInstance();
-    const providerId = blacReact.useLocalProvider({ bloc, debug });
-    if (!providerId) {
-        return null;
-    }
-    return (React.createElement(blacReact.LocalProvider, { value: providerId }, children));
+const externalBlocStore = (bloc) => {
+    return {
+        subscribe: (listener) => {
+            const unSub = bloc.onStateChange(listener);
+            return () => {
+                unSub();
+            };
+        },
+        getSnapshot: () => bloc.state
+    };
 };
 
-const externalBlocStore = (bloc) => {
-    return {
-        subscribe: (listener) => {
-            const unSub = bloc.onStateChange(listener);
-            return () => {
-                unSub();
-            };
-        },
-        getSnapshot: () => bloc.state,
-    };
+const resolveBloc = ({ bloc, blacInstance, 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 it is a create function, call it
+    if (!isBloc && isFunction) {
+        return bloc();
+    }
+    if (bloc?.isBlacLive) {
+        return bloc;
+    }
+    // if it is a class
+    const blocClass = bloc;
+    if (isLiveBloc) {
+        return bloc;
+    }
+    const registered = blacReact.blac.getBloc(blocClass);
+    if (registered) {
+        return registered;
+    }
 };
-
-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(() => {
-        if (!blacReact || !localProviderKey) {
-            return undefined;
-        }
-        return resolveBloc({
-            bloc,
-            blacInstance,
-            blacReact,
-            localProviderKey,
-            create: options.create ?? false
-        });
-    }, [localProviderKey]);
-    console.trace(resolvedBloc, options);
-    return resolvedBloc;
+const useResolvedBloc = (bloc) => {
+    const blacReact = BlacReact.getInstance();
+    const blacInstance = React.useContext(BlacContext);
+    const resolvedBloc = React.useMemo(() => {
+        if (!blacReact) {
+            return undefined;
+        }
+        return resolveBloc({
+            bloc,
+            blacInstance,
+            blacReact
+        });
+    }, []);
+    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);
-    const Provider = React.useMemo(() => {
-        return ({ children }) => {
-            return React.createElement(BlocProvider, { bloc: resolvedBloc }, children);
-        };
-    }, [resolvedBloc,]);
-    return [state, resolvedBloc, Provider];
+const useBloc = (bloc) => {
+    const resolvedBloc = useResolvedBloc(bloc);
+    if (!resolvedBloc) {
+        throw new Error(`useBloc: could not resolve: ${bloc.name || bloc}`);
+    }
+    const { subscribe, getSnapshot } = React.useMemo(() => externalBlocStore(resolvedBloc), [resolvedBloc]);
+    const state = React.useSyncExternalStore(subscribe, getSnapshot);
+    return [state, resolvedBloc];
 };
 
 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.14",
+  "version": "0.0.16",
   "license": "MIT",
   "main": "dist/blac-react.js",
   "module": "dist/blac-react.esm.js",
@@ -29,12 +29,15 @@
     "blac": "*"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@types/react": "^18.2.17",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-highlight": "^0.12.5",
+    "@vitejs/plugin-react": "^4.0.3",
+    "highlight.js": "^11.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.1"
+    "react-highlight": "^0.15.0",
+    "vite": "^4.4.7",
+    "vitest": "^0.33.0"
   }
 }

package/readme.md

@@ -13,4 +13,4 @@ npm install blac-react
 - [Counter with Bloc](ui/examples/CounterWithBloc.tsx)
 - [Counter with Cubit](ui/examples/CounterWithCubit.tsx)
 - [Counter with Global State](ui/examples/CounterWithCubitGlobal.tsx)
-- [Counters with Local State](ui/examples/CounterScoped.tsx)
+- [Counters with Local State](ui/examples/CounterLocalDemo.tsx)