How to use the @cycle/dom.makeDOMDriver function in @cycle/dom

To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cyclejs-community / cycle-remote-data / example / client.js View on Github external
'Loading' + Array(progress).fill('.').join('')
    ]);
}
function notAskedView() {
    return dom_1.div([
        'Search for something!'
    ]);
}
function postsView(posts) {
    if (posts.length === 0) {
        return dom_1.div('No results found');
    }
    return dom_1.div(posts.map(function (post) { return dom_1.div('.post', post.name + ' - ' + post.value); }));
}
var drivers = {
    DOM: dom_1.makeDOMDriver(document.body),
    RemoteData: src_1.makeRemoteDataDriver(),
    Time: time_1.timeDriver
};
run_1.run(GithubSearch, drivers);
github staltz / cycle-custom-elementify / example / src / index.ts View on Github external
window.addEventListener('WebComponentsReady', () => {
  (document as any).registerElement('many-item', { prototype: customElementify(Item as any) });
  run(main, {
    DOM: makeDOMDriver('#main-container')
  });
});
github cyclejs / cyclejs / examples / intermediate / tsx-seconds-elapsed / src / index.tsx View on Github external
type Sinks = {
  DOM: Stream;
};

function main(sources: Sources): Sinks {
  const vdom$ = sources.Time.periodic(1000).map(i => i + 1).startWith(0)
    .map(i =&gt; <div>Seconds elapsed {i}</div>);

  return {
    DOM: vdom$,
  };
}

run(main, {
  DOM: makeDOMDriver('#main-container'),
  Time: timeDriver
});
github cyclejs / cyclejs / examples / advanced / routing-view / src / main.js View on Github external
function main(sources) {
  const history$ = sources.DOM.select('nav').events('click')
    .map(e => e.target.dataset.page)
    .compose(dropRepeats())

  const vdom$ = view(sources.history);

  return {
    DOM: vdom$,
    history: history$,
  };
}

run(main, {
  DOM: makeDOMDriver('#app'),
  history: makeHashHistoryDriver()
});
github ivan-kleshnin / cyclejs-examples / 1.5-form / src / app.js View on Github external
p(errors.email),
          ]),
          button("#submit.form-element", {type: "submit", disabled: !model}, "Register"),
          hr(),
          h2("State SPY"),
          pre(JSON.stringify(state, null, 2)),
        ])
      }
    ),
  }
}

Cycle.run(main, {
  state: identity,

  DOM: makeDOMDriver("#app"),
})
github cyclejs-community / cyclejs-sortable / examples / horizontal / src / index.ts View on Github external
li(['Option 1']),
            li(['Option 2']),
            li(['Option 3']),
            li(['Option 4']),
            li(['Option 5']),
            li(['Option 6'])
        ])
    );

    return {
        DOM: vdom$
    };
}

run(main, {
    DOM: makeDOMDriver('#app'),
    drag: userSelectDriver
});
github cyclejs / cyclejs / examples / advanced / nested-folders / src / main.js View on Github external
import {run} from '@cycle/run'
import {makeDOMDriver} from '@cycle/dom'
import onionify from 'cycle-onionify'
import Folder from './Folder'

const main = onionify(Folder)

run(main, {
  DOM: makeDOMDriver('#app')
})
github cyclejs / cyclejs / examples / basic / http-random-user / src / index.ts View on Github external
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(),
});
github cyclejs-community / cyclejs-modal / examples / rxjs / src / index.ts View on Github external
function modal({ DOM }: Sources): Sinks {
    return {
        DOM: observableOf(
            div('.div', [
                span('.span', ['This is an rxjs modal! :)']),
                button('.button', ['close'])
            ])
        ),
        modal: DOM.select('.button')
            .events('click')
            .pipe(mapTo({ type: 'close' } as ModalAction))
    };
}

run(modalify(main), {
    DOM: makeDOMDriver('#app')
});