TypeScript Stream.merge方法代码示例

function main(sources: Sources): Sinks {
  const stateUpdate$ = sources.websocket.get('state-update')
    .map(msg => msg.data as BootstrapMessage)
  const board = isolate(Board)(sources, stateUpdate$)

  const boardWebsocket$ = Stream.merge(
    board.moveNote$.map(noteEvent => ({
      type: 'move-note',
      data: noteEvent,
    })),
    board.addNote$.mapTo({ type: 'add-note' }),
    board.editNote$.map(({ id, label }) => ({
      type: 'change-note-label',
      data: { id, label }
    })),
    board.noteDelete$.map(id => ({
      type: 'delete-note',
      data: { id }
    }))
  )

  return {
    DOM: board.DOM,
    websocket: Stream.merge(boardWebsocket$, Stream.of({ type: 'init' }))
      .debug('websocket$'),
    preventDefault: board.preventDefault,
    focus: board.focus,
  }
}

export const toMarbleStream = (marble$: Stream<Marble>, operate: (data$: Stream<string>) => Stream<string>): Stream<Marble> =>
  Stream.merge<Marble>(
    marble$
      .filter(({ complete }) => !complete)
      .map(({ data, time }) => operate(Stream.of(data)).map<Marble>(data => ({ time, data })))
      .flatten(),
    marble$
      .filter(({ complete }) => !!complete)
  );

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$ = 
//.........这里部分代码省略.........