events

The events modules exports a factory method for declaring the behavior of an events$ stream-generating factory. Designed to be used in the component module, it takes a configuration object and returns a factory function that accepts an {Element} el and returns an events$ stream, as defined by the configuration object.

How to Use

The events factory method takes a configuration object, with the key matching a value of a data-attribute and value providing a function to modify the event stream:

import { events } from 'brookjs';

export default events({
    'emitClick': event$ => event$.map(() => ({ type: 'CLICK_EVENT' }))
});

This should be matched with an element decorated with a data-brk-on{event} attribute and contained within a data-brk-container attribute:

<div data-brk-container="button">
    <button data-brk-onclick="emitClick">Click me!</button>
</div>

<!-- or placed on the same element -->

<button data-brk-container="button" data-brk-onclick="emitClick">Click me!</button>

Make sure, when declaring the HTML structure of a component, the top-level element has a data-brk-container attribute, as events are scoped by container.

The generated events$ stream will emit an action with type: CLICK_EVENT and no payload:

import button from './button';

const events$ = button(document.querySelector('[data-brk-container="button"]'));

events$.observe({ value: action => console.log(action) });
// { type: CLICK }

events$.emitClick.observe({ value: action => console.log(action) });
// { type: CLICK }

It also has a property for each of the substreams that make up the merged stream, allowing the calling code to create new streams from the pieces that make up the merged stream.

Configuration Object

The configuration object defines which data-attributes map to which functions, with the value of the attribute matching the key on the object.

  • {string} key - Event name key. Should be found in the element with the following data-attr: data-brk-on{event}="{key}"

  • {Function} value - Event adapter function. Will be passed the event$ stream which emits Event values and should return the (un)modified stream.