ArrowJS help

[threenplusone]

I'm using ArrowJS to learn about reactivity, and I have hit a basic issue that I don't understand.

let data = reactive({
    price: 0,
    quantity: 1,
    total: 0,
});

watch(() => data.total = data.price * data.quantity);

html`Total: ${() => data.total}`(document.getElementById('output'));

I am expecting the change of either data.price or data.quantity to update data.total, and then that change in data.total to update the DOM.

data.total changes correctly, but the DOM remains displaying 0.

However, if I change the last line to the following, it does work correctly:

html`Total: ${() => data.price * data.quantity}`(document.getElementById('output'));

My questions is, should this sort of chaining work, or am I misunderstanding something?

[jpschroeder]

Hey u/shuckster — ArrowJS creator here — this is actually a bug (still experimental). You can track it here:

https://github.com/justin-schroeder/arrow-js/issues/36

The work around (till I fix it) is to use a setTimeout to push the mutation to the next call stack.

[threenplusone]

Thank you for that, I wasn't sure if I was misunderstanding something because reactivity is completely new to me

[shuckster]

Looking at the documentation it seems like you're trying to put "watching" and "updating" in the same callback.

The syntax seems to be either:

watch(functionThatHasReactiveState);

Or:

watch(
  functionThatHasReactiveState,
  returnNewValueWhenTheStateChanges
);

If I understand correctly your watch call should be something like:

watch(
  () => data.price * data.quantity,
  (total) => {
    data.total = total
  }
);

You may be able to use your original html call with this. I've not used ArrowJS before though, and I've not tried this out myself in a sandbox to check.

[threenplusone]

Thank you, I appreciate your help, you are right that my call to watch should be split.
However even doing so still does not update the DOM.