TypeScript isolate.default函數代碼示例

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 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$,
  };
}

 function main(sources: {DOM: MainDOMSource}) {
   const first = isolate(Child, 'first')(sources);
   const second = isolate(Child, 'second')(sources);
   const oneChild = [first];
   const twoChildren = [first, second];
   const vnode$ = xs.periodic(50).take(1).startWith(-1)
     .map(i => i === -1 ? oneChild : twoChildren)
     .map(children =>
       xs.combine(...children.map(child => child.DOM))
         .map(childVNodes => div('.parent', childVNodes)),
     ).flatten();
   return {
     DOM: vnode$,
   };
 }

 (acc: InternalInstances<Si>, nextState: Array<any> | any) => {
   const dict = acc.dict;
   if (Array.isArray(nextState)) {
     const nextInstArray = Array(nextState.length) as Array<
       Si & {_key: string}
     >;
     const nextKeys = new Set<string>();
     // add
     for (let i = 0, n = nextState.length; i < n; ++i) {
       const key = `${itemKey ? itemKey(nextState[i], i) : i}`;
       nextKeys.add(key);
       if (!dict.has(key)) {
         const stateScope = itemKey ? instanceLens(itemKey, key) : `${i}`;
         const otherScopes = itemScope(key);
         const scopes =
           typeof otherScopes === 'string'
             ? {'*': otherScopes, [name]: stateScope}
             : {...otherScopes, [name]: stateScope};
         const sinks: any = isolate(itemComp, scopes)(sources);
         dict.set(key, sinks);
         nextInstArray[i] = sinks;
       } else {
         nextInstArray[i] = dict.get(key) as any;
       }
       nextInstArray[i]._key = key;
     }
     // remove
     dict.forEach((_, key) => {
       if (!nextKeys.has(key)) {
         dict.delete(key);
       }
     });
     nextKeys.clear();
     return {dict: dict, arr: nextInstArray};
   } else {
     dict.clear();
     const key = `${itemKey ? itemKey(nextState, 0) : 'this'}`;
     const stateScope = identityLens;
     const otherScopes = itemScope(key);
     const scopes =
       typeof otherScopes === 'string'
         ? {'*': otherScopes, [name]: stateScope}
         : {...otherScopes, [name]: stateScope};
     const sinks: any = isolate(itemComp, scopes)(sources);
     dict.set(key, sinks);
     return {dict: dict, arr: [sinks]};
   }
 },

    function main(sources: {state: StateSource<any>}) {
      assert(sources.state);
      assert(sources.state.stream);
      const expected = [[3, 5, 6], [3, 15, 6], [3, 6]];
      sources.state.stream.addListener({
        next(x) {
          assert.deepEqual(x, expected.shift());
          calledMain += 1;
        },
        error(e) {
          done(e);
        },
        complete() {},
      });

      const childSinks = isolate(secondEntry, 1)(sources);
      assert(childSinks.state);
      const childReducer$ = childSinks.state;

      const parentReducer$ = xs.of(function initReducer(prevState: any): any {
        return [3, 5, 6];
      });
      const reducer$ = xs.merge(parentReducer$, childReducer$) as Stream<
        Reducer<any>
      >;

      return {
        state: reducer$,
      };
    }

    function Main(sources: {state: StateSource<any>}) {
      sources.state.stream.addListener({
        next(x) {
          assert.deepEqual(x.list, expected.shift());
        },
        error(e) {
          done(e.message);
        },
        complete() {
          done('complete should not be called');
        },
      });

      const childSinks = isolate(List, 'list')(sources);
      const childReducer$ = childSinks.state;

      const initReducer$ = xs.of(function initReducer(prevState: any): any {
        return {list: [{val: 3}]};
      });

      const addReducer$ = xs
        .of(function addSecond(prev: any) {
          return {list: prev.list.concat({val: null})};
        })
        .compose(delay(100));

      const parentReducer$ = xs.merge(initReducer$, addReducer$);
      const reducer$ = xs.merge(parentReducer$, childReducer$) as Stream<
        Reducer<any>
      >;

      return {
        state: reducer$,
      };
    }

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,
  }
}