el/ui/examples/todo/app.js

import { Component, Graph, Renderer, Router, mount } from './el-ui.js';

class TodoItem extends Component {
    constructor(props = {}) {
        super();
        this.props = props;
        this._graph = new Graph();
        this._stateNodes = {};
        this._state = {};
        // Props
        this._props_text = props.text !== undefined ? props.text : undefined;
        this._props_done = props.done !== undefined ? props.done : false;
        // State nodes (Engram graph seeds)
        this._stateNodes['completed'] = this._graph.seed({ type: 'state', name: 'completed', content: false });
        this._state['completed'] = false;
        // Subscribe to graph activation events
        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
            this._graph.subscribe(nodeId, (node) => {
                this._state[key] = node.content;
                if (this._renderer) this._renderer.patch();
            });
        }
    }

    setState(name, value) {
        if (this._stateNodes[name] !== undefined) {
            this._graph.update(this._stateNodes[name], value);
        }
    }

    render() {
        const __self = this;
        const completed = this._state['completed'];
        const text = this._props_text;
        const done = this._props_done;
        return `<li class="${completed ? "item done" : "item"  }" data-el-tag="li"><input type="checkbox" data-el-change="() => __self.setState(&#39;completed&#39;, !completed)" data-el-tag="input"></input><span data-el-tag="span">${text  }</span></li>`;
    }

}

class TodoApp extends Component {
    constructor(props = {}) {
        super();
        this.props = props;
        this._graph = new Graph();
        this._stateNodes = {};
        this._state = {};
        // State nodes (Engram graph seeds)
        this._stateNodes['newItem'] = this._graph.seed({ type: 'state', name: 'newItem', content: "" });
        this._state['newItem'] = "";
        this._stateNodes['items'] = this._graph.seed({ type: 'state', name: 'items', content: "" });
        this._state['items'] = "";
        // Subscribe to graph activation events
        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
            this._graph.subscribe(nodeId, (node) => {
                this._state[key] = node.content;
                if (this._renderer) this._renderer.patch();
            });
        }
    }

    setState(name, value) {
        if (this._stateNodes[name] !== undefined) {
            this._graph.update(this._stateNodes[name], value);
        }
    }

    addItem() {
        const newItem = this._state['newItem'];
        const items = this._state['items'];
        if newItem != "" { items = items + newItem + ";" newItem = "" }
    }

    render() {
        const __self = this;
        const newItem = this._state['newItem'];
        const items = this._state['items'];
        return `<div class="todo-app" data-el-tag="div"><h1 data-el-tag="h1">Todos</h1><div class="input-row" data-el-tag="div"><input type="text" value="${newItem  }" data-el-input="(e) => __self.setState(&#39;newItem&#39;, e.target.value)" placeholder="Add a todo..." data-el-tag="input"></input><button data-el-click="() => addItem()" data-el-tag="button">Add</button></div></div>`;
    }

}

class App extends Component {
    constructor(props = {}) {
        super();
        this.props = props;
        this._graph = new Graph();
        this._stateNodes = {};
        this._state = {};
    }

    setState(name, value) {
        if (this._stateNodes[name] !== undefined) {
            this._graph.update(this._stateNodes[name], value);
        }
    }

    render() {
        const __self = this;
        return `<div class="app" data-el-tag="div">${__self._child(TodoApp, {  })}</div>`;
    }

}

export { TodoItem, TodoApp, App };

// Mount the app
mount(App, '#app');