Socket
Socket
Sign inDemoInstall

morphdom

Package Overview
Dependencies
Maintainers
6
Versions
71
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

morphdom - npm Package Compare versions

Comparing version 2.5.2 to 2.5.3

39

dist/morphdom-esm.js

@@ -10,2 +10,3 @@ function morphAttrs(fromNode, toNode) {

// update attributes on original DOM element
for (i = attrs.length - 1; i >= 0; --i) {

@@ -63,6 +64,13 @@ attr = attrs[i];

/**
* This is about the same
* var html = new DOMParser().parseFromString(str, 'text/html');
* return html.body.firstChild;
*
* @method toElement
* @param {String} str
*/
function toElement(str) {
if (!range && doc.createRange) {
range = doc.createRange();
range.selectNode(doc.body);
}

@@ -404,3 +412,3 @@

curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
morphEl(unmatchedFromEl, curChild);
morphChildren(unmatchedFromEl, curChild);
}

@@ -414,3 +422,3 @@ }

function morphEl(fromEl, toEl, childrenOnly) {
function morphChildren(fromEl, toEl, childrenOnly) {
var toElKey = getNodeKey(toEl);

@@ -420,3 +428,3 @@ var curFromNodeKey;

if (toElKey) {
// If an element with an ID is being morphed then it is will be in the final
// If an element with an ID is being morphed then it will be in the final
// DOM so clear it out of the saved elements collection

@@ -431,2 +439,3 @@ delete fromNodesLookup[toElKey];

if (!childrenOnly) {
// optional
if (onBeforeElUpdated(fromEl, toEl) === false) {

@@ -436,3 +445,5 @@ return;

// update attributes on original DOM element first
morphAttrs(fromEl, toEl);
// optional
onElUpdated(fromEl);

@@ -454,2 +465,3 @@

// walk the children
outer: while (curToNodeChild) {

@@ -459,2 +471,3 @@ toNextSibling = curToNodeChild.nextSibling;

// walk the fromNode children all the way through
while (curFromNodeChild) {

@@ -487,3 +500,3 @@ fromNextSibling = curFromNodeChild.nextSibling;

if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
if (curFromNodeChild.nextSibling === matchingFromEl) {
if (fromNextSibling === matchingFromEl) {
// Special case for single element removals. To avoid removing the original

@@ -497,3 +510,3 @@ // DOM node out of the tree (since that can break CSS transitions, etc.),

// We found a matching keyed element somewhere in the original DOM tree.
// Let's moving the original DOM node into the current position and morph
// Let's move the original DOM node into the current position and morph
// it.

@@ -506,3 +519,3 @@

fromNextSibling = curFromNodeChild.nextSibling;
// fromNextSibling = curFromNodeChild.nextSibling;

@@ -537,3 +550,4 @@ if (curFromNodeKey) {

// target DOM node.
morphEl(curFromNodeChild, curToNodeChild);
// MORPH
morphChildren(curFromNodeChild, curToNodeChild);
}

@@ -577,3 +591,3 @@

curFromNodeChild = fromNextSibling;
}
} // END: while(curFromNodeChild) {}

@@ -586,3 +600,4 @@ // If we got this far then we did not find a candidate match for

fromEl.appendChild(matchingFromEl);
morphEl(matchingFromEl, curToNodeChild);
// MORPH
morphChildren(matchingFromEl, curToNodeChild);
} else {

@@ -629,3 +644,3 @@ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);

}
} // END: morphEl(...)
} // END: morphChildren(...)

@@ -668,3 +683,3 @@ var morphedNode = fromNode;

} else {
morphEl(morphedNode, toNode, childrenOnly);
morphChildren(morphedNode, toNode, childrenOnly);

@@ -671,0 +686,0 @@ // We now need to loop over any keyed nodes that might need to be

@@ -8,6 +8,13 @@ 'use strict';

/**
* This is about the same
* var html = new DOMParser().parseFromString(str, 'text/html');
* return html.body.firstChild;
*
* @method toElement
* @param {String} str
*/
function toElement(str) {
if (!range && doc.createRange) {
range = doc.createRange();
range.selectNode(doc.body);
}

@@ -349,3 +356,3 @@

curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
morphEl(unmatchedFromEl, curChild);
morphChildren(unmatchedFromEl, curChild);
}

@@ -359,3 +366,3 @@ }

function morphEl(fromEl, toEl, childrenOnly) {
function morphChildren(fromEl, toEl, childrenOnly) {
var toElKey = getNodeKey(toEl);

@@ -365,3 +372,3 @@ var curFromNodeKey;

if (toElKey) {
// If an element with an ID is being morphed then it is will be in the final
// If an element with an ID is being morphed then it will be in the final
// DOM so clear it out of the saved elements collection

@@ -376,2 +383,3 @@ delete fromNodesLookup[toElKey];

if (!childrenOnly) {
// optional
if (onBeforeElUpdated(fromEl, toEl) === false) {

@@ -381,3 +389,5 @@ return;

// update attributes on original DOM element first
morphAttrs(fromEl, toEl);
// optional
onElUpdated(fromEl);

@@ -399,2 +409,3 @@

// walk the children
outer: while (curToNodeChild) {

@@ -404,2 +415,3 @@ toNextSibling = curToNodeChild.nextSibling;

// walk the fromNode children all the way through
while (curFromNodeChild) {

@@ -432,3 +444,3 @@ fromNextSibling = curFromNodeChild.nextSibling;

if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
if (curFromNodeChild.nextSibling === matchingFromEl) {
if (fromNextSibling === matchingFromEl) {
// Special case for single element removals. To avoid removing the original

@@ -442,3 +454,3 @@ // DOM node out of the tree (since that can break CSS transitions, etc.),

// We found a matching keyed element somewhere in the original DOM tree.
// Let's moving the original DOM node into the current position and morph
// Let's move the original DOM node into the current position and morph
// it.

@@ -451,3 +463,3 @@

fromNextSibling = curFromNodeChild.nextSibling;
// fromNextSibling = curFromNodeChild.nextSibling;

@@ -482,3 +494,4 @@ if (curFromNodeKey) {

// target DOM node.
morphEl(curFromNodeChild, curToNodeChild);
// MORPH
morphChildren(curFromNodeChild, curToNodeChild);
}

@@ -522,3 +535,3 @@

curFromNodeChild = fromNextSibling;
}
} // END: while(curFromNodeChild) {}

@@ -531,3 +544,4 @@ // If we got this far then we did not find a candidate match for

fromEl.appendChild(matchingFromEl);
morphEl(matchingFromEl, curToNodeChild);
// MORPH
morphChildren(matchingFromEl, curToNodeChild);
} else {

@@ -574,3 +588,3 @@ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);

}
} // END: morphEl(...)
} // END: morphChildren(...)

@@ -613,3 +627,3 @@ var morphedNode = fromNode;

} else {
morphEl(morphedNode, toNode, childrenOnly);
morphChildren(morphedNode, toNode, childrenOnly);

@@ -616,0 +630,0 @@ // We now need to loop over any keyed nodes that might need to be

@@ -16,2 +16,3 @@ (function (global, factory) {

// update attributes on original DOM element
for (i = attrs.length - 1; i >= 0; --i) {

@@ -69,6 +70,13 @@ attr = attrs[i];

/**
* This is about the same
* var html = new DOMParser().parseFromString(str, 'text/html');
* return html.body.firstChild;
*
* @method toElement
* @param {String} str
*/
function toElement(str) {
if (!range && doc.createRange) {
range = doc.createRange();
range.selectNode(doc.body);
}

@@ -410,3 +418,3 @@

curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
morphEl(unmatchedFromEl, curChild);
morphChildren(unmatchedFromEl, curChild);
}

@@ -420,3 +428,3 @@ }

function morphEl(fromEl, toEl, childrenOnly) {
function morphChildren(fromEl, toEl, childrenOnly) {
var toElKey = getNodeKey(toEl);

@@ -426,3 +434,3 @@ var curFromNodeKey;

if (toElKey) {
// If an element with an ID is being morphed then it is will be in the final
// If an element with an ID is being morphed then it will be in the final
// DOM so clear it out of the saved elements collection

@@ -437,2 +445,3 @@ delete fromNodesLookup[toElKey];

if (!childrenOnly) {
// optional
if (onBeforeElUpdated(fromEl, toEl) === false) {

@@ -442,3 +451,5 @@ return;

// update attributes on original DOM element first
morphAttrs(fromEl, toEl);
// optional
onElUpdated(fromEl);

@@ -460,2 +471,3 @@

// walk the children
outer: while (curToNodeChild) {

@@ -465,2 +477,3 @@ toNextSibling = curToNodeChild.nextSibling;

// walk the fromNode children all the way through
while (curFromNodeChild) {

@@ -493,3 +506,3 @@ fromNextSibling = curFromNodeChild.nextSibling;

if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
if (curFromNodeChild.nextSibling === matchingFromEl) {
if (fromNextSibling === matchingFromEl) {
// Special case for single element removals. To avoid removing the original

@@ -503,3 +516,3 @@ // DOM node out of the tree (since that can break CSS transitions, etc.),

// We found a matching keyed element somewhere in the original DOM tree.
// Let's moving the original DOM node into the current position and morph
// Let's move the original DOM node into the current position and morph
// it.

@@ -512,3 +525,3 @@

fromNextSibling = curFromNodeChild.nextSibling;
// fromNextSibling = curFromNodeChild.nextSibling;

@@ -543,3 +556,4 @@ if (curFromNodeKey) {

// target DOM node.
morphEl(curFromNodeChild, curToNodeChild);
// MORPH
morphChildren(curFromNodeChild, curToNodeChild);
}

@@ -583,3 +597,3 @@

curFromNodeChild = fromNextSibling;
}
} // END: while(curFromNodeChild) {}

@@ -592,3 +606,4 @@ // If we got this far then we did not find a candidate match for

fromEl.appendChild(matchingFromEl);
morphEl(matchingFromEl, curToNodeChild);
// MORPH
morphChildren(matchingFromEl, curToNodeChild);
} else {

@@ -635,3 +650,3 @@ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);

}
} // END: morphEl(...)
} // END: morphChildren(...)

@@ -674,3 +689,3 @@ var morphedNode = fromNode;

} else {
morphEl(morphedNode, toNode, childrenOnly);
morphChildren(morphedNode, toNode, childrenOnly);

@@ -677,0 +692,0 @@ // We now need to loop over any keyed nodes that might need to be

@@ -1,1 +0,1 @@

(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.morphdom=factory())})(this,function(){"use strict";function morphAttrs(fromNode,toNode){var attrs=toNode.attributes;var i;var attr;var attrName;var attrNamespaceURI;var attrValue;var fromValue;for(i=attrs.length-1;i>=0;--i){attr=attrs[i];attrName=attr.name;attrNamespaceURI=attr.namespaceURI;attrValue=attr.value;if(attrNamespaceURI){attrName=attr.localName||attrName;fromValue=fromNode.getAttributeNS(attrNamespaceURI,attrName);if(fromValue!==attrValue){fromNode.setAttributeNS(attrNamespaceURI,attrName,attrValue)}}else{fromValue=fromNode.getAttribute(attrName);if(fromValue!==attrValue){fromNode.setAttribute(attrName,attrValue)}}}attrs=fromNode.attributes;for(i=attrs.length-1;i>=0;--i){attr=attrs[i];if(attr.specified!==false){attrName=attr.name;attrNamespaceURI=attr.namespaceURI;if(attrNamespaceURI){attrName=attr.localName||attrName;if(!toNode.hasAttributeNS(attrNamespaceURI,attrName)){fromNode.removeAttributeNS(attrNamespaceURI,attrName)}}else{if(!toNode.hasAttribute(attrName)){fromNode.removeAttribute(attrName)}}}}}var range;var NS_XHTML="http://www.w3.org/1999/xhtml";var doc=typeof document==="undefined"?undefined:document;function toElement(str){if(!range&&doc.createRange){range=doc.createRange();range.selectNode(doc.body)}var fragment;if(range&&range.createContextualFragment){fragment=range.createContextualFragment(str)}else{fragment=doc.createElement("body");fragment.innerHTML=str}return fragment.childNodes[0]}function compareNodeNames(fromEl,toEl){var fromNodeName=fromEl.nodeName;var toNodeName=toEl.nodeName;if(fromNodeName===toNodeName){return true}if(toEl.actualize&&fromNodeName.charCodeAt(0)<91&&toNodeName.charCodeAt(0)>90){return fromNodeName===toNodeName.toUpperCase()}else{return false}}function createElementNS(name,namespaceURI){return!namespaceURI||namespaceURI===NS_XHTML?doc.createElement(name):doc.createElementNS(namespaceURI,name)}function moveChildren(fromEl,toEl){var curChild=fromEl.firstChild;while(curChild){var nextChild=curChild.nextSibling;toEl.appendChild(curChild);curChild=nextChild}return toEl}function syncBooleanAttrProp(fromEl,toEl,name){if(fromEl[name]!==toEl[name]){fromEl[name]=toEl[name];if(fromEl[name]){fromEl.setAttribute(name,"")}else{fromEl.removeAttribute(name)}}}var specialElHandlers={OPTION:function(fromEl,toEl){var parentNode=fromEl.parentNode;if(parentNode){var parentName=parentNode.nodeName.toUpperCase();if(parentName==="OPTGROUP"){parentNode=parentNode.parentNode;parentName=parentNode&&parentNode.nodeName.toUpperCase()}if(parentName==="SELECT"&&!parentNode.hasAttribute("multiple")){if(fromEl.hasAttribute("selected")&&!toEl.selected){fromEl.setAttribute("selected","selected");fromEl.removeAttribute("selected")}parentNode.selectedIndex=-1}}syncBooleanAttrProp(fromEl,toEl,"selected")},INPUT:function(fromEl,toEl){syncBooleanAttrProp(fromEl,toEl,"checked");syncBooleanAttrProp(fromEl,toEl,"disabled");if(fromEl.value!==toEl.value){fromEl.value=toEl.value}if(!toEl.hasAttribute("value")){fromEl.removeAttribute("value")}},TEXTAREA:function(fromEl,toEl){var newValue=toEl.value;if(fromEl.value!==newValue){fromEl.value=newValue}var firstChild=fromEl.firstChild;if(firstChild){var oldValue=firstChild.nodeValue;if(oldValue==newValue||!newValue&&oldValue==fromEl.placeholder){return}firstChild.nodeValue=newValue}},SELECT:function(fromEl,toEl){if(!toEl.hasAttribute("multiple")){var selectedIndex=-1;var i=0;var curChild=fromEl.firstChild;var optgroup;var nodeName;while(curChild){nodeName=curChild.nodeName&&curChild.nodeName.toUpperCase();if(nodeName==="OPTGROUP"){optgroup=curChild;curChild=optgroup.firstChild}else{if(nodeName==="OPTION"){if(curChild.hasAttribute("selected")){selectedIndex=i;break}i++}curChild=curChild.nextSibling;if(!curChild&&optgroup){curChild=optgroup.nextSibling;optgroup=null}}}fromEl.selectedIndex=selectedIndex}}};var ELEMENT_NODE=1;var TEXT_NODE=3;var COMMENT_NODE=8;function noop(){}function defaultGetNodeKey(node){return node.id}function morphdomFactory(morphAttrs){return function morphdom(fromNode,toNode,options){if(!options){options={}}if(typeof toNode==="string"){if(fromNode.nodeName==="#document"||fromNode.nodeName==="HTML"){var toNodeHtml=toNode;toNode=doc.createElement("html");toNode.innerHTML=toNodeHtml}else{toNode=toElement(toNode)}}var getNodeKey=options.getNodeKey||defaultGetNodeKey;var onBeforeNodeAdded=options.onBeforeNodeAdded||noop;var onNodeAdded=options.onNodeAdded||noop;var onBeforeElUpdated=options.onBeforeElUpdated||noop;var onElUpdated=options.onElUpdated||noop;var onBeforeNodeDiscarded=options.onBeforeNodeDiscarded||noop;var onNodeDiscarded=options.onNodeDiscarded||noop;var onBeforeElChildrenUpdated=options.onBeforeElChildrenUpdated||noop;var childrenOnly=options.childrenOnly===true;var fromNodesLookup={};var keyedRemovalList;function addKeyedRemoval(key){if(keyedRemovalList){keyedRemovalList.push(key)}else{keyedRemovalList=[key]}}function walkDiscardedChildNodes(node,skipKeyedNodes){if(node.nodeType===ELEMENT_NODE){var curChild=node.firstChild;while(curChild){var key=undefined;if(skipKeyedNodes&&(key=getNodeKey(curChild))){addKeyedRemoval(key)}else{onNodeDiscarded(curChild);if(curChild.firstChild){walkDiscardedChildNodes(curChild,skipKeyedNodes)}}curChild=curChild.nextSibling}}}function removeNode(node,parentNode,skipKeyedNodes){if(onBeforeNodeDiscarded(node)===false){return}if(parentNode){parentNode.removeChild(node)}onNodeDiscarded(node);walkDiscardedChildNodes(node,skipKeyedNodes)}function indexTree(node){if(node.nodeType===ELEMENT_NODE){var curChild=node.firstChild;while(curChild){var key=getNodeKey(curChild);if(key){fromNodesLookup[key]=curChild}indexTree(curChild);curChild=curChild.nextSibling}}}indexTree(fromNode);function handleNodeAdded(el){onNodeAdded(el);var curChild=el.firstChild;while(curChild){var nextSibling=curChild.nextSibling;var key=getNodeKey(curChild);if(key){var unmatchedFromEl=fromNodesLookup[key];if(unmatchedFromEl&&compareNodeNames(curChild,unmatchedFromEl)){curChild.parentNode.replaceChild(unmatchedFromEl,curChild);morphEl(unmatchedFromEl,curChild)}}handleNodeAdded(curChild);curChild=nextSibling}}function morphEl(fromEl,toEl,childrenOnly){var toElKey=getNodeKey(toEl);var curFromNodeKey;if(toElKey){delete fromNodesLookup[toElKey]}if(toNode.isSameNode&&toNode.isSameNode(fromNode)){return}if(!childrenOnly){if(onBeforeElUpdated(fromEl,toEl)===false){return}morphAttrs(fromEl,toEl);onElUpdated(fromEl);if(onBeforeElChildrenUpdated(fromEl,toEl)===false){return}}if(fromEl.nodeName!=="TEXTAREA"){var curToNodeChild=toEl.firstChild;var curFromNodeChild=fromEl.firstChild;var curToNodeKey;var fromNextSibling;var toNextSibling;var matchingFromEl;outer:while(curToNodeChild){toNextSibling=curToNodeChild.nextSibling;curToNodeKey=getNodeKey(curToNodeChild);while(curFromNodeChild){fromNextSibling=curFromNodeChild.nextSibling;if(curToNodeChild.isSameNode&&curToNodeChild.isSameNode(curFromNodeChild)){curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling;continue outer}curFromNodeKey=getNodeKey(curFromNodeChild);var curFromNodeType=curFromNodeChild.nodeType;var isCompatible=undefined;if(curFromNodeType===curToNodeChild.nodeType){if(curFromNodeType===ELEMENT_NODE){if(curToNodeKey){if(curToNodeKey!==curFromNodeKey){if(matchingFromEl=fromNodesLookup[curToNodeKey]){if(curFromNodeChild.nextSibling===matchingFromEl){isCompatible=false}else{fromEl.insertBefore(matchingFromEl,curFromNodeChild);fromNextSibling=curFromNodeChild.nextSibling;if(curFromNodeKey){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=matchingFromEl}}else{isCompatible=false}}}else if(curFromNodeKey){isCompatible=false}isCompatible=isCompatible!==false&&compareNodeNames(curFromNodeChild,curToNodeChild);if(isCompatible){morphEl(curFromNodeChild,curToNodeChild)}}else if(curFromNodeType===TEXT_NODE||curFromNodeType==COMMENT_NODE){isCompatible=true;if(curFromNodeChild.nodeValue!==curToNodeChild.nodeValue){curFromNodeChild.nodeValue=curToNodeChild.nodeValue}}}if(isCompatible){curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling;continue outer}if(curFromNodeKey){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=fromNextSibling}if(curToNodeKey&&(matchingFromEl=fromNodesLookup[curToNodeKey])&&compareNodeNames(matchingFromEl,curToNodeChild)){fromEl.appendChild(matchingFromEl);morphEl(matchingFromEl,curToNodeChild)}else{var onBeforeNodeAddedResult=onBeforeNodeAdded(curToNodeChild);if(onBeforeNodeAddedResult!==false){if(onBeforeNodeAddedResult){curToNodeChild=onBeforeNodeAddedResult}if(curToNodeChild.actualize){curToNodeChild=curToNodeChild.actualize(fromEl.ownerDocument||doc)}fromEl.appendChild(curToNodeChild);handleNodeAdded(curToNodeChild)}}curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling}while(curFromNodeChild){fromNextSibling=curFromNodeChild.nextSibling;if(curFromNodeKey=getNodeKey(curFromNodeChild)){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=fromNextSibling}}var specialElHandler=specialElHandlers[fromEl.nodeName];if(specialElHandler){specialElHandler(fromEl,toEl)}}var morphedNode=fromNode;var morphedNodeType=morphedNode.nodeType;var toNodeType=toNode.nodeType;if(!childrenOnly){if(morphedNodeType===ELEMENT_NODE){if(toNodeType===ELEMENT_NODE){if(!compareNodeNames(fromNode,toNode)){onNodeDiscarded(fromNode);morphedNode=moveChildren(fromNode,createElementNS(toNode.nodeName,toNode.namespaceURI))}}else{morphedNode=toNode}}else if(morphedNodeType===TEXT_NODE||morphedNodeType===COMMENT_NODE){if(toNodeType===morphedNodeType){if(morphedNode.nodeValue!==toNode.nodeValue){morphedNode.nodeValue=toNode.nodeValue}return morphedNode}else{morphedNode=toNode}}}if(morphedNode===toNode){onNodeDiscarded(fromNode)}else{morphEl(morphedNode,toNode,childrenOnly);if(keyedRemovalList){for(var i=0,len=keyedRemovalList.length;i<len;i++){var elToRemove=fromNodesLookup[keyedRemovalList[i]];if(elToRemove){removeNode(elToRemove,elToRemove.parentNode,false)}}}}if(!childrenOnly&&morphedNode!==fromNode&&fromNode.parentNode){if(morphedNode.actualize){morphedNode=morphedNode.actualize(fromNode.ownerDocument||doc)}fromNode.parentNode.replaceChild(morphedNode,fromNode)}return morphedNode}}var morphdom=morphdomFactory(morphAttrs);return morphdom});
(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.morphdom=factory())})(this,function(){"use strict";function morphAttrs(fromNode,toNode){var attrs=toNode.attributes;var i;var attr;var attrName;var attrNamespaceURI;var attrValue;var fromValue;for(i=attrs.length-1;i>=0;--i){attr=attrs[i];attrName=attr.name;attrNamespaceURI=attr.namespaceURI;attrValue=attr.value;if(attrNamespaceURI){attrName=attr.localName||attrName;fromValue=fromNode.getAttributeNS(attrNamespaceURI,attrName);if(fromValue!==attrValue){fromNode.setAttributeNS(attrNamespaceURI,attrName,attrValue)}}else{fromValue=fromNode.getAttribute(attrName);if(fromValue!==attrValue){fromNode.setAttribute(attrName,attrValue)}}}attrs=fromNode.attributes;for(i=attrs.length-1;i>=0;--i){attr=attrs[i];if(attr.specified!==false){attrName=attr.name;attrNamespaceURI=attr.namespaceURI;if(attrNamespaceURI){attrName=attr.localName||attrName;if(!toNode.hasAttributeNS(attrNamespaceURI,attrName)){fromNode.removeAttributeNS(attrNamespaceURI,attrName)}}else{if(!toNode.hasAttribute(attrName)){fromNode.removeAttribute(attrName)}}}}}var range;var NS_XHTML="http://www.w3.org/1999/xhtml";var doc=typeof document==="undefined"?undefined:document;function toElement(str){if(!range&&doc.createRange){range=doc.createRange()}var fragment;if(range&&range.createContextualFragment){fragment=range.createContextualFragment(str)}else{fragment=doc.createElement("body");fragment.innerHTML=str}return fragment.childNodes[0]}function compareNodeNames(fromEl,toEl){var fromNodeName=fromEl.nodeName;var toNodeName=toEl.nodeName;if(fromNodeName===toNodeName){return true}if(toEl.actualize&&fromNodeName.charCodeAt(0)<91&&toNodeName.charCodeAt(0)>90){return fromNodeName===toNodeName.toUpperCase()}else{return false}}function createElementNS(name,namespaceURI){return!namespaceURI||namespaceURI===NS_XHTML?doc.createElement(name):doc.createElementNS(namespaceURI,name)}function moveChildren(fromEl,toEl){var curChild=fromEl.firstChild;while(curChild){var nextChild=curChild.nextSibling;toEl.appendChild(curChild);curChild=nextChild}return toEl}function syncBooleanAttrProp(fromEl,toEl,name){if(fromEl[name]!==toEl[name]){fromEl[name]=toEl[name];if(fromEl[name]){fromEl.setAttribute(name,"")}else{fromEl.removeAttribute(name)}}}var specialElHandlers={OPTION:function(fromEl,toEl){var parentNode=fromEl.parentNode;if(parentNode){var parentName=parentNode.nodeName.toUpperCase();if(parentName==="OPTGROUP"){parentNode=parentNode.parentNode;parentName=parentNode&&parentNode.nodeName.toUpperCase()}if(parentName==="SELECT"&&!parentNode.hasAttribute("multiple")){if(fromEl.hasAttribute("selected")&&!toEl.selected){fromEl.setAttribute("selected","selected");fromEl.removeAttribute("selected")}parentNode.selectedIndex=-1}}syncBooleanAttrProp(fromEl,toEl,"selected")},INPUT:function(fromEl,toEl){syncBooleanAttrProp(fromEl,toEl,"checked");syncBooleanAttrProp(fromEl,toEl,"disabled");if(fromEl.value!==toEl.value){fromEl.value=toEl.value}if(!toEl.hasAttribute("value")){fromEl.removeAttribute("value")}},TEXTAREA:function(fromEl,toEl){var newValue=toEl.value;if(fromEl.value!==newValue){fromEl.value=newValue}var firstChild=fromEl.firstChild;if(firstChild){var oldValue=firstChild.nodeValue;if(oldValue==newValue||!newValue&&oldValue==fromEl.placeholder){return}firstChild.nodeValue=newValue}},SELECT:function(fromEl,toEl){if(!toEl.hasAttribute("multiple")){var selectedIndex=-1;var i=0;var curChild=fromEl.firstChild;var optgroup;var nodeName;while(curChild){nodeName=curChild.nodeName&&curChild.nodeName.toUpperCase();if(nodeName==="OPTGROUP"){optgroup=curChild;curChild=optgroup.firstChild}else{if(nodeName==="OPTION"){if(curChild.hasAttribute("selected")){selectedIndex=i;break}i++}curChild=curChild.nextSibling;if(!curChild&&optgroup){curChild=optgroup.nextSibling;optgroup=null}}}fromEl.selectedIndex=selectedIndex}}};var ELEMENT_NODE=1;var TEXT_NODE=3;var COMMENT_NODE=8;function noop(){}function defaultGetNodeKey(node){return node.id}function morphdomFactory(morphAttrs){return function morphdom(fromNode,toNode,options){if(!options){options={}}if(typeof toNode==="string"){if(fromNode.nodeName==="#document"||fromNode.nodeName==="HTML"){var toNodeHtml=toNode;toNode=doc.createElement("html");toNode.innerHTML=toNodeHtml}else{toNode=toElement(toNode)}}var getNodeKey=options.getNodeKey||defaultGetNodeKey;var onBeforeNodeAdded=options.onBeforeNodeAdded||noop;var onNodeAdded=options.onNodeAdded||noop;var onBeforeElUpdated=options.onBeforeElUpdated||noop;var onElUpdated=options.onElUpdated||noop;var onBeforeNodeDiscarded=options.onBeforeNodeDiscarded||noop;var onNodeDiscarded=options.onNodeDiscarded||noop;var onBeforeElChildrenUpdated=options.onBeforeElChildrenUpdated||noop;var childrenOnly=options.childrenOnly===true;var fromNodesLookup={};var keyedRemovalList;function addKeyedRemoval(key){if(keyedRemovalList){keyedRemovalList.push(key)}else{keyedRemovalList=[key]}}function walkDiscardedChildNodes(node,skipKeyedNodes){if(node.nodeType===ELEMENT_NODE){var curChild=node.firstChild;while(curChild){var key=undefined;if(skipKeyedNodes&&(key=getNodeKey(curChild))){addKeyedRemoval(key)}else{onNodeDiscarded(curChild);if(curChild.firstChild){walkDiscardedChildNodes(curChild,skipKeyedNodes)}}curChild=curChild.nextSibling}}}function removeNode(node,parentNode,skipKeyedNodes){if(onBeforeNodeDiscarded(node)===false){return}if(parentNode){parentNode.removeChild(node)}onNodeDiscarded(node);walkDiscardedChildNodes(node,skipKeyedNodes)}function indexTree(node){if(node.nodeType===ELEMENT_NODE){var curChild=node.firstChild;while(curChild){var key=getNodeKey(curChild);if(key){fromNodesLookup[key]=curChild}indexTree(curChild);curChild=curChild.nextSibling}}}indexTree(fromNode);function handleNodeAdded(el){onNodeAdded(el);var curChild=el.firstChild;while(curChild){var nextSibling=curChild.nextSibling;var key=getNodeKey(curChild);if(key){var unmatchedFromEl=fromNodesLookup[key];if(unmatchedFromEl&&compareNodeNames(curChild,unmatchedFromEl)){curChild.parentNode.replaceChild(unmatchedFromEl,curChild);morphChildren(unmatchedFromEl,curChild)}}handleNodeAdded(curChild);curChild=nextSibling}}function morphChildren(fromEl,toEl,childrenOnly){var toElKey=getNodeKey(toEl);var curFromNodeKey;if(toElKey){delete fromNodesLookup[toElKey]}if(toNode.isSameNode&&toNode.isSameNode(fromNode)){return}if(!childrenOnly){if(onBeforeElUpdated(fromEl,toEl)===false){return}morphAttrs(fromEl,toEl);onElUpdated(fromEl);if(onBeforeElChildrenUpdated(fromEl,toEl)===false){return}}if(fromEl.nodeName!=="TEXTAREA"){var curToNodeChild=toEl.firstChild;var curFromNodeChild=fromEl.firstChild;var curToNodeKey;var fromNextSibling;var toNextSibling;var matchingFromEl;outer:while(curToNodeChild){toNextSibling=curToNodeChild.nextSibling;curToNodeKey=getNodeKey(curToNodeChild);while(curFromNodeChild){fromNextSibling=curFromNodeChild.nextSibling;if(curToNodeChild.isSameNode&&curToNodeChild.isSameNode(curFromNodeChild)){curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling;continue outer}curFromNodeKey=getNodeKey(curFromNodeChild);var curFromNodeType=curFromNodeChild.nodeType;var isCompatible=undefined;if(curFromNodeType===curToNodeChild.nodeType){if(curFromNodeType===ELEMENT_NODE){if(curToNodeKey){if(curToNodeKey!==curFromNodeKey){if(matchingFromEl=fromNodesLookup[curToNodeKey]){if(fromNextSibling===matchingFromEl){isCompatible=false}else{fromEl.insertBefore(matchingFromEl,curFromNodeChild);if(curFromNodeKey){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=matchingFromEl}}else{isCompatible=false}}}else if(curFromNodeKey){isCompatible=false}isCompatible=isCompatible!==false&&compareNodeNames(curFromNodeChild,curToNodeChild);if(isCompatible){morphChildren(curFromNodeChild,curToNodeChild)}}else if(curFromNodeType===TEXT_NODE||curFromNodeType==COMMENT_NODE){isCompatible=true;if(curFromNodeChild.nodeValue!==curToNodeChild.nodeValue){curFromNodeChild.nodeValue=curToNodeChild.nodeValue}}}if(isCompatible){curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling;continue outer}if(curFromNodeKey){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=fromNextSibling}if(curToNodeKey&&(matchingFromEl=fromNodesLookup[curToNodeKey])&&compareNodeNames(matchingFromEl,curToNodeChild)){fromEl.appendChild(matchingFromEl);morphChildren(matchingFromEl,curToNodeChild)}else{var onBeforeNodeAddedResult=onBeforeNodeAdded(curToNodeChild);if(onBeforeNodeAddedResult!==false){if(onBeforeNodeAddedResult){curToNodeChild=onBeforeNodeAddedResult}if(curToNodeChild.actualize){curToNodeChild=curToNodeChild.actualize(fromEl.ownerDocument||doc)}fromEl.appendChild(curToNodeChild);handleNodeAdded(curToNodeChild)}}curToNodeChild=toNextSibling;curFromNodeChild=fromNextSibling}while(curFromNodeChild){fromNextSibling=curFromNodeChild.nextSibling;if(curFromNodeKey=getNodeKey(curFromNodeChild)){addKeyedRemoval(curFromNodeKey)}else{removeNode(curFromNodeChild,fromEl,true)}curFromNodeChild=fromNextSibling}}var specialElHandler=specialElHandlers[fromEl.nodeName];if(specialElHandler){specialElHandler(fromEl,toEl)}}var morphedNode=fromNode;var morphedNodeType=morphedNode.nodeType;var toNodeType=toNode.nodeType;if(!childrenOnly){if(morphedNodeType===ELEMENT_NODE){if(toNodeType===ELEMENT_NODE){if(!compareNodeNames(fromNode,toNode)){onNodeDiscarded(fromNode);morphedNode=moveChildren(fromNode,createElementNS(toNode.nodeName,toNode.namespaceURI))}}else{morphedNode=toNode}}else if(morphedNodeType===TEXT_NODE||morphedNodeType===COMMENT_NODE){if(toNodeType===morphedNodeType){if(morphedNode.nodeValue!==toNode.nodeValue){morphedNode.nodeValue=toNode.nodeValue}return morphedNode}else{morphedNode=toNode}}}if(morphedNode===toNode){onNodeDiscarded(fromNode)}else{morphChildren(morphedNode,toNode,childrenOnly);if(keyedRemovalList){for(var i=0,len=keyedRemovalList.length;i<len;i++){var elToRemove=fromNodesLookup[keyedRemovalList[i]];if(elToRemove){removeNode(elToRemove,elToRemove.parentNode,false)}}}}if(!childrenOnly&&morphedNode!==fromNode&&fromNode.parentNode){if(morphedNode.actualize){morphedNode=morphedNode.actualize(fromNode.ownerDocument||doc)}fromNode.parentNode.replaceChild(morphedNode,fromNode)}return morphedNode}}var morphdom=morphdomFactory(morphAttrs);return morphdom});

@@ -12,2 +12,3 @@ 'use strict';

// update attributes on original DOM element
for (i = attrs.length - 1; i >= 0; --i) {

@@ -65,6 +66,13 @@ attr = attrs[i];

/**
* This is about the same
* var html = new DOMParser().parseFromString(str, 'text/html');
* return html.body.firstChild;
*
* @method toElement
* @param {String} str
*/
function toElement(str) {
if (!range && doc.createRange) {
range = doc.createRange();
range.selectNode(doc.body);
}

@@ -406,3 +414,3 @@

curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
morphEl(unmatchedFromEl, curChild);
morphChildren(unmatchedFromEl, curChild);
}

@@ -416,3 +424,3 @@ }

function morphEl(fromEl, toEl, childrenOnly) {
function morphChildren(fromEl, toEl, childrenOnly) {
var toElKey = getNodeKey(toEl);

@@ -422,3 +430,3 @@ var curFromNodeKey;

if (toElKey) {
// If an element with an ID is being morphed then it is will be in the final
// If an element with an ID is being morphed then it will be in the final
// DOM so clear it out of the saved elements collection

@@ -433,2 +441,3 @@ delete fromNodesLookup[toElKey];

if (!childrenOnly) {
// optional
if (onBeforeElUpdated(fromEl, toEl) === false) {

@@ -438,3 +447,5 @@ return;

// update attributes on original DOM element first
morphAttrs(fromEl, toEl);
// optional
onElUpdated(fromEl);

@@ -456,2 +467,3 @@

// walk the children
outer: while (curToNodeChild) {

@@ -461,2 +473,3 @@ toNextSibling = curToNodeChild.nextSibling;

// walk the fromNode children all the way through
while (curFromNodeChild) {

@@ -489,3 +502,3 @@ fromNextSibling = curFromNodeChild.nextSibling;

if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
if (curFromNodeChild.nextSibling === matchingFromEl) {
if (fromNextSibling === matchingFromEl) {
// Special case for single element removals. To avoid removing the original

@@ -499,3 +512,3 @@ // DOM node out of the tree (since that can break CSS transitions, etc.),

// We found a matching keyed element somewhere in the original DOM tree.
// Let's moving the original DOM node into the current position and morph
// Let's move the original DOM node into the current position and morph
// it.

@@ -508,3 +521,3 @@

fromNextSibling = curFromNodeChild.nextSibling;
// fromNextSibling = curFromNodeChild.nextSibling;

@@ -539,3 +552,4 @@ if (curFromNodeKey) {

// target DOM node.
morphEl(curFromNodeChild, curToNodeChild);
// MORPH
morphChildren(curFromNodeChild, curToNodeChild);
}

@@ -579,3 +593,3 @@

curFromNodeChild = fromNextSibling;
}
} // END: while(curFromNodeChild) {}

@@ -588,3 +602,4 @@ // If we got this far then we did not find a candidate match for

fromEl.appendChild(matchingFromEl);
morphEl(matchingFromEl, curToNodeChild);
// MORPH
morphChildren(matchingFromEl, curToNodeChild);
} else {

@@ -631,3 +646,3 @@ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);

}
} // END: morphEl(...)
} // END: morphChildren(...)

@@ -670,3 +685,3 @@ var morphedNode = fromNode;

} else {
morphEl(morphedNode, toNode, childrenOnly);
morphChildren(morphedNode, toNode, childrenOnly);

@@ -673,0 +688,0 @@ // We now need to loop over any keyed nodes that might need to be

@@ -35,22 +35,23 @@ {

"devDependencies": {
"@lasso/marko-taglib": "^1.0.15",
"async": "^2.0.0",
"browser-refresh-taglib": "^1.1.0",
"chai": "^2.3.0",
"diffhtml": "^0.9.2",
"chai": "^4.2.0",
"diffhtml": "^1.0.0-beta.10",
"express": "^4.14.0",
"ignoring-watcher": "^1.0.5",
"jshint": "^2.7.0",
"lasso": "^2.4.1",
"lasso-marko": "^2.0.7",
"lasso": "^3.2.9",
"lasso-marko": "^2.4.7",
"marko": "^4.1.3",
"mocha": "^2.2.4",
"mocha": "^6.0.2",
"mocha-chrome": "^2.0.0",
"rollup": "^1.4.1",
"uglify-js": "^2.6.2",
"uglify-js": "^3.5.1",
"umd": "^3.0.1",
"vdom-virtualize": "0.0.12",
"vdom-virtualize": "2.0.0",
"virtual-dom": "^2.1.1"
},
"dependencies": {},
"version": "2.5.2",
"version": "2.5.3",
"keywords": [

@@ -57,0 +58,0 @@ "dom",

@@ -130,2 +130,4 @@ morphdom

___UPDATE:___ As of `v2.1.0`, `morphdom` supports both diffing a real DOM tree with another real DOM tree and diffing a real DOM tree with a _virtual_ DOM tree. See: [docs/virtual-dom.md](docs/virtual-dom.md) for more details.
No, the DOM _data structure_ is not slow. The DOM is a key part of any web browser so it must be fast. Walking a DOM tree and reading the attributes on DOM nodes is _not_ slow. However, if you attempt to read a computed property on a DOM node that requires a relayout of the page then _that_ will be slow. However, `morphdom` only cares about the following properties and methods of a DOM node:

@@ -152,3 +154,3 @@

There are some drawbacks to using a virtual DOM-based approach:
There are some drawbacks to using a virtual DOM-based approach even though the _Virtual DOM_ has improved considerably over the last few years. :

@@ -162,8 +164,6 @@ - The real DOM is not the source of truth (the persistent virtual DOM tree is the source of truth)

The premise for using a virtual DOM is that the DOM is "slow". While there is slightly more overhead in creating actual DOM nodes instead of lightweight virtual DOM nodes, we are not seeing any noticeable slowness in our benchmarks. In addition, as web browsers get faster the DOM data structure will also likely continue to get faster so there benefits to avoiding the abstraction layer.
The premise for using a virtual DOM is that the DOM is "slow". While there is slightly more overhead in creating actual DOM nodes instead of lightweight virtual DOM nodes, in practice there isnt much difference. In addition, as web browsers get faster the DOM data structure will also likely continue to get faster so there benefits to avoiding the abstraction layer.
See the [Benchmarks](#benchmarks) below for a comparison of `morphdom` with [virtual-dom](https://github.com/Matt-Esch/virtual-dom).
___UPDATE:___ As of `v2.1.0`, `morphdom` supports both diffing a real DOM tree with another real DOM tree and diffing a real DOM tree with a _virtual_ DOM tree. See: [docs/virtual-dom.md](docs/virtual-dom.md) for more details.
## Which is better: rendering to an HTML string or rendering virtual DOM nodes?

@@ -170,0 +170,0 @@

@@ -10,2 +10,3 @@ export default function morphAttrs(fromNode, toNode) {

// update attributes on original DOM element
for (i = attrs.length - 1; i >= 0; --i) {

@@ -12,0 +13,0 @@ attr = attrs[i];

@@ -161,3 +161,3 @@ 'use strict';

curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
morphEl(unmatchedFromEl, curChild);
morphChildren(unmatchedFromEl, curChild);
}

@@ -171,3 +171,3 @@ }

function morphEl(fromEl, toEl, childrenOnly) {
function morphChildren(fromEl, toEl, childrenOnly) {
var toElKey = getNodeKey(toEl);

@@ -177,3 +177,3 @@ var curFromNodeKey;

if (toElKey) {
// If an element with an ID is being morphed then it is will be in the final
// If an element with an ID is being morphed then it will be in the final
// DOM so clear it out of the saved elements collection

@@ -188,2 +188,3 @@ delete fromNodesLookup[toElKey];

if (!childrenOnly) {
// optional
if (onBeforeElUpdated(fromEl, toEl) === false) {

@@ -193,3 +194,5 @@ return;

// update attributes on original DOM element first
morphAttrs(fromEl, toEl);
// optional
onElUpdated(fromEl);

@@ -211,2 +214,3 @@

// walk the children
outer: while (curToNodeChild) {

@@ -216,2 +220,3 @@ toNextSibling = curToNodeChild.nextSibling;

// walk the fromNode children all the way through
while (curFromNodeChild) {

@@ -244,3 +249,3 @@ fromNextSibling = curFromNodeChild.nextSibling;

if ((matchingFromEl = fromNodesLookup[curToNodeKey])) {
if (curFromNodeChild.nextSibling === matchingFromEl) {
if (fromNextSibling === matchingFromEl) {
// Special case for single element removals. To avoid removing the original

@@ -254,3 +259,3 @@ // DOM node out of the tree (since that can break CSS transitions, etc.),

// We found a matching keyed element somewhere in the original DOM tree.
// Let's moving the original DOM node into the current position and morph
// Let's move the original DOM node into the current position and morph
// it.

@@ -263,3 +268,3 @@

fromNextSibling = curFromNodeChild.nextSibling;
// fromNextSibling = curFromNodeChild.nextSibling;

@@ -294,3 +299,4 @@ if (curFromNodeKey) {

// target DOM node.
morphEl(curFromNodeChild, curToNodeChild);
// MORPH
morphChildren(curFromNodeChild, curToNodeChild);
}

@@ -334,3 +340,3 @@

curFromNodeChild = fromNextSibling;
}
} // END: while(curFromNodeChild) {}

@@ -343,3 +349,4 @@ // If we got this far then we did not find a candidate match for

fromEl.appendChild(matchingFromEl);
morphEl(matchingFromEl, curToNodeChild);
// MORPH
morphChildren(matchingFromEl, curToNodeChild);
} else {

@@ -386,3 +393,3 @@ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);

}
} // END: morphEl(...)
} // END: morphChildren(...)

@@ -425,3 +432,3 @@ var morphedNode = fromNode;

} else {
morphEl(morphedNode, toNode, childrenOnly);
morphChildren(morphedNode, toNode, childrenOnly);

@@ -428,0 +435,0 @@ // We now need to loop over any keyed nodes that might need to be

@@ -6,6 +6,13 @@ var range; // Create a range object for efficently rendering strings to elements.

/**
* This is about the same
* var html = new DOMParser().parseFromString(str, 'text/html');
* return html.body.firstChild;
*
* @method toElement
* @param {String} str
*/
export function toElement(str) {
if (!range && doc.createRange) {
range = doc.createRange();
range.selectNode(doc.body);
}

@@ -12,0 +19,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc