mini-framework.js

let stateStack = [];
let currentStates = [];
let FRAMEWORK = {
  DOM(name, props, ...children) {
    props = props || {};
    if (typeof name == "string") {
      let elm = document.createElement(name);
      for (let key in props) {
        if (key != "children") {
          elm[key] = props[key];
        }
      }
      children = children.flat(Infinity);
      for (let i in children) {
        if (typeof children[i] == "string") {
          children[i] = document.createTextNode(children[i]);
        }
        if (children[i]) elm.appendChild(children[i]);
      }
      return elm;
    } else {
      props.children = children;
      stateStack.push([]);
      let elm = name(props);
      elm.__ = {
        name,
        props,
        states: stateStack.pop(),
        children
      };
      elm.__.states.forEach(state => state[2](elm));
      return elm;
    }
  },
  useState(value) {
    //this function should return an array where the first 2 entries are the data and a setter function.
    if (currentStates.length > 0) {
      let state = currentStates.shift();
      stateStack[stateStack.length - 1].push(state);
      return state;
    }
    let elm = null;
    let fn = nextval => {
      stateThing[0] = nextval;
      let oldelm = elm;
      currentStates = elm.__.states;
      let nextelm = FRAMEWORK.DOM(elm.__.name, elm.__.props, elm.__.children);
      oldelm.replaceWith(nextelm);
    };
    let setelm = nextelm => {
      elm = nextelm;
    };
    var stateThing = [value, fn, setelm];
    stateStack[stateStack.length - 1].push(stateThing);
    return stateThing;
  }
};
export default FRAMEWORK;