micromorph

The micromorph/nav entrypoint allows you to turn a Multi-Page Application (MPA) into a Single-Page Application (SPA). It automatically intercepts navigation and re-renders only the content that has changed. This entrypoint relies on the browser's Navigation API.

import listen from 'micromorph/nav';

listen();

For browsers that do not support the Navigation API, use the micromorph/spa entrypoint to achieve SPA-like behavior. Like the /nav version, it converts your MPA into an SPA by only re-rendering changed content.

import listen from 'micromorph/spa';

listen();

You can update the entire active document to match a new document (for example, one parsed from an HTML string) using diff(). Micromorph is designed to handle full document diffing while avoiding Flash of Unstyled Content (FOUC).

import diff from 'micromorph';
const p = new DOMParser();

const newDoc = p.parseFromString(`<h1>Hello world!</h1>`, 'text/html');

diff(document, newDoc);

Use the diff(fromNode, toNode) function to efficiently synchronize two DOM nodes. Micromorph calculates the differences and only applies the necessary changes to fromNode so that it matches toNode.

import diff from 'micromorph';

diff(fromNode, toNode);

The micromorph package provides a way to compute the difference between two objects (diff) and apply that difference to an object to transform it into the target state (patch). This is useful for efficient object updates and state synchronization.

• diff(original, target): Computes the minimal set of changes required to transform original into target.
• patch(original, delta): Applies a delta (produced by diff) to an original object to produce the target object.
• default: The default export provides the core functionality.

import { diff, patch } from 'micromorph';

const original = { a: 1, b: { c: 2 } };
const target = { a: 1, b: { c: 3 }, d: 4 };

// Compute the difference
const delta = diff(original, target);

// Apply the difference to get the target
const patched = patch(original, delta);

console.log(patched); // { a: 1, b: { c: 3 }, d: 4 }

Micromorph provides exported comparison functions to identify differences between DOM nodes based on specific attributes. These are useful when determining if a node has changed during a morphing operation.

Available comparison constants:

• name: Compares the nodeName of two nodes.
• type: Compares the nodeType of two nodes.
• value: Compares the nodeValue of two nodes.

import { name, type, value } from './compare';

// Example usage (conceptual):
// const isSameName = name(nodeA, nodeB);
// const isSameType = type(nodeA, nodeB);
// const isSameValue = value(nodeA, nodeB);

Micromorph uses integer constants to identify the type of node being processed. These constants are used to distinguish between elements, text, comments, and the document root.

export const NODE_TYPE_ELEMENT = 1;
export const NODE_TYPE_TEXT = 3;
export const NODE_TYPE_COMMENT = 8;
export const NODE_TYPE_DOCUMENT = 9;

When performing a diff, micromorph identifies changes using specific action constants. These represent the type of mutation required to transform the source into the target.

export const ACTION_CREATE = 0;
export const ACTION_REMOVE = 1;
export const ACTION_REPLACE = 2;
export const ACTION_UPDATE = 3;
export const ACTION_SET_ATTR = 4;
export const ACTION_REMOVE_ATTR = 5;