@nathanfaucett/web_app

Basic Web App for front-end web applications

Stats

StarsIssuesVersionUpdatedCreatedSize
@nathanfaucett/web_app
0.1.223 years ago4 years agoMinified + gzip package size for @nathanfaucett/web_app in KB

Readme

js-web_app-immutable

basic App for front-end web applications

Cli

install web app for quick bootstrap cli

App

the App holds all your apps stores and plugins, your apps state is stored with immutable.js data structures

import { App } from "@nathanfaucett/web_app-immutable";
import config from "./config.json";

class YourApp extends App {
    constructor(config) {
        super(config);
    }
}

export default new YourApp(config);

Stores

stores are views into you apps state

import { List } from "immutable";
import app from "./app";

let ID = 0;

// uses immutable.fromJS internally to get initial state
const todos = app.createStore("todos", {
    list: []
});

todos.create = text => {
    let id = ID++;

    todos.updateState(state =>
        state.update("list", list => list.push(Map({ id: id, text: text })))
    );
};

todos.remove = id => {
    todos.updateState(prev => {
        return prev.update("list", list =>
            list.remove(list.findIndex(todo => todo.get("id") === id))
        );
    });
};

export default todos;

Components

import React from "react";
import connect from "@nathanfaucett/state-immutable-react";
import todos from "../stores/todos";
import app from "../app";
import Todo from "./Todo";

const todoListForm = app.createStore("todoListForm", {
    values: { text: "" },
    errors: { text: [] }
});

class TodoList extends React.Component {
    constructor(props) {
        super(props);

        this.form = app.createForm(
            {
                text: ({ onChange }) => ({
                    props: {
                        type: "text",
                        value: props.todoListForm.values.text,
                        onChange: e => onChange(e.target.value)
                    }
                })
            },
            {
                get: () => ({ ...this.props.todoListForm.values }),
                set: (errors, values) =>
                    todoListForm.setState({ errors, values })
            }
        );

        this.onDeleteTodo = id => {
            todos.remove(id);
        };
        this.onSubmit = e => {
            e.preventDefault();
            todos.create(this.props.todoListForm.values.text);
            this.form.reset();
        };
    }

    render() {
        const { values, errors } = this.props.todoListForm,
            fields = this.form.render(errors, values);

        return (
            <div className="TodoList">
                <form onSubmit={this.onSubmit}>
                    <input {...fields.text.props} />
                </form>
                <div>
                    {this.props.todos.list.map(todo => {
                        return (
                            <Todo
                                key={todo.id}
                                todo={todo}
                                onClick={this.onDeleteTodo}
                            />
                        );
                    })}
                </div>
            </div>
        );
    }
}

export default connect([todos, todoListForm])(TodoList);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.