detecting Alpine.store changes

[Restartz]

I am trying to catch any Alpine.store/object property changes but I can't seem to get it to work successfully.

Using Alpine.effect it seems I need to wrap the object within JSON.stringify to get effect to trigger on every property change, which feels a bit like a hack but the biggest problem here is that I won't have access to the previous value. So I can't really detect which value has been changed:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('user', {

            ...@json($user),

            init() {
                Alpine.effect(() => {
                    console.log(JSON.parse(JSON.stringify(this)))
                })
            }
    })
</script>

Another option is probably using $watch which should provide us with the previous value, which seems to work well when watching a specific property, but when watching the entire store/object both value and oldValue seem to always end up being the same. (I actually only need to know the key, but if I'd have the old object and the new object I could parse out the changes myself)

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('user', @json($user))
    })
</script>
<div x-data  x-init="$watch('$store.user', (value, oldValue) => console.log(value, oldValue))"></div>

Another way to make it work could be by adding onchange, onclick, etc, events to every element. Which won't give me the oldValue either but that's okay since I only need to know which value has been changed and what the new value is, it does seem like rather repetitive when having a ton of elements:

<script>
        Alpine.store('user', {

            ...@json($user),

            update(key, value, oldValue) {
                console.log(key, value, oldValue)
            }
    })
</script>
<div x-data>
    <input type="text" x-model="$store.user.name" @change="update('name', $event.target.value)" />
</div>

Does anyone know a way to make this work best as possible?

[ekwoka]

The reason why the old value would be the "same" is that it is.

It's an object.

The object is the same by reference, not unique on each go.

I think if we knew more about what your true intent is, we could give better advice.

[ekwoka]

Protip: Alpine exposes it's internal debounce function at Alpine.debounce in case you want to be extra efficient (also exposes Alpine.throttle

Also of note here in this implementation, if multiple values change within the debounce period, earlier ones won't be sent to the server.

So you can either make a system that batches the updates, or have each key get its own debounced function.

[Restartz]

I see, that could have introduced a nasty bug.
Changed it to batch the changes and make use of Alpine.debounce.
Once again, thank you! :)

<script>
    document.addEventListener('alpine:init', () => {
        let batchedChanges = {}

        const debouncedSave = Alpine.debounce(() => {
            console.log(batchedChanges)
            batchedChanges = {}
        }, 800)

        const proxyHandler = {
            get(target, key) {
                // proxify nested objects
                if (typeof target[key] === 'object' && target[key] !== null) {
                    return new Proxy(target[key], proxyHandler)
                }
                return Reflect.get(...arguments)
            },
            set (target, key, value) {
                batchedChanges[key] = value
                debouncedSave()
                return Reflect.set(...arguments)
            }
        }

        Alpine.store('user', new Proxy(@json($user), proxyHandler))
    })
</script>

Do you perhaps know of a way to catch the parent key during the proxy set?
For instance if user would look like this:

let user = {
    id: 2,
    name: 'Joe',
    foo: {
       name: 'bar'
    }
}

both user.name en user.foo.name will be caught by the proxy setter, but in both cases the key/prop in the setter would be name (not foo.name which would be more distinguishable).
The target however is the different (the outer object or the nested object) so I guess I could add a custom type property to both, like so:

let user = {
    id: 2,
    name: 'Joe',
    type: 'user',
    foo: {
       name: 'bar',
       type: 'foo',
    }
}

And then try to read those in the proxy setter, but maybe there's a cleaner way without adding extra properties.

[ekwoka]

The best way would be for your proxy handler to be a constructor function that would accept a key to make a new set of proxies. So it would cascade downward through the object where setting a key in the deepest part is aware of all the keys that came before and could use them to pass to the batch save.

[Restartz]

Thanks again! :)
Changed it to the following, seems to work quite nicely (and on the server side I can just use Laravel's Arr:undot function to turn the changes object into nested objects):

const batching = {
    changes: {},

    add(path, value) {
        if (path.charAt(0) === '.') {
            path = path.substring(1)
        }
        
        this.changes[path] = value
    },

    flush() {
        this.changes = {}
    }
}

const proxyHandler = (parentKey = '') => {
    return {
        get(target, prop)
        {
            // proxify nested objects
            if (typeof target[prop] === 'object' && target[prop] !== null) {
                return new Proxy(target[prop], proxyHandler(`${parentKey}.${prop}`))
            }
            return Reflect.get(...arguments)
        },
        set(target, prop, value)
        {
            batching.add(`${parentKey}.${prop}`, value)
            debouncedSave()
            return Reflect.set(...arguments)
        }
    }
}

[ekwoka]

Welcome to the wonderful world of proxies!