TypeScript run.run函數代碼示例

  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);