class Component {}
const React = {
  Component
};

function thisIsMyAwesomeFunction(elementTagName, props, ...children) {
  children = [].concat(...children);
  return {
    elementTagName,
    props,
    children
  };
}

function render(virtualDom): HTMLElement {
  let dom: HTMLElement = document.createElement(virtualDom.elementTagName);
  const props = virtualDom.props || {};
  for (let key in props) {
    dom.setAttribute(key, virtualDom.props[key]);
  }

  for (let child of virtualDom.children) {
    if (typeof child === 'string') {
      dom.appendChild(document.createTextNode(child));
    } else if (typeof child.elementTagName === 'function') {
      const childVirtualDom = child.elementTagName(child.props);
      dom.appendChild(render(childVirtualDom));
    } if (child.elementTagName.prototype === React.Component) {
      const instance = new child.elementTagName(child.props);
      const classVirtualDom = instance.render();
      instance.componentWillMount();
      dom.appendChild(render(classVirtualDom));
      instance.componentDidMount();
    } else {
      dom.appendChild(render(child));
    }
  }
  return dom;
}

const ReactDOM = {
  render
}

/**
 * Doc
 * @param props Some props
 */
const Items = (props) => {
  return (
    <ul>
      {props.values.map(value => <li>{value}</li>)}
    </ul>
  );
};

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Reactless JSX</h1>
        <p>This is a test of JSX outside of React</p>
        <Items values={['First', 'Second', 'Third']}/>
      </div>
    );
  }
}
const virtualDom = new MyComponent().render();
const dom = ReactDOM.render(virtualDom);
document.body.appendChild(dom);