Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source
.gitignore
.jshintrc
.npmignore
README.md
package.json

README.md

Appleseed

A lightweight implementation of the Elm data model using javascript.

Example

Definition

import createComponent from 'appleseed';

const ui = ({ el, options }) => ({
    el: el,
    toggle: el.querySelector('.block__toggle'),
    close: el.querySelector('.block__close'),
    open: el.querySelector('.block__open'),
    body: document.body
});

const init = ({ ui }) => ({
    isOpen: ui.el.classList.contains('is-open')
});

const subscriptions = ({ state, ui, pushUpdate, options }) => {
    const elClick = ev => {
        if (ui.toggle.contains(ev.target)) pushUpdate('TOGGLE');
        if (ui.open.contains(ev.target)) pushUpdate('OPEN');
        if (ui.close.contains(ev.target)) pushUpdate('CLOSE');
    };

    const bodyClick = ev => {
        if (!ui.el.contains(ev.target)) pushUpdate('TOGGLE', false);
    };

    ui.el.addEventListener('click', elClick);
    ui.body.addEventListener('click', bodyClick);
    
    return () => {
        ui.el.removeEventListener('click', elClick);
        ui.body.removeEventListener('click', bodyClick);
    }
}

const update = ({ message, state, lastState, options }) => {
    switch(message) {
        case 'OPEN': 
            return () => ({ isOpen: true });

        case 'CLOSE': 
            return () => ({ isOpen: false })

        case 'TOGGLE': 
            return (open = !state.isOpen) => ({ isOpen: open });
    }
}

const view = ({ ui, update, state, lastState, history, options }) => {
    if (update.isOpen !== undefined) { 
        // only update if the data has been updated
        ui.el.classList.toggle('is-open', state.isOpen);
    }
}

export default createComponent({
    ui,
    init, 
    subscriptions, 
    update, 
    view 
});

Useage

import toggler from './toggler';

// creating a component returns a 
// function to unsubscribe event listeners
const unsubscribeToggler = toggler(document.querySelector('.toggler'), {  });

// remove event listeners to effectively 
// stop the component from behaving
unsubscribeToggler();

Docs

Types

ui : { 
    el : DomNode, 
    options : Maybe Object 
} => Dict { String : DomNode }

init : { 
    ui : Dict { String : DomNode } 
} => Object

subscriptions : { 
    state : Object, 
    ui : Object, 
    pushUpdate : Function, 
    options : Object 
} => Function 

update : { 
    message : String, 
    state : Object, 
    lastState : Object, 
    options : Object 
} => Function

view : { 
    ui : Dict { String : DomNode }, 
    update : Object, 
    lastState: Object, 
    history : List (List String), 
    options : Object 
}

createComponent : { 
    ui : Maybe Function,
    init : Maybe Function, 
    subscriptions : Maybe Function
    update : Maybe Function,
    view : Maybe Function
}

Install

npm install appleseed
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.