Morphlex

https://github.com/yippee-fun/morphlex
Admin
Morphlex is a ~3KB (gzipped) DOM morphing library that transforms one DOM tree to match another...
Tokens:5,373
Snippets:47
Trust Score:7.1
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### morph(currentNode, newNode, options)

Source: https://github.com/yippee-fun/morphlex/blob/main/README.md

Morphs the entire `currentNode` to match `newNode`, accepting an optional `options` object for advanced configuration. These options allow fine-grained control over the morphing process, such as preserving form input changes or defining callbacks for DOM events.

```APIDOC
## morph(currentNode, newNode, options)

### Description
Morphs the entire `currentNode` to match `newNode`, accepting an optional `options` object for advanced configuration. These options allow fine-grained control over the morphing process, such as preserving form input changes or defining callbacks for DOM events.

### Method
JavaScript Function

### Parameters
- **currentNode** (Node) - The DOM node to be morphed.
- **newNode** (Node) - The target DOM node to morph towards.
- **options** (Object) - Optional configuration object.
  - **`preserveChanges`** (boolean) - When `true`, preserves modified form inputs. Default: `false`.
  - **`beforeNodeVisited`** (function) - Callback before a node is visited. Return `false` to skip.
  - **`afterNodeVisited`** (function) - Callback after a node has been visited.
  - **`beforeNodeAdded`** (function) - Callback before a new node is added. Return `false` to prevent addition.
  - **`afterNodeAdded`** (function) - Callback after a node has been added.
  - **`beforeNodeRemoved`** (function) - Callback before a node is removed. Return `false` to prevent removal.
  - **`afterNodeRemoved`** (function) - Callback after a node has been removed.
  - **`beforeAttributeUpdated`** (function) - Callback before an attribute is updated. Return `false` to prevent update.
  - **`afterAttributeUpdated`** (function) - Callback after an attribute has been updated.
  - **`beforeChildrenVisited`** (function) - Callback before an element's children are visited. Return `false` to skip.
  - **`afterChildrenVisited`** (function) - Callback after an element's children have been visited.

### Request Example
```javascript
morph(currentNode, newNode, {
  preserveChanges: true,
  beforeNodeAdded: (parent, node, insertionPoint) => {
    console.log("Adding node:", node)
    return true // return false to prevent addition
  },
  beforeAttributeUpdated: (element, name) => {
    if (element.tagName === "DETAILS" && name === "open") return false
    return true
  }
})
```

### Response
This function does not return a value, but modifies the DOM in place.
```

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

### morphInner(currentNode, newNode, options)

Source: https://github.com/yippee-fun/morphlex/blob/main/README.md

Morphs only the children of `currentNode` to match the children of `newNode`, accepting an optional `options` object for advanced configuration. Similar to `morph`, these options provide control over the morphing process for child nodes.

```APIDOC
## morphInner(currentNode, newNode, options)

### Description
Morphs only the children of `currentNode` to match the children of `newNode`, accepting an optional `options` object for advanced configuration. Similar to `morph`, these options provide control over the morphing process for child nodes.

### Method
JavaScript Function

### Parameters
- **currentNode** (Node) - The DOM node whose children will be morphed.
- **newNode** (Node) - The target node whose children will be used as the new structure.
- **options** (Object) - Optional configuration object. Accepts the same options as `morph`.

### Request Example
```javascript
morphInner(currentNode, newNode, {
  afterNodeAdded: (node) => console.log('Child node added:', node)
})
```

### Response
This function does not return a value, but modifies the DOM in place.
```

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

### morphDocument(document, newDocument)

Source: https://github.com/yippee-fun/morphlex/blob/main/README.md

Morphs the entire `document` to match the structure and content of `newDocument`. This is a convenience function for updating the whole page.

```APIDOC
## morphDocument(document, newDocument)

### Description
Morphs the entire `document` to match the structure and content of `newDocument`. This is a convenience function for updating the whole page.

### Method
JavaScript Function

### Parameters
- **document** (Document) - The current document object.
- **newDocument** (Document) - The target document object to morph towards.

### Request Example
```javascript
import { morphDocument } from "morphlex"

morphDocument(document, new DOMParser().parseFromString(htmlString, 'text/html'))
```

### Response
This function does not return a value, but modifies the DOM in place.
```
Tokens:
Raw