Best way to force a state update?

[FlynnD273]

Hi,
I've been playing around with VanJS a bit. One thing I noticed (which is nice in most cases) is that states only trigger dependencies when the value actually changes, not just whenever a value is assigned. Is there a good way to override this behaviour? The super sketchy way to do it is run

myState.val = newVal + 1;
setTimeout(() => myState.val = newVal, 0);

But that feels... bad to say the least 😅
Right now, I'm just manually calling my update function but that feels antithetical to the way VanJS is designed. Here's my component, it's a fraction display. The numerator is an editable field and the denominator is an uneditable number. I want to update the width of the input so it's always the right length for whatever content it's got, including what the user's typing. To that effect, I update width on both keypress and state update. However, if the state is equal to 1 and a user types in "00001", the state update fails to trigger, hence the extra function call when the user presses enter. Is there a better way around this?

import van, { State } from "vanjs-core";

const Fraction = (numer: State<number>, denom: State<number>) => {
	const { input, div } = van.tags;
	const numerator = input(
		{
			class: "card fraction-num",
			type: "text",
			onkeyup: evt => {
				if (evt.key === "Enter") {
					numer.val = parseInt(evt.target?.value ?? "") - 1;
					updateSize();
					evt.preventDefault();
				}
			},
			value: () => numer.val + 1,
			oninput: evt => evt.target.size = evt.target.value.length,
		});
	var updateSize = () => { numerator.size = (numer.val + 1).toString().length; numerator.value = numer.val + 1 + ""; };
	van.derive(updateSize);
	return div({ class: "fraction" },
		numerator,
		div("/"),
		div(() => denom.val),
	);
};
export default Fraction;

Here's the repo with my full code, the component in question is the Fraction component: https://github.com/FlynnD273/CrochetCounter
Live site: https://flynnd273.github.io/CrochetCounter/

[FlynnD273]

I just happened to read issue #465, it looks like the following code would actually work without flickering:

// ...
if (evt.key === "Enter") {
	const val = parseInt(evt.target?.value ?? "") - 1;
	numer.val = val + 1;
	Promise.resolve().then(() => numer.val = val);
	evt.preventDefault();
}

This seems... less bad than setTimeout, especially since it doesn't wait a full frame to update. I don't really want to run two updates though, so if there's a better way to do this I'm all ears.

[Tao-VanJS]

I feel that for your use case, a more natural abstraction is to have a state to represent the string value of the input box, and another state for the parsed number from the string state (you can use van.derive to achieve that). The width of the input box should depend on the string state, not the parsed number state.

[FlynnD273]

Oh I see. And then I would just use the string state in lockstep with the Input's value, exactly like the example in the docs? I think that makes sense. Thanks!