Using a Proxy for $store item

[lobstar-devman]

I have an object (defined by another library) with numerical properties that I'd like to directly manipulate through Alpine components.

When a property on the object changes I'd like to be able to call a function in a different JS library.

I thought the best way of doing this would be to Proxy the object and call the function in the handler.set() method, for example:

let external_library_object = { value_a: 3, value_b: 707 };

Alpine.store('proxied_object', new Proxy(external_library_object , {

    set(obj, prop, val) {

        obj[prop] = val;

        //Hey something has changed!
        call_the_3rd_party_js_library_function();

        return true;
    },
}));

<input type="number" x-data="{value: $store.proxied_object.value_a}" x-model="value">
<input type="number" x-data="{value: $store.proxied_object.value_b}" x-model="value">

However this generates the following errors:
Uncaught TypeError: Cannot read properties of undefined (reading 'value_a')
at [Alpine] {value: $store.proxied_object.value_a} (eval at (
..etc

Uncaught ReferenceError: value is not defined
at [Alpine] value (eval at (alpinejs:5:665), :3:32)

It looks like a proxied store object is not supported, what's the best way of doing this?

[SimoTod]

Your proxy doesn't have a get trap so you can't read the internal properties right? That being said, I'm not completely sure if the reactivity would work with nested proxies (Alpine already use them).

[lobstar-devman]

The objects handles the get itself as the handler doesn't trap it. I've tried adding a get handler to ensure it was being called - and it was, but I still got the same errors.

If I can't proxy my external object, what's the best way of using Alpine in this situation?

[SimoTod]

Is it just a plain object with numeric properties? Can you pass it into Alpine as it is and use watch to detect when it changes and trigger the other function?

[lobstar-devman]

It is a plain object.

So I tried using watch as you suggested:

let external_library_object = { value_a: 3, value_b: 707 };

Alpine.store('external_object', external_library_object);
Alpine.store('external_function', (v,o) => {
    do_something(v,o);
});

<input type="number" x-data="{value: 0}" x-model="value" x-init="$watch('value', (v, o) => $store.external_function(v) )">

Which did work, but as soon as I try to set the initial value of the control using x-init:

<input type="number" x-data="{value: 0}" x-model="value" x-init="value = $store.external_library_object.value_b; $watch('value', (v, o) => $store.external_function(v, o) )">

I get the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'value_b') at [Alpine] $el.value = $store.external_library_object.value_b; $watch(

Does $store not work in x-init? How then do I initialise the value in the control?

[SimoTod]

I think you nerd $store.external_object.value_b.
$store.external_library_object doesn't exist

[lobstar-devman]

I think some of the issues I am having are due to the third party library being loaded as a module. When Alpine inits, the external_library_object simply doesn't exist at this point and that's why I am seeing Uncaught TypeError: Cannot read properties of undefined (reading 'value_b') errors

[ekwoka]

The issue is you're not properly using Reflect to pass the same this context.

You don't need to do this though

the store is automatically reactive, so just create an Alpine.effect that calls the function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set

[lobstar-devman]

Using x-effect together with my realization that the interaction with modules was responsible for some of my issues solved the problem.