{"id":20012321,"url":"https://github.com/archtechx/wire-replace","last_synced_at":"2026-03-16T17:36:15.152Z","repository":{"id":57126540,"uuid":"325639168","full_name":"archtechx/wire-replace","owner":"archtechx","description":"wire:replace directive for Livewire","archived":false,"fork":false,"pushed_at":"2021-02-27T15:43:21.000Z","size":14,"stargazers_count":32,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-08T18:58:11.589Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/archtechx.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},"funding":{"github":"stancl"}},"created_at":"2020-12-30T20:11:21.000Z","updated_at":"2023-11-10T17:10:52.000Z","dependencies_parsed_at":"2022-08-31T12:11:50.700Z","dependency_job_id":null,"html_url":"https://github.com/archtechx/wire-replace","commit_stats":null,"previous_names":["leanadmin/wire-replace"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/archtechx/wire-replace","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archtechx%2Fwire-replace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archtechx%2Fwire-replace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archtechx%2Fwire-replace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archtechx%2Fwire-replace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/archtechx","download_url":"https://codeload.github.com/archtechx/wire-replace/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archtechx%2Fwire-replace/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270385487,"owners_count":24574564,"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","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T07:29:44.715Z","updated_at":"2026-03-16T17:36:15.099Z","avatar_url":"https://github.com/archtechx.png","language":"JavaScript","funding_links":["https://github.com/sponsors/stancl"],"categories":[],"sub_categories":[],"readme":"# wire-replace\n\nThis package adds a new directive to Livewire: `wire:replace`. The directive is useful for solving DOM diffing issues.\n\nFor example, if you have the following template:\n\n```html\n\u003cdiv\u003e\n    Showing\n    \u003cspan class=\"font-medium\"\u003e{{ $paginator-\u003efirstItem() }}\u003c/span\u003e\n    to\n    \u003cspan class=\"font-medium\"\u003e{{ $paginator-\u003elastItem() }}\u003c/span\u003e\n    of\n    \u003cspan class=\"font-medium\"\u003e{{ $paginator-\u003etotal() }}\u003c/span\u003e\n    results\n\u003c/div\u003e\n```\n\nThe numbers will eventually merge into a single value if you update the component's data a few times.\n\nTo solve this, you'd wrap all of those free-floating strings in `\u003cspan\u003e`s. And sure, it would work here.\n\nBut:\n- it's ugly\n- it won't work in situations where you display template that you don't have control over (translated templates, rich text added by users, ...)\n\nA better solution is to have a directive that tells Livewire to **always** replace the element. Sort of like an opposite to `wire:ignore`.\n\n## Usage\n\nThis package adds two extremely simple directives: `wire:replace` and `wire:replace.self`. Simply use them on elements that you want fully replaced.\n\nTo tell Livewire that the element's children should always be replaced:\n```html\n\u003cdiv wire:replace\u003e\n    Showing\n    ...\n\u003c/div\u003e\n```\n\nTo tell Livewire that **the element itself plus its children** should always be replaced:\n```html\n\u003cdiv wire:replace.self\u003e\n    Showing\n    ...\n\u003c/div\u003e\n```\n\n## Installation\n\n### npm dependency\nInstall the package:\n```\nnpm install --dev @leanadmin/wire-replace\n```\n\nRegister the directive in your `app.js` file:\n\n```js\nimport wire_replace from '@leanadmin/wire-replace';\n\nwindow.Livewire.hook(...wire_replace);\n```\n\n### CDN\n\nSimply include the JS file in your layout (**after Livewire's scripts**) and the directive will automatically register itself.\n```html\n@livewireScripts\n\n\u003cscript src=\"https://unpkg.com/@leanadmin/wire-replace@0.1.3/dist/wire_replace.js\"\u003e\u003c/script\u003e\n```\n\n## Performance\n\nLivewire doesn't expose its internal morphdom class which would allow us to just tell morphdom to stop diffing the current tree if when it encounters an element with a `wire:replace` attribute.\n\nSo instead, we hook into Livewire's `element.updating` event and we replace the target element fully with the new element, before Livewire/morphdom can attempt more intelligent diffs.\n\nThis is likely less performant than hooking into morphdom's events, but in most cases it won't matter. The main use case of this package is small bits of templates where Livewire can't figure things out itself and `wire:key` doesn't help. And for that, it works completely smoothly.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchtechx%2Fwire-replace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farchtechx%2Fwire-replace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchtechx%2Fwire-replace/lists"}