├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── publish.yaml
├── .gitignore
├── LICENSE
├── README.md
├── cdn
    └── wire_replace.js
├── index.js
├── package.json
└── webpack.mix.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: stancl
4 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yaml:
--------------------------------------------------------------------------------
 1 | name: Publish Node.js package
 2 | on:
 3 |   release:
 4 |     types: [created]
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |     - uses: actions/checkout@v2
10 |     - uses: actions/setup-node@v1
11 |       with:
12 |         node-version: '12.x'
13 |         registry-url: 'https://registry.npmjs.org'
14 |     - run: npm install
15 |     - run: npm publish --access=public
16 |       env:
17 |         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Samuel Štancl
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wire-replace
 2 | 
 3 | This package adds a new directive to Livewire: `wire:replace`. The directive is useful for solving DOM diffing issues.
 4 | 
 5 | For example, if you have the following template:
 6 | 
 7 | ```html
 8 | <div>
 9 |     Showing
10 |     <span class="font-medium">{{ $paginator->firstItem() }}</span>
11 |     to
12 |     <span class="font-medium">{{ $paginator->lastItem() }}</span>
13 |     of
14 |     <span class="font-medium">{{ $paginator->total() }}</span>
15 |     results
16 | </div>
17 | ```
18 | 
19 | The numbers will eventually merge into a single value if you update the component's data a few times.
20 | 
21 | To solve this, you'd wrap all of those free-floating strings in `<span>`s. And sure, it would work here.
22 | 
23 | But:
24 | - it's ugly
25 | - it won't work in situations where you display template that you don't have control over (translated templates, rich text added by users, ...)
26 | 
27 | A better solution is to have a directive that tells Livewire to **always** replace the element. Sort of like an opposite to `wire:ignore`.
28 | 
29 | ## Usage
30 | 
31 | This package adds two extremely simple directives: `wire:replace` and `wire:replace.self`. Simply use them on elements that you want fully replaced.
32 | 
33 | To tell Livewire that the element's children should always be replaced:
34 | ```html
35 | <div wire:replace>
36 |     Showing
37 |     ...
38 | </div>
39 | ```
40 | 
41 | To tell Livewire that **the element itself plus its children** should always be replaced:
42 | ```html
43 | <div wire:replace.self>
44 |     Showing
45 |     ...
46 | </div>
47 | ```
48 | 
49 | ## Installation
50 | 
51 | ### npm dependency
52 | Install the package:
53 | ```
54 | npm install --dev @leanadmin/wire-replace
55 | ```
56 | 
57 | Register the directive in your `app.js` file:
58 | 
59 | ```js
60 | import wire_replace from '@leanadmin/wire-replace';
61 | 
62 | window.Livewire.hook(...wire_replace);
63 | ```
64 | 
65 | ### CDN
66 | 
67 | Simply include the JS file in your layout (**after Livewire's scripts**) and the directive will automatically register itself.
68 | ```html
69 | @livewireScripts
70 | 
71 | <script src="https://unpkg.com/@leanadmin/wire-replace@0.1.3/dist/wire_replace.js"></script>
72 | ```
73 | 
74 | ## Performance
75 | 
76 | Livewire 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.
77 | 
78 | So 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.
79 | 
80 | This 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.
81 | 


--------------------------------------------------------------------------------
/cdn/wire_replace.js:
--------------------------------------------------------------------------------
1 | import wire_replace from '../index';
2 | 
3 | window.Livewire.hook(...wire_replace);
4 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Add wire:replace functionality to Livewire.
 3 |  *
 4 |  * When wire:replace is applied to an element, the element's children will *always* be fully replaced rather than intelligently DOM-diffed.
 5 |  * When wire:replace.self is applied to an element, the element itself (plus all of its children) will be
 6 |  */
 7 | 
 8 | export default ['element.updating', (from,  to) => {
 9 |     let attributes = Object.values(from.attributes);
10 | 
11 |     if (attributes.filter(attribute => attribute.name === 'wire:replace').length) {
12 |         from.innerHTML = to.innerHTML;
13 |     }
14 | 
15 |     if (attributes.filter(attribute => attribute.name === 'wire:replace.self').length) {
16 |         from.outerHTML = to.outerHTML;
17 |     }
18 | }];
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@leanadmin/wire-replace",
 3 |     "version": "0.1.3",
 4 |     "description": "wire:replace directive for Livewire",
 5 |     "main": "index.js",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "git+https://github.com/LeanAdmin/wire-replace.git"
 9 |     },
10 |     "files": [
11 |         "index.js",
12 |         "dist/wire_replace.js"
13 |     ],
14 |     "scripts": {
15 |         "build": "npx mix --production",
16 |         "prepublishOnly": "npm run-script build"
17 |     },
18 |     "keywords": [
19 |         "livewire"
20 |     ],
21 |     "author": "Samuel Štancl <samuel.stancl@gmail.com>",
22 |     "license": "MIT",
23 |     "bugs": {
24 |         "url": "https://github.com/LeanAdmin/wire-replace/issues"
25 |     },
26 |     "homepage": "https://github.com/LeanAdmin/wire-replace#readme",
27 |     "devDependencies": {
28 |         "laravel-mix": "^6.0.6",
29 |         "postcss": "^8.2.2"
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
1 | let mix = require('laravel-mix');
2 | 
3 | mix.setPublicPath('dist')
4 |     .js('cdn/wire_replace.js', 'dist');
5 | 


--------------------------------------------------------------------------------