{"id":13515182,"url":"https://github.com/marcoroth/turbo-morph","last_synced_at":"2025-05-07T15:46:22.102Z","repository":{"id":46556982,"uuid":"515377636","full_name":"marcoroth/turbo-morph","owner":"marcoroth","description":"Morph action for Turbo Streams","archived":false,"fork":false,"pushed_at":"2023-02-25T23:26:57.000Z","size":165,"stargazers_count":98,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-27T07:08:05.251Z","etag":null,"topics":["hotwire","hotwired","morphdom","turbo","turbo-stream","turbo-streams"],"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/marcoroth.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-19T00:04:16.000Z","updated_at":"2024-11-07T18:35:48.000Z","dependencies_parsed_at":"2024-06-21T15:45:09.140Z","dependency_job_id":"59ecc291-c216-4a2c-b073-e947da015e7e","html_url":"https://github.com/marcoroth/turbo-morph","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.03125,"last_synced_commit":"7ecb2b23b739d46b483686f40666cdd6b45ef505"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fturbo-morph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fturbo-morph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fturbo-morph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fturbo-morph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcoroth","download_url":"https://codeload.github.com/marcoroth/turbo-morph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232654806,"owners_count":18556468,"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":["hotwire","hotwired","morphdom","turbo","turbo-stream","turbo-streams"],"created_at":"2024-08-01T05:01:07.227Z","updated_at":"2025-01-05T23:31:09.670Z","avatar_url":"https://github.com/marcoroth.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","**Awesome Hotwire** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Turbo"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"assets/hero-dark.png\"\u003e\n    \u003cimg src=\"assets/hero.png\" height=\"340px\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eTurbo Morph\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/turbo-morph\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/turbo-morph?logo=npm\u0026color=38C160\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/turbo-morph\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/turbo-morph?logo=npm\u0026color=38C160\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/turbo-morph\"\u003e\n    \u003cimg alt=\"NPM Bundle Size\" src=\"https://img.shields.io/bundlephobia/minzip/turbo-morph?label=bundle%20size\u0026logo=npm\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Getting Started\n\n`turbo-morph` is a [morphdom](https://github.com/patrick-steele-idem/morphdom) integration for [Turbo Streams](https://turbo.hotwired.dev/reference/streams). It provides a new Turbo Stream `morph` action.\n\n**Note:** Requires Turbo **7.2+**\n\n\n```bash\nyarn add turbo-morph\n```\n\n```diff\n// application.js\nimport * as Turbo from '@hotwired/turbo'\n\n+import TurboMorph from 'turbo-morph'\n+TurboMorph.initialize(Turbo.StreamActions)\n```\n\n## Example\n\n```html\n\u003cturbo-stream action=\"morph\" targets=\"body\"\u003e\n  \u003ctemplate\u003e\n    \u003cbody data-updated=\"true\"\u003e\n      \u003ch1\u003eThis is the new body\u003c/h1\u003e\n    \u003c/body\u003e\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n\n### `children-only` option\n\n[`morphdom` exposes a `childrenOnly` option](https://github.com/patrick-steele-idem/morphdom#morphdomfromnode-tonode-options--node) that can be passed to a morph call.\n\nWith Turbo Streams you can apply this option by adding the `[children-only]` attribute to your `\u003cturbo-stream\u003e` element.\n\n```html\n\u003cturbo-stream action=\"morph\" targets=\"body\" children-only\u003e\n  ...\n\u003c/turbo-stream\u003e\n```\n\n## Usage with Rails\n\nThe [`turbo_power-rails`](https://github.com/marcoroth/turbo_power-rails) gem ships a Rails helper for using `turbo_stream.morph` in your application. Check out the Getting Started section over there.\n\n\n## Acknowledgments\n\ntubro-morph is [MIT-licensed](LICENSE) open-source software from [Marco Roth](https://github.com/marcoroth).\n\nTurbo is [MIT-licensed](https://github.com/hotwired/turbo/blob/main/MIT-LICENSE) open-source software from [Basecamp](https://basecamp.com/).\n\nmorphdom is [MIT-licensed](https://github.com/patrick-steele-idem/morphdom/blob/master/LICENSE) open-source software from [Patrick Steele-Idem](https://github.com/patrick-steele-idem)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcoroth%2Fturbo-morph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcoroth%2Fturbo-morph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcoroth%2Fturbo-morph/lists"}