Awesome Open Source
Awesome Open Source

cycle-fire

build npm firebase

A Firebase driver for Cycle.js.

Example

import firebaseConfig from './firebaseConfig';
import { button, div, h2, makeDOMDriver } from '@cycle/dom';
import { firebaseActions, makeFirebaseDriver } from 'cycle-fire';
import { run } from '@cycle/run';

function main(sources) {
  const action$ = sources.DOM
    .select('.shuffle')
    .events('click')
    .map(() => Math.ceil(Math.random() * 99))
    .map(firebaseActions.database.ref('test').set);

  const vdom$ = sources.firebase.database
    .ref('test')
    .value.map(value => div([h2(value), button('.shuffle', 'Shuffle')]));

  return {
    DOM: vdom$,
    firebase: action$
  };
}

run(main, {
  DOM: makeDOMDriver('Application'),
  firebase: makeFirebaseDriver(firebaseConfig)
});

API

firebaseActions

Write effects to the connected Firebase database are requested by calling an action generator—a function defined on the firebaseActions object—and passed to the firebase sink.

<action>.as(category: string)

Effectively attaches a category to the action's result stream, allowing for lookup using the source's select().

import { firebaseActions } from 'cycle-fire';
import xs from 'xstream';

function Cycle(sources) {
  const setAction = firebaseActions.database
    .ref('test')
    .set('newValue')
    .as('setTestValue');

  sources.firebase.select('setTestValue').addListener({
    error: err => {
      console.error(err);
    },
    next: response => {
      console.log(response);
    }
  });

  return {
    firebase: xs.of(setAction)
  };
}

makeFirebaseDriver(config, name?)

  • config: object
    • apiKey: string
    • authDomain: string
    • databaseURL: string
    • messagingSenderId: string
    • projectId: string
    • storageBucket: string
  • name?: string

Initializes a connection to a Firebase database by calling firebase.initializeApp(), returning a source object containing the following:

  • auth: object containing:
  • database: object containing:
    • ref(path: string): ReferenceSource containing:
      • child(path: string): ReferenceSource
      • events(eventType: string): MemoryStream of the ref's eventType events, using Reference.on
      • value: MemoryStream – a shortcut stream equivalent to events('value')
    • refFromURL(url: string): ReferenceSource
  • select(category: string): Stream of results from action requests that were categorized using <action>.as().

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,364
firebase (467
cycle (18
cyclejs (14

Find Open Source By Browsing 7,000 Topics Across 59 Categories