### Run Morphdom Example Server

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/examples/README.md

Start the example server for morphdom using Node.js. Access the examples via a web browser at http://localhost:8080/.

```bash
node examples/server.js
```

--------------------------------

### Install Morphdom

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/examples/README.md

Clone the morphdom repository and install its Node.js dependencies.

```bash
git clone https://github.com/patrick-steele-idem/morphdom
cd morphdom
npm install
```

--------------------------------

### Install morphdom

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Install the morphdom module into your project using npm.

```bash
npm install morphdom --save
```

--------------------------------

### Optimizing Updates with isEqualNode

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

An example demonstrating how to optimize morphdom by preventing updates when nodes are already equal, using the `isEqualNode` method.

```APIDOC
## Optimizing Updates with isEqualNode

### Description

This example shows how to use the `onBeforeElUpdated` callback to check if the `fromEl` and `toEl` are equal using `isEqualNode`. If they are equal, the update is skipped, potentially improving performance by avoiding unnecessary DOM manipulations.

### Method

`morphdom(fromNode, toNode, options)` with `onBeforeElUpdated` option.

### Parameters

#### fromNode
- **fromNode** (Node) - Required - The source DOM node.

#### toNode
- **toNode** (Node | String) - Required - The target DOM node or HTML string.

#### options
- **options** (Object) - Optional - Configuration object.
  - **onBeforeElUpdated** (`Function(fromEl, toEl)`) - Required for this optimization - A callback function that is executed before an element is updated. It should return `false` to prevent the update if the elements are equal.

### Request Example

```javascript
morphdom(fromNode, toNode, {
    onBeforeElUpdated: function(fromEl, toEl) {
        // spec - https://dom.spec.whatwg.org/#concept-node-equals
        if (fromEl.isEqualNode(toEl)) {
            return false
        }

        return true
    }
})
```

### Response

No specific response is detailed for this optimization, as it affects the internal update process of `morphdom`.
```

--------------------------------

### Run Benchmarks

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Execute the benchmark suite using npm. This command initiates the benchmark process.

```bash
npm run benchmark
```

--------------------------------

### Morphdom with all options

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Demonstrates the usage of morphdom with all available options for fine-grained control over the DOM morphing process. Requires the morphdom library to be imported.

```javascript
var morphdom = require('morphdom');
var morphedNode = morphdom(fromNode, toNode, {
  getNodeKey: function(node) {
    return node.id;
  },
  addChild: function(parentNode, childNode) {
    parentNode.appendChild(childNode);
  },
  onBeforeNodeAdded: function(node) {
    return node;
  },
  onNodeAdded: function(node) {

  },
  onBeforeElUpdated: function(fromEl, toEl) {
    return true;
  },
  onElUpdated: function(el) {

  },
  onBeforeNodeDiscarded: function(node) {
    return true;
  },
  onNodeDiscarded: function(node) {

  },
  onBeforeElChildrenUpdated: function(fromEl, toEl) {
    return true;
  },
  childrenOnly: false,
  skipFromChildren: function(fromEl, toEl) {
    return false;
  }
});
```

--------------------------------

### Open Benchmark Results

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Open the generated HTML file in a browser to view the benchmark results. This file contains the detailed performance metrics.

```file
file:///HOME/path-to-morphdom/test/mocha-headless/generated/test-page.html
```

--------------------------------

### Run Project Tests

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Execute the project's test suite to ensure code quality and functionality. This command is typically run before submitting pull requests or to verify changes.

```shell
npm test
```

--------------------------------

### morphdom(fromNode, toNode, options)

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

The main morphdom function that takes a source DOM node, a target node (or HTML string), and an optional configuration object. It returns the updated 'from' node.

```APIDOC
## morphdom(fromNode, toNode, options)

### Description

This function efficiently updates a DOM tree by morphing the `fromNode` to match the `toNode`. It can accept either a DOM Node or an HTML string for `toNode`. The function returns the `fromNode` after the morphing process, or a new node if the original `fromNode` is incompatible with `toNode`.

### Parameters

#### fromNode
- **fromNode** (Node) - Required - The DOM node to be morphed.

#### toNode
- **toNode** (Node | String) - Required - The target DOM node or an HTML string to morph `fromNode` to.

#### options
- **options** (Object) - Optional - An object containing configuration options to customize morphdom's behavior.

### Supported Options

- **getNodeKey** (`Function(node)`) - Optional - A function that returns a unique identifier for a node. Defaults to using the node's `id`. Used for rearranging elements efficiently.
- **addChild** (`Function(parentNode, childNode)`) - Optional - A function called when adding a new child node. Defaults to `parentNode.appendChild(childNode)`.
- **onBeforeNodeAdded** (`Function(node)`) - Optional - Called before a node is added to the DOM. If it returns `false`, the node is not added. Should return the node to be added.
- **onNodeAdded** (`Function(node)`) - Optional - Called after a node has been added to the DOM.
- **onBeforeElUpdated** (`Function(fromEl, toEl)`) - Optional - Called before an element is updated. If it returns `false`, the element is not updated. Returning an `HTMLElement` will use it as the new `fromEl` for morphing.
- **onElUpdated** (`Function(el)`) - Optional - Called after an element has been updated.
- **onBeforeNodeDiscarded** (`Function(node)`) - Optional - Called before a node is discarded. If it returns `false`, the node is not discarded.
- **onNodeDiscarded** (`Function(node)`) - Optional - Called after a node has been discarded.
- **onBeforeElChildrenUpdated** (`Function(fromEl, toEl)`) - Optional - Called before the children of an element are updated. If it returns `false`, the children are not updated.
- **childrenOnly** (`Boolean`) - Optional - If `true`, only the children of the nodes are morphed, skipping the containing elements. Defaults to `false`.
- **skipFromChildren** (`Function(fromEl)`) - Optional - Called when indexing the `fromEl` tree. If it returns `true`, the children of `fromEl` are skipped, preserving them in place if not found in `toEl`.

### Request Example

```javascript
var morphdom = require('morphdom');
var morphedNode = morphdom(fromNode, toNode, {
  getNodeKey: function(node) {
    return node.id;
  },
  addChild: function(parentNode, childNode) {
    parentNode.appendChild(childNode);
  },
  onBeforeNodeAdded: function(node) {
    return node;
  },
  onNodeAdded: function(node) {

  },
  onBeforeElUpdated: function(fromEl, toEl) {
    return true;
  },
  onElUpdated: function(el) {

  },
  onBeforeNodeDiscarded: function(node) {
    return true;
  },
  onNodeDiscarded: function(node) {

  },
  onBeforeElChildrenUpdated: function(fromEl, toEl) {
    return true;
  },
  childrenOnly: false,
  skipFromChildren: function(fromEl, toEl) {
    return false;
  }
});
```

### Response

#### Success Response
- **morphedNode** (Node) - The `fromNode` after morphing, or a new node if the original was incompatible.
```

--------------------------------

### Optimizing morphdom with isEqualNode

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Improves morphdom performance by skipping subtree updates when elements are identical using isEqualNode. This avoids unnecessary DOM traversal.

```javascript
morphdom(fromNode, toNode, {
    onBeforeElUpdated: function(fromEl, toEl) {
        // spec - https://dom.spec.whatwg.org/#concept-node-equals
        if (fromEl.isEqualNode(toEl)) {
            return false
        }

        return true
    }
})
```

--------------------------------

### Morph DOM Element to HTML String

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Morphs an existing DOM element to match a target HTML string. The element's class and inner HTML will be updated.

```javascript
var morphdom = require('morphdom');

var el1 = document.createElement('div');
el1.className = 'foo';
el1.innerHTML = 'Hello John';

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

expect(el1.className).to.equal('bar');
expect(el1.innerHTML).to.equal('Hello Frank');
```

--------------------------------

### Morph DOM Element to Another Element

Source: https://github.com/patrick-steele-idem/morphdom/blob/master/README.md

Morphs an existing DOM element to match a target DOM element. The original element's class will be updated to match the target.

```javascript
var morphdom = require('morphdom');

var el1 = document.createElement('div');
el1.className = 'foo';

var el2 = document.createElement('div');
el2.className = 'bar';

morphdom(el1, el2);

expect(el1.className).to.equal('bar');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.