chore(react-bloc): v0.2.0

packages/react-bloc/CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.2.0
+
+Internal improvements, documentation updates, and bloc v0.2.0
+
+- Dependency updates
+- Documentation improvements
+- Use `bloc ^0.2.0`
+
 # 0.1.0
 
 Initial Version of the library.

packages/react-bloc/lib/src/bloc-builder.tsx

@@ -1,7 +1,6 @@
 import { Bloc } from '@felangel/bloc'
 import * as React from 'react'
 import { Subscription } from 'rxjs'
-import { skip } from 'rxjs/operators'
 
 export type BlocBuilderCondition<S> = (previous: S, current: S) => boolean
 export type BlocElementBuilder<S> = (state: S) => JSX.Element
@@ -31,16 +30,15 @@ export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
     this.bloc = props.bloc
     this.builder = props.builder
     this.condition = props.condition || null
-    this.previousState = this.bloc.currentState
+    this.previousState = this.bloc.state
     this.subscription = Subscription.EMPTY
     this.state = {
-      blocState: this.bloc.currentState
-    }
-    this.subscribe()
+      blocState: this.bloc.state
+    }    
   }
 
   private subscribe(): void {
-    this.subscription = this.bloc.state.pipe(skip(1)).subscribe((state: S) => {
+    this.subscription = this.bloc.listen((state: S) => {
       let rebuild: boolean =
         this.condition !== null ? this.condition.call(this, this.previousState, state) : true
 
@@ -59,12 +57,16 @@ export class BlocBuilder<B extends Bloc<any, S>, S> extends React.Component<
     if (prevProps.bloc !== this.props.bloc) {
       this.unsubscribe()
       this.bloc = this.props.bloc
-      this.previousState = this.bloc.currentState
-      this.setState({ blocState: this.bloc.currentState })
+      this.previousState = this.bloc.state
+      this.setState({ blocState: this.bloc.state })
       this.subscribe()
     }
   }
 
+  componentDidMount() {
+    this.subscribe()
+  }
+
   componentWillUnmount() {
     this.unsubscribe()
   }

packages/react-bloc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felangel/react-bloc",
-  "version": "0.1.0",
+  "version": "0.2.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",
@@ -29,6 +29,9 @@
   "engines": {
     "node": ">=6.0.0"
   },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
   "scripts": {
     "lint": "tslint --project tsconfig.json -t codeFrame 'lib/src/**/*.tsx' 'test/**/*.tsx'",
     "format": "prettier --write \"lib/src/**/*.ts\" \"lib/src/**/*.tsx\" \"test/**/*.tsx\"",
@@ -80,7 +83,6 @@
     "singleQuote": true
   },
   "devDependencies": {
-    "@felangel/bloc": "^0.2.0",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^23.3.2",
@@ -98,7 +100,6 @@
     "lint-staged": "^8.0.0",
     "lodash.camelcase": "^4.3.0",
     "prettier": "^1.14.3",
-    "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^2.6.2",
@@ -118,6 +119,8 @@
     "typescript": "^3.0.3"
   },
   "dependencies": {
+    "@felangel/bloc": "^0.2.3",
+    "react": "^16.9.0",
     "rxjs": "^6.5.2"
   }
 }

packages/react-bloc/test/bloc-builder.test.tsx

@@ -1,9 +1,8 @@
 import { BlocBuilder } from '../lib/react-bloc'
 import * as React from 'react'
 import { Bloc } from '@felangel/bloc'
-import { shallow, mount, ReactWrapper } from 'enzyme'
+import { mount } from 'enzyme'
 import 'jsdom-global/register'
-import ReactDOM from 'react-dom'
 
 enum CounterEvent {
   increment,
@@ -17,10 +16,10 @@ class CounterBloc extends Bloc<CounterEvent, number> {
   async *mapEventToState(event: CounterEvent) {
     switch (event) {
       case CounterEvent.increment:
-        yield this.currentState + 1
+        yield this.state + 1
         break
       case CounterEvent.decrement:
-        yield this.currentState - 1
+        yield this.state - 1
         break
     }
   }
@@ -34,10 +33,10 @@ type CounterBlocProps<B> = {
 class CounterApp extends React.Component<CounterBlocProps<CounterBloc>, any> {
   constructor(_: any) {
     super(_)
-    this.dispatchEvent = this.dispatchEvent.bind(this)
+    this.addEvent = this.addEvent.bind(this)
   }
-  dispatchEvent() {
-    this.props.bloc.dispatch(CounterEvent.increment)
+  addEvent() {
+    this.props.bloc.add(CounterEvent.increment)
   }
   render() {
     return (
@@ -58,7 +57,7 @@ class CounterApp extends React.Component<CounterBlocProps<CounterBloc>, any> {
             return <p id="normal-counter-tag">{count}</p>
           }}
         />
-        <button onClick={this.dispatchEvent}></button>
+        <button onClick={this.addEvent}></button>
       </div>
     )
   }