dont expose key and previousValue by default, pull them out into .bef…

…ore()/.beforeAll()

README.md

@@ -66,7 +66,6 @@ Though Babydux automatically updates your model for you, it also lets you listen
 ```tsx
 store
   .on('today')
-  .map(_ => _.value)
   .filter(() => _.getTime() % 2 === 0) // only even timestamps
   .debounce(100)
   .subscribe(_ => console.log('Date changed', _))
@@ -116,6 +115,30 @@ And logs look like this:
 
 <img src="logger.png" width="895" />
 
+### Plugins
+
+Babydux is easy to modify with plugins (also called "higher order stores"). Just define a function that takes a store as an argument and returns a store, adding listeners along the way. For convenience, Babydux supports 2 types of listeners for plugins:
+
+```ts
+import { createStore, Plugin } from 'babydux'
+
+let withLocalStorage: Plugin = store => {
+
+  // Listen on an event
+  store.onAll().subscribe(_ =>
+    console.log('something changed!', _)
+  )
+
+  // Listen on an event (fires before the model is updated)
+  store.beforeAll().subscribe(({ key, previousValue, value}) =>
+    localStorage.set(key, value)
+  )
+
+}
+```
+
+*Babydux also supports `.on()` and `.before()`, but because a plugin doesn't know what Actions will be bound to it, these are generally unsafe to use.*
+
 ## Design philosophy
 
 **Goal #1 is total type-safety.**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "babydux",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A paper-thin, 100% typesafe Redux for babies",
   "main": "dist/src/index.js",
   "typings": "dist/src/index.d.ts",

src/index.ts

@@ -8,19 +8,27 @@ export type Babydux<Actions extends object> = {
   }
 }
 
-export class Store<Actions extends object> extends Emitter<Babydux<Actions>> {
+export class Store<Actions extends object> extends Emitter<Actions> {
+  private befores = new Emitter<Babydux<Actions>>()
   private emitter = new Emitter<Actions>()
   constructor(private state: Actions) {
     super()
 
     for (let key in state) {
       this.emitter.on(key).subscribe(value => {
         let previousValue = state[key]
+        this.befores.emit(key, { key, previousValue, value })
         state[key] = value
-        this.emit(key, { key, previousValue, value })
+        this.emit(key, value)
       })
     }
   }
+  before<K extends keyof Actions>(key: K) {
+    return this.befores.on(key)
+  }
+  beforeAll<K extends keyof Actions>() {
+    return this.befores.all()
+  }
   get<K extends keyof Actions>(key: K) {
     return this.state[key]
   }

src/plugins/logger.ts

@@ -2,7 +2,7 @@ import { Plugin, Store } from '../'
 
 export let withLogger: Plugin = store => {
 
-  store.all().subscribe(({ key, previousValue, value }) => {
+  store.beforeAll().subscribe(({ key, previousValue, value }) => {
     console.info(`%c ⥁ ${key}`, 'background-color: rgb(96, 125, 139); color: #fff; padding: 2px 8px 2px 0;', previousValue, '→', value)
   })
 

test/stateful.tsx

@@ -66,17 +66,37 @@ test('[stateful] it should support lenses', t =>
 test('[stateful] it should support effects', t =>
   withElement(MyComponentWithLens, _ => {
     t.plan(1)
-    store.on('isTrue').subscribe(({ value }) => t.is(value, false))
+    store.on('isTrue').subscribe(_ => t.is(_, false))
     Simulate.click(_.querySelector('button')!)
   })
 )
 
-test('[stateful] it should call .subscribe(..) with the key, current value, and previous value', t =>
-  withElement(MyComponentWithLens, _ => {
-    t.plan(1)
-    store.on('isTrue').subscribe(_ =>
-      t.deepEqual(_, { key: 'isTrue', previousValue: false, value: true })
-    )
-    Simulate.click(_.querySelector('button')!)
-  })
+test('[stateful] it should call .beforeAll().subscribe() with the key, current value, and previous value', t =>
+withElement(MyComponentWithLens, _ => {
+  t.plan(1)
+  store.beforeAll().subscribe(_ =>
+    t.deepEqual(_, { key: 'isTrue', previousValue: false, value: true })
+  )
+  Simulate.click(_.querySelector('button')!)
+})
+)
+
+test('[stateful] it should call .before().subscribe() with the key, current value, and previous value', t =>
+withElement(MyComponentWithLens, _ => {
+  t.plan(1)
+  store.before('isTrue').subscribe(_ =>
+    t.deepEqual(_, { key: 'isTrue', previousValue: true, value: false })
+  )
+  Simulate.click(_.querySelector('button')!)
+})
+)
+
+test('[stateful] it should call .on().subscribe() with the current value', t =>
+withElement(MyComponentWithLens, _ => {
+  t.plan(1)
+  store.on('isTrue').subscribe(_ =>
+    t.is(_, true)
+  )
+  Simulate.click(_.querySelector('button')!)
+})
 )

test/stateless.tsx

@@ -54,17 +54,37 @@ test('[stateless] it should support lenses', t =>
 test('[stateless] it should support effects', t =>
   withElement(MyComponentWithLens, _ => {
     t.plan(1)
-    store.on('isTrue').subscribe(({ value }) => t.is(value, false))
+    store.on('isTrue').subscribe(_ => t.is(_, false))
     Simulate.click(_.querySelector('button')!)
   })
 )
 
-test('[stateless] it should call .subscribe(..) with the key, current value, and previous value', t =>
+test('[stateless] it should call .beforeAll().subscribe() with the key, current value, and previous value', t =>
   withElement(MyComponentWithLens, _ => {
     t.plan(1)
-    store.on('isTrue').subscribe(_ =>
+    store.beforeAll().subscribe(_ =>
       t.deepEqual(_, { key: 'isTrue', previousValue: false, value: true })
     )
     Simulate.click(_.querySelector('button')!)
   })
 )
+
+test('[stateless] it should call .before().subscribe() with the key, current value, and previous value', t =>
+  withElement(MyComponentWithLens, _ => {
+    t.plan(1)
+    store.before('isTrue').subscribe(_ =>
+      t.deepEqual(_, { key: 'isTrue', previousValue: true, value: false })
+    )
+    Simulate.click(_.querySelector('button')!)
+  })
+)
+
+test('[stateless] it should call .on().subscribe() with the current value', t =>
+  withElement(MyComponentWithLens, _ => {
+    t.plan(1)
+    store.on('isTrue').subscribe(_ =>
+      t.is(_, true)
+    )
+    Simulate.click(_.querySelector('button')!)
+  })
+)