https://github.com/natemoo-re/micromorph

A very tiny library for diffing DOM nodes
https://github.com/natemoo-re/micromorph

Last synced: 4 days ago
JSON representation

A very tiny library for diffing DOM nodes

• Host: GitHub
• URL: https://github.com/natemoo-re/micromorph
• Owner: natemoo-re
• License: mit
• Created: 2022-01-26T05:03:50.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-24T22:28:54.000Z (9 months ago)
• Last Synced: 2024-10-24T12:26:24.520Z (10 days ago)
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/micromorph-demo
• Size: 107 KB
• Stars: 345
• Watchers: 4
• Forks: 9
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🤏 micromorph

A very tiny library for diffing live DOM nodes.

Extremely handy when used in conjunction with the [`DOMParser`](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) API.

---

## Use Cases

#### Want to update one node to match another?

Diff them efficiently and only sync changes between the two nodes.

```js

import diff from 'micromorph';

diff(fromNode, toNode);

```

#### Want to update the current `document` to match a new `document`, maybe from a string?

Micromorph is smart enough to handle full document diffing while avoiding FOUC.

```js

import diff from 'micromorph';

const p = new DOMParser();

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


diff(document, newDoc);

```

#### Want to turn your MPA into an SPA?

With the `/nav` entrypoint, Micromorph automatically converts your MPA into a SPA while only re-rendering content that has changed.

```js

import listen from 'micromorph/nav';

listen();

```

For browsers that don't support the `Navigation` API, the `/spa` entrypoint can be used.

```js

import listen from 'micromorph/spa';

listen();

```