world-tree

Todo

• Basic React integration via HOC
• Prevent multiple updates for a single state change. (IN PROGRESS)
• Eventing / channels (PRIO 2, EFFORT ?)
• Initalization (PRIO 1, EFFORT ?)
• map? (PRIO ?, EFFORT ?)
• @memo (PRIO 2, EFFORT ?)
• @use, @react? (PRIO 1, EFFORT ?)
• @ephemeral (PRIO 3, EFFORT ?)
• Array model (PRIO 1, EFFORT ?)
• Map model (PRIO 2, EFFORT ?)
• Set model (PRIO 2, EFFORT ?)
• closed -> Symbol(closed) (PRIO 4, EFFORT 0)
• SSR / Types (PRIO 2, EFFORT 4)
• Figure out how staging/committing should work in detail. (PRIO 2)
• Docs (PRIO 3, EFFOER 3)
• Async story? (Async static actions?)
• Capture updates from children? childrenDidUpdate()

What?

Domain-centric state management for React.

• Locally mutable. Globally immutable. (Learn more)
• Modern hooks-based API (Learn more)
• Hassle-free server-side rendering (Learn mode)
• Cached accessors for rendering performance (Learn more)
• Component-based instancing (Learn more)
• Tiny library size (Learn more)
• A smart effect-system (Learn more)
• Optimized for better bundle splitting (Learn more)

How?

import worldtree, { action, model, state } from 'world-tree';

@model class Todo {
  @state title;
  @state done = false;
  
  constructor(title) {
    this.title = title;
  }
  
  @action toggle() {
    this.done = !this.done;
    if (await api.toggle()) {
      this.done = !done;
      this.emit({ done });
    }
  }
}

const todoModel = worldtree.branch(
  new Todo()
);

function TodoView() {
  const todo = useModel(todoModel);
  return <>
    <label>{todo.title}</label>
    <input 
      type="checkbox" 
      value={todo.done} 
      onClick={todo.toggle}
    />
  </>;
}

ReactDom.render(
  <worldtree.Provider>
    <TodoView />
  </worldtree.Provider>
)

Why?

• Javascript-aligned syntax
• Built-in eventing