Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added exports#default #107

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added exports#default #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
396099f
Added exports#default
Dec 3, 2018
0785fc7
Semistandard fix
Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
86 changes: 43 additions & 43 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
var assert = require('assert')
var morph = require('./lib/morph')
var assert = require('assert').strict;
var morph = require('./lib/morph');

var TEXT_NODE = 3
var TEXT_NODE = 3;
// var DEBUG = false

module.exports = nanomorph
(module.exports = nanomorph).default = nanomorph;

// Morph one tree into another tree
//
Expand All @@ -27,11 +27,11 @@ function nanomorph (oldTree, newTree) {
// newTree && newTree.outerHTML
// )
// }
assert.equal(typeof oldTree, 'object', 'nanomorph: oldTree should be an object')
assert.equal(typeof newTree, 'object', 'nanomorph: newTree should be an object')
var tree = walk(newTree, oldTree)
assert.equal(typeof oldTree, 'object', 'nanomorph: oldTree should be an object');
assert.equal(typeof newTree, 'object', 'nanomorph: newTree should be an object');
var tree = walk(newTree, oldTree);
// if (DEBUG) console.log('=> morphed\n %s', tree.outerHTML)
return tree
return tree;
}

// Walk and morph a dom tree
Expand All @@ -44,17 +44,17 @@ function walk (newNode, oldNode) {
// )
// }
if (!oldNode) {
return newNode
return newNode;
} else if (!newNode) {
return null
return null;
} else if (newNode.isSameNode && newNode.isSameNode(oldNode)) {
return oldNode
return oldNode;
} else if (newNode.tagName !== oldNode.tagName) {
return newNode
return newNode;
} else {
morph(newNode, oldNode)
updateChildren(newNode, oldNode)
return oldNode
morph(newNode, oldNode);
updateChildren(newNode, oldNode);
return oldNode;
}
}

Expand All @@ -68,14 +68,14 @@ function updateChildren (newNode, oldNode) {
// newNode && newNode.outerHTML
// )
// }
var oldChild, newChild, morphed, oldMatch
var oldChild, newChild, morphed, oldMatch;

// The offset is only ever increased, and used for [i - offset] in the loop
var offset = 0
var offset = 0;

for (var i = 0; ; i++) {
oldChild = oldNode.childNodes[i]
newChild = newNode.childNodes[i - offset]
oldChild = oldNode.childNodes[i];
newChild = newNode.childNodes[i - offset];
// if (DEBUG) {
// console.log(
// '===\n- old\n %s\n- new\n %s',
Expand All @@ -85,65 +85,65 @@ function updateChildren (newNode, oldNode) {
// }
// Both nodes are empty, do nothing
if (!oldChild && !newChild) {
break
break;

// There is no new child, remove old
} else if (!newChild) {
oldNode.removeChild(oldChild)
i--
oldNode.removeChild(oldChild);
i--;

// There is no old child, add new
} else if (!oldChild) {
oldNode.appendChild(newChild)
offset++
oldNode.appendChild(newChild);
offset++;

// Both nodes are the same, morph
} else if (same(newChild, oldChild)) {
morphed = walk(newChild, oldChild)
morphed = walk(newChild, oldChild);
if (morphed !== oldChild) {
oldNode.replaceChild(morphed, oldChild)
offset++
oldNode.replaceChild(morphed, oldChild);
offset++;
}

// Both nodes do not share an ID or a placeholder, try reorder
} else {
oldMatch = null
oldMatch = null;

// Try and find a similar node somewhere in the tree
for (var j = i; j < oldNode.childNodes.length; j++) {
if (same(oldNode.childNodes[j], newChild)) {
oldMatch = oldNode.childNodes[j]
break
oldMatch = oldNode.childNodes[j];
break;
}
}

// If there was a node with the same ID or placeholder in the old list
if (oldMatch) {
morphed = walk(newChild, oldMatch)
if (morphed !== oldMatch) offset++
oldNode.insertBefore(morphed, oldChild)
morphed = walk(newChild, oldMatch);
if (morphed !== oldMatch) offset++;
oldNode.insertBefore(morphed, oldChild);

// It's safe to morph two nodes in-place if neither has an ID
} else if (!newChild.id && !oldChild.id) {
morphed = walk(newChild, oldChild)
morphed = walk(newChild, oldChild);
if (morphed !== oldChild) {
oldNode.replaceChild(morphed, oldChild)
offset++
oldNode.replaceChild(morphed, oldChild);
offset++;
}

// Insert the node at the index if we couldn't morph or find a matching node
} else {
oldNode.insertBefore(newChild, oldChild)
offset++
oldNode.insertBefore(newChild, oldChild);
offset++;
}
}
}
}

function same (a, b) {
if (a.id) return a.id === b.id
if (a.isSameNode) return a.isSameNode(b)
if (a.tagName !== b.tagName) return false
if (a.type === TEXT_NODE) return a.nodeValue === b.nodeValue
return false
if (a.id) return a.id === b.id;
if (a.isSameNode) return a.isSameNode(b);
if (a.tagName !== b.tagName) return false;
if (a.type === TEXT_NODE) return a.nodeValue === b.nodeValue;
return false;
}
2 changes: 1 addition & 1 deletion lib/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ module.exports = [
'oncontextmenu',
'onfocusin',
'onfocusout'
]
];
122 changes: 61 additions & 61 deletions lib/morph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
var events = require('./events')
var eventsLength = events.length
var events = require('./events');
var eventsLength = events.length;

var ELEMENT_NODE = 1
var TEXT_NODE = 3
var COMMENT_NODE = 8
var ELEMENT_NODE = 1;
var TEXT_NODE = 3;
var COMMENT_NODE = 8;

module.exports = morph
module.exports = morph;

// diff elements and apply the resulting patch to the old node
// (obj, obj) -> null
function morph (newNode, oldNode) {
var nodeType = newNode.nodeType
var nodeName = newNode.nodeName
var nodeType = newNode.nodeType;
var nodeName = newNode.nodeName;

if (nodeType === ELEMENT_NODE) {
copyAttrs(newNode, oldNode)
copyAttrs(newNode, oldNode);
}

if (nodeType === TEXT_NODE || nodeType === COMMENT_NODE) {
if (oldNode.nodeValue !== newNode.nodeValue) {
oldNode.nodeValue = newNode.nodeValue
oldNode.nodeValue = newNode.nodeValue;
}
}

// Some DOM nodes are weird
// https://github.com/patrick-steele-idem/morphdom/blob/master/src/specialElHandlers.js
if (nodeName === 'INPUT') updateInput(newNode, oldNode)
else if (nodeName === 'OPTION') updateOption(newNode, oldNode)
else if (nodeName === 'TEXTAREA') updateTextarea(newNode, oldNode)
if (nodeName === 'INPUT') updateInput(newNode, oldNode);
else if (nodeName === 'OPTION') updateOption(newNode, oldNode);
else if (nodeName === 'TEXTAREA') updateTextarea(newNode, oldNode);

copyEvents(newNode, oldNode)
copyEvents(newNode, oldNode);
}

function copyAttrs (newNode, oldNode) {
var oldAttrs = oldNode.attributes
var newAttrs = newNode.attributes
var attrNamespaceURI = null
var attrValue = null
var fromValue = null
var attrName = null
var attr = null
var oldAttrs = oldNode.attributes;
var newAttrs = newNode.attributes;
var attrNamespaceURI = null;
var attrValue = null;
var fromValue = null;
var attrName = null;
var attr = null;

for (var i = newAttrs.length - 1; i >= 0; --i) {
attr = newAttrs[i]
attrName = attr.name
attrNamespaceURI = attr.namespaceURI
attrValue = attr.value
attr = newAttrs[i];
attrName = attr.name;
attrNamespaceURI = attr.namespaceURI;
attrValue = attr.value;
if (attrNamespaceURI) {
attrName = attr.localName || attrName
fromValue = oldNode.getAttributeNS(attrNamespaceURI, attrName)
attrName = attr.localName || attrName;
fromValue = oldNode.getAttributeNS(attrNamespaceURI, attrName);
if (fromValue !== attrValue) {
oldNode.setAttributeNS(attrNamespaceURI, attrName, attrValue)
oldNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
}
} else {
if (!oldNode.hasAttribute(attrName)) {
oldNode.setAttribute(attrName, attrValue)
oldNode.setAttribute(attrName, attrValue);
} else {
fromValue = oldNode.getAttribute(attrName)
fromValue = oldNode.getAttribute(attrName);
if (fromValue !== attrValue) {
// apparently values are always cast to strings, ah well
if (attrValue === 'null' || attrValue === 'undefined') {
oldNode.removeAttribute(attrName)
oldNode.removeAttribute(attrName);
} else {
oldNode.setAttribute(attrName, attrValue)
oldNode.setAttribute(attrName, attrValue);
}
}
}
Expand All @@ -72,19 +72,19 @@ function copyAttrs (newNode, oldNode) {
// Remove any extra attributes found on the original DOM element that
// weren't found on the target element.
for (var j = oldAttrs.length - 1; j >= 0; --j) {
attr = oldAttrs[j]
attr = oldAttrs[j];
if (attr.specified !== false) {
attrName = attr.name
attrNamespaceURI = attr.namespaceURI
attrName = attr.name;
attrNamespaceURI = attr.namespaceURI;

if (attrNamespaceURI) {
attrName = attr.localName || attrName
attrName = attr.localName || attrName;
if (!newNode.hasAttributeNS(attrNamespaceURI, attrName)) {
oldNode.removeAttributeNS(attrNamespaceURI, attrName)
oldNode.removeAttributeNS(attrNamespaceURI, attrName);
}
} else {
if (!newNode.hasAttributeNS(null, attrName)) {
oldNode.removeAttribute(attrName)
oldNode.removeAttribute(attrName);
}
}
}
Expand All @@ -93,72 +93,72 @@ function copyAttrs (newNode, oldNode) {

function copyEvents (newNode, oldNode) {
for (var i = 0; i < eventsLength; i++) {
var ev = events[i]
if (newNode[ev]) { // if new element has a whitelisted attribute
oldNode[ev] = newNode[ev] // update existing element
} else if (oldNode[ev]) { // if existing element has it and new one doesnt
oldNode[ev] = undefined // remove it from existing element
var ev = events[i];
if (newNode[ev]) { // if new element has a whitelisted attribute
oldNode[ev] = newNode[ev]; // update existing element
} else if (oldNode[ev]) { // if existing element has it and new one doesnt
oldNode[ev] = undefined; // remove it from existing element
}
}
}

function updateOption (newNode, oldNode) {
updateAttribute(newNode, oldNode, 'selected')
updateAttribute(newNode, oldNode, 'selected');
}

// The "value" attribute is special for the <input> element since it sets the
// initial value. Changing the "value" attribute without changing the "value"
// property will have no effect since it is only used to the set the initial
// value. Similar for the "checked" attribute, and "disabled".
function updateInput (newNode, oldNode) {
var newValue = newNode.value
var oldValue = oldNode.value
var newValue = newNode.value;
var oldValue = oldNode.value;

updateAttribute(newNode, oldNode, 'checked')
updateAttribute(newNode, oldNode, 'disabled')
updateAttribute(newNode, oldNode, 'checked');
updateAttribute(newNode, oldNode, 'disabled');

if (newValue !== oldValue) {
oldNode.setAttribute('value', newValue)
oldNode.value = newValue
oldNode.setAttribute('value', newValue);
oldNode.value = newValue;
}

if (newValue === 'null') {
oldNode.value = ''
oldNode.removeAttribute('value')
oldNode.value = '';
oldNode.removeAttribute('value');
}

if (!newNode.hasAttributeNS(null, 'value')) {
oldNode.removeAttribute('value')
oldNode.removeAttribute('value');
} else if (oldNode.type === 'range') {
// this is so elements like slider move their UI thingy
oldNode.value = newValue
oldNode.value = newValue;
}
}

function updateTextarea (newNode, oldNode) {
var newValue = newNode.value
var newValue = newNode.value;
if (newValue !== oldNode.value) {
oldNode.value = newValue
oldNode.value = newValue;
}

if (oldNode.firstChild && oldNode.firstChild.nodeValue !== newValue) {
// Needed for IE. Apparently IE sets the placeholder as the
// node value and vise versa. This ignores an empty update.
if (newValue === '' && oldNode.firstChild.nodeValue === oldNode.placeholder) {
return
return;
}

oldNode.firstChild.nodeValue = newValue
oldNode.firstChild.nodeValue = newValue;
}
}

function updateAttribute (newNode, oldNode, name) {
if (newNode[name] !== oldNode[name]) {
oldNode[name] = newNode[name]
oldNode[name] = newNode[name];
if (newNode[name]) {
oldNode.setAttribute(name, '')
oldNode.setAttribute(name, '');
} else {
oldNode.removeAttribute(name)
oldNode.removeAttribute(name);
}
}
}