TypeScript Stream.compose方法代码示例

 /**
  * Like `combine` in xstream, this operator combines multiple streams together,
  * but picks those streams from a collection of component instances.
  *
  * Use the `selector` string to pick a stream from the sinks object of each
  * component instance, then pickCombine will combine all those picked streams.
  *
  * @param {String} selector a name of a channel in a sinks object belonging to
  * each component in the collection of components.
  * @return {Function} an operator to be used with xstream's `compose` method.
  */
 public pickCombine(selector: string): Stream<Array<any>> {
   return adapt(this._instances$.compose(pickCombine(selector)));
 }

export default function Board(sources: Sources, 
  stateUpdate$: Stream<BootstrapMessage>) {
  const {
    stream: noteEditStart$,
    handler: onNoteEditStart
  } = createEventHandler<string>()
  
  const container = sources.DOM.select('.js-container')
  
  const noteDelete$: Stream<string> = container.select('.js-delete-note')
    .events('click')
    .map(e => (e.target as HTMLButtonElement).getAttribute('data-note'))
  
  const noteEditArea = container.select('.js-note-edit')
  
  const noteMouseDown$: Stream<{id: string}> = (container.select('.js-note')
    .events('mousedown') as Stream<MouseEvent>).map((e) => {
      return {
        id: (e.currentTarget as Element).getAttribute('data-note')
      }
    })
  
  const mouseMove$ = container
    .events('mousemove') as Stream<MouseEvent>
  const mouseUp$ = container
    .events('mouseup') as Stream<MouseEvent>
   
  const noteEditBlur$ = noteEditArea
    .events('blur') as Stream<Event>
  
  const noteSaveText$ = noteEditBlur$
    .map(e => ({
      noteId: (e.target as HTMLTextAreaElement).getAttribute('data-note'),
      text: ((e.target as HTMLTextAreaElement).value || '').trim()
    }))
    .filter(({ noteId }) => noteId !== null && noteId.length > 0)
   
  const finishEdit$ = Stream.merge(
    container.events('click'), noteEditBlur$
  ).compose(debounce(20))
  
  const addNote$ = sources.DOM.select('.js-add-note')
    .events('click') as Stream<MouseEvent>
  
  const noteDrag$: Stream<NoteEvent> = noteMouseDown$.map(({ id }) => 
    mouseMove$.map(e => ({
      id: id,
      x: e.layerX - NOTE_WIDTH / 2,
      y: e.layerY - NOTE_HEIGHT / 2
    }))
    .compose(dropRepeats((a: any, b: any) => 
      a.x === b.x && a.y === b.y
    ))
    .endWhen(mouseUp$)
  ).flatten()
  
  const noteDragMod$ = noteDrag$.map(({ id, x, y }) => (state: State) => {
    const update = R.compose<State, State, State>(
      R.set(
        R.lensPath(['notes', id, 'pos']),
        { x, y } as Position
      ),
      R.assoc('draggingNoteId', id)
    )
    return update(state)
  })
  
  const noteStopDraggingMod$: Stream<(state: State) => State> = mouseUp$.mapTo(
    R.set(R.lensProp('draggingNoteId'), null)
  )
  
  const noteEditId$ = Stream.merge(noteEditStart$, finishEdit$.mapTo(null))
  
  const noteEditStartMod$ = noteEditId$.map(id => (state: State) => {
    if (state.editingNoteId === id) {
      return state
    }
    return R.assoc('editingNoteId', id, state) as State
  })
  
  const updateFromBootsrapMessage = (data: BootstrapMessage) => 
    R.pipe<State, State, State>(
      R.assoc('boards', data.boards),
      R.assoc('notes', data.notes)
    )
  
  // perform optimistic update
  const noteSaveTextMod$ = noteSaveText$.map(({ noteId, text }) => 
    (state: State) => {
      const update = R.set(
        R.lensPath(['notes', noteId, 'label']),
        text
      )
      return update(state)
    })
  
  const serverBootstrap$ = sources.websocket.get('bootstrap')
    .map((res: any) => res.data as BootstrapMessage).debug('bootstrap$')
  
  const serverBootstrapMod$ = 
//.........这里部分代码省略.........

 /**
  * Like `merge` in xstream, this operator blends multiple streams together, but
  * picks those streams from a collection of component instances.
  *
  * Use the `selector` string to pick a stream from the sinks object of each
  * component instance, then pickMerge will merge all those picked streams.
  *
  * @param {String} selector a name of a channel in a sinks object belonging to
  * each component in the collection of components.
  * @return {Function} an operator to be used with xstream's `compose` method.
  */
 public pickMerge(selector: string): Stream<any> {
   return adapt(this._instances$.compose(pickMerge(selector)));
 }