How to change the evaluation order of side-effects?

[ceving]

I have the following example with a function called field. The purpose of the function is to create of an input field with a validation. The field function takes a state and a validation and should create an input field, which has the following reactions: the input of the user should be validated and if the input is valid it should be copied into the given state.

function digits (n)
{
  var rx = new RegExp((n ?? `^\\d+$`) || `^\\d{${n}}$`)
  return str => (str == null || str == '') ? null : rx.test(str)
}

const { label, input } = van.tags;

function field (state, validation)
{
  let text = van.state('');
  van.derive(() => { console.log(`text: ${text.val}`); });

  let valid = van.derive(() => validation(text.val));
  van.derive(() => { console.log(`valid: ${valid.val}`); });
  van.derive(() => { if (valid.val) state.val = text.val; });

  return input({type: 'text', value: text,
		oninput: e => { text.val = e.target.value; }});
}

let serno = van.state();
van.derive(() => { console.log (`serno: ${serno.val}`); });

van.add(document.body,
	field(serno, digits(3)));

This is what happens, when I run my example:

When I start the example the console shows:

serno: undefined
text: 
valid: null

serno is undefined, text is '' and valid is null, because digits returns null if called with an empty string.

Now I enter 1 and the console shows:

text: 1
valid: false

serno does not change, because valid changes to false, because the input is invalid.

Now I enter 2 and the console shows:

text: 12

text changes but everything else is unchanged, because the input is still invalid.

Now I enter 3 and the console shows:

text: 123
valid: true
serno: 123

serno gets changed, because the input is valid.

So far so good, but now I enter backspace, which causes the following error:

text: 12
serno: 12
valid: false

serno gets changed to "12" although it is invalid!

The reason may be the fact, that the serno state is not a derived state. But it is not possible to make it a derived state, because it gets passed to the field function. The serno state exists already before the states in the field function are created.

The question is: can the field function do anything to change the evaluation order?

[vrcxz]

I tried experimenting with your problem for a bit and found that you are calling this function twice (it outputs both true and false) when you backspace.

van.derive(() => { if (valid.val) state.val = text.val; }

the reason why it outputs twice is because in your oninput function, you are setting the text value in the oninput while also having the text value in this function:

van.derive(() => { if (valid.val) state.val = text.val; });

So what basically happens is:

• when you input 1 and 2, you won't call this function above yet since valid.val is false and won't evaluate text.val (which would make it be added to text's listeners if it happened).

• when you input 3, the valid.val becomes true and evaluates text.val, thus this function would now be added to text's listener and would now be called when valid.val changes AND text.val changes (and also when state.val changes, but it's not really relevant to the problem here).

• when you erase 3 from the input, this function would be called first by text.val (where validation still isn't done) and then by valid.val (where validation was now done).

So, I guess the solution would be to either just combine the function for oninput and validation or... you could add the text value to a non-state variable first, then add it to that function (so the derived function wouldn't be called when text.val changes). Like this:

function digits (n)
{
  var rx = new RegExp((n ?? `^\\d+$`) || `^\\d{${n}}$`)
  return str => (str == null || str == '') ? null : rx.test(str)
}

const { label, input } = van.tags;

function field (state, validation)
{
  let text = van.state('');
  let text_temp = text.val;
  van.derive(() => { 
   text_temp = text.val
   console.log(`text: ${text.val}`);
  });

  let valid = van.derive(() => validation(text.val));
  van.derive(() => { console.log(`valid: ${valid.val}`); });
  van.derive(() => { 
   if (valid.val) state.val = text_temp; //a non-state variable
  });
  return input({type: 'text', value: text,
		oninput: e => { text.val = e.target.value; }});
}

let serno = van.state();
van.derive(() => { console.log (`serno: ${serno.val}`); });

van.add(document.body,
	field(serno, digits(3)));

[ceving]

Thanks for the hint, that state.val gets written twice! I did not realize this. This is the graph of the states and impacts. I have renamed state from the code to result in the graph. States are ovals, impacts are boxes. All information shown in the graph is known to VanJS.

VanJS knows that text has an direct impact on result by copy and it knows that text has on indirect impact on result via valid by validation and copy. And it knowns, that copy uses valid before text.

I am wondering if it is a bug that copy gets executed twice. One oninput event should have only one impact on result even if there is a fork and join in between.

[ceving]

I think the problem is, that van.derive simplifies too much. In general conditional expressions and procedures are not evaluated in the same way. A procedure is evaluated by always evaluating all arguments and then passing the results to the procedure body. A conditional expression evaluates first just the condition and then either the consequent or the alternative but never both. This is the reason, why an if statement can not be written as a procedure, it is always syntax. But van.derice takes just a black box and therefor it does not know whether the impact is a conditional impact or a procedural impact. And the oversimplification is that van.derive treats all kinds of impacts as a procedural impact.

[Tao-VanJS]

My suggestion is: don't define valid as a separate state. You don't need to. You can simply have:

  van.derive(() => { if (validation(text.val)) state.val = text.val; });

Sometimes, the simplest solution could be the best one :-)

[ceving]

It is just possible, because it is a simplified example. In general my sernos have four individual parts. Each can be invalid on its own. The and the validity of the whole serno is a combination of the validity of each part combined with the result of a REST call. And the validity of the serno is part of the validity of the form, which contains the serno. And the validity of the form is part of the validity of a sequence of forms. I really need the composition.

[Tao-VanJS]

I can think of 2 ways to solve the problem while keeping valid a state.

1. Make the validation result in sync with the text we're validating:

let valid = van.derive(() => ({
  result: validation(text.val)
  for: text.val
}))
van.derive(() => {
  if (valid.val.result) state.val = valid.val.for
})

2. Update state asynchronously:

let valid = van.derive(() => validation(text.val))

van.derive(() => {
  if (valid.val) setTimeout(() => state.val = text.val)
})

Let me know if one of the solutions can work for you.

[ceving]

It seems to me that option 1 is way more elegant but actually equivalent to the solution vrcxz has proposed. It removes the parallel dependency by duplicating the contents of text.val into a temporary variable in order to use this variable to set the upstream state. I think this is a viable workaround to avoid the problem with the parallel dependencies. I think this strategy of dependency-removal is worth to be put into the documentation.

I don't like option 2. It looks like a dirty hack.

[Tao-VanJS]

Technically speaking, Option 1 doesn't duplicate the content of text.val as it only stores a reference to the string. There is some overhead due to boxing, though.

We have to realize that the derivation:

  van.derive(() => { if (valid.val) state.val = text.val; });

is not a simple, stateless derivation. The val of state actually depends on its previous value. This is the primary reason why some extra complexity (and potentially some overhead) has to be introduced, one way or another. It will be way more complicated to introduce rules of derivation order to VanJS at the framework level.