feat(react-bloc)!: v0.3.0

felangel · Sep 8, 2020 · 99985a1 · 99985a1
1 parent 6837162
commit 99985a1
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -9,8 +9,8 @@ enum CounterEvent {
   decrement
 }
 class CounterBloc extends Bloc<CounterEvent, number> {
-  initialState(): number {
-    return 0
+  constructor() {
+    super(0)
   }
 
   async *mapEventToState(event: CounterEvent) {