From 99985a1acec93ddeccf247f935ba7ae1a467cb9a Mon Sep 17 00:00:00 2001
From: Felix Angelov <felangelov@gmail.com>
Date: Mon, 7 Sep 2020 22:56:48 -0500
Subject: [PATCH] feat(react-bloc)!: v0.3.0

---
 packages/react-bloc/CHANGELOG.md              |  6 ++
 packages/react-bloc/example/.prettierrc       |  2 +-
 packages/react-bloc/example/src/index.css     |  5 +-
 packages/react-bloc/example/src/index.tsx     | 56 +++++++++----------
 packages/react-bloc/lib/src/bloc-builder.tsx  | 19 +++++--
 packages/react-bloc/package-lock.json         |  8 +--
 packages/react-bloc/package.json              |  4 +-
 .../react-bloc/test/bloc-builder.test.tsx     |  4 +-
 8 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/packages/react-bloc/CHANGELOG.md b/packages/react-bloc/CHANGELOG.md
index 5b00a32..5bbda79 100644
--- a/packages/react-bloc/CHANGELOG.md
+++ b/packages/react-bloc/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 0.3.0
+
+- **BREAKING**: upgrade to `bloc ^0.3.0`
+- docs: inline documentation improvements
+- docs: minor improvements to example
+
 # 0.2.1
 
 Fix compatibility/upgrade issues
diff --git a/packages/react-bloc/example/.prettierrc b/packages/react-bloc/example/.prettierrc
index 9b0bb43..7a35586 100644
--- a/packages/react-bloc/example/.prettierrc
+++ b/packages/react-bloc/example/.prettierrc
@@ -1,4 +1,4 @@
 {
-    "tabWidth": 4,
+    "tabWidth": 2,
     "singleQuote": true
 }
diff --git a/packages/react-bloc/example/src/index.css b/packages/react-bloc/example/src/index.css
index 90d333a..75b8d9c 100644
--- a/packages/react-bloc/example/src/index.css
+++ b/packages/react-bloc/example/src/index.css
@@ -22,9 +22,8 @@ button {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/packages/react-bloc/example/src/index.tsx b/packages/react-bloc/example/src/index.tsx
index 6c2507c..dd882f8 100644
--- a/packages/react-bloc/example/src/index.tsx
+++ b/packages/react-bloc/example/src/index.tsx
@@ -5,42 +5,42 @@ import { BlocBuilder } from '@felangel/react-bloc';
 import './index.css';
 
 enum CounterEvent {
-    increment = 'INCREMENT',
-    decrement = 'DECREMENT'
+  increment = 'INCREMENT',
+  decrement = 'DECREMENT'
 }
 
 class CounterBloc extends Bloc<CounterEvent, number> {
-    initialState(): number {
-        return 0;
-    }
+  constructor() {
+    super(0);
+  }
 
-    async *mapEventToState(event: CounterEvent) {
-        switch (event) {
-            case CounterEvent.increment:
-                yield this.state + 1;
-                break;
-            case CounterEvent.decrement:
-                yield this.state - 1;
-                break;
-        }
+  async *mapEventToState(event: CounterEvent) {
+    switch (event) {
+      case CounterEvent.increment:
+        yield this.state + 1;
+        break;
+      case CounterEvent.decrement:
+        yield this.state - 1;
+        break;
     }
+  }
 }
 
 const App: React.FC = () => {
-    let bloc = new CounterBloc();
-    return (
-        <div className="App">
-            <p>Counter</p>
-            <BlocBuilder
-                bloc={bloc}
-                builder={(count: number) => {
-                    return <p>{count}</p>;
-                }}
-            />
-            <button onClick={() => bloc.add(CounterEvent.increment)}>Increase Counter</button>
-            <button onClick={() => bloc.add(CounterEvent.decrement)}>Decrement Counter</button>
-        </div>
-    );
+  let bloc = new CounterBloc();
+  return (
+    <div className="App">
+      <p>Counter</p>
+      <BlocBuilder
+        bloc={bloc}
+        builder={(count: number) => {
+          return <p>{count}</p>;
+        }}
+      />
+      <button onClick={() => bloc.add(CounterEvent.increment)}>Increase Counter</button>
+      <button onClick={() => bloc.add(CounterEvent.decrement)}>Decrement Counter</button>
+    </div>
+  );
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/packages/react-bloc/lib/src/bloc-builder.tsx b/packages/react-bloc/lib/src/bloc-builder.tsx
index 6b2fab8..1ba7612 100644
--- a/packages/react-bloc/lib/src/bloc-builder.tsx
+++ b/packages/react-bloc/lib/src/bloc-builder.tsx
@@ -15,6 +15,15 @@ export type BlocStateType<S> = {
   blocState: S
 }
 
+/**
+ * `BlocBuilder` handles building a component in response to new `states`.
+ *
+ * @export
+ * @class BlocBuilder
+ * @extends {React.Component<BlocBuilderProps<B, S>, BlocStateType<S>>}
+ * @template B
+ * @template S
+ */
 export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
   BlocBuilderProps<B, S>,
   BlocStateType<S>
@@ -34,7 +43,7 @@ export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
     this.subscription = Subscription.EMPTY
     this.state = {
       blocState: this.bloc.state
-    }    
+    }
   }
 
   private subscribe(): void {
@@ -53,7 +62,7 @@ export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
     this.subscription.unsubscribe()
   }
 
-  componentDidUpdate(prevProps: BlocBuilderProps<B, S>) {
+  componentDidUpdate(prevProps: BlocBuilderProps<B, S>): void {
     if (prevProps.bloc !== this.props.bloc) {
       this.unsubscribe()
       this.bloc = this.props.bloc
@@ -63,15 +72,15 @@ export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.subscribe()
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.unsubscribe()
   }
 
-  render() {
+  render(): JSX.Element {
     return this.builder(this.state.blocState)
   }
 }
diff --git a/packages/react-bloc/package-lock.json b/packages/react-bloc/package-lock.json
index 77d32d6..6e0103b 100644
--- a/packages/react-bloc/package-lock.json
+++ b/packages/react-bloc/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@felangel/react-bloc",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1090,9 +1090,9 @@
       }
     },
     "@felangel/bloc": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@felangel/bloc/-/bloc-0.2.3.tgz",
-      "integrity": "sha512-i2d2y66f7FU1Kw2vL5/BVOFpPUBh+kvni1R80aGl6vEnfGGmrnLGUARfBH4chfPn4e7zPLt/8mTUCB5Cgi895A=="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@felangel/bloc/-/bloc-0.3.0.tgz",
+      "integrity": "sha512-KZLAr0XC0KE2bDsI/KZN9zQCgpoh51E2r2PwQwVZ6TLzKLsQ7J9rtWq+EByCcchv5XRUpl9WJOsJIF89XZRPAQ=="
     },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
diff --git a/packages/react-bloc/package.json b/packages/react-bloc/package.json
index d10d08e..66abb66 100644
--- a/packages/react-bloc/package.json
+++ b/packages/react-bloc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@felangel/react-bloc",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React Components that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc.js state management package.",
   "keywords": [
     "react",
@@ -119,7 +119,7 @@
     "typescript": "^3.0.3"
   },
   "dependencies": {
-    "@felangel/bloc": "^0.2.3",
+    "@felangel/bloc": "^0.3.0",
     "react": "^16.9.0",
     "rxjs": "^6.5.2"
   }
diff --git a/packages/react-bloc/test/bloc-builder.test.tsx b/packages/react-bloc/test/bloc-builder.test.tsx
index 89fc3bf..0dc6b7e 100644
--- a/packages/react-bloc/test/bloc-builder.test.tsx
+++ b/packages/react-bloc/test/bloc-builder.test.tsx
@@ -9,8 +9,8 @@ enum CounterEvent {
   decrement
 }
 class CounterBloc extends Bloc<CounterEvent, number> {
-  initialState(): number {
-    return 0
+  constructor() {
+    super(0)
   }
 
   async *mapEventToState(event: CounterEvent) {