bloc-react - npm Package Compare versions

Comparing version 0.0.14-5 to 0.0.14-6

dist/bloc-react.d.ts

@@ -38,10 +38,5 @@ import { Subscription } from 'rxjs';
 
-interface ReactBlocOptions$1 {
-    /** Enables debugging which calls BlocReact.observer every time a Subject is updated. Defaults to false */
-    debug?: boolean;
-}
 declare type BlocObserverScope = "local" | "global" | "all";
 declare class BlocConsumer {
     observer: BlocObserver;
-    debug: boolean;
     mocksEnabled: boolean;
@@ -53,3 +48,3 @@ protected _blocMapLocal: Record<string, BlocBase<any>>;
     private mockBlocs;
-    constructor(blocs: BlocBase<any>[], options?: ReactBlocOptions$1);
+    constructor(blocs: BlocBase<any>[]);
     notifyChange(bloc: BlocBase<any>, state: any): void;
@@ -111,6 +106,2 @@ notifyValueChange(bloc: BlocBase<any>): void;
 
-interface ReactBlocOptions {
-    /** Enables debugging which calls BlocReact.observer every time a Subject is updated. Defaults to false */
-    debug?: boolean;
-}
 interface BlocHookOptions<T extends BlocBase<any>> {
@@ -123,3 +114,3 @@ subscribe?: boolean;
     private _contextLocalProviderKey;
-    constructor(blocs: BlocBase<any>[], options?: ReactBlocOptions);
+    constructor(blocs: BlocBase<any>[]);
     useBloc: <T extends BlocBase<any>>(blocClass: BlocClass<T>, options?: BlocHookOptions<T>) => BlocHookData<T>;
@@ -137,2 +128,2 @@ BlocBuilder<T extends BlocBase<any>>(props: {
 
-export { Bloc, BlocReact, Cubit };
+export { Bloc, BlocObserver, BlocReact, Cubit };

dist/bloc-react.js

@@ -168,3 +168,3 @@ 'use strict';
 class BlocConsumer {
-  constructor(blocs, options = {}) {
+  constructor(blocs) {
     this.mocksEnabled = false;
@@ -176,3 +176,2 @@ this._blocMapLocal = {};
     this.blocListGlobal = blocs;
-    this.debug = options.debug || false;
     this.observer = new BlocObserver();
@@ -258,4 +257,4 @@ for (const b of blocs) {
 class BlocReact extends BlocConsumer {
-  constructor(blocs, options = {}) {
-    super(blocs, options);
+  constructor(blocs) {
+    super(blocs);
     this._contextLocalProviderKey = React__default['default'].createContext("");
@@ -350,4 +349,5 @@ this.useBloc = (blocClass, options = {}) => {
 exports.Bloc = Bloc;
+exports.BlocObserver = BlocObserver;
 exports.BlocReact = BlocReact;
 exports.Cubit = Cubit;
 //# sourceMappingURL=bloc-react.js.map

package.json

 {
   "name": "bloc-react",
-  "version": "0.0.14-5",
+  "version": "0.0.14-6",
   "scripts": {
@@ -5,0 +5,0 @@ "dev": "vite",

readme.md

@@ -0,1 +1,2 @@
+
 # BLoC React
@@ -13,41 +14,113 @@
 # Quickstart
-[TODO: Add plain JS examples]
 ### 1. Create a new **Bloc/Cubit**
+```typescript  
+// CounterCubit.ts  
+export default class CounterCubit extends Cubit<number> {  
+ increment = (): void => { this.emit(this.state + 1); };}  
+```  
+
+### 2. Create a new **BlocReact** instance and export `useBloc` from it
+```typescript  
+// state.ts  
+const state = new BlocReact([new CounterCubit(0)]);  
+export const { useBloc } = state;  
+```  
+
+### 3. Use the hook to access the state and class methods
+```typescript  
+// CounterButton.tsx  
+import { useBloc } from "../state";  
+  
+export default function CounterButton() {  
+ const [count, { increment }] = useBloc(CounterCubit); return <button onClick={() => increment()}>count is: {count}</button>; }  
+```  
+
+
+# Documentation
+[TODO]
+## BlocReact
+The `BlocReact` class handles the global state and manages all communication between individual BLoCs.
+When initializing pass all the BLoCs for the global state in an array as first parameter.
+```typescript  
+const state = new BlocReact([new MyBloc(), new MyCubit()]);  
+```  
+
+You can add an observer to all state changes *global and local*
+```typescript  
+state.observer = new BlocObserver({
+  // onChange is called for all changes (Cubits and Blocs)
+  onChange: (bloc, event) => console.log({bloc, event}),
+  // onTransition is called only when Blocs transition from one state to another,
+  // it is not called for Cubits
+  onTransition: (bloc, event) => console.log({bloc, event}),
+});
+```  
+## Cubit
+A Cubit is a simplofied version `Bloc` class. Create your custom Cubit by extending the `Cubit` class, pass the initial state to the `super` constructor.
+
+The Cubits' state is updated by calling the `this.emit` method with the new state.
+
 ```typescript
-// CounterCubit.ts
-export default class CounterCubit extends Cubit<number> {
-  increment = (): void => {
-    this.emit(this.state + 1);
-  };
+export default class CounterCubit extends Cubit<number> {  
+  constructor() {  
+    super(0);  
+  }  
+  
+  increment = (): void => {  
+    this.emit(this.state + 1);  
+  };  
+  decrement = (): void => {  
+    this.emit(this.state - 1);  
+  };  
 }
 ```
 
-### 2. Create a new **BlocReact** instance and export `useBloc` from it
+## Bloc
+Most of the time the `Cubit` class will be the easiest way to manage a peace of state but for the more critical parts of your application where there can be various reasons why the state changes to the same value, for example user authentication. It might be nice to know if the user got logged out because an error occured, the token expired or if they just clickd on the logout button.
+This is especially helpful when debugging some unexpected behaviour.
+
+in the `BlocObserver` you can then use the `onTransition` to see why the state changes, it will pass the previous state, the event itself and the next state.
+
 ```typescript
-// state.ts
-const state = new BlocReact([new CounterCubit(0)]);
-export const { useBloc } = state;
+export enum AuthEvent {  
+  unknown = "unknown",  
+  authenticated = "authenticated",  
+  unauthenticated = "unauthenticated",  
+}  
+  
+export default class AuthBloc extends Bloc<AuthEvent, boolean> {  
+  constructor() {  
+    super(false)  
+  
+    this.mapEventToState = (event) => {  
+      switch (event) {  
+        case AuthEvent.unknown:  
+          return false;  
+        case AuthEvent.unauthenticated:  
+          return false;  
+        case AuthEvent.authenticated:  
+          return true;  
+    }
+  };
+}
 ```
 
-### 3. Use the hook to access the state and class methods
-```typescript
-// CounterButton.tsx
-import { useBloc } from "../state";
+In your app you can then update the state by "adding" an event. Use the `useBloc` hook to get access to the BLoC class and add an event.
 
-export default function CounterButton() {
-  const [count, { increment }] = useBloc(CounterCubit);
-  return <button onClick={() => increment()}>count is: {count}</button>;  
+```ts
+const Component: FC = (): ReactElement => {  
+  const [state, bloc] = useBloc<AuthBloc>(AuthBloc);  
+  return <>  
+    {state === true && <Button onClick={() => bloc.add(AuthEvent.unauthenticated)}>Logout</Button>}  
+  </>  
 }
 ```
 
+## useBloc
+[TODO: Add docs for hook]
 
-# Documentation
-[TODO]
-## BlocReact
-[TODO]
-## Bloc
-[TODO]
-## Cubit
-[TODO]
-## BlocObserver
-[TODO]
+## BlocProvider
+[TODO: Add docs for hook alternative for class components]
+
+## BlocBuilder
+[TODO: Add docs for local state]

No alert changes

Improved metrics

Total package byte prevSize

73382

increased by2.78%

Number of lines in readme file

125

increased by140.38%

Worsened metrics

Lines of code

774

decreased by-1.28%

No dependency changes