@bloc-js/react-bloc - npm Package Compare versions

Comparing version 1.2.19 to 1.2.20

lib-es/use-bloc-state.d.ts

 import { Bloc } from "@bloc-js/bloc";
-export declare type CreateBlocFn<S> = () => Bloc<any, S>;
-export declare function useBlocState<S>(bloc: Bloc<any, S> | CreateBlocFn<S>): S | undefined;
+export declare type CreateBlocFn<B> = () => B;
+export declare function useBlocState<S, B extends Bloc<any, S>>(blocCreator: B | CreateBlocFn<B>): S;

lib-es/use-bloc-state.js

@@ -1,8 +0,17 @@
-import { useEffect, useState } from "react";
-export function useBlocState(bloc) {
-    var _a = useState(), state = _a[0], setState = _a[1];
+import { useEffect, useState, useRef } from "react";
+export function useBlocState(blocCreator) {
+    var blocRef = useRef();
+    function getBloc() {
+        if (blocRef.current)
+            return blocRef.current;
+        blocRef.current =
+            typeof blocCreator === "function" ? blocCreator() : blocCreator;
+        return blocRef.current;
+    }
+    var _a = useState(getBloc().currentState), state = _a[0], setState = _a[1];
     useEffect(function () {
-        var actualBloc = typeof bloc === "function" ? bloc() : bloc;
-        setState(actualBloc.currentState);
-        var subscription = actualBloc.state$.subscribe(function (nextState) {
+        var shouldDispose = typeof blocCreator === "function";
+        var bloc = getBloc();
+        setState(bloc.currentState);
+        var subscription = bloc.state$.subscribe(function (nextState) {
             if (state === nextState)
@@ -12,3 +21,7 @@ return;
         });
-        return function () { return subscription.unsubscribe(); };
+        return function () {
+            subscription.unsubscribe();
+            if (shouldDispose)
+                bloc.dispose();
+        };
     }, []);
@@ -15,0 +28,0 @@ return state;

lib-esnext/use-bloc-state.d.ts

 import { Bloc } from "@bloc-js/bloc";
-export declare type CreateBlocFn<S> = () => Bloc<any, S>;
-export declare function useBlocState<S>(bloc: Bloc<any, S> | CreateBlocFn<S>): S | undefined;
+export declare type CreateBlocFn<B> = () => B;
+export declare function useBlocState<S, B extends Bloc<any, S>>(blocCreator: B | CreateBlocFn<B>): S;

lib-esnext/use-bloc-state.js

@@ -1,8 +0,17 @@
-import { useEffect, useState } from "react";
-export function useBlocState(bloc) {
-    const [state, setState] = useState();
+import { useEffect, useState, useRef } from "react";
+export function useBlocState(blocCreator) {
+    const blocRef = useRef();
+    function getBloc() {
+        if (blocRef.current)
+            return blocRef.current;
+        blocRef.current =
+            typeof blocCreator === "function" ? blocCreator() : blocCreator;
+        return blocRef.current;
+    }
+    const [state, setState] = useState(getBloc().currentState);
     useEffect(() => {
-        const actualBloc = typeof bloc === "function" ? bloc() : bloc;
-        setState(actualBloc.currentState);
-        const subscription = actualBloc.state$.subscribe(nextState => {
+        const shouldDispose = typeof blocCreator === "function";
+        const bloc = getBloc();
+        setState(bloc.currentState);
+        const subscription = bloc.state$.subscribe(nextState => {
             if (state === nextState)
@@ -12,3 +21,7 @@ return;
         });
-        return () => subscription.unsubscribe();
+        return () => {
+            subscription.unsubscribe();
+            if (shouldDispose)
+                bloc.dispose();
+        };
     }, []);
@@ -15,0 +28,0 @@ return state;

lib/use-bloc-state.d.ts

 import { Bloc } from "@bloc-js/bloc";
-export declare type CreateBlocFn<S> = () => Bloc<any, S>;
-export declare function useBlocState<S>(bloc: Bloc<any, S> | CreateBlocFn<S>): S | undefined;
+export declare type CreateBlocFn<B> = () => B;
+export declare function useBlocState<S, B extends Bloc<any, S>>(blocCreator: B | CreateBlocFn<B>): S;

lib/use-bloc-state.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-function useBlocState(bloc) {
-    var _a = react_1.useState(), state = _a[0], setState = _a[1];
+function useBlocState(blocCreator) {
+    var blocRef = react_1.useRef();
+    function getBloc() {
+        if (blocRef.current)
+            return blocRef.current;
+        blocRef.current =
+            typeof blocCreator === "function" ? blocCreator() : blocCreator;
+        return blocRef.current;
+    }
+    var _a = react_1.useState(getBloc().currentState), state = _a[0], setState = _a[1];
     react_1.useEffect(function () {
-        var actualBloc = typeof bloc === "function" ? bloc() : bloc;
-        setState(actualBloc.currentState);
-        var subscription = actualBloc.state$.subscribe(function (nextState) {
+        var shouldDispose = typeof blocCreator === "function";
+        var bloc = getBloc();
+        setState(bloc.currentState);
+        var subscription = bloc.state$.subscribe(function (nextState) {
             if (state === nextState)
@@ -14,3 +23,7 @@ return;
         });
-        return function () { return subscription.unsubscribe(); };
+        return function () {
+            subscription.unsubscribe();
+            if (shouldDispose)
+                bloc.dispose();
+        };
     }, []);
@@ -17,0 +30,0 @@ return state;

package.json

 {
   "name": "@bloc-js/react-bloc",
-  "version": "1.2.19",
+  "version": "1.2.20",
   "description": "React components for implementing the BLoC pattern.",
@@ -47,3 +47,3 @@ "keywords": [
   },
-  "gitHead": "50b05fa0db3c2bc55ea4c8fe478f22adac7cfc91"
+  "gitHead": "4817eb4af65f8770d6714a9089affdd2dc65a591"
 }

No alert changes

Improved metrics

Total package byte prevSize

13533

increased by18.03%

Lines of code

170

increased by29.77%

No dependency changes