{"id":17275116,"url":"https://github.com/daun/swup-morph-plugin","last_synced_at":"2025-08-22T00:31:46.690Z","repository":{"id":40575836,"uuid":"267112663","full_name":"daun/swup-morph-plugin","owner":"daun","description":"A swup plugin for morphing DOM nodes in place","archived":false,"fork":false,"pushed_at":"2024-11-27T09:35:31.000Z","size":1302,"stargazers_count":19,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-10T12:37:41.611Z","etag":null,"topics":["dom","morph","plugin","swup"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/daun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2020-05-26T17:49:32.000Z","updated_at":"2024-10-22T22:16:58.000Z","dependencies_parsed_at":"2024-02-15T01:26:05.641Z","dependency_job_id":"cb991e1e-5bf3-473f-ab52-d12e9369957c","html_url":"https://github.com/daun/swup-morph-plugin","commit_stats":null,"previous_names":["philippdaun/swup-morph-plugin"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fswup-morph-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fswup-morph-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fswup-morph-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fswup-morph-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daun","download_url":"https://codeload.github.com/daun/swup-morph-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230542288,"owners_count":18242332,"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","morph","plugin","swup"],"created_at":"2024-10-15T08:55:28.361Z","updated_at":"2024-12-20T06:06:55.710Z","avatar_url":"https://github.com/daun.png","language":"TypeScript","readme":"# Swup Morph Plugin\n\nA [swup](https://swup.js.org) plugin for morphing dom nodes into the new page.\n\nAllows morphing containers into the new page without replacing or animating them. The prime use\ncases are headers and menus on multi-language sites: you might not want to swap these elements out\nwith a transition on each page visit, however you'd still want to update any URLs, labels or\nclassnames when the user switches between languages.\n\nBehind the scenes, it uses\n[morphdom](https://github.com/patrick-steele-idem/morphdom) to update the\nexisting DOM nodes to match the same DOM nodes on the new page being loaded.\nThis will leave any event handlers in place, as opposed to setting `innerHTML`\non the target.\n\n## Installation\n\nInstall the plugin from npm and import it into your bundle.\n\n```bash\nnpm install swup-morph-plugin\n```\n\n```js\nimport SwupMorphPlugin from 'swup-morph-plugin';\n```\n\nOr include the minified production file from a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/swup-morph-plugin@1\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nTo run this plugin, include an instance in the swup options.\n\n```javascript\nconst swup = new Swup({\n  plugins: [new SwupMorphPlugin()]\n});\n```\n\n## Morphed containers\n\nThe plugin provides two ways of choosing the containers to be morphed:\n\n### Container option\n\nPass in a list of selectors into the plugin options to let it know about morphable containers. Use\nthis method if you have a limited and predictable number of containers to morph.\n\n```javascript\nnew SwupMorphPlugin({\n  containers: ['#nav']\n})\n```\n\n```html\n\u003cnav id=\"nav\"\u003e\n  \u003c!-- Morphed by this plugin --\u003e\n\u003c/nav\u003e\n\u003cmain id=\"swup\"\u003e\n  \u003c!-- Replaced normally by swup --\u003e\n\u003c/main\u003e\n```\n\n### Data attribute\n\nAdd a `data-swup-morph` attribute with a **unique** identifier on containers to be morphed. The\nplugin will find all containers with this attribute and match the outgoing and incoming versions\nof each container by the value of the attribute. Use this method if you have lots of dynamically\ncreated morphable containers.\n\n```html\n\u003cnav data-swup-morph=\"nav\"\u003e\n  \u003c!-- Morphed by this plugin --\u003e\n\u003c/nav\u003e\n\u003cmain id=\"swup\"\u003e\n  \u003c!-- Replaced normally by swup --\u003e\n\u003c/main\u003e\n```\n\n## Options\n\n### containers\n\nArray of specific DOM selectors that will be morphed into the new page.\n\n```javascript\n{\n  containers: ['#nav']\n}\n```\n\n### updateCallbacks\n\nCallbacks to run before elements are updated. This can be used to persist or\ndiscard certain attributes. If the callback returns `false`, the element will\nnot be updated.\n\nSee the [morphdom docs](https://github.com/patrick-steele-idem/morphdom#api) on\nthe `onBeforeElUpdated` option for details.\n\n```javascript\n{\n  containers: ['#widget'],\n  updateCallbacks: [\n    (fromEl, toEl) =\u003e {\n      // Persist ARIA attributes on buttons and inputs\n      if (fromEl.hasAttribute('aria-pressed')) {\n        toEl.setAttribute('aria-pressed', fromEl.getAttribute('aria-pressed'))\n      }\n    }\n  ]\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaun%2Fswup-morph-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaun%2Fswup-morph-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaun%2Fswup-morph-plugin/lists"}