fxn / morphlex

Optimal DOM morphing, written in TypeScript.

Morphlex is a tiny (1.6KB minified/gzipped), 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 — 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.

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.

<script type="module">
  import { morph } from "https://www.unpkg.com/morphlex@0.0.15/dist/morphlex.min.js";

  morph(currentNode, referenceNode);
</script>

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

npm install morphlex --save

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 becuase 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