Nightingale Posing Mischievously

    frill-core

    0.1.4 • Public • Published

    frill-core

    Circle CI dependencies

    Core part of frill.

    NPM

    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

    Additional options for built-in services
    Service Options Explanation
    socket options.url (Required) An url of the socket server.
    request options.prefix (Optional) Prefixes paths to send a request via this.request.prefix.get('/test'), etc.

    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

    Keywords

    Install

    npm i frill-core

    DownloadsWeekly Downloads

    16

    Version

    0.1.4

    License

    MIT

    Last publish

    Collaborators

    • nanopx