Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

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

Morph a DOM tree to another DOM tree (no virtual DOM needed)

  • 2.7.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
185K
increased by7.5%
Maintainers
6
Weekly downloads
 
Created

What is morphdom?

morphdom is a lightweight JavaScript library that efficiently morphs one DOM tree into another. It is useful for updating the DOM in a performant way, especially in scenarios where you need to apply changes to the DOM without reloading the entire page.

What are morphdom's main functionalities?

Basic DOM Morphing

This feature allows you to morph one DOM element into another. The `morphdom` function takes two arguments: the source element and the target HTML string or element. It efficiently updates the source element to match the target.

const morphdom = require('morphdom');
const fromNode = document.getElementById('from');
const toNode = document.getElementById('to');
morphdom(fromNode, toNode.innerHTML);

Preserve State

This feature allows you to preserve the state of certain elements during the morphing process. The `onBeforeElUpdated` callback can be used to prevent specific elements from being updated if they are already equal.

const morphdom = require('morphdom');
const fromNode = document.getElementById('from');
const toNode = document.getElementById('to');
morphdom(fromNode, toNode.innerHTML, {
  onBeforeElUpdated: function(fromEl, toEl) {
    if (fromEl.isEqualNode(toEl)) {
      return false;
    }
  }
});

Custom Element Handling

This feature allows you to handle custom logic for discarding elements. The `onBeforeNodeDiscarded` callback can be used to prevent certain elements from being removed from the DOM.

const morphdom = require('morphdom');
const fromNode = document.getElementById('from');
const toNode = document.getElementById('to');
morphdom(fromNode, toNode.innerHTML, {
  onBeforeNodeDiscarded: function(node) {
    if (node.classList && node.classList.contains('no-discard')) {
      return false;
    }
  }
});

Other packages similar to morphdom

Keywords

FAQs

Package last updated on 19 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

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