{"id":13514992,"url":"https://github.com/phlex-ruby/morphlex","last_synced_at":"2025-04-30T22:32:06.554Z","repository":{"id":223945969,"uuid":"761983482","full_name":"phlex-ruby/morphlex","owner":"phlex-ruby","description":"Optimal DOM morphing, written in TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-18T13:19:23.000Z","size":369,"stargazers_count":69,"open_issues_count":4,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-28T07:23:45.153Z","etag":null,"topics":["dom","morphdom","typescript"],"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/phlex-ruby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["joeldrapper"]}},"created_at":"2024-02-22T21:21:39.000Z","updated_at":"2025-04-09T16:08:32.000Z","dependencies_parsed_at":"2024-02-22T22:30:34.066Z","dependency_job_id":"be4a9d36-6d22-445c-9871-c654c1775163","html_url":"https://github.com/phlex-ruby/morphlex","commit_stats":null,"previous_names":["joeldrapper/morphlite","joeldrapper/morphlex"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phlex-ruby%2Fmorphlex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phlex-ruby%2Fmorphlex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phlex-ruby%2Fmorphlex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phlex-ruby%2Fmorphlex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phlex-ruby","download_url":"https://codeload.github.com/phlex-ruby/morphlex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251791740,"owners_count":21644448,"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":["dom","morphdom","typescript"],"created_at":"2024-08-01T05:01:05.060Z","updated_at":"2025-04-30T22:32:06.282Z","avatar_url":"https://github.com/phlex-ruby.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/phlex-ruby/morphlex/assets/246692/128ebe6a-bdf3-4b88-8a40-f29df64b3ac8\" alt=\"Morphlex\" width=\"481\"\u003e\n\u003c/p\u003e\n\nMorphlex is a tiny, 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.\n\nMorphlex uses ID Sets — a concept pioneered by [Idiomorph](https://github.com/bigskysoftware/idiomorph) — to match nodes with deeply nested identified elements. It also maps out _sensitive_ elements to avoid moving them around.\n\n## ID Sets\n\nEach element is tagged with the set of IDs it contains, allowing for more optimal matching.\n\nFailing 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 instead.\n\n## Node sensitivity\n\nSimply 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.\n\nThis works in any direction, even if the sensitive element is deeply nested.\n\n## Try it out\n\nThe easiest way to try out Morphlex is to import it directly from UNPKG.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { morph } from \"https://www.unpkg.com/morphlex@0.0.16/dist/morphlex.min.js\";\n\n  morph(currentNode, referenceNode);\n  morphInner(currentNode, referenceNode);\n\u003c/script\u003e\n```\n\nAlternatively, you can install it via npm and import it into your project.\n\n```bash\nnpm install morphlex --save\n```\n\n```javascript\nimport { morph } from \"morphlex\";\n\nmorph(currentNode, referenceNode);\n```\n\nThe `currentNode` will be morphed into the state of the `referenceNode`. The `referenceNode` will not be mutated in this process.\n\n## Contributing\n\nIf you find a bug or have a feature request, please open an issue. If you want to contribute, please open a pull request.\n\n\u003e [!TIP]\n\u003e Morphlex is written in **[TypeScript](https://www.typescriptlang.org)** because 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\n","funding_links":["https://github.com/sponsors/joeldrapper"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphlex-ruby%2Fmorphlex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphlex-ruby%2Fmorphlex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphlex-ruby%2Fmorphlex/lists"}