{"id":13394160,"url":"https://github.com/choojs/nanomorph","last_synced_at":"2025-03-13T19:32:10.016Z","repository":{"id":43642941,"uuid":"62445973","full_name":"choojs/nanomorph","owner":"choojs","description":"🚅 - Hyper fast diffing algorithm for real DOM nodes","archived":false,"fork":false,"pushed_at":"2021-06-01T02:56:46.000Z","size":152,"stargazers_count":721,"open_issues_count":21,"forks_count":58,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-14T05:21:42.012Z","etag":null,"topics":["algorithm","diff","dom","tree","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/choojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-02T10:34:35.000Z","updated_at":"2024-03-22T11:19:24.000Z","dependencies_parsed_at":"2022-09-12T11:44:18.195Z","dependency_job_id":null,"html_url":"https://github.com/choojs/nanomorph","commit_stats":null,"previous_names":["yoshuawuyts/nanodiff","yoshuawuyts/nanomorph"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fnanomorph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fnanomorph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fnanomorph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/choojs%2Fnanomorph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/choojs","download_url":"https://codeload.github.com/choojs/nanomorph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469252,"owners_count":20295715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithm","diff","dom","tree","virtual-dom"],"created_at":"2024-07-30T17:01:10.942Z","updated_at":"2025-03-13T19:32:09.663Z","avatar_url":"https://github.com/choojs.png","language":"JavaScript","readme":"# nanomorph [![stability][0]][1]\n[![npm version][2]][3] [![build status][4]][5]\n[![downloads][8]][9] [![js-standard-style][10]][11]\n\nHyper fast diffing algorithm for real DOM nodes :zap:\n\n## Usage\n```js\nvar morph = require('nanomorph')\nvar html = require('nanohtml')\n\nvar tree = html`\u003cdiv\u003ehello people\u003c/div\u003e`\ndocument.body.appendChild(tree)\n// document.body === \u003cbody\u003e\u003cdiv\u003ehello people\u003c/div\u003e\u003c/body\u003e\n\nmorph(tree, html`\u003cdiv\u003enanananana-na-no\u003c/div\u003e`)\n// document.body === \u003cbody\u003e\u003cdiv\u003enanananana-na-no\u003c/div\u003e\u003c/body\u003e\n\nmorph(tree, html`\u003cdiv\u003eteeny, tiny, tin bottle\u003c/div\u003e`)\n// document.body === \u003cbody\u003e\u003cdiv\u003eteeny, tiny, tin bottle\u003c/div\u003e\u003c/body\u003e\n```\n\n## Clearing Input Values\nTo remove values from inputs, there's a few options:\n```js\nhtml`\u003cinput class=\"beep\" value=${null}\u003e` // set the value to null\nhtml`\u003cinput class=\"beep\"\u003e`               // omit property all together\n```\n\n## Reordering Lists\nIt's common to work with lists of elements on the DOM. Adding, removing or\nreordering elements in a list can be rather expensive. To optimize this you can\nadd an `id` attribute to a DOM node. When reordering nodes it will compare\nnodes with the same ID against each other, resulting in far fewer re-renders.\nThis is especially potent when coupled with DOM node caching.\n\n```js\nvar el = html`\n  \u003csection\u003e\n    \u003cdiv id=\"first\"\u003ehello\u003c/div\u003e\n    \u003cdiv id=\"second\"\u003eworld\u003c/div\u003e\n  \u003c/section\u003e\n`\n```\n\n## Caching DOM elements\nSometimes we want to tell the algorithm to not evaluate certain nodes (and its\nchildren). This can be because we're sure they haven't changed, or perhaps\nbecause another piece of code is managing that part of the DOM tree. To achieve\nthis `nanomorph` evaluates the `.isSameNode()` method on nodes to determine if\nthey should be updated or not.\n\n```js\nvar el = html`\u003cdiv\u003enode\u003c/div\u003e`\n\n// tell nanomorph to not compare the DOM tree if they're both divs\nel.isSameNode = function (target) {\n  return (target \u0026\u0026 target.nodeName \u0026\u0026 target.nodeName === 'DIV')\n}\n```\n\n## Prevent Morphing Particular Elements\nThere are situations where two elements should never be morphed, but replaced.\n`nanomorph` automatically does this for elements with different tag names. But if\nwe're implementing a custom component system, for example, components of\ndifferent types should probably be treated as if they had different tags—even\nif they both render a `\u003cdiv\u003e` at their top level.\n\nNodes can have an optional `data-nanomorph-component-id` attribute. `nanomorph`\nwill only ever morph nodes if they both have the same value in this attribute.\nIf the values differ, the old node is replaced with the new one.\n\n```js\nvar el = html`\u003cdiv data-nanomorph-component-id=\"a\"\u003ehello\u003c/div\u003e`\nvar el2 = html`\u003cdiv data-nanomorph-component-id=\"b\"\u003egoodbye\u003c/div\u003e`\n\nassert.equal(nanomorph(el, el2), el2)\n```\n\nnanomorph doesn't have an opinion on the values of the `data-nanomorph-component-id`\nattribute, so we can decide the meaning we give it on a case by case basis. There\ncould be a unique ID for every _type_ of component, or a unique ID for every\n_instance_ of a component, or any other meaning.\n\n## FAQ\n### How is this different from morphdom?\nIt's quite similar actually; the API of this library is completely compatible\nwith `morphdom` and we've borrowed a fair few bits. The main difference is that\nwe copy event handlers like `onclick`, don't support browsers that are over a\ndecade old, and don't provide custom behavior by removing all hooks. This way\nwe can guarantee a consistent, out-of-the box experience for all your diffing\nneeds.\n\n### Why doesn't this work in Node?\nNode has no concept of a DOM - server side rendering is basically fancy string\nconcatenation. If you want to combine HTML strings in Node, check out\n[hyperstream][hyperstream].\n\n### This library seems cool, I'd like to build my own!\nNanomorph was optimized for simplicity, but different situations might require\ndifferent tradeoffs. So in order to allow folks to build their own\nimplementation we expose our test suite as a function you can call. So\nregardless if you're doing it to solve a problem, or just for fun: you can use\nthe same tests we use for your own implementation. Yay! :sparkles:\n\n## API\n### tree = nanomorph(oldTree, newTree)\nDiff a tree of HTML elements against another tree of HTML elements and create\na patched result that can be applied on the DOM.\n\n:warning: nanomorph will modify the newTree and it should be discarded after use\n\n## Installation\n```sh\n$ npm install nanomorph\n```\n\n## See Also\n- [yoshuawuyts/nanoraf](https://github.com/yoshuawuyts/nanoraf)\n- [yoshuawuyts/nanocomponent](https://github.com/yoshuawuyts/nanocomponent)\n- [yoshuawuyts/nanotick](https://github.com/yoshuawuyts/nanotick)\n- [bendrucker/document-ready](https://github.com/bendrucker/document-ready)\n- [shama/on-load](https://github.com/shama/on-load)\n- [choojs/nanohtml](https://github.com/choojs/nanohtml)\n\n## Similar Packages\n- [patrick-steele-idem/morphdom](https://github.com/patrick-steele-idem/morphdom)\n- [tbranyen/diffhtml](https://github.com/tbranyen/diffhtml)\n\n## Further Reading\n- [how to write your own virtual dom 1][own-vdom-1]\n- [how to write your own virtual dom 2][own-vdom-2]\n\n## Authors\n- [Kristofer Joseph](https://github.com/kristoferjoseph)\n- [Yoshua Wuyts](https://github.com/yoshuawuyts)\n\n## License\n[MIT](https://tldrlegal.com/license/mit-license)\n\n[0]: https://img.shields.io/badge/stability-stable-brightgreen.svg?style=flat-square\n[1]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[2]: https://img.shields.io/npm/v/nanomorph.svg?style=flat-square\n[3]: https://npmjs.org/package/nanomorph\n[4]: https://img.shields.io/travis/choojs/nanomorph/master.svg?style=flat-square\n[5]: https://travis-ci.org/choojs/nanomorph\n[6]: https://img.shields.io/codecov/c/github/choojs/nanomorph/master.svg?style=flat-square\n[7]: https://codecov.io/github/choojs/nanomorph\n[8]: http://img.shields.io/npm/dm/nanomorph.svg?style=flat-square\n[9]: https://npmjs.org/package/nanomorph\n[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[11]: https://github.com/feross/standard\n\n[mt]: https://en.wikipedia.org/wiki/Merkle_tree\n[own-vdom-1]: https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060\n[own-vdom-2]: https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76\n[hyperstream]: https://github.com/substack/hyperstream\n","funding_links":[],"categories":["JavaScript","DOM Elements","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fnanomorph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchoojs%2Fnanomorph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchoojs%2Fnanomorph/lists"}