Spaic

Single Page Application, In C++

Read like spike.

Basic Idea

1. Emscripten let we compile C++ to WASM

2. We can write CSS in C++ like these syntax:

   auto greater_than_10 = css(
   backgroundColor = red,
   color = white,
   );

3. We can write React-like Component in C++ like these syntax:

   #include<spaic/Prelude.hpp>namespaceprops::app {
   auto is_dark = fallback<bool>(false);
   auto all = prop_set(is_dark);
   }
   namespacestate::app {
   State<int> count;
   auto all = state_set(count);
   }
   namespacemsg {
   Message<int> increment;
   Message<int> decrement;
   }
   ShouldRender update() {
   usingnamespacestate::app;usingnamespacemsg;if (increment) {
   count += increment.get<0>();
   returntrue;
   }
   if (decrement) {
   count -= decrement.get<0>();
   returntrue;
   }
   returnfalse;
   }
   Node render() {
   return (
   div(
   className = (count > 10 && greater_than_10)
   )({
   "Hello! Your counter is ",
   count,
   button(onClick = increment(1))({
   "+1"
   }),
   button(onClick = decrement(1))({
   "-1"
   })
   })
   );
   }
   auto app = create_component(
   props::app::all,
   state::app::all,
   update,
   render
   );

4. 🎉 We can implement React-like API on C++

Modules

• spaic-css

  The CSS-in-C++ api

• spaic-dom

  The DOM renderer

• spaic

  The core runtime

Build Requirements

• emsdk *install guide