function app(sources) {
return {
other: concat(
sources.other.take(6).map(x => String(x)).startWith('a'),
xs.never()
)
};
}
() => {
const history = createServerHistory()
const router = makeRouterDriver(history)(xs.merge(xs.never(), xs.of('/')), XSAdapter)
.define({})
assert.strictEqual(router instanceof xs, true)
assert.strictEqual(typeof router.addListener, 'function')
assert.notStrictEqual(router.createHref, null)
assert.strictEqual(typeof router.createHref, 'function')
})
function sink$ (item) {
const key = item._id;
if (sinks[key] === undefined) {
const selectedSink = xs.fromObservable(mergeSelector(item));
const sink = selectedSink.map(x =>
isVtree(x) && x.key == null ? {...x, key} : x
);
// prevent sink from early completion and reinitialization
sinks[key] = xs.merge(sink, xs.never());
}
return sinks[key];
}
it('should match routes against a definition object', done => {
const defintion = {
'/some': {
'/route': 123,
},
}
const history = createServerHistory('/some/route')
const router = makeRouterDriver(history)(xs.never(), XSAdapter)
const match$ = router.define(defintion)
match$.addListener({
next: ({path, value, location}) => {
assert.strictEqual(path, '/some/route')
assert.strictEqual(value, 123)
assert.strictEqual(location.pathname, '/some/route')
done()
},
error: () => {},
complete: () => {},
})
})
Inventaire: page$.map((page) => page.Inventaire || xs.never()).flatten()
Router: page$.map((c) => c.Router || xs.never()).flatten(),
return function injectDriver() {
return concat(xs.of(fn), xs.never()).remember();
};
/**
* main function, establishes our initial state tree to be passed down to the routes
*
* @param sources
* @returns {{DOM: (Stream|T), Router: *}}
*/
function main(sources) {
// Establish the initial change stream that will be announcing input from our counter buttons
const counterChange$ = xs.create();
// Establish the initial state - we're not taking any action on the state so we're sending an empty object
// for the actions, but still giving the initial inputs so that when the reducers() function is called, it
// has the inputs.counterChange$ to call in the reducers
const state$ = model({}, { counterChange$ });
// This is the input for our Home page component, sending down just the parentState$ stream for showing the counter
const homeInputs = {
parentState$: state$
};
// These are our inputs into the Counter components - delivering any other data streams we want our components
// to have access to.
//
// In this case, the parentState$ holds our common state tree stream which can be mapped over in each component's template
// to get access to state values
const counterPageOneInputs = {
props$: xs.of({title: `Page 1`}),
parentState$: state$
};
const counterPageTwoInputs = {
props$: xs.of({title: `Page 2`}),
parentState$: state$
};
// Define our routes
// We pass down the sources containing our various drivers so the components can access the DOM (and Router if needed)
const routes = {
'/': () => Home(sources, homeInputs),
'/page1': () => Counter(sources, counterPageOneInputs),
'/page2': () => Counter(sources, counterPageTwoInputs)
};
// The cyclic-router uses [switch-path](https://github.com/staltz/switch-path) behind the scenes, so when we use
// [Router.define](http://cyclejs-community.github.io/cyclic-router/docs/#define) we get back an object
// with the switch-path `path` and `value` where the value is what we assigned above in the routes constant.
//
// Because our values to the routes are functions, we call them as functions here to get the component out
const component$ = sources.Router.define(routes)
.debug(`from router...`)
.map(route => route.value)
.map(value => {
return value()
})
.remember();
// imitate is all about proxying a stream in circular dependencies
// You're going to want to read a little more than I can sum up here, so go read the docs:
// https://github.com/staltz/xstream#-imitatetarget
// There's a good section right in there about parent -> child component relationships
counterChange$.imitate(component$.map(x => x.counterChange$).flatten());
return {
DOM: component$.map(x => x.DOM).flatten(),
Router: xs.never()
};
}
.compose(function (stream) { return xstream_1.default.merge(stream, xstream_1.default.never()); }) // don't complete this stream
Subscription
} from 'xstream';
const producer = {
start: (listener) => {
listener.next(1);
listener.next(2);
listener.next(3);
listener.complete();
},
stop: console.log
};
const create: Stream<number> = xs.create(producer);
const createWithMemory: MemoryStream<number> = xs.createWithMemory(producer);
const never: Stream<*> = xs.never();
const empty: Stream<*> = xs.empty();
const _throw: Stream<*> = xs.throw(new Error(123));
const from1: Stream<number> = xs.from([1]);
const from2: Stream<number> = xs.from(Promise.resolve(1));
const of: Stream<number> = xs.of(1);
const fromArray: Stream<number> = xs.fromArray([1,2,3]);
const fromPromise: Stream<number> = xs.from(Promise.resolve(1));
const periodic: Stream<number> = xs.periodic(123);
const merge: Stream<number> = xs.merge(of, of);
const merge2: Stream<number> = xs.merge(of, of, of, of);
const combine: Stream<number[]> = xs.combine(of, of);
const combine2: Stream<number[]> = xs.combine(of, of, of, of);
const listener = {
next: console.log,