🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

morphdom

Package Overview
Dependencies
Maintainers
1
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

morphdom - npm Package Compare versions

Comparing version
0.1.9
 to
0.1.10
+10
-4
lib/index.js

@@ -231,4 +231,4 @@ var specialElHandlers = {

if (isCompatible) {
// We found compatible DOM elements so add a
// task to morph the compatible DOM elements
// We found compatible DOM elements so transform the current "from" node
// to match the current target DOM node.
morphEl(curFromNodeChild, curToNodeChild, alreadyVisited);

@@ -238,2 +238,3 @@ }

isCompatible = true;
// Simply update nodeValue on the original node to change the text value
curFromNodeChild.nodeValue = curToNodeChild.nodeValue;

@@ -249,5 +250,5 @@ }

// No compatible match so remove the old node from the DOM
// No compatible match so remove the old node from the DOM and continue trying
// to find a match in the original DOM
removeNode(curFromNodeChild, fromNode, alreadyVisited);
curFromNodeChild = fromNextSibling;

@@ -334,2 +335,7 @@ }

if (morphedNode !== fromNode && fromNode.parentNode) {
// If we had to swap out the from node with a new node because the old
// node was not compatible with the target node then we need to
// replace the old DOM node in the original DOM tree. This is only
// possible if the original DOM node was part of a DOM tree which
// we know is the case if it has a parent node.
fromNode.parentNode.replaceChild(morphedNode, fromNode);

@@ -336,0 +342,0 @@ }

+1
-1
package.json

@@ -36,3 +36,3 @@ {

"dependencies": {},
"version": "0.1.9"
"version": "0.1.10"
}
+4
-6
README.md

@@ -6,4 +6,2 @@ morphdom

_NOTE: This module is experimental, but seems to work in the latest browsers (including IE9+)._
Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM here!

@@ -36,3 +34,3 @@

morphdom(el1, '<div class="bar"></div>');
morphdom(el1, el2);

@@ -115,5 +113,5 @@ expect(el1.className).to.equal('bar');

- The real DOM _cannot_ be modified behind the scenes (e.g., no jQuery) because the diff is done against the virtual DOM tree
- A [lightweight] copy of the real DOM must be maintained in memory at all times
- A copy of the real DOM must be maintained in memory at all times (albeit a lightweight copy of the real DOM)
- The virtual DOM is an abstraction layer that introduces code overhead
- The virtual DOM representations are not standardized (will vary by implementation)
- The virtual DOM representations are not standardized and will vary by implementation
- The virtual DOM can only efficiently be used with code and templating languages that produce a virtual DOM tree

@@ -133,3 +131,3 @@

This module will be used by the next major version of [Marko Widgets](https://github.com/marko-js/marko-widgets) (currently in beta: `npm install marko-widgets@5.0.0-beta --save`). Marko Widgets is a high performance and lightweight UI components framework for the [Marko templating engine](https://github.com/marko-js/marko).
This module will be used by the next major version of [Marko Widgets](https://github.com/marko-js/marko-widgets) (currently in beta: `npm install marko-widgets@^5.0.0-beta --save`). Marko Widgets is a high performance and lightweight UI components framework that uses the [Marko templating engine](https://github.com/marko-js/marko) for rendering UI components.

@@ -136,0 +134,0 @@ You can see how Marko Widgets compares to React in performance by taking a look at the following benchmark: [Marko vs React: Performance Benchmark](https://github.com/patrick-steele-idem/marko-vs-react)