TypeScript xstream.combine函数代码示例

function BmiCalculator(sources: Sources): Sinks {
  let WeightSlider = isolate(LabeledSlider);
  let HeightSlider = isolate(LabeledSlider);

  let weightProps$ = xs.of<LabeledSliderProps>({
    label: 'Weight', unit: 'kg', min: 40, initial: 70, max: 140
  }).remember();
  let heightProps$ = xs.of<LabeledSliderProps>({
    label: 'Height', unit: 'cm', min: 140, initial: 170, max: 210
  }).remember();

  let weightSlider = WeightSlider({DOM: sources.DOM, props$: weightProps$});
  let heightSlider = HeightSlider({DOM: sources.DOM, props$: heightProps$});

  let bmi$ = xs.combine(weightSlider.value$, heightSlider.value$)
    .map(([weight, height]) => {
      let heightMeters = height * 0.01;
      let bmi = Math.round(weight / (heightMeters * heightMeters));
      return bmi;
    }).remember();

  return {
    DOM: xs.combine(bmi$, weightSlider.DOM, heightSlider.DOM)
      .map(([bmi, weightVTree, heightVTree]) =>
        div([
          weightVTree,
          heightVTree,
          h2('BMI is ' + bmi)
        ])
      )
  };
}

function BmiCalculator(sources: Sources): Sinks {
  const WeightSlider = isolate(LabeledSlider) as typeof LabeledSlider;
  const HeightSlider = isolate(LabeledSlider) as typeof LabeledSlider;

  const weightProps$ = xs.of({
    label: 'Weight', unit: 'kg', min: 40, initial: 70, max: 140,
  }).remember();
  const heightProps$ = xs.of({
    label: 'Height', unit: 'cm', min: 140, initial: 170, max: 210,
  }).remember();

  const weightSlider = WeightSlider({DOM: sources.DOM, props$: weightProps$});
  const heightSlider = HeightSlider({DOM: sources.DOM, props$: heightProps$});

  const bmi$ = xs.combine(weightSlider.value$, heightSlider.value$)
    .map(([weight, height]) => {
      const heightMeters = height * 0.01;
      const bmi = Math.round(weight / (heightMeters * heightMeters));
      return bmi;
    }).remember();

  const vdom$ = xs.combine(bmi$, weightSlider.DOM, heightSlider.DOM)
    .map(([bmi, weightVTree, heightVTree]) =>
      div([
        weightVTree,
        heightVTree,
        h2('BMI is ' + bmi),
      ]),
    );

  return {
    DOM: vdom$,
  };
}

  let main = ({ bot }: Sources) => ({
    bot: xs.from([
      xs.of(sendGame(
        { chat_id: GROUP_ID,
          game_short_name: 'test' },
        {})),

      xs.combine(
        bot.events('message')
          .map<TcombUser>(x => x.message.from)
          .debug(() => bot.dispose()),
        bot.responses.take(1))
        .map(([user, message]) => ({ message, user }))
        .map(({ message, user }) =>
          getGameHighScores(
            { user_id: user.id, message_id: message.message_id },
            { message })),

      xs.combine(
        xs.combine(
          bot.responses
            .take(1),
          bot.events('message')
            .debug(() => bot.dispose())
            .map(x => x.message.from)),
        bot.responses
          .drop(1)
          .filter(Array.isArray)
          .map(xs.from)
          .flatten())
        .map(([[message, user], score]) => ({ message, user, score }))
        .filter(({user, score}) => user.id === score.user.id)
        .map(({ score: { score }, user, message }) =>
          setGameScore(
            { score: score + 1, user_id: user.id, message_id: message.message_id },
            { message })),

      bot.responses
        .drop(1)
        .filter(prop('game'))
        .map(x => x.game)
        .debug((game: TcombGame) => {
          bot.dispose()
          t.ok(Game.is(Game(game)), 'game satisfies typecheck')
          t.end()
        })
    ])
  })

function GraphSerializer(
  sources: GraphSerializerSources,
): GraphSerializerSinks {
  const zapSpeed$ = sources.Settings
    .map(settings =>
      (sources.FromPanel as Stream<ZapSpeed>).startWith(settings.zapSpeed),
    )
    .flatten();

  const graph$ = sources.DebugSinks.filter(sinksAreXStream).map(buildGraph);

  const serializedGraph$ = xs
    .combine(graph$, zapSpeed$)
    .map(setupZapping)
    .compose(makeObjectifyGraph(sources.id))
    .map(object => CircularJSON.stringify(object));

  const invalid$ = sources.DebugSinks
    .filter(x => !sinksAreXStream(x))
    .mapTo('');

  return {
    graph: xs.merge(serializedGraph$, invalid$),
  };
}

function Counter(sources: Sources): Sinks {
	const IncrementButton = isolate(Button);
	const DecrementButton = isolate(Button);

	let incrementButtonProps$ = xs.of<ButtonProps>({
    text: 'Increment', amount: 1
  }).remember();
	let decrementButtonProps$ = xs.of<ButtonProps>({
    text: 'Decrement', amount: -1
  }).remember();

	let incrementButton = IncrementButton({DOM: sources.DOM, props$: incrementButtonProps$});
	let decrementButton = DecrementButton({DOM: sources.DOM, props$: decrementButtonProps$});

	let count$ = xs.merge(incrementButton.delta$, decrementButton.delta$)
		.fold((acc, x) => acc + x, 0);

	return {
		DOM: xs.combine(count$, incrementButton.DOM, decrementButton.DOM)
      .map(([count, incrementVTree, decrementVTree]) =>
        div([
          incrementVTree,
					decrementVTree,
					h2('Clicks: ' + count),
        ])
      )
	};
}

    function app(sources: {DOM: MainDOMSource}) {
      const foo$ = sources.DOM.isolateSink(xs.of(
        div('.container', [
          h4('.header', 'Correct'),
        ]),
      ), '#foo');

      const bar$ = sources.DOM.isolateSink(xs.of(
        div('.container', [
          h3('.header', 'Wrong'),
        ]),
      ), '#bar');

      const vdom$ = xs.combine(foo$, bar$).map(([foo, bar]) =>
        div('.top-most', [
          foo,
          bar,
          h2('.header', 'Correct'),
        ]),
      );

      return {
        DOM: vdom$,
      };
    }

function model(users$: Stream<User[]>, homeworlds$: Stream<Planet[]>): Stream<ViewState[]> {
  return xs.combine(users$, homeworlds$)
    .map(([users, homeworlds]) => {
      return users.map(user => {
        const homeworld = homeworlds.filter(hw => hw.url === user.homeworld)[0]
        return { user, homeworld }
      })
    })
}

 .map(actorId =>
   xs
     .combine(simulationMousePosition$, playing$, recording$)
     .map(([position, playing, recording]) => ({
       actorId,
       position,
       playing,
       recording
     }))
     .endWhen(mouseUp$)

 function main(sources: {DOM: MainDOMSource}) {
   const child = isolate(Child, 'child')(sources);
   // change parent key, causing it to be recreated
   const x$ = xs.periodic(120).map(x => x + 1).startWith(0).take(4);
   const innerDOM$ = xs.combine(x$, child.DOM)
     .map(([x, childVDOM]) =>
       div(`.parent${x}`, {key: `key${x}`}, [childVDOM, `${x}`]),
     );
   return {
     DOM: innerDOM$,
   };
 }

function Client (sources) {
  const stateUpdate$ = sources.Socket.messages
    .filter(message => message.type === 'UPDATE_STATE')
    .map(message => message.data);

  const stateOverride$ = stateUpdate$
    .map(serverState => ({type: 'OVERRIDE', data: serverState}));

  const id$ = sources.Socket.messages
    .filter(message => message.type === 'SET_ID')
    .map(message => message.data)
    .remember();

  const move$ = sources.DOM
    .select('svg')
    .events('click')
    .map(mousePosition)
    .map(destination => ({type: 'MOVE', data: destination}));

  const attack$ = sources.DOM
    .select('.enemy')
    .events('click')
    .debug(event => event.stopPropagation())
    .map(event => ({type: 'ATTACK', data: event.target.id}));

  const chat$ = sources.DOM
    .select('document')
    .events('keydown')
    .map(event => ({type: 'CHAT', data: event.key}));

  const action$ = xs.merge(
    move$,
    chat$,
    attack$
  );

  const gameActionWithId$ = id$
    .map(id => action$.map(action => ({...action, id})))
    .flatten();

  const gameAction$ = xs.merge(gameActionWithId$, stateOverride$);

  const state$ = Game({
    Animation: sources.Animation,
    action$: gameAction$ as Stream<Action>
  });

  return {
    DOM: xs.combine(id$, state$).map(view),
    Socket: action$
  }
}