extract interface to seperated file

Author: jcouyang

lib/__tests__/react-most-test.jsx

@@ -28,7 +28,7 @@ CounterView.defaultProps = {count: 0, overwritedProps: 'inner'}
 
 const counterWrapper = connect(intent$=>{
   return {
-    sink$: intent$.map(intent=>{
+    updates: intent$.map(intent=>{
       switch(intent.type) {
         case 'inc': return state=>({count:state.count+1})
         case 'dec':
@@ -43,18 +43,20 @@ const counterWrapper = connect(intent$=>{
           return state=>state
       }
     }),
-    inc: ()=>({type:'inc'}),
-    dec: ()=>({type:'dec'}),
-    changeWrapperProps: (value)=>({type:'changeWrapperProps', value}),
-    changeDefaultProps: (value)=>({type:'changeDefaultProps', value}),
+    actions:{
+      inc: ()=>({type:'inc'}),
+      dec: ()=>({type:'dec'}),
+      changeWrapperProps: (value)=>({type:'changeWrapperProps', value}),
+      changeDefaultProps: (value)=>({type:'changeDefaultProps', value}),
+    }
   }
 })
 
 const Counter = counterWrapper(CounterView)
 
 describe('react-most', () => {
   describe('actions', ()=>{
-    it('add intent to intent$ and go through sink$', ()=> {
+    it.only('add intent to intent$ and go through sink$', ()=> {
       let counterWrapper = TestUtils.renderIntoDocument(
         <Most engine={Engine}>
           <Counter history={true} />
@@ -64,6 +66,7 @@ describe('react-most', () => {
       counter.actions.inc()
       counter.actions.inc()
       counter.actions.inc()
+      console.log(stateHistoryOf(counter));
       expect(stateHistoryOf(counter)[2].count).toBe(3)
     })
 

lib/engine/most.ts

@@ -1,14 +1,6 @@
 import { from, of, mergeArray, Stream, never, Subscription } from 'most'
 import { async as subject, AsyncSubject } from 'most-subject'
-
-export interface EngineSubject<T> extends AsyncSubject<T> {
-  send(x: T): this
-}
-
-export interface Update<S> {
-  (current: S): S
-}
-
+import { EngineSubject, Update } from '../interfaces'
 export class Engine<T, S> {
   intentStream: EngineSubject<T>
   historyStream: EngineSubject<S>

lib/history.ts

@@ -1,39 +1,31 @@
 import { from, Stream } from 'most'
-import { EngineSubject } from './engine/most'
-
+import { Stamp, EngineSubject } from './interfaces'
 export class Traveler<S> {
   cursor: number
   path: EngineSubject<(n: number) => number>
   history: Stream<Stamp<S>[]>
+  travel: Stream<S>
   constructor(history: Stream<Stamp<S>[]>, path: EngineSubject<(n: number) => number>) {
     this.history = history
     this.path = path
+    this.travel = from(this.path)
+      .sample((offset: (n: number) => number, states: Stamp<S>[]) => {
+        let cursor = offset(states.length + this.cursor)
+        if (cursor < states.length && cursor >= 0) {
+          this.cursor = offset(this.cursor)
+          return states[cursor].value;
+        }
+      }, this.path, this.history)
+      .filter(x => !!x)
   }
   forward() {
     this.path.send(x => x + 1)
   }
   backward() {
     this.path.send(x => x - 1)
   }
-  travel = from(this.path)
-    .sample((offset: (n: number) => number, states: Stamp<S>[]) => {
-      let cursor = offset(states.length + this.cursor)
-      if (cursor < states.length && cursor >= 0) {
-        this.cursor = offset(this.cursor)
-        return states[cursor].value;
-      }
-    }, this.path, this.history)
-    .filter(x => !!x)
 
-}
-export interface History<S> {
-  path: EngineSubject<(n: number) => number>
-  history: Stream<S>
-}
 
-export interface Stamp<S> {
-  value: S
-  time: number
 }
 export default function initHistory<S>(engineHistory: EngineSubject<S>, engineTravel: EngineSubject<(n: number) => number>): Traveler<S> {
   let history = from(engineHistory)

lib/interfaces.ts

@@ -0,0 +1,45 @@
+import { Stream } from 'most'
+import * as React from 'react'
+import { AsyncSubject } from 'most-subject'
+
+export interface Actions<T> {
+  [propName: string]: (...v: any[]) => T
+}
+
+export interface Plan<I, S> {
+  (intent: EngineSubject<I>, props?: {}): Process<I, S>
+}
+export interface Update<S> {
+  (current: S): S
+}
+export interface Process<I, S> {
+  actions: Actions<I>,
+  updates: Stream<Update<S>>
+}
+
+export interface ConnectProps<I> {
+  actions?: Actions<I>
+}
+
+export class Connect<I, S> extends React.PureComponent<ConnectProps<I>, S> {
+  actions: Actions<I>
+  updates: Stream<Update<S>>
+}
+
+export interface ConnectClass<I, S> {
+  new (props?: ConnectProps<I>, context?: any): Connect<I, S>;
+}
+
+export interface History<S> {
+  path: EngineSubject<(n: number) => number>
+  history: Stream<S>
+}
+
+export interface Stamp<S> {
+  value: S
+  time: number
+}
+
+export interface EngineSubject<T> extends AsyncSubject<T> {
+  send(x: T): this
+}

lib/react-most.ts

@@ -1,41 +1,17 @@
 import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import initHistory, { Traveler } from './history';
+import { Plan, Actions, Connect, ConnectProps, EngineSubject, Update, ConnectClass } from './interfaces'
 import { from, Stream, Subscription } from 'most';
-import { Engine, EngineSubject } from './engine/most';
+import { Engine } from './engine/most';
+
 // unfortunately React doesn't support symbol as context key yet, so let me just preteding using Symbol until react implement the Symbol version of Object.assign
 export const REACT_MOST_ENGINE = '@@reactive-react/react-most.engine';
-
+const h = React.createElement;
 const CONTEXT_TYPE = {
   [REACT_MOST_ENGINE]: PropTypes.object
 };
 
-export interface Actions<T> {
-  [propName: string]: (...v: any[]) => T
-}
-
-export interface Plan<I, S> {
-  (intent: EngineSubject<I>, props?: {}): Process<I, S>
-}
-export interface Update<S> {
-  (current: S): S
-}
-export interface Process<I, S> {
-  actions: Actions<I>,
-  updates: Stream<Update<S>>
-}
-
-export interface ConnectProps<I> {
-  actions: Actions<I>
-}
-const h = React.createElement;
-export class Connect<I, S> extends React.PureComponent<ConnectProps<I>, S> {
-  actions: Actions<I>
-  updates: Stream<Update<S>>
-}
-export interface ConnectClass<I, S> {
-  new (props?: ConnectProps<I>, context?: any): Connect<I, S>;
-}
 export function connect<I, S>(main: Plan<I, S>, opts = { history: false }): (WrappedComponent: React.ComponentClass<any>) => ConnectClass<I, S> {
   return function(WrappedComponent: React.ComponentClass<any>) {
     let connectDisplayName = `Connect(${getDisplayName(WrappedComponent)})`;
@@ -67,6 +43,8 @@ export function connect<I, S>(main: Plan<I, S>, opts = { history: false }): (Wra
         updates: Stream<Update<S>>
         traveler: Traveler<S>
         subscription: Subscription<S>
+        static contextTypes = CONTEXT_TYPE
+        static displayName = connectDisplayName
         constructor(props, context) {
           super(props, context);
           let engine: Engine<I, S> = context[REACT_MOST_ENGINE]
@@ -77,7 +55,7 @@ export function connect<I, S>(main: Plan<I, S>, opts = { history: false }): (Wra
             });
           }
 
-          let { actions, updates } = main(context[REACT_MOST_ENGINE].engine.intentStream, props)
+          let { actions, updates } = main(context[REACT_MOST_ENGINE].intentStream, props)
           this.updates = props.updates ? updates.merge(props.updates) : updates
           this.actions = Object.assign({}, actions, props.actions);
           let defaultKey = Object.keys(WrappedComponent.defaultProps);
@@ -131,15 +109,15 @@ export function connect<I, S>(main: Plan<I, S>, opts = { history: false }): (Wra
 }
 
 export interface MostProps<T, S> {
-  engine?: Engine<T, S>
+  engine?: new () => Engine<T, S>
 }
 export interface MostEngine<I, H> {
   [x: string]: Engine<I, H>
 }
 export default class Most<I, H, S> extends React.PureComponent<MostProps<I, H>, S> {
   static childContextTypes = CONTEXT_TYPE
   getChildContext(): MostEngine<I, H> {
-    let engine: Engine<I, H> = (this.props && this.props.engine) || new Engine<I, H>();
+    let engine: Engine<I, H> = (this.props && this.props.engine && new this.props.engine()) || new Engine<I, H>();
     /* istanbul ignore if */
     if (process.env.NODE_ENV === 'debug') {
       inspect(engine);
@@ -153,10 +131,6 @@ export default class Most<I, H, S> extends React.PureComponent<MostProps<I, H>,
   }
 }
 
-function observable(obj) {
-  return !!obj.subscribe;
-}
-
 /* istanbul ignore next */
 function inspect(engine) {
   from(engine.intentStream)

package.json

@@ -6,7 +6,7 @@
     "type": "git",
     "url": "git+https://github.com/jcouyang/react-most.git"
   },
-  "main": "react-most.js",
+  "main": "dist/react-most.js",
   "directories": {
     "doc": "./docs",
     "lib": "./lib"