Picodom + Mobx - Todo app

by nju33

HTML

<script src="https://unpkg.com/picodom"></script>
<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/director/build/director.js"></script>
<div id="todo-app"></div>

Babel + JSX

/** @jsx h */
const {h, patch} = picodom;
const {useStrict, action, observable} = mobx;
const data = new Map();

useStrict(true);

class PicodomBase {
  constructor(props) {
    this.props = props;
    this.ctx = {};
    this._element = null;
    this._oldNode = null;
  }

  render(ctx) {
    const newNode = this._createNode()();
    this._element = patch(base, this._element, this._oldNode, newNode);
    this._oldNode = newNode;
  }
}

class Item extends PicodomBase {
  @bindData
	_createNode({tasks}, {}) {
    const task = tasks.find(t => t.id === this.props.id);
    return (
      <li>
        {task.name}
      </li>
    );
  }
}

class List extends PicodomBase {
  @bindData
  _createNode({tasks}, {Item}) {
    return (
      <ul class="tasks">
        {tasks.map(task => new Item({task}).render())}
      </ul>
    );
  }
}

class Form extends PicodomBase {
  handleSubmit() {
    return ev => {
      ev.preventDefault();
    };
  }

  @bindData
	_createNode(store, {Item}) {
		console.log(this);
    return (
      <form onsubmit={this.handleSubmit()}>
        <input
          // value={this.ctx.value || ''}
          onchange={ev => {
            this.context.value = ev.target.value;
          }}
        />
        <button type="submit">Add</button>
      </form>
    );
  }
}

class Home extends PicodomBase {
  @bindData
	_createNode({}, {Form: aForm, List: aList}) {
    return (
      <div>
        {/* {(new aForm()).render()} */}
        {(new aList()).render()}
      </div>
    );
  }
}

class TodoStore {
  @observable.shallow tasks = [];

  @action.bound addTask(task) {
    this.tasks.push(new TaskItem(task));
  }

  @action.bound removeTask(taskId) {
    this.tasks.splice(taskId, 1);
  }
}

function bindData(target, name, descriptor) {
  const func = descriptor.value;
  descriptor.value = () => (
		func.bind(target, bindData.store, bindData.components)
	);
  return descriptor;
}
bindData.storer = {};
bindData.components = {};
bindData.addStore = function...