Using Alpine Store in conjunction with Livewire Entangle

[delta1186]

Setup:
Alpine 3.2.1 installed via npm
Livewire 2.5.1

I am using a Laravel presence broadcast channel in order to send data back and forth to the page in this example. This is not causing the issue I am seeing, but just wanted to put that out there if someone wasn't familiar with some of the code below. I am take code I am working on a mocked up a simple hello word type example so demo the issue I am seeing. Hopefully you can follow my setup.

app.js

require('./bootstrap');
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.store('hello', '')
Alpine.start()

livewire component class

<?php

namespace App\Http\Livewire\Components;

use Livewire\Component;

class WorldTest extends Component
{
    public $world = 'world created';

    protected $listeners = [
        'echo-presence:world,here' => 'updateWorld',
    ];

      public function updateWorld($users)
    {
        $this->world = 'world updated';
    }

    public function render()
    {
        return view('livewire.components.world-test');
    }
}

livewire component view - world-test.blade.php
The following setup works. The x-data is set to @entangle('world') which equals "world created". Then after the page renders, the presence channel connects and the HERE event is fired which in this case triggers the updateWorld method where I simply just update $this->world = "world updated". Then, in this example, when x-init runs the console will display "world created" and after the presence channel postback the $this->world is updated and the $watch code fires since x-data hello has been updated and the console shows "world updated"

<div>
     <div 
        x-data="{ hello: @entangle('world') }" 
        x-init="
            console.log(hello);
            $watch('hello', value => { console.log(value) })
       "
     >
     </div>
</div>

livewire component view - world-test.blade.php
The following setup does not works. In this setup I am not changing anything on the backend with Livewire. This only difference is I am going to use the Alpine.store hello var which was setup in app.js. My console message should be the same as my x-data example, but they are not.

The $store.hello is set to @entangle('world') which should equal "world created", but instead is equal to a Proxy, thus causing the $watch to no longer see changes. You can see from the screen snip below the Proxy is logged to the console, but nothing is logged after the presence channel HERE postback event is trigger and $this->world is updated which should in turn be updating $store.hello.

<div>
     <div 
        x-data
        x-init="
            $store.hello = @entangle('world');
            console.log($store.hello);
            $watch('$store.hello', value => { console.log(value) })
       "
     >
     </div>
</div>

So either I am doing something wrong, which is certainly possible, or there is a bug in Alpine when setting a Alpine.store var equal to a @entangle var.

If you made is this far, then thanks for reading!

Note: @calebporzio I tested this on v3.0.6 and v3.1.1 of Alpine and got same results. My issue might be what discussion #1621 is seeing too.

[delta1186]

Okay I created an example on phpsandbox and then create a repo for it.

Repo: https://github.com/delta1186/alpine-issue
Sandbox url to test: https://qol90.ciroue.com/
Sandbox url to see code, but code is same as repo: https://phpsandbox.io/n/alpine-store-livewire-entangle-issue-qol90

Be sure to open your browser's console. I just wanted to go ahead and remove the broadcast channel stuff from the discussion. As you will see when you click the button in livewire component it updates the $this->world property and the x-data value updated and logged to console but the $store value is not.

I think this has something to do with the factor that x-data implements a callback and so it works with the proxy returned by entangle.

alpine/packages/alpinejs/src/datas.js

Lines 4 to 6 in 58145b3

	export function data(name, callback) {
	datas[name] = callback
	}

Where $store uses different method of assigning the value.

alpine/packages/alpinejs/src/store.js

Lines 6 to 18 in 58145b3

	export function store(name, value) {
	if (! isReactive) { stores = reactive(stores); isReactive = true; }
	if (value === undefined) {
	return stores[name]
	}
	stores[name] = value
	if (typeof value === 'object' && value !== null && value.hasOwnProperty('init') && typeof value.init === 'function') {
	stores[name].init()
	}
	}

My guess is since the entangle is an Object / Proxy, however that works, it gets evaluated in line 16. But really that is just a guess. @calebporzio hopefully all of this information is helpful.

[ryangjchandler]

@delta1186 Just to check, did you publish the latest Livewire assets when you updated? php artisan livewire:publish --assets?

[delta1186]

I don't publish the assets. The sandbox I created was brand new and it produced the same results. Check it out. :)

[ryangjchandler]

Sure. Just wanted to check that it wasn't something you missed as a lot of people do when they publish the assets.

[joshhanley]

@delta1186 @entangle isn't supported in anything other than x-data, so even if you were using a local property, this wouldn't work

<div x-data="{ show: false }" x-init="show = @entangle('show')">

So it doesn't surprise me that you can't currently use @entangle with Alpine store.

I would suggest that this is actually a Livewire issue, not Alpine one, as the @entangle code is in LW's code base. I believe there was a feature request at some point to add support for using @entangle in x-init but I don't think it has been addressed yet. So this would be a similar request.

Hope this helps!

[joshhanley]

For reference, this is the discussion on x-init with entangle livewire/livewire#3051

[ryangjchandler]

Ah, I completely misread the original issue description.

Thinking about it, I wonder if @entangle could possibly work with $store via interceptors or effects. I'll need to dig into it a bit more this weekend but it's got potential.

[joshhanley]

@ryangjchandler yeah I can't see any reason why it wouldn't work. All entangle is under the hood is a hook that sets up Alpine and LW watchers and then returns.

It seems the V3 version of it uses an interceptors and effects already, so it would just be a matter of making sure it gets configured properly (aka so you don't receive the proxy in response when you get the property from the store).

This is the V3 entangle function
https://github.com/livewire/livewire/blob/2432b39a019c686c3c9d5f96a653be5f17ae2d05/js/component/SupportAlpine.js#L163-L171

[delta1186]

@ryangjchandler thanks! Also @joshhanley thanks for the link to the Livewire discussion. I know one thing for sure, the solution is well above my pay grade. ;-)

[joshhanley]

@delta1186 no worries! 🙂

[delta1186]

I was able to come up with a solution for my use case. I still think being able to set the $store.someVar in the x-init would be handy. But now understanding the current constraints here was my approach. I am going to just cut and past snippets from my code, so it won't follow the above example. Hopefully you can follow along.

Use case:
I have a livewire component that listens to a laravel echo presence channel that displays all of the users currently online. Here I need to store an array of online user ids to be used by a completely separate livewire component. That livewire component is a livewire data table with searching, sorting, and pagination. And more specifically the table is a directory of users. So in this table we are displaying the user's avatar and if they are online, then we are displaying a green dot on the avatar. This is probably a pretty familiar example for most of us.

Here is a bit of background context. Before I just made a avatar livewire component and hooked up my listeners to the same echo presence channel mentioned above. Now the issue with this implementation, was that if X rows were displayed, then livewire would first off make X different postbacks after the HERE event was fired on the presence channel. This obviously wasn't going to work, as it would cause the browser to become un-responsive until the requests had all completed. You can imagine what would happen when the JOINING and LEAVING events started firing.

Interesting side note here. We had this implemented using Vue. Same setup, but for whatever reason I never saw the X number of requests. I am guessing Vue evaluates the requests before sending and if they are all the same, just sends a single request.

Back to the solution. Now hopefully you can see why I wanted to use the new $store functionality. So in my livewire data table of users I have a blade component <x-avatar ... /> which contains the following:

<span
    x-data="{ show: false, showStatus: {{ ($status ?? true) ? 'true' : 'false' }} }"
    x-init="
        show = $store.onlineUserIds.includes({{ $employee->id }});
        $watch('$store.onlineUserIds', value => show = value.includes({{ $employee->id }}));
        "
    >
    <template x-if="! showStatus">
        <img class="h-{{ $size }} w-{{ $size }} rounded-full" src="{{ $employee->profile_photo_url }}" alt="">
    </template>
    <template x-if="showStatus">
        <span class="inline-block relative">
            <img class="h-{{ $size }} w-{{ $size }} rounded-full" src="{{ $employee->profile_photo_url }}" alt="">
            <span
                x-show="show"
                style="display: none;"
                class="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full ring-2 ring-white bg-green-300 "
            ></span>
        </span>
    </template>
</span>

Guess I am starting at the end and working backwards. So since this html is dynamic because the user who is online might not be displayed in the initial paginated list of users, you have to set show = $store.onlineUserIds.includes({{ $employee->id }}); in x-init. Otherwise, say I search for the user or page to the second page where they are listed, the $watch('$store.onlineUserIds', value => show = value.includes({{ $employee->id }})); will not fire because this was just a Livewire postback and our $store.onlineUserIds has not changed. Of course, assuming all online users remain the same. :) So by calling show = $store.onlineUserIds.includes({{ $employee->id }});' show will be set based on the existing array of online user ids. And on the initial page load the $store.onlineUserIds` is just set to an empty array so show it will be evaluated to false.

Now for the fun part. How was I able to set my $store.onlineUserIds equal to @entangle('employeeIds') array being updated in the HERE, JOINING, and LEAVING events of my echo presence channel? This is how:

<div class="px-4 py-3"
    x-data="{ onlineUserIds: @entangle('employeeIds')}"
    x-init="$watch('onlineUserIds', value => $dispatch('update-online', value))"
    @update-online.window="$store.onlineUserIds = $event.detail"
>
    <p class="text-xs leading-normal font-medium text-gray-600 truncate tracking-wide">
      ONLINE USERS
    </p>
</div>

I set a x-data var equal to the @entangle('employeeIds') value which @joshhanley already stated currently works. Then in x-init I setup a watcher for the x-data var which we know works, and when the watcher detects a change I use $dispatch to dispatch an event of update-online which I am also listening for on the same Alpine component. There is where I set the $store var @update-online.window="$store.onlineUserIds = $event.detail"

That's it and now everything works perfectly! I hope that this post helps someone down the road figure out how to find a creative solution when something does not work as you might have originally expected. This type of problem solving is one of the reasons I do enjoy programming.