morphlex

Morphlex

Morphlex is a tiny, safe, optimal DOM morphing library written in TypeScript. It uses IdSets, inspired by Idiomorph.

Why are we doing this?

We were massively impressed by what HTMZ made possible in just 166 bytes, and we think there’s huge potential combining the HTMZ iframe proxy technique with a tiny DOM morphing function. Our goal is to combine this into a new powerful way to build web applications.

There are three parts:

1. iframe proxies for prepend, append, morph and replace operations, targeted by normal HTML links and forms;
2. a tiny DOM morphing function that can handle complex cases;
3. a protocol for requesting the server return a specific fragment of a view by DOM id.

Initially, we will build support for rendering fragments into phlex and phlex-rails.

Usage

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.

Run tests

• npm install
• npm watch
• in another tab npm run "test:watch"