world-tree

Todo

• [x] 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 ?)
• [X] 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)
• [X] Async story? (Async static actions?)
• [X] Capture updates from children? childrenDidUpdate()

What?

Domain-centric state management for React.

• [x] Locally mutable. Globally immutable. (Learn more)
• [x] Modern hooks-based API (Learn more)
• [x] Hassle-free server-side rendering (Learn mode)
• [x] Cached accessors for rendering performance (Learn more)
• [x] Component-based instancing (Learn more)
• [x] Tiny library size (Learn more)
• [x] A smart effect-system (Learn more)
• [x] 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