Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 15, 2016 21:02
Show Gist options
  • Save anonymous/bf36f2cc46d9fb8cd2e3da26ef38cf8f to your computer and use it in GitHub Desktop.
Save anonymous/bf36f2cc46d9fb8cd2e3da26ef38cf8f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/lolavi
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment