Need help using vanX.reactive with functions

[ericraider33]

I'm trying to use vanX.reactive to listen to changes on an object / class that has properties of strings and functions. Changes to strings work just fine. However, if I try to access a property whose value is a function, I get the error:

handler.js:30 Uncaught TypeError: modelB.handler is not a function

I've boiled my code down to the simplest example that I could think of. I've created two samples: one that uses van state and the other that use vanX.reactive. Primarily, I want to understand why the two examples work differently, and if there is a way to get the second example to work like the first.

import van from "/scripts/lib/van.js"
import * as vanX from "/scripts/lib/van-x.js"
const { div, button } = van.tags;

// Explicitly use van.state

let newHandler = () => alert('New handler');

let modelA = {
name: van.state('my name'),
handler: van.state(() => alert('From my handler'))
};

let a = div(
button({onclick: () => { modelA.name.val += 'x';}}, 'Append'),
button({onclick: () => modelA.handler.val() }, 'Trigger handler'),
button({onclick: () => { modelA.handler.val = newHandler; }}, 'Swap handlers'),
div(() => modelA.name.val),
);

// Same example using vanX.reactive

let modelB = vanX.reactive({
name: 'my name',
handler: () => alert('From my handler')
});

let b = div(
button({onclick: () => { modelB.name += 'x';}}, 'Append'),
button({onclick: () => modelB.handler() }, 'Trigger handler'),
button({onclick: () => { modelB.handler = newHandler; }}, 'Swap handlers'),
div(() => modelB.name),
);

van.add(document.body, div(a,b));

[Tao-VanJS]

Thanks @ericraider33 for reaching out!

That seems to be a bug introduced in VanX 0.5.0. I will try to get it fixed asap. Meanwhile, you can make your example work by downgrading to VanX 0.4.0. I will let you know when the issue is fixed.

[Tao-VanJS]

Hi @ericraider33,

The bug was fixed in VanX 0.5.1. Thanks again for reporting!

[ericraider33]

yes, I verified that 0.5.1 resolved this issue. Thanks for the lightening fast response and resolution.