https://github.com/phlex-ruby/morphlex

Optimal DOM morphing, written in TypeScript.
https://github.com/phlex-ruby/morphlex

dom morphdom typescript

Last synced: 9 days ago
JSON representation

Optimal DOM morphing, written in TypeScript.

• Host: GitHub
• URL: https://github.com/phlex-ruby/morphlex
• Owner: phlex-ruby
• License: mit
• Created: 2024-02-22T21:21:39.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-12T16:34:10.000Z (6 months ago)
• Last Synced: 2024-09-18T11:51:37.791Z (about 2 months ago)
• Topics: dom, morphdom, typescript
• Language: JavaScript
• Homepage:
• Size: 372 KB
• Stars: 60
• Watchers: 6
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  



Morphlex is a tiny, optimal DOM morphing library written in TypeScript. DOM morphing is the process of transforming one DOM tree to reflect another, while preserving the state of the original tree and making as few changes as possible.

Morphlex uses ID Sets — a concept pioneered by [Idiomorph](https://github.com/bigskysoftware/idiomorph) — to match nodes with deeply nested identified elements. It also maps out _sensitive_ elements to avoid moving them around.

## ID Sets

Each element is tagged with the set of IDs it contains, allowing for more optimal matching.

Failing an ID Set match, Morphlex will search for the next best match by tag name. If no element can be found, the reference element will be deeply cloned instead.

## Node sensitivity

Simply moving certain elements in the DOM tree can cause issues. To account for this, Morphlex gives priority to sensitive elements, moving less sensitive elements around them whenever possible.

This works in any direction, even if the sensitive element is deeply nested.

## Try it out

The easiest way to try out Morphlex is to import it directly from UNPKG.

```html

  import { morph } from "https://www.unpkg.com/[email protected]/dist/morphlex.min.js";

  morph(currentNode, referenceNode);

  morphInner(currentNode, referenceNode);

```

Alternatively, you can install it via npm and import it into your project.

```bash

npm install morphlex --save

```

```javascript

import { morph } from "morphlex";

morph(currentNode, referenceNode);

```

The `currentNode` will be morphed into the state of the `referenceNode`. The `referenceNode` will not be mutated in this process.

## Contributing

If you find a bug or have a feature request, please open an issue. If you want to contribute, please open a pull request.

> [!TIP]

> Morphlex is written in **[TypeScript](https://www.typescriptlang.org)** because it helps us avoid a whole category of potential bugs. If you’re more comfortable writing JavaScript, you’re very welcome to open a Pull Request modifying the `dist/morphlex.js` file. I’m happy to take care of the TypeScript conversion myself. — Joel