eiriklv/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="root"></div>
<script id="jsbin-javascript">
function isObject(obj) {
  return typeof obj === 'object' && obj instanceof Object;
}

function isSpecObject(obj) {
  return (
    isObject(obj) &&
    typeof obj.type === 'string' &&
    !!obj.type
  );
}

function hasChildren(spec) {
  return !!spec.children.length;
}

function createTextNode(text) {
  return {
    type: 'textNode',
    text: text
  };
}

function createElement(type, attributes = {}) {
  var children = Array.prototype.slice.call(arguments).slice(2);

  return {
    attributes: attributes,
    type: type,
    children: children.map(function (child) {
      return isSpecObject(child) ? child : createTextNode(child);
    }),
  };
}

function render(spec, mountNode) {
  function mount(DOMTree, mountNode) {
    if (mountNode.hasChildNodes()) {
      mountNode.replaceChild(DOMTree, mountNode.childNodes[0]);
    } else {
      mountNode.appendChild(DOMTree);
    }
  }

  function renderRecursively(spec, id = 0) {
    switch (spec.type) {
      case 'textNode':
        return document.createTextNode(spec.text);
      default:
        const newNode = document.createElement(spec.type);
        newNode.setAttribute('data-elem-id', id);

        if (hasChildren(spec)) {
          spec.children.forEach(function (child, i) {
            newNode.appendChild(renderRecursively(child, id + '.' + i))
          });
        }

        return newNode;
    }
  }

  mount(renderRecursively(spec), mountNode);
}

const div = createElement.bind(null, 'div');
const span = createElement.bind(null, 'span');
const h1 = createElement.bind(null, 'h1');
const p = createElement.bind(null, 'p');

const MyComponent = function (text) {
  return (
    div({ className: 'outer' },
      div({ className: 'inner-1' },
        span(null, 'Hello World ' + text)
      ),
      div({ className: 'inner-2' },
        span(null, 'Goodbye World')
      )
    )
  );
}

var number = 0;

render(MyComponent(number++), document.getElementById('root'));

// setInterval(function () {
//   render(MyComponent(number++), document.getElementById('root'));
// }, 100);
</script>


<script id="jsbin-source-javascript" type="text/javascript">function isObject(obj) {
  return typeof obj === 'object' && obj instanceof Object;
}

function isSpecObject(obj) {
  return (
    isObject(obj) &&
    typeof obj.type === 'string' &&
    !!obj.type
  );
}

function hasChildren(spec) {
  return !!spec.children.length;
}

function createTextNode(text) {
  return {
    type: 'textNode',
    text: text
  };
}

function createElement(type, attributes = {}) {
  var children = Array.prototype.slice.call(arguments).slice(2);

  return {
    attributes: attributes,
    type: type,
    children: children.map(function (child) {
      return isSpecObject(child) ? child : createTextNode(child);
    }),
  };
}

function render(spec, mountNode) {
  function mount(DOMTree, mountNode) {
    if (mountNode.hasChildNodes()) {
      mountNode.replaceChild(DOMTree, mountNode.childNodes[0]);
    } else {
      mountNode.appendChild(DOMTree);
    }
  }

  function renderRecursively(spec, id = 0) {
    switch (spec.type) {
      case 'textNode':
        return document.createTextNode(spec.text);
      default:
        const newNode = document.createElement(spec.type);
        newNode.setAttribute('data-elem-id', id);

        if (hasChildren(spec)) {
          spec.children.forEach(function (child, i) {
            newNode.appendChild(renderRecursively(child, id + '.' + i))
          });
        }

        return newNode;
    }
  }

  mount(renderRecursively(spec), mountNode);
}

const div = createElement.bind(null, 'div');
const span = createElement.bind(null, 'span');
const h1 = createElement.bind(null, 'h1');
const p = createElement.bind(null, 'p');

const MyComponent = function (text) {
  return (
    div({ className: 'outer' },
      div({ className: 'inner-1' },
        span(null, 'Hello World ' + text)
      ),
      div({ className: 'inner-2' },
        span(null, 'Goodbye World')
      )
    )
  );
}

var number = 0;

render(MyComponent(number++), document.getElementById('root'));

// setInterval(function () {
//   render(MyComponent(number++), document.getElementById('root'));
// }, 100);
</script></body>
</html>

## jsbin.lolavi.js
function isObject(obj) {
  return typeof obj === 'object' && obj instanceof Object;
}

function isSpecObject(obj) {
  return (
    isObject(obj) &&
    typeof obj.type === 'string' &&
    !!obj.type
  );
}

function hasChildren(spec) {
  return !!spec.children.length;
}

function createTextNode(text) {
  return {
    type: 'textNode',
    text: text
  };
}

function createElement(type, attributes = {}) {
  var children = Array.prototype.slice.call(arguments).slice(2);

  return {
    attributes: attributes,
    type: type,
    children: children.map(function (child) {
      return isSpecObject(child) ? child : createTextNode(child);
    }),
  };
}

function render(spec, mountNode) {
  function mount(DOMTree, mountNode) {
    if (mountNode.hasChildNodes()) {
      mountNode.replaceChild(DOMTree, mountNode.childNodes[0]);
    } else {
      mountNode.appendChild(DOMTree);
    }
  }

  function renderRecursively(spec, id = 0) {
    switch (spec.type) {
      case 'textNode':
        return document.createTextNode(spec.text);
      default:
        const newNode = document.createElement(spec.type);
        newNode.setAttribute('data-elem-id', id);

        if (hasChildren(spec)) {
          spec.children.forEach(function (child, i) {
            newNode.appendChild(renderRecursively(child, id + '.' + i))
          });
        }

        return newNode;
    }
  }

  mount(renderRecursively(spec), mountNode);
}

const div = createElement.bind(null, 'div');
const span = createElement.bind(null, 'span');
const h1 = createElement.bind(null, 'h1');
const p = createElement.bind(null, 'p');

const MyComponent = function (text) {
  return (
    div({ className: 'outer' },
      div({ className: 'inner-1' },
        span(null, 'Hello World ' + text)
      ),
      div({ className: 'inner-2' },
        span(null, 'Goodbye World')
      )
    )
  );
}

var number = 0;

render(MyComponent(number++), document.getElementById('root'));

// setInterval(function () {
//   render(MyComponent(number++), document.getElementById('root'));
// }, 100);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="root"></div>
	<script id="jsbin-javascript">
	function isObject(obj) {
	return typeof obj === 'object' && obj instanceof Object;
	}

	function isSpecObject(obj) {
	return (
	isObject(obj) &&
	typeof obj.type === 'string' &&
	!!obj.type
	);
	}

	function hasChildren(spec) {
	return !!spec.children.length;
	}

	function createTextNode(text) {
	return {
	type: 'textNode',
	text: text
	};
	}

	function createElement(type, attributes = {}) {
	var children = Array.prototype.slice.call(arguments).slice(2);

	return {
	attributes: attributes,
	type: type,
	children: children.map(function (child) {
	return isSpecObject(child) ? child : createTextNode(child);
	}),
	};
	}

	function render(spec, mountNode) {
	function mount(DOMTree, mountNode) {
	if (mountNode.hasChildNodes()) {
	mountNode.replaceChild(DOMTree, mountNode.childNodes[0]);
	} else {
	mountNode.appendChild(DOMTree);
	}
	}

	function renderRecursively(spec, id = 0) {
	switch (spec.type) {
	case 'textNode':
	return document.createTextNode(spec.text);
	default:
	const newNode = document.createElement(spec.type);
	newNode.setAttribute('data-elem-id', id);

	if (hasChildren(spec)) {
	spec.children.forEach(function (child, i) {
	newNode.appendChild(renderRecursively(child, id + '.' + i))
	});
	}

	return newNode;
	}
	}

	mount(renderRecursively(spec), mountNode);
	}

	const div = createElement.bind(null, 'div');
	const span = createElement.bind(null, 'span');
	const h1 = createElement.bind(null, 'h1');
	const p = createElement.bind(null, 'p');

	const MyComponent = function (text) {
	return (
	div({ className: 'outer' },
	div({ className: 'inner-1' },
	span(null, 'Hello World ' + text)
	),
	div({ className: 'inner-2' },
	span(null, 'Goodbye World')
	)
	)
	);
	}

	var number = 0;

	render(MyComponent(number++), document.getElementById('root'));

	// setInterval(function () {
	// render(MyComponent(number++), document.getElementById('root'));
	// }, 100);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">function isObject(obj) {
	return typeof obj === 'object' && obj instanceof Object;
	}

	function isSpecObject(obj) {
	return (
	isObject(obj) &&
	typeof obj.type === 'string' &&
	!!obj.type
	);
	}

	function hasChildren(spec) {
	return !!spec.children.length;
	}

	function createTextNode(text) {
	return {
	type: 'textNode',
	text: text
	};
	}

	function createElement(type, attributes = {}) {
	var children = Array.prototype.slice.call(arguments).slice(2);

	return {
	attributes: attributes,
	type: type,
	children: children.map(function (child) {
	return isSpecObject(child) ? child : createTextNode(child);
	}),
	};
	}

	function render(spec, mountNode) {
	function mount(DOMTree, mountNode) {
	if (mountNode.hasChildNodes()) {
	mountNode.replaceChild(DOMTree, mountNode.childNodes[0]);
	} else {
	mountNode.appendChild(DOMTree);
	}
	}

	function renderRecursively(spec, id = 0) {
	switch (spec.type) {
	case 'textNode':
	return document.createTextNode(spec.text);
	default:
	const newNode = document.createElement(spec.type);
	newNode.setAttribute('data-elem-id', id);

	if (hasChildren(spec)) {
	spec.children.forEach(function (child, i) {
	newNode.appendChild(renderRecursively(child, id + '.' + i))
	});
	}

	return newNode;
	}
	}

	mount(renderRecursively(spec), mountNode);
	}

	const div = createElement.bind(null, 'div');
	const span = createElement.bind(null, 'span');
	const h1 = createElement.bind(null, 'h1');
	const p = createElement.bind(null, 'p');

	const MyComponent = function (text) {
	return (
	div({ className: 'outer' },
	div({ className: 'inner-1' },
	span(null, 'Hello World ' + text)
	),
	div({ className: 'inner-2' },
	span(null, 'Goodbye World')
	)
	)
	);
	}

	var number = 0;

	render(MyComponent(number++), document.getElementById('root'));

	// setInterval(function () {
	// render(MyComponent(number++), document.getElementById('root'));
	// }, 100);
	</script></body>
	</html>