var Hello = ({ dateTime }) => { return ['h1', {}, [`It is: ${dateTime}`]]; }; var App = () => { return ['div', { 'className': 'header' }, [Hello({ dateTime: new Date() }), ['input', { 'type': 'submit', 'disabled': 'disabled' }, []] ] ]; } var d = ['div', { 'className': 'header' }, [['h1', {}, ['Hello']], ['input', { 'type': 'submit', 'disabled': 'disabled' }, []] ] ]; d = ['div', { 'className': 'header' }, [['h1', {}, ['Hello, how have you been?']], ['input', { 'type': 'submit', 'style': 'color: red;' }, []] ] ]; var e = createElement(d); render(e, $0) var d = ['div', { 'className': 'header' }, [['h1', {}, ['Hello']], ['input', { 'type': 'submit', 'disabled': 'disabled' }, []] ] ]; function createElement(node) { // an array: not text, number, or other primitive if (typeof node === 'object') { const [ tag, props, children ] = node; return { type: tag, props: { ...props, children: children.map(createElement) } }; } // primitives like text or number return { type: 'TEXT', props: { nodeValue: node, children: [] } }; } let renderTrees = {}; function render(element, container) { const tree = render_internal(element, container, renderTrees[container]); // render complete, store the updated tree renderTrees[container] = tree; } function render_internal(element, container, prevElement) { let domElement, children; if (!element && prevElement) { removeDOMElement(prevElement); return; } else if (element && !prevElement) { domElement = createDOMElement(element); } else if (element.type === prevElement.type) { domElement = prevElement.domElement; } else { removeDOMElement(prevElement); domElement = createDOMElement(element); } setDOMProps(element, domElement, prevElement); children = renderChildren(element, domElement, prevElement); if (!prevElement || domElement !== prevElement.domElement) { container.appendChild(domElement); } return { domElement: domElement, parent: container, type: element.type, props: { ...element.props, children: children } }; } function removeDOMElement(prevElement) { prevElement.parent.removeChild(prevElement.domElement); } function createDOMElement(element) { return element.type === 'TEXT' ? document.createTextNode(element.props.nodeValue) : document.createElement(element.type); } function setDOMProps(element, domElement, prevElement) { if (prevElement) { Object.keys(prevElement.props) .filter((key) => key !== 'children') .forEach((key) => { domElement[key] = ''; }); } Object.keys(element.props) .filter((key) => key !== 'children') .forEach((key) => { domElement[key] = element.props[key]; }); } function renderChildren(element, domElement, prevElement = { props: { children: [] }}) { const elementLen = element.props.children.length; const prevElementLen = prevElement.props.children.length; // remove now unused elements for (let i = elementLen; i < prevElementLen - elementLen; i++) { removeDOMElement(element.props.children[i]); } // render existing and new elements return element.props.children.map((child, i) => { const prevChild = i < prevElementLen ? prevElement.props.children[i] : undefined; return render_internal(child, domElement, prevChild); }); } var Hello = memo(({ dateTime }) => { return ['h1', {}, [`It is: ${dateTime}`]]; });