@blac/react 0.0.1 → 0.0.3

package/dist/blac-react.d.ts

@@ -1,7 +1,7 @@
-import { Blac, BlocBase, BlocClass } from 'blac';
-import React from 'react';
+import { Blac, BlocBase, ValueType, BlocClass } from 'blac';
+import React, { FC, ReactNode } from 'react';
 
-declare const BlacContext: React.Context<Blac | null>;
+declare const BlacContext: React.Context<Blac<any, any> | null>;
 
 /**
  * Keep track of the hierarchy of Blac BlocProvider components, so that
@@ -14,16 +14,29 @@ interface ProviderItem {
     bloc: BlocBase<any>;
 }
 
-interface ExternalStore<S> {
+declare const BlocProvider: FC<{
+    children?: ReactNode;
+    bloc: (() => BlocBase<any>) | BlocBase<any>;
+    debug?: boolean;
+}>;
+
+interface ExternalStore<B extends BlocBase<any>> {
     subscribe: (onStoreChange: () => void) => () => void;
-    getSnapshot: () => S;
-    getServerSnapshot?: () => S;
+    getSnapshot: () => ValueType<B>;
+    getServerSnapshot?: () => ValueType<B>;
 }
 
-type BlocHookData<T extends BlocBase<S>, S> = [value: S, instance: T];
-type BlocHookOptions<T extends BlocBase<S>, S> = {
+type BlocHookData<B extends BlocBase<S>, S> = [
+    value: ValueType<B>,
+    instance: B
+];
+interface BlocHookOptions {
+    /**
+     * 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<B, S>) => BlocHookData<B, S>;
+}
+declare const useBloc: <B extends BlocBase<S>, S>(bloc: BlocClass<B> | (() => B), options?: BlocHookOptions) => BlocHookData<B, S>;
 
-export { BlacContext, BlocHookData, BlocHookOptions, ExternalStore, ProviderItem, useBloc };
+export { BlacContext, BlocHookData, BlocHookOptions, BlocProvider, ExternalStore, ProviderItem, useBloc };

package/dist/blac-react.esm.js

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, useMemo, useSyncExternalStore } from 'react';
+import React, { useContext, useMemo, useEffect, createContext, useSyncExternalStore } from 'react';
 
 /**
  * Keep track of the hierarchy of Blac BlocProvider components, so that
@@ -37,6 +37,9 @@ class BlacReact {
         // 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);
     }
@@ -44,6 +47,9 @@ class BlacReact {
     get LocalProvider() {
         return this._contextLocalProviderKey.Provider;
     }
+    /**
+     * React hook to get the id from the nearest BlocProvider
+     */
     useLocalProviderKey() {
         return useContext(this._contextLocalProviderKey);
     }
@@ -82,11 +88,61 @@ class BlacReact {
         }
         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;
+    }
+    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;
+    };
 }
 
 const BlacContext = createContext(null);
 
-createContext(null);
+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 {
@@ -94,17 +150,14 @@ const externalBlocStore = (bloc) => {
             const unSub = bloc.onStateChange(listener);
             return () => {
                 unSub();
-                bloc.dispose();
             };
         },
         getSnapshot: () => bloc.state,
     };
 };
 
-// B extends BlocBase<S>,
 const useBloc = (bloc, options = {}) => {
     const blacReact = BlacReact.getInstance();
-    // const localCtxP = blacReact.useLocalBlocContext();
     const localProviderKey = blacReact.useLocalProviderKey();
     const blacInstance = useContext(BlacContext);
     const resolvedBloc = useMemo(() => {
@@ -148,5 +201,5 @@ const useBloc = (bloc, options = {}) => {
     return [state, resolvedBloc];
 };
 
-export { BlacContext, useBloc };
+export { BlacContext, BlocProvider, 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

@@ -39,6 +39,9 @@ class BlacReact {
         // 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);
     }
@@ -46,6 +49,9 @@ class BlacReact {
     get LocalProvider() {
         return this._contextLocalProviderKey.Provider;
     }
+    /**
+     * React hook to get the id from the nearest BlocProvider
+     */
     useLocalProviderKey() {
         return React.useContext(this._contextLocalProviderKey);
     }
@@ -84,11 +90,61 @@ class BlacReact {
         }
         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;
+    }
+    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;
+    };
 }
 
 const BlacContext = React.createContext(null);
 
-React.createContext(null);
+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 {
@@ -96,17 +152,14 @@ const externalBlocStore = (bloc) => {
             const unSub = bloc.onStateChange(listener);
             return () => {
                 unSub();
-                bloc.dispose();
             };
         },
         getSnapshot: () => bloc.state,
     };
 };
 
-// B extends BlocBase<S>,
 const useBloc = (bloc, options = {}) => {
     const blacReact = BlacReact.getInstance();
-    // const localCtxP = blacReact.useLocalBlocContext();
     const localProviderKey = blacReact.useLocalProviderKey();
     const blacInstance = React.useContext(BlacContext);
     const resolvedBloc = React.useMemo(() => {
@@ -151,5 +204,6 @@ const useBloc = (bloc, options = {}) => {
 };
 
 exports.BlacContext = BlacContext;
+exports.BlocProvider = BlocProvider;
 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.1",
+  "version": "0.0.3",
   "license": "MIT",
   "main": "dist/blac-react.js",
   "module": "dist/blac-react.esm.js",
@@ -18,6 +18,7 @@
   ],
   "scripts": {
     "dev": "vite",
+    "build:demo": "vite build",
     "build": "rollup -c rollup.config.lib.js",
     "prettier": "prettier --write ./src",
     "test": "vitest run",
@@ -28,9 +29,9 @@
     "blac": "*"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^3.1.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^4.1.4",

package/readme.md

@@ -0,0 +1,16 @@
+# Blac for React
+
+Demo [https://blac-react-demo.vercel.app/](https://blac-react-demo.vercel.app/)
+
+## Installation
+
+```bash
+npm install blac-react
+```
+
+## Examples
+
+- [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)