index.ts

async function bottom(props, resolve, parentDom) {
  const btn = document.createElement("bottom");
  parentDom.appendChild(btn);
  btn.onclick = (e) => {
    props.onClick(e, resolve);
  }
  return btn;
}

function html(elementName) {
  return async (props, resolve, parentDom) => {
    const el = document.createElement(elementName);
    // TODO
    return el;
  }
}

function wei(c, attributes, ...childs) {
  if (typeof c === "string") c = html(c);
  if (!attributes) attributes = {};
  attributes.childs = childs;
  const data = {};
  return (parentDom, resolve?) => {
    let promise;
    if (!resolve) {
      promise = new Promise(r => resolve = r);
    }
    // For example it can be used to validate a form before submit.
    if (attributes && attributes.resolve) {
      let parentResolve = resolve;
      resolve = attributes.resolve.bind(null, () => parentResolve);
    }

    c(attributes, d => {
      Object.assign(data, d);
      if (d.done) resolve();
    }, parentDom).then(domElement => {
      if (attributes && attributes.ref) {
        attributes.ref(domElement);
      }
      if (domElement && childs) {
        for (const w of childs) {
          if (typeof w === "function") {
            w(domElement, resolve);
          } else {
            domElement.appendChild(w);
          }
        }
      }
    });

    return promise;
  }
}

async function _main() {
  const c = wei("form", {}, [
    wei("p", {}, ["Text"]),
    wei(bottom, {
      onClick(e, r) {
        r();
      }
    })
  ]);
  const data = await c(document.body);
  console.log(data);
}