render functional components with self state

superfine-stateful-draft.jsx

import { h, patch } from "superfine";

const stateful = (comp) => (props) => h("state", {
  oncreate: (element) => {
    const statefine = element.$$statefine = {};
    statefine.state = {};
    statefine.currentProps = props;
    statefine.selfRender = app(comp, element);
    statefine.setState = ss => setTimeout(() => statefine.selfRender(statefine.currentProps, statefine.state = ss({ ...statefine.state }), statefine.setState));
    statefine.selfRender(props, { ...statefine.state }, statefine.setState);
  },
  onupdate: (element) => {
    const statefine = element.$$statefine;
    statefine.selfRender(statefine.currentProps = props, { ...statefine.state }, statefine.setState);
  }
})

const DummyComponent = props => (
  <div>
    <h1>{props.count}</h1>
    <button onclick={() => render(props.count - 1)}>-</button>
    <button onclick={() => render(props.count + 1)}>+</button>
  </div>
)

const CleverComponent = stateful((props, state, setState) => (
  <div oncreate={() => setState(() => ({ count: 0 }))}>
    <h1>props: {props.count}</h1>
    <h1>state: {state.count}</h1>
    <button onclick={() => setState(s => ({ count: s.count - 1 }))}>-</button>
    <button onclick={() => setState(s => ({ count: s.count + 1 }))}>+</button>
  </div>
));

const Main = GLOBAL_STATE => (
  <div>
    <DummyComponent count={GLOBAL_STATE}/>
    <hr/>
    <CleverComponent count={GLOBAL_STATE}/>
    <hr/>
    <CleverComponent count={GLOBAL_STATE}/>
  </div>
);

const app = (view, container, node) => (...args) => node = patch(node, view(...args), container)

const render = app(Main, document.querySelector("#app"));

render(0);