it('should support selecting the body element', function(done) {
function app(sources: {DOM: MainDOMSource}) {
return {
DOM: xs.of(div('hello world')),
};
}
const {sinks, sources, run} = setup(app, {
DOM: makeDOMDriver(createRenderTarget()),
});
let dispose: any;
sources.DOM.select('body').events('click').take(1).addListener({
next: (event: Event) => {
assert.equal((event.target as HTMLElement).tagName, 'BODY');
setTimeout(() => {
dispose();
done();
});
},
});
dispose = run();
simulant.fire(document.body, 'click');
});
transform: `translate(${link.position.x}px, ${link.position.y}px)`
}
}, [img({ attrs: { src: link.image }})]))
return div(vnodes)
}
function main({ time, DOM }) {
const raf$ = time.animationFrames()
const pause$ = DOM
.select("document")
.events("keyup")
.filter(event => event.keyCode == 32)
.fold(acc => !acc, false)
return {
DOM: raf$
.compose(sampleCombine(pause$))
.filter(([_, paused]) => !paused)
.fold(updateState, links)
.map(render)
}
}
run(main, {
DOM: makeDOMDriver("#main"),
time: timeDriver
});
import { makeGithubDriver } from 'drivers/github';
normalize();
setupPage('#app');
cssRaw(`
#app {
font-family: medium-content-sans-serif-font,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Arial,sans-serif;
background: white;
color: #333;
display: flex;
}
.layout {
display: flex;
flex: 1;
flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
font-family: medium-ui-sans-serif-text-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-weight: 100;
}
`);
run(App, {
dom: makeDOMDriver('#app'),
history: captureClicks(makeHashHistoryDriver()),
github: makeGithubDriver()
});
method: 'GET',
};
});
const user$ = sources.HTTP.select('users')
.flatten()
.map(res => res.body as UserData)
.startWith(null);
const vdom$ = user$.map(user =>
div('.users', [
button('.get-random', 'Get random user'),
user === null ? null : div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {attrs: {href: user.website}}, user.website),
]),
]),
);
return {
DOM: vdom$,
HTTP: getRandomUser$,
};
}
run(main, {
DOM: makeDOMDriver('#main-container'),
HTTP: makeHTTPDriver(),
});
import { App } from './components/App';
import { makeDOMDriver } from '@cycle/dom';
import { makeHashHistoryDriver } from '@cycle/history';
import { makeOperatorsDriver } from './drivers/operators';
import { run } from '@cycle/run';
run(App, {
dom: makeDOMDriver('#app'),
history: makeHashHistoryDriver(),
operators: makeOperatorsDriver()
});
appElement.style.cssText = 'height: 100%; text-align: center; padding-top: 50vh; background-color: black;'
appElement.id = 'nope'
}
normalize()
setupPage('#app')
const popArtShadow = {textShadow: '5px 5px 0 #000, 2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, -2px 0 0 black', color: '#fff'}
cssRule('body', {fontFamily: '"PT Sans", sans-serif', background: `#bb270f url(${bgImage})`, backgroundSize: 'cover', color: '#fff', fontSize: '20px'})
cssRule('h1', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(-4deg)', letterSpacing: '5px', margin: '150px 0 20px 0', textAlign: 'center', fontSize: '4em'}, popArtShadow)
cssRule('h2', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(0deg)', letterSpacing: '2px', margin: '30px 0 20px 0', textAlign: 'center', fontSize: '2em'}, popArtShadow)
cssRule('a', {color: '#fff'})
const main : Component = onionify(App)
const drivers : any = {
DOM: makeDOMDriver('#app'),
HTTP: makeHTTPDriver()
}
export const driverNames : string[] = Object.keys(drivers)
// Cycle apps (main functions) are allowed to return any number of sinks streams
// This sets defaults for all drivers that are not used by the app
const defaultSinks : (s : Sources) => RootSinks = sources => ({
...driverNames.map(n => ({ [n]: xs.never() })).reduce(Object.assign, {}),
...main(sources)
})
run(defaultSinks, drivers)
import 'babel-polyfill' //This will be replaced based on your babel-env config
import { run } from '@cycle/run'
import { makeDOMDriver } from '@cycle/dom'
import onionify from 'cycle-onionify'
import { Component } from './interfaces'
import { App } from './app'
const main: Component = onionify(App)
const drivers: any = {
DOM: makeDOMDriver('#app'),
}
run(main, drivers)
import { setup, run } from '@cycle/run'
import { rerunner } from 'cycle-restart'
import isolate from '@cycle/isolate'
/// #if DEVELOPMENT
import { restartable } from 'cycle-restart'
/// #endif
import { buildDrivers, wrapMain } from './drivers'
import { Component } from './interfaces'
import { App } from './components/app'
const main: Component = wrapMain(App)
/// #if PRODUCTION
run(main as any, buildDrivers(([k, t]) => [k, t()]))
/// #else
const mkDrivers = () =>
buildDrivers(([k, t]) => {
if (k === 'DOM') {
return [k, restartable(t(), { pauseSinksWhileReplaying: false })]
}
if (k === 'time' || k === 'router') {
return [k, t()]
}
return [k, restartable(t())]
})
const rerun = rerunner(setup, mkDrivers, isolate)
rerun(main)
if (module.hot) {
.map(([fn, ln]) => `${ln.toUpperCase()}, ${fn}`);
const invalidName$ = rawFullName$
.filter(([fn, ln]) => fn.length === 0 || ln.length < 3)
.mapTo('');
const name$ = xs.merge(validName$, invalidName$);
const vdom$ = name$.map(name =>
div([
p([
'First name',
input('.first', { attrs: { type: 'text' } }),
]),
p([
'Last name',
input('.last', { attrs: { type: 'text' } }),
]),
h2('Hello ' + name),
]),
);
return {
DOM: vdom$,
};
}
run(main, {
DOM: makeDOMDriver('#main-container'),
});
const mainWithRouter = routerify(main, switchPath, {
historyName: "History",
routerName: "Router"
});
function helixPiDriver(sink$: Stream<Input>) {
const worker = work(require("./worker"));
const driver = makeWebWorkerDriver(worker);
const stringifiedSink$ = sink$.map(event => JSON.stringify(event));
return driver(stringifiedSink$).map(source => JSON.parse(source));
}
const drivers = {
DOM: makeDOMDriver(document.body),
Time: timeDriver,
History: makeHistoryDriver(),
DB: makeIDBDriver("helix-pi", 1, (upgradeDb: any) => {
const projectsStore = upgradeDb.createObjectStore("projects", {
keyPath: "id"
});
projectsStore.createIndex("id", "id");
}),
HelixPi: helixPiDriver
};
run(mainWithRouter, drivers);