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().

Cycle Fire

A Firebase driver for Cycle.js

Cycle Fire Info

⭐ Stars 12
πŸ”— Source Code github.com
πŸ•’ Last Update 3 years ago
πŸ•’ Created 5 years ago
🐞 Open Issues 4
βž— Star-Issue Ratio 3
😎 Author joshforisha