combus ☎

• combus ☎
  • Installation
  • Examples
    • Creating a dependency injection system
    • Communicating between bundles
    • Creating a state machine

A JavaScript browser event based communication BUS

Installation

# with npm
npm i --save combus

# with yarn
yarn add combus

Examples

Creating a dependency injection system

// injector.js
import combus from 'combus';

const injectables = new Map();

combus.listen('getInstance', async message => {
  const { name, args } = message.payload;

  if (!injectables.has(name)) {
    return new Error(`Injectable ${name} is not registered`);
  }

  return Reflect.construct(injectables.get(name), [].concat(args));
});

combus.listen('inject', async message => {
  const { name, injectable } = message.payload;

  if (injectables.has(name)) {
    return new Error(`Injectable ${name} is already registered`);
  }

  injectables.set(name, injectable);
});

// injectables-stuff.js
import combus from 'combus';

class Foo {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }

  sum() {
    return this.param1 + this.param2;
  }
}

class Foo2 {
  constructor(arr) {
    this.arr = arr;
  }

  sum() {
    return this.arr.reduce((s, c) => s + c, 0);
  }
}

combus.dispatch('inject', {
  name: Foo.name,
  injectable: Foo,
});

combus.dispatch('inject', {
  name: Foo2.name,
  injectable: Foo2,
});

// file-which-will-retrieve-the-injectable.js
import combus from 'combus';

Promise.all([
  combus.dispatch('getInstance', {
    name: 'Foo',
    args: [5, 10]
  }),
  combus.dispatch('getInstance', {
    name: 'Foo2',
    args: [1, 2, 3, 4]
  }),
]).then(([fooMessage, foo2Message]) => {
  const foo = fooMessage.payload;
  const foo2 = foo2Message.payload;

  console.log(foo.sum()) // 15
  console.log(foo2.sum()) // 10
});

Communicating between bundles

Combus can be used to create a dialogue between different bundles (and different frameworks or libraries).

// bundle.1.js
import combus from 'combus';

const secret = 123;

combus.listen('give-me-your-secret', async message => {
  return `Hello ${message.payload}, the secret is ${secret}`;
});

// bumdle.2.js
import combus from 'combus';

combus.dispatch('give-me-your-secret', 'bundle.2').then(response => {
  console.log(response); // Hello bundle.2 , the secret is 123
});

// bumdle.3.js
import combus from 'combus';

combus.dispatch('give-me-your-secret', 'bundle.3').then(response => {
  console.log(response); // Hello bundle.3 , the secret is 123
});

Creating a state machine

Combus could be useful to create a state machine

// state-machine.js
import { listen } from 'combus';

const state = {
  todos: [],
};

listen('get', async () => state);

listen('add', async message => {
  state.todos.push(message.payload);
  return state;
});

listen('toggle', async message => {
  state.todos.forEach(todo => {
    if (todo.id !== message.payload) {
      return;
    }

    todo.completed = !todo.completed;
  });

  return state;
});

listen('remove', async message => {
  state.todos = state.todos.filter(i => i.id !== message.payload);
  return state;
});

// your-logic.js
import { dispatch } from 'combus';

function create(id, name) {
  return {
    completed: false,
    id,
    name,
  }
}

(async function main() {
  const todos = (await dispatch('get')).payload;

  await dispatch('add', create(0, 'foo'));
  await dispatch('add', create(1, 'bar'));
  await dispatch('add', create(2, 'baz'));

  await dispatch('toggle', 2);
  await dispatch('remove', 0);
  await dispatch('remove', 1);

  const remainingTodos = (await dispatch('get')).payload;

  console.log(remainingTodos); // [{ id: 2, name: 'baz', completed: true }];
})();