frill-core v0.1.4

frill-core

Core part of frill.

Usage

$ npm install frill-core --save

Examples

Basic Actions

Simply extend BaseAction.

import {BaseAction} from 'frill-core';

class ExampleAction extends BaseAction {
  constructor() {
    super();
  }
  // count up
  countUpBy(count = 1) {
    // dispatch action to store
    this.dispatch('COUNT_UP_BY', count);
  }
}

Action Services

Services are helpers to use inside actions.

import {BaseAction} from 'frill-core';

// add a new service called 'newService'
BaseAction.addService('newService', (options) => {
  return 'something';
});

class ExampleAction extends BaseAction {
  constructor() {
    super();
    // use a service
    this.use('request', {prefix: '/api'});
    // this.use('socket', {url: 'http://localhost:3000'});
    // this.use('newService', options);
  }

  actionMethod() {
    // throws a request to '/api/test'
    this.request.prefix.get('/test', (err, res) => {
      if(err) console.error(err);
      console.log(res.text);
    });
  }

Built-in services

• socket (socket.io-client)
• request (superagent)

Additional options for built-in services

Basic Stores

Simply extend BaseStore.

import {BaseStore} from 'frill-core';

class ExampleStore extends BaseStore {
  constructor() {
    super();
    this._count = 0;

    // listens to an action
    this.actions = {
      'COUNT_UP_BY': 'countUpBy',
    };
  }

  // Triggered when COUNT_UP_BY is dispatched by an action.
  countUpBy(byCount = 1) {
    this._count = this._count + byCount;
    // emit change
    this.change();
  }

  // getter for current count
  get count() {
    return this._count;
  }
}

Context

Context ties up actions and stores together. To create a context, provide an object of actions and an object of stores to the attach method of frill-core.

You can access to stores using Context.store('storeName') or Context.stores.storeName.

You can access to actions using Context.action('actionName') or Context.actions.actionName.

You can access a dispatcher, via Context.dispatcher.

import frillCore from 'frill-core';

// object of actions
const actions = {
  ExampleAction: new ExampleAction(),
  // ExampleAction2: new ExampleAction2(),
  // ...
};

const stores = {
  ExampleStore: new ExampleStore(),
  // ExampleStore2: new ExampleStore2(),
  // ...
};

// Create context
const Context = frillCore.attach(stores, actions);

Components

BaseComponent

Simply extend BaseComponent.

BaseComponent will enable users to have access to this._bind(), and this.getFrill().

Method names specified in this._bind() will automatically bind methods with this, to use in the render() method without .bind(this).

this.getFrill() will return a context.

import React from 'react';
import {BaseComponent} from 'frill-core';

class CountButtonComponent extends BaseComponent {
  constructor(props) {
    super(props);

    // bind methods
    this._bind([
      'onClick',
    ]);
  }

  // click handler
  onClick(e) {
    e.preventDefault();
    // execute an action
    this.getFrill().action('Example').countUpBy(1);
  }

  render() {
    return (
      <button onClick="this.onClick">+1</button>
    );
  }
}

StoreWatchComponent

Extend a new instance of StoreWatchComponent, and give the name of store to watch.

A StoreWatchComponent will listen to stores, and execute getStateFromFrill() when a change is emitted from a store.

NOTE: An instance of StoreWatchComponent extends BaseComponent

import React from 'react';
import {StoreWatchComponent} from 'frill-core';

class TopComponent extends new StoreWatchComponent(['Example']) {
  constructor(props) {
    super(props);
  }

  // fetch state when a store emits change
  getStateFromFrill() {
    return {
      count: this.getFrill().store('Example').count,
    };
  }

  render() {
    return (
      <div>{this.state.count}</div>
    );
  }
}

Run tests

$ npm test

License

MIT