reactdom-cmake-demo

Thanks to asm-dom-cmake, we have a higher start point to demonstrate this idea.

Also thanks to asm-dom and gccx (JSX like syntax for C++), they are the most important infra tools.

Example - simple click counter increment

#include <emscripten/val.h>
#include <functional>
#include <string>
#include "reactdom.hpp"

auto app() {
  static reactdom::State<int> counter;
  return (<div>
    <div>{counter}</div>
    <a onclick={[](emscripten::val){
      counter = counter + 1;
      return true;
    }}>increase</a>
  </div>);
}


int main() {
  // Initialize asm-dom.
  asmdom::init(reactdom::config());
  // Replace <div id="root"/> by our virtual dom.
  auto root = reactdom::document.getElementById("root");

  asmdom::patch(root, app());
  return 0;
};

Motivation

We want to bring the reactjs-like state pattern to asm-dom/gccx to make C++ frontend programming easier to maintain and also, replace the stupid setState to operator= overlading.

This should make C++ react even better and safer than reactjs.

Idea

Create a new type State to maintain the side-effect and invoke the VNode patch when the value change.
Make a new set of asmdom::h interface(currently called reactdom::h) and accept the State as the paramter.
Register/remove event inside the reactdom::h

Implementation

Hacking the gccx, replace all asmdom::h -> reactdom::h
Implement the add/remove event behavior in reactdom::h

How to build?

Rebuild our customized gccx

cd lib/gccx
npm install
npm run build

Make sure cmake, emscripten and npm are installed.

mkdir build
cd build
emcmake cmake ..
make

Create a local server and navigate http://localhost:8000