Skip to content

eilerth/livewire-isolate-testing

Repository files navigation

Laravel Livewire "isolate" Testing

This project is to demonstrate a few use cases, particularly ones that are not working as expected.

TIP: If using valet and experiencing awkward behavior where it almost seems as though php is running a cached version of the livewire codebase, run valet restart... that cleared up a very confusing issue for me that I burned way too much time on.

Setup

  • Clone eilerth/livewire (git clone https://github.com/eilerth/livewire.git) to the same directory as this project (if you haven't already)
  • run composer install

How the "isolate" parameter is intended to work

Livewire v3 now bundles requests, forcing a synchronous behavior where a livewire component will block other components until it finishes it's request.

This isolate parameter attempts to make things asynchronous again, where a component with isolate applied will neither impact nor be impacted by other components.

Applying the "isolate" parameter

Add isolate as a parameter when referencing a livewire component in the blade file.

Not isolated:

<livewire:wire-click />

Isolated:

<livewire:wire-click isolate />

Examples

Example A (works as expected)

http://livewire-isolate-testing.test/example-a

This example demonstrates behavior without the isolate parameter.

  • Before the "slow" toggle component is loaded, the "fast" one is unresponsive.
  • After checking the "slow" toggle checkbox, the "fast" one becomes unresponsive again while it waits for the "slow" one to complete.

Example B (works as expected)

http://livewire-isolate-testing.test/example-b

This example demonstrates behavior with the isolate parameter. Notice that the "fast" toggle is responsive regardless of whether or not the "slow" toggle is processing a request.

Example C (wire:init problem)

http://livewire-isolate-testing.test/example-c

In this example, the same component is referenced with and without the isolate parameter. The component it is calling uses wire:init. When the isolate parameter is present, the wire:init event does not seem to get reached on the server side.

Example D (wire:click problem)

http://livewire-isolate-testing.test/example-d

In this example, the same component is referenced with and without the isolate parameter. Clicking on "A!", "B!", or "C!" should update the "click something..." text, triggered by wire:click. When the isolate parameter is present, the wire:init event does not seem to get reached on the server side.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published